/* DREAMWAVE FM — Minimalist-only production UI
This file intentionally wins the cascade over legacy desktop/mobile shells. */
:root {
--dw-green: #1ed760;
--dw-pink: #ff71ce;
--dw-cyan: #9be7ff;
--dw-glass: rgba(10, 10, 16, 0.92);
--dw-glass-strong: rgba(8, 8, 12, 0.95);
--dw-text: #ffffff;
--dw-muted: rgba(255,255,255,.62);
}
html, body {
width: 100%;
min-height: 100%;
margin: 0 !important;
overflow: hidden !important;
background: #050506 !important;
font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
body { color: var(--dw-text); }
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(circle at 50% 18%, rgba(255,113,206,.06), transparent 58%),
linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.14) 30%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.22));
}
/* Phone: comprehensive UX audit fixes (max-width: 520px) */
@media (max-width: 520px) {
/* FIX 1: Bottom nav — solid bg, blur, z-index, border-top */
body.dream-app-open .dream-bottom-tabs {
z-index: 1000 !important;
background: rgba(8,10,18,0.96) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border-top: 1px solid rgba(255,255,255,0.06) !important;
left: 0 !important;
right: 0 !important;
position: fixed !important;
bottom: calc(env(safe-area-inset-bottom)) !important;
overflow: hidden !important;
}
/* FIX 2: Route content clears fixed bottom chrome without leaving a giant dock gap. */
body.dream-app-open {
--dream-mobile-tabs-clearance: calc(72px + env(safe-area-inset-bottom));
--dream-mobile-mini-clearance: 34px;
}
/* DW-WAVE71-PHONE-MOOD-PILLS: make mood chips narrower so 6 pills fit in ~384px
without clipping the "Party" pill at the right edge. Reduce padding and font.
Party pill right edge was 384.47px on 384px viewport — clips ~0.47px. */
body.dream-app-open .dream-mood-filter-row {
gap: 4px !important;
padding: 12px 14px 8px !important;
overflow-x: auto !important;
scrollbar-width: none !important;
}
body.dream-app-open .dream-mood-chip {
padding: 4px 6px !important;
padding-inline: 6px !important;
font-size: 10.5px !important;
min-width: 0 !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
/* DW-WAVE71-PHONE-TRENDING-CARDS: constrain trending card widths for ~384px phone
viewport so rightmost card is fully visible instead of clipped.
Note: must match or exceed the !important strength of DW-WAVE63 (line 25184)
which otherwise overrides this with 190px → clips on 384px viewport. */
@media (max-width: 520px) {
body.dream-app-open[data-dream-route="discover"] .dream-trending-scroll .dream-collection-row,
body.dream-app-open[data-dream-route="discover"] .dream-new-drops-scroll .dream-collection-row {
flex: 0 0 min(160px, calc((100vw - 40px) / 2)) !important;
flex-basis: min(160px, calc((100vw - 40px) / 2)) !important;
width: min(160px, calc((100vw - 40px) / 2)) !important;
min-width: min(160px, calc((100vw - 40px) / 2)) !important;
max-width: min(160px, calc((100vw - 40px) / 2)) !important;
padding: 8px 10px !important;
box-sizing: border-box !important;
}
}
/* Cookie banner clearance */
/* DW-WAVE66-COOKIE-BANNER-MOBILE-CLEARANCE: dock fresh-session consent below
content instead of floating 180px up over route cards/chips. Keep it below
bottom tabs/mini-player chrome so the app navigation remains tappable. */
body.dream-app-open #cookieConsentBanner {
z-index: 998 !important;
bottom: calc(155px + env(safe-area-inset-bottom)) !important; /* above mini-player (52px) + own height (~103px) */
}
body.dream-app-open.dream-has-mini-player {
--dream-mobile-mini-clearance: 56px;
}
body.dream-app-open .dream-app-main,
body.dream-app-open #dreamAppMain {
box-sizing: border-box !important;
margin-bottom: 0 !important;
}
body.dream-app-open.dream-has-mini-player .dream-app-main,
body.dream-app-open.dream-has-mini-player #dreamAppMain {
flex: 0 1 auto !important;
height: calc(100dvh - max(18px, env(safe-area-inset-top))) !important;
max-height: calc(100dvh - max(18px, env(safe-area-inset-top))) !important;
}
body.mode-minimal.dream-app-open #minimal-ui .dream-app-content,
body.dream-app-open[data-dream-route="discover"] #minimal-ui .dream-app-content,
body.dream-app-open[data-dream-route="library"] #minimal-ui .dream-app-content,
body.dream-app-open[data-dream-route="search"] #minimal-ui .dream-app-content,
body.dream-app-open[data-dream-route="account"] #minimal-ui .dream-app-content,
body.dream-app-open #minimal-ui.dream-app-open .dream-app-content {
padding: 12px 14px calc(var(--dream-mobile-tabs-clearance) + var(--dream-mobile-mini-clearance)) !important;
overflow-y: visible !important;
}
body.dream-app-open .dream-app-content {
padding-bottom: calc(var(--dream-mobile-tabs-clearance) + var(--dream-mobile-mini-clearance)) !important;
overflow-y: visible !important;
}
/* DW-VIS-SETTINGS-APP-INSTALL FIX: APP INSTALL card bottom cut off on Settings route.
Root cause: previous CSS fix required body.dream-has-mini-player which the live app
never sets on Settings route (body.getAttribute data-dream-route=settings but
body.classList does NOT contain dream-has-mini-player).
Fix: remove dream-has-mini-player requirement for the settings route padding.
Both account and settings need bottom breathing room for stacked chrome. */
body.dream-app-open.dream-has-mini-player[data-dream-route="account"] .dream-app-main #minimal-ui .dream-app-content,
body.dream-app-open.dream-has-mini-player[data-dream-route="account"] #minimal-ui .dream-app-content,
body.dream-app-open[data-dream-route="settings"] .dream-app-main #minimal-ui .dream-app-content,
body.dream-app-open[data-dream-route="settings"] #minimal-ui .dream-app-content {
padding-bottom: max(148px, calc(52px + 72px + env(safe-area-inset-bottom) + 24px)) !important;
}
/* DW-042: Further reduce creator section top margin to lift cards above mini-player.
v330: Further reduced margin-top from 6px → 2px to lift cards higher after hero compaction. */
.dream-section.dream-discover-creators,
.dream-section.dream-discover-social-secondary {
margin-top: 2px !important;
}
/* PRIORITY 3: Content grids — 4-col to 2-col on phone */
.dream-shelf-grid,
.dream-collection-grid,
.dream-creator-grid,
.dream-playlist-grid,
.library-grid,
[class*="shelf-grid"],
[class*="collection-grid"] {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.dream-shelf-grid > *,
.dream-collection-grid > *,
.dream-creator-grid > *,
.dream-playlist-grid > *,
.library-grid > *,
[class*="shelf-grid"] > *,
[class*="collection-grid"] > * {
min-width: 0 !important;
}
/* Square thumbnails + text overflow on phone */
.dream-shelf-grid .dream-cover-thumb,
.dream-collection-grid .dream-cover-thumb,
.library-grid .dream-cover-thumb,
[class*="shelf-grid"] .dream-cover-thumb,
[class*="collection-grid"] .dream-cover-thumb {
aspect-ratio: 1 !important;
object-fit: cover !important;
border-radius: 8px !important;
}
.dream-shelf-grid .dream-cover-thumb img,
.dream-collection-grid .dream-cover-thumb img,
.library-grid .dream-cover-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.grid-item-label,
.collection-item-name,
.playlist-name,
.shelf-item-name {
text-overflow: ellipsis !important;
white-space: nowrap !important;
overflow: hidden !important;
max-width: 100% !important;
}
.dream-hero,
.dream-profile-card,
.dream-panel,
.dream-app-panel,
.dream-app-sheet,
.dream-card,
.dream-tier-card,
.dream-metric,
.dream-section {
background: rgba(10,10,18,.68) !important;
}
/* Secondary text minimum 0.7 opacity */
.dream-subtitle,
.dream-caption,
.dream-secondary,
.track-secondary-meta,
.grid-item-sub,
.collection-item-sub {
color: rgba(255,255,255,.7) !important;
}
/* Genre/mood tags: bolder + slightly larger */
.dream-tag,
.mood-chip,
.genre-tag,
.dream-chip,
[class*="tag"] {
font-weight: 600 !important;
font-size: 10.5px !important;
color: rgba(255,255,255,.88) !important;
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.12) !important;
border-radius: 24px !important;
padding: 3px 9px !important;
}
/* PRIORITY 5: Header safe-area padding */
#minimal-ui::before,
.dream-header,
.app-header,
.dream-app-header {
padding-top: max(14px, env(safe-area-inset-top)) !important;
}
/* PRIORITY 6: Search filter chip alignment — unified pill shape */
.dream-search-pill-row:not(.dream-search-pill-row--scroll),
.dream-filter-row,
.filter-chip-container {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
justify-content: flex-start !important;
}
.dream-search-pill-row [data-search-suggest],
.filter-chip-container .chip,
.filter-chip-container button,
.dream-chip {
border-radius: 24px !important;
flex-shrink: 0 !important;
}
/* Remove stair-step alignment */
.dream-search-pill-row--start {
justify-content: flex-start !important;
}
/* Override: pill rows on phone scroll horizontally, start-aligned */
@media (max-width: 520px) {
.dream-search-pill-row--start,
.dream-search-pill-row--moods {
justify-content: flex-start !important;
width: 100% !important;
flex-shrink: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
box-sizing: border-box !important;
}
}
/* Search idle content: prevent bottom chrome clipping while staying compact. */
.dream-search-idle {
padding-bottom: calc(var(--dream-mobile-tabs-clearance) + var(--dream-mobile-mini-clearance) + 12px) !important;
}
/* NEW-FIX: phone search idle bottom clearance — the grid extends past the
fixed-height .dream-app-main, so give the idle container enough bottom
padding to clear the bottom chrome when scrolled to bottom. */
@media (max-width: 520px) {
body.dream-app-open[data-dream-route="search"] .dream-search-idle {
padding-bottom: max(200px, calc(var(--dream-mobile-tabs-clearance) + var(--dream-mobile-mini-clearance) + 80px)) !important;
}
}
/* Discover creator rail: compact cards so the first card clears the mini-player on phone. */
.dream-creator-card {
flex-basis: 172px !important;
padding: 8px !important;
gap: 6px !important;
}
.dream-creator-card-avatar {
width: 44px !important;
height: 44px !important;
font-size: 17px !important;
}
.dream-creator-card-info strong {
font-size: 13px !important;
}
.dream-creator-card-info em {
font-size: 11px !important;
}
.dream-creator-card-info span {
font-size: 10px !important;
}
/* Discover creator rail: phone uses a compact teaser row so the first card clears the mini-player. */
.dream-discover-creator-grid {
gap: 8px !important;
}
.dream-discover-creator-card {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 8px !important;
padding: 10px 12px !important;
}
.dream-discover-creator-main {
gap: 10px !important;
align-items: center !important;
}
.dream-discover-creator-avatar {
width: 44px !important;
height: 44px !important;
border-radius: 14px !important;
}
.dream-discover-creator-copy,
.dream-discover-creator-topline {
gap: 3px !important;
}
.dream-discover-creator-topline strong {
font: 800 13px/1.05 'DM Sans', system-ui, sans-serif !important;
}
.dream-discover-creator-topline em,
.dream-discover-creator-summary,
.dream-discover-creator-proof,
.dream-discover-creator-proofline {
font: 500 10px/1.18 'Inter', system-ui, sans-serif !important;
}
.dream-discover-creator-summary,
.dream-discover-creator-proofline,
.dream-discover-creator-meta {
display: none !important;
}
.dream-discover-creator-actions {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: center !important;
gap: 0 !important;
margin-top: 0 !important;
min-width: 88px !important;
}
.dream-discover-creator-actions .dream-discover-creator-cta:not(.dream-view-creator-action) {
display: none !important;
}
.dream-discover-creator-cta {
min-height: 44px !important;
padding: 0 9px !important;
font: 700 10px/1 'DM Sans', system-ui, sans-serif !important;
}
/* PRIORITY 7: Touch targets + kill 300ms tap delay */
.dream-tab-btn,
button,
.track-row-play,
.dream-btn,
.more-btn,
.chip,
.dream-chip,
.filter-chip,
.action-btn,
.mini-btn {
min-width: 44px !important;
min-height: 44px !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
user-select: none !important;
-webkit-user-select: none !important;
}
/* Tab label overflow guard — prevents track names bleeding into nav labels */
.dream-tab-label {
display: block !important;
}
.dream-tab-btn {
overflow: visible !important;
max-width: none !important;
flex-shrink: 1 !important;
}
/* FIX 3: Account sub-nav — force single row on phone, flex nowrap */
.dream-app-tabs {
display: flex !important;
flex-wrap: nowrap !important;
gap: 8px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.dream-app-tabs button {
flex: 1 !important;
min-width: 0 !important;
padding: 8px 4px !important;
font-size: 11px !important;
white-space: nowrap !important;
}
.dream-tab-btn {
overflow: hidden !important;
max-width: 80px !important;
}
/* Account stats boxes: centered flex */
.dream-metrics,
.account-stats,
.stats-row {
justify-content: center !important;
gap: 10px !important;
}
.dream-metric,
.stat-box {
flex: 1 !important;
min-width: 0 !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
/* Search header: compact on phone */
.dream-search-header,
.search-header,
.dream-search-hero {
padding: 10px 14px 8px !important;
}
.dream-search-hero h2,
.search-header h2 {
font-size: 15px !important;
line-height: 1.2 !important;
margin-bottom: 4px !important;
}
.dream-search-hero .description,
.search-header .description {
font-size: 11px !important;
line-height: 1.3 !important;
}
/* Shuffle/Repeat icons: visible on Discover player */
#minimalShuffleBtn,
#minimalRepeatBtn {
display: inline-flex !important;
opacity: 0.8 !important;
color: rgba(255,255,255,.78) !important;
}
/* FIX 4: Creator Tools links must be visible — not invisible dark-on-black */
.dream-creator-tools a,
.dream-creator-tools button,
.dream-account-quick-grid button,
.creator-tools-link,
[class*="creator-tool"],
[data-creator-tool],
.dream-account-creator-cta a,
.studio-link,
.upload-link,
.public-profile-link,
.creator-action-link {
color: #ffffff !important;
background-color: #0a0c14 !important;
border: 1px solid rgba(255,255,255,0.14) !important;
}
.dream-creator-tools a:hover,
.dream-creator-tools button:hover {
color: rgba(255,255,255,0.98) !important;
background: rgba(20,24,40,0.90) !important;
}
/* FIX 6: MORE/overflow buttons — ensure 44px touch targets */
[data-more],
.more-btn,
.overflow-btn,
.row-more-btn {
min-width: 44px !important;
min-height: 44px !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
}
/* FIX 7: Card/panel/hero contrast — solid backgrounds on phone */
.card,
.panel,
.hero,
.track-row,
.collection-row,
.creator-row,
.shelf-card,
.discover-card {
background: rgba(10,10,18,0.88) !important;
}
/* FIX 7b: Genre tags / status chips — legible on dark backgrounds (WCAG AA target: ≥4.5:1) */
.genre-tag,
.mood-tag,
.status-chip,
[class*="tag"],
.dream-chip,
.filter-chip {
font-weight: 600 !important;
font-size: 10px !important;
color: rgba(255,255,255,0.92) !important;
background: rgba(255,255,255,0.06) !important;
}
/* FIX 7c: body overlay — keep the cinematic layer visible on phone instead of flattening it into wallpaper */
body::before {
background:
radial-gradient(circle at 50% 14%, rgba(255,113,206,.06), transparent 52%),
linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.24) 32%, rgba(0,0,0,.30) 58%, rgba(0,0,0,.36)) !important;
}
/* FIX: Footer — horizontal padding + social icon gap */
.dream-footer,
.dream-app-footer,
footer {
padding-left: 16px !important;
padding-right: 16px !important;
}
.dream-footer-social,
.social-links,
[class*="social-icon"],
[class*="footer-social"] {
gap: 14px !important;
}
.dream-footer-social a,
.social-links a,
[class*="social-icon"] a {
min-width: 44px !important;
min-height: 44px !important;
}
}
#app {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100dvh !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
}
#bgVideo {
display: block !important;
position: fixed !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
opacity: 1 !important;
filter: saturate(1.22) contrast(1.08) brightness(1.08) !important;
transform: scale(1.06) !important;
z-index: 0 !important;
pointer-events: none !important;
max-width: 100vw !important;
}
#full-ui,
#mobile-topbar,
#mobile-tab-bar,
#sidebar,
#content-header,
#bgSelector,
#player-bar,
.up-next-strip,
#minimalVolumeControl {
display: none !important;
}
body.mode-minimal #minimal-ui,
#minimal-ui {
display: flex !important;
}
#minimal-ui {
position: fixed !important;
inset: 0 !important;
z-index: 2 !important;
width: 100vw !important;
height: 100dvh !important;
box-sizing: border-box !important;
padding: max(22px, env(safe-area-inset-top)) 18px 72px !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
overflow: hidden !important;
}
/* Browsing mode: player at top, content fills rest */
body.dream-app-open #minimal-ui {
justify-content: flex-start !important;
gap: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: none !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
max-width: 100vw !important;
}
body.dream-app-open #minimal-ui::-webkit-scrollbar {
display: none !important;
}
body.dream-app-open #minimal-ui .vinyl-player {
flex-shrink: 0 !important;
}
body.dream-app-open #minimal-ui .dream-app-content {
flex: 1 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
min-height: 0 !important;
padding: 12px 0 320px !important;
}
#minimal-ui::before {
content: 'DREAMWAVE';
position: fixed;
top: max(18px, env(safe-area-inset-top));
left: 50%;
transform: translateX(-50%);
z-index: 4;
color: rgba(255,255,255,.78);
font-size: 12px;
font-weight: 800;
letter-spacing: .34em;
text-shadow: 0 0 22px rgba(255,113,206,.42);
}
/* Mood-matched background gradient — driven by JS via --dream-mood-from / --dream-mood-to CSS vars */
body.dream-app-open #minimal-ui {
background: transparent !important;
transition: background 2.5s ease !important;
}
.vinyl-player {
width: min(420px, 91vw) !important;
max-height: calc(100dvh - 96px) !important;
box-sizing: border-box !important;
padding: 28px 24px 22px !important;
border-radius: 28px !important;
background: linear-gradient(180deg, rgba(14,14,20,.92), rgba(6,6,12,.96)) !important;
border: 1px solid rgba(255,255,255,.14) !important;
box-shadow: 0 28px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06) !important;
backdrop-filter: blur(24px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 20px !important;
}
/* Phone flip-card hardening: Chrome Android can keep the hidden front face in hit-testing after rotateY. */
.minimal-player-card {
position: relative !important;
width: 100% !important;
overflow: hidden !important;
isolation: isolate !important;
transform: translateZ(0) !important;
}
.minimal-player-card-stage {
position: relative !important;
min-height: 280px !important;
overflow: hidden !important;
transform: none !important;
transform-style: flat !important;
-webkit-transform-style: flat !important;
transition: opacity .22s ease !important;
}
.minimal-player-face {
position: absolute !important;
inset: 0 !important;
backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
overflow: hidden !important;
pointer-events: none !important;
transform: none !important;
opacity: 0 !important;
visibility: hidden !important;
z-index: 1 !important;
}
.minimal-player-face-front {
pointer-events: auto !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
z-index: 2 !important;
}
.minimal-player-face-back {
transform: none !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
scrollbar-width: none !important;
pointer-events: none !important;
z-index: 1 !important;
}
.minimal-player-face-back::-webkit-scrollbar,
.minimal-back-content::-webkit-scrollbar { display: none !important; }
.minimal-player-card.is-flipped .minimal-player-card-stage {
transform: none !important;
}
.minimal-player-card.is-flipped .minimal-player-face-front {
pointer-events: none !important;
opacity: 0 !important;
visibility: hidden !important;
z-index: 1 !important;
}
.minimal-player-card.is-flipped .minimal-player-face-back {
pointer-events: auto !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
z-index: 2 !important;
}
.minimal-back-content {
position: relative !important;
z-index: 3 !important;
max-height: 100% !important;
overflow-y: auto !important;
scrollbar-width: none !important;
padding: 8px 4px 14px !important;
}
.minimal-back-artist-card {
padding-right: 56px !important;
}
.minimal-back-artist-link {
display: none !important;
}
.minimal-card-flip {
min-width: 44px !important;
min-height: 44px !important;
width: 48px !important;
height: 48px !important;
z-index: 5 !important;
}
.minimal-card-flip-back {
position: absolute !important;
top: 10px !important;
right: 10px !important;
left: auto !important;
float: none !important;
margin: 0 !important;
}
.vinyl-container { width: min(240px, 60vw) !important; height: min(240px, 60vw) !important; }
.vinyl-bg {
width: 100% !important;
height: 100% !important;
border-radius: 28px !important;
overflow: hidden !important;
background: rgba(0,0,0,.24) !important;
box-shadow: 0 18px 44px rgba(0,0,0,.48) !important;
animation: none !important;
}
.vinyl-bg::before,
.vinyl-bg::after,
.vinyl-visualizer { display: none !important; }
.vinyl-album-art {
width: 100% !important;
height: 100% !important;
border-radius: 28px !important;
object-fit: cover !important;
box-shadow: none !important;
}
.minimal-track-info {
max-width: 100% !important;
text-align: center !important;
}
.minimal-track-name {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: clamp(24px, 7vw, 34px) !important;
line-height: 1.02 !important;
font-weight: 800 !important;
letter-spacing: -.04em !important;
margin: 0 0 8px !important;
color: #fff !important;
text-wrap: balance;
}
.minimal-track-artist {
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
color: var(--dw-muted) !important;
letter-spacing: 0 !important;
}
.minimal-mood {
display: inline-flex !important;
margin-top: 12px !important;
padding: 5px 11px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.1) !important;
color: rgba(255,255,255,.78) !important;
font: 700 10px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
}
#minimalLikeBtn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 34px !important;
height: 34px !important;
margin-top: 12px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.72) !important;
}
.minimal-progress-container { width: 100% !important; max-width: 330px !important; }
.minimal-progress {
height: 4px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.28) !important;
}
.minimal-progress-fill {
border-radius: 999px !important;
background: var(--dw-green) !important;
box-shadow: 0 0 16px rgba(30,215,96,.42) !important;
}
.minimal-time {
color: rgba(255,255,255,.76) !important;
font: 600 11px/1 'DM Sans', system-ui, sans-serif !important;
}
.minimal-controls {
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
flex-wrap: nowrap !important;
}
#minimalShuffleBtn,
#minimalRepeatBtn { display: none !important; }
#minimalPrevBtn { order: 1; }
#minimalPlayBtn { order: 2; }
#minimalSkipBtn { order: 3; }
#minimalQueueBtn { order: 4; }
.minimal-btn {
width: 46px !important;
height: 46px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
border-radius: 999px !important;
background: rgba(255,255,255,.14) !important;
border: 1px solid rgba(255,255,255,.16) !important;
color: rgba(255,255,255,.88) !important;
font-size: 18px !important;
box-shadow: none !important;
}
.minimal-btn.play {
width: 64px !important;
height: 64px !important;
background: var(--neon-pink, #ff71ce) !important;
color: #fff !important;
font-size: 24px !important;
box-shadow: 0 8px 32px rgba(255,113,206,.38), 0 0 0 1px rgba(255,113,206,.12) !important;
}
#minimalQueueBtn {
position: fixed !important;
right: 18px !important;
bottom: max(18px, env(safe-area-inset-bottom)) !important;
width: 36px !important;
height: 36px !important;
z-index: 5 !important;
background: rgba(255,255,255,.05) !important;
border: 1px solid rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.35) !important;
font-size: 12px !important;
backdrop-filter: blur(14px) !important;
}
#minimalModeToggle {
display: inline-flex !important;
position: fixed !important;
right: 18px !important;
top: max(18px, env(safe-area-inset-top)) !important;
width: 44px !important;
height: 34px !important;
z-index: 6 !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: rgba(0,0,0,.34) !important;
border: 1px solid rgba(255,255,255,.1) !important;
color: var(--dw-green) !important;
font: 900 11px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .12em !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
}
.playlist-drawer-toggle {
appearance: none !important;
-webkit-appearance: none !important;
position: fixed !important;
left: 50% !important;
bottom: max(18px, env(safe-area-inset-bottom)) !important;
transform: translateX(-50%) !important;
z-index: 5 !important;
margin: 0 !important;
padding: 10px 16px !important;
border-radius: 999px !important;
background: rgba(0,0,0,.34) !important;
border: 1px solid rgba(255,255,255,.1) !important;
color: rgba(255,255,255,.72) !important;
font: 800 11px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .16em !important;
backdrop-filter: blur(6px) !important;
}
.playlist-drawer {
z-index: 1100 !important;
left: 10px !important;
right: 10px !important;
bottom: 10px !important;
max-height: min(64vh, 620px) !important;
padding: 18px !important;
border-radius: 24px 24px 18px 18px !important;
background: rgba(8,8,12,.9) !important;
border: 1px solid rgba(255,255,255,.12) !important;
box-shadow: 0 -24px 70px rgba(0,0,0,.56) !important;
backdrop-filter: blur(26px) !important;
scrollbar-width: none !important;
}
.playlist-drawer::-webkit-scrollbar { display: none !important; }
.playlist-drawer h3 {
color: rgba(255,255,255,.55) !important;
font: 800 11px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .16em !important;
}
.drawer-queue-position {
font: 700 11px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .1em !important;
color: var(--dw-pink, #ff2d78) !important;
text-align: center !important;
padding: 6px 4px 4px !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
margin-bottom: 4px !important;
text-transform: uppercase !important;
}
.playlist-drawer .search-container {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
padding: 0 !important;
}
.playlist-drawer .search-container select,
.playlist-drawer .clear-btn { display: none !important; }
.playlist-drawer input {
border-radius: 999px !important;
background: rgba(255,255,255,.09) !important;
border: 0 !important;
color: #fff !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
}
.drawer-track-row {
width: 100% !important;
appearance: none !important;
-webkit-appearance: none !important;
display: grid !important;
grid-template-columns: 44px minmax(0, 1fr) 28px !important;
align-items: center !important;
gap: 10px !important;
border: 0 !important;
border-bottom: 1px solid rgba(255,255,255,.07) !important;
background: transparent !important;
text-align: left !important;
font: inherit !important;
padding: 11px 2px !important;
}
.drawer-cover-art img { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; }
.drawer-queue-num { font-size: 11px; color: rgba(255,255,255,0.5); text-align: center; line-height: 1; }
.drawer-track-row:active,
.drawer-track-row.active {
background: rgba(255,45,120,.14) !important;
border-left: 3px solid var(--dw-pink, #ff2d78) !important;
padding-left: 7px !important;
}
.drawer-empty {
padding: 20px 4px !important;
color: rgba(255,255,255,.52) !important;
text-align: center !important;
font: 600 13px/1.3 'DM Sans', system-ui, sans-serif !important;
}
.drawer-track-row .info {
min-width: 0 !important;
display: block !important;
overflow: hidden !important;
}
.drawer-track-row .name {
display: block !important;
color: rgba(255,255,255,.86) !important;
font: 700 14px/1.18 'DM Sans', system-ui, sans-serif !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.drawer-track-row .artist {
display: block !important;
color: rgba(255,255,255,.5) !important;
font: 500 12px/1.25 'DM Sans', system-ui, sans-serif !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
margin-top: 2px !important;
}
.drawer-track-row .mood { display: none !important; }
.drawer-track-row .num {
color: rgba(255,255,255,.32) !important;
font: 800 11px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .08em !important;
}
#minimal-ui {
padding-top: max(48px, env(safe-area-inset-top)) !important;
justify-content: center !important;
}
.vinyl-player {
width: min(360px, 91vw) !important;
gap: 16px !important;
padding: 22px 18px 20px !important;
border-radius: 26px !important;
}
.vinyl-container {
width: min(205px, 56vw) !important;
height: min(205px, 56vw) !important;
}
.vinyl-bg,
.vinyl-album-art { border-radius: 24px !important; }
.minimal-track-name { font-size: clamp(22px, 7.2vw, 30px) !important; }
.minimal-track-artist { font-size: 14px !important; }
.minimal-btn { width: 42px !important; height: 42px !important; }
.minimal-btn.play { width: 60px !important; height: 60px !important; }
/* DW-FEAT-037: thicken player progress bar for mobile touch target */
.dream-player-progress-bar {
height: 38px !important;
}
@media (max-width: 390px), (max-height: 760px) {
.vinyl-player { transform: scale(.92); }
.vinyl-container { width: 180px !important; height: 180px !important; }
}
#settingsModal {
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
background: rgba(0,0,0,.55) !important;
padding: 18px !important;
box-sizing: border-box !important;
}
.settings-panel {
width: min(760px, 92vw) !important;
max-height: min(88dvh, 760px) !important;
overflow-y: auto !important;
padding: 22px !important;
border-radius: 26px !important;
background: rgba(8,8,12,.9) !important;
border: 1px solid rgba(255,255,255,.12) !important;
box-shadow: 0 28px 80px rgba(0,0,0,.64) !important;
color: #fff !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
scrollbar-width: none !important;
}
.settings-panel::-webkit-scrollbar { display: none !important; }
.settings-panel h2 {
margin: 0 0 18px !important;
color: rgba(255,255,255,.88) !important;
font: 900 15px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .22em !important;
}
.settings-section {
margin: 0 0 18px !important;
}
.settings-section h3 {
margin: 0 0 10px !important;
color: rgba(255,255,255,.58) !important;
font: 800 11px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
}
.settings-bg-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.settings-bg-grid-compact { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 720px) {
.settings-bg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.settings-bg-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.settings-bg-btn {
appearance: none !important;
-webkit-appearance: none !important;
min-height: 56px !important;
padding: 12px 12px !important;
border-radius: 16px !important;
border: 1px solid rgba(255,255,255,.1) !important;
background: rgba(255,255,255,.07) !important;
color: rgba(255,255,255,.84) !important;
text-align: left !important;
font: 800 13px/1.05 'DM Sans', system-ui, sans-serif !important;
}
.settings-bg-btn span {
display: block !important;
margin-top: 6px !important;
color: rgba(255,255,255,.45) !important;
font: 700 10px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
.settings-bg-btn.active {
background: rgba(30,215,96,.16) !important;
border-color: rgba(30,215,96,.55) !important;
color: #fff !important;
box-shadow: 0 0 0 1px rgba(30,215,96,.08), 0 12px 32px rgba(30,215,96,.12) !important;
}
.settings-bg-btn.current {
outline: 2px solid rgba(255,255,255,.72) !important;
outline-offset: 2px !important;
}
.settings-bg-btn.active::before {
content: '✓' !important;
float: right !important;
color: var(--dw-green) !important;
}
.settings-bg-btn.current span::after {
content: ' · playing' !important;
}
.dream-bg-debug-card {
border: 1px dashed rgba(255,255,255,.18) !important;
}
.dream-bg-debug-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
}
.dream-bg-debug-head h3 {
margin: 4px 0 0 !important;
font: 800 16px/1.1 'DM Sans', system-ui, sans-serif !important;
}
.dream-bg-debug-toggle {
min-width: 104px !important;
}
.dream-bg-debug-body {
margin-top: 14px !important;
display: grid !important;
gap: 12px !important;
}
.dream-bg-debug-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.dream-bg-debug-grid div {
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 12px !important;
padding: 10px 12px !important;
background: rgba(255,255,255,.04) !important;
}
.dream-bg-debug-grid span {
display: block !important;
font: 700 10px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.52) !important;
margin-bottom: 6px !important;
}
.dream-bg-debug-grid strong {
display: block !important;
font: 700 12px/1.35 'DM Sans', system-ui, sans-serif !important;
color: rgba(255,255,255,.92) !important;
word-break: break-word !important;
}
.dream-bg-debug-events {
display: grid !important;
gap: 8px !important;
}
.dream-bg-debug-event,
.dream-bg-debug-empty {
border-radius: 12px !important;
padding: 10px 12px !important;
background: rgba(5,8,18,.58) !important;
border: 1px solid rgba(255,255,255,.08) !important;
}
.dream-bg-debug-event strong {
display: block !important;
margin-bottom: 4px !important;
color: rgba(255,255,255,.94) !important;
font: 800 12px/1.2 'DM Sans', system-ui, sans-serif !important;
}
.dream-bg-debug-event span,
.dream-bg-debug-empty {
color: rgba(255,255,255,.68) !important;
font: 600 11px/1.45 'DM Sans', system-ui, sans-serif !important;
}
@media (max-width: 520px) {
.dream-bg-debug-head {
align-items: flex-start !important;
flex-direction: column !important;
}
.dream-bg-debug-toggle {
width: 100% !important;
}
.dream-bg-debug-grid {
grid-template-columns: 1fr !important;
}
}
.settings-hint {
margin: 10px 0 0 !important;
color: rgba(255,255,255,.45) !important;
font: 600 12px/1.3 'DM Sans', system-ui, sans-serif !important;
}
/* DREAMWAVE main app sheet — Spotify-inspired, mobile-first, still cinematic */
/* Bottom tab bar + inline content (replaces APP button + overlay) */
.dream-app-main {
display: none; /* hidden by default, shown when browsing */
flex: 1 !important;
min-height: 0 !important;
overflow: hidden !important;
}
body.dream-app-open .dream-app-main {
display: flex !important;
flex-direction: column !important;
}
.dream-rail-brand {
display: none !important;
}
.dream-bottom-tabs {
display: flex !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 20;
background: rgba(8,9,14,.8) !important;
backdrop-filter: blur(6px) saturate(1.1) !important;
-webkit-backdrop-filter: blur(6px) saturate(1.1) !important;
border-top: 1px solid rgba(255,255,255,.06) !important;
padding: 6px 16px max(6px, env(safe-area-inset-bottom)) !important;
justify-content: space-around !important;
align-items: center !important;
gap: 0 !important;
min-height: 50px !important;
box-shadow: 0 -2px 16px rgba(0,0,0,.25) !important;
overflow: hidden !important;
}
/* Phone: bottom tabs sit above Android nav with minimum gap */
@media (max-width: 520px) {
body.dream-app-open .dream-bottom-tabs {
bottom: max(56px, env(safe-area-inset-bottom)) !important;
}
}
.dream-tab-btn {
appearance: none !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 3px !important;
background: transparent !important;
border: none !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
padding: 6px 12px !important;
border-radius: 10px !important;
cursor: pointer !important;
transition: all .18s ease !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
min-width: 60px !important;
-webkit-tap-highlight-color: transparent !important;
opacity: .90 !important; /* DW-VIS-NAVCONTRAST: raised from .82 for inactive tab icons on cinematic bg; WCAG 4.5:1 minimum */
}
.dream-tab-btn.active {
color: var(--dw-green) !important;
-webkit-text-fill-color: var(--dw-green) !important;
opacity: 1 !important;
}
.dream-tab-btn:active {
background: rgba(255,255,255,.12) !important;
transform: scale(.94) !important;
}
/* ── Now-playing badge on nav items ─────────────────────────── */
.dream-tab-btn.is-playing {
opacity: 1 !important;
}
/* Rich nav badge: mini art + abbreviated track name on the tab button */
.dream-nav-badge {
display: none !important;
position: absolute !important;
top: 3px !important;
left: calc(100% - 24px) !important;
right: auto !important;
flex-direction: row !important;
align-items: center !important;
gap: 3px !important;
background: rgba(20, 14, 28, 0.88) !important;
border: 1px solid rgba(255, 113, 207, 0.35) !important;
border-radius: 12px !important;
padding: 2px 6px 2px 2px !important;
max-width: 120px !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 8px rgba(255, 113, 206, 0.25) !important;
pointer-events: none !important;
z-index: 2 !important;
white-space: nowrap !important;
}
.dream-nav-badge-art {
width: 18px !important;
height: 18px !important;
border-radius: 4px !important;
object-fit: cover !important;
flex-shrink: 0 !important;
display: block !important;
}
/* Visually hidden but accessible via aria-describedby — prevents badge text from
polluting the button's rendered text while keeping it in the accessibility tree */
.dream-nav-badge-desc {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Legacy: .dream-nav-badge-name was used before DW-VIS-111 fix */
.dream-nav-badge-name {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
}
.dream-tab-btn.is-playing .dream-nav-badge {
display: flex !important;
}
/* Notification unread badge — pill-style count in same badge slot as now-playing.
Shows when Account tab has unread notifications. Hidden when now-playing badge
is active (is-playing class wins), which is intentional prioritization. */
.dream-nav-badge[data-unread] {
display: none;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
min-width: 18px !important;
height: 18px !important;
padding: 0 4px !important;
border-radius: 9px !important;
background: rgba(255, 80, 120, 0.92) !important;
border: 1px solid rgba(255, 200, 215, 0.45) !important;
font-size: 9px !important;
font-weight: 800 !important;
color: #fff !important;
letter-spacing: 0 !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 6px rgba(255, 80, 120, 0.4) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
max-width: 42px !important;
}
/* Show unread badge when present (overrides default display:none on .dream-nav-badge) */
.dream-nav-badge[data-unread]:not([data-unread="0"]):not([data-unread=""]) {
display: flex !important;
}
/* Desktop rail: hide floating badge on navigation buttons — it overlaps and truncates text */
@media (min-width: 1100px) {
.dream-tab-btn.is-playing {
position: relative !important;
}
/* Hide badge on ALL desktop nav buttons — it overlaps the button label.
Exception: notification badges ([data-unread]) must stay visible. */
.dream-tab-btn.is-playing .dream-nav-badge:not([data-unread]) {
display: none !important;
}
/* Rail: replace active green color with pink glow when track is playing */
body.dream-app-open .dream-tab-btn.is-playing {
background: rgba(255,113,207,.10) !important;
border-color: rgba(255,113,207,.22) !important;
color: var(--dw-pink) !important;
-webkit-text-fill-color: var(--dw-pink) !important;
}
body.dream-app-open .dream-tab-btn.is-playing .dream-tab-label {
color: var(--dw-pink) !important;
-webkit-text-fill-color: var(--dw-pink) !important;
}
body.dream-app-open .dream-tab-btn.is-playing .dream-tab-icon {
filter: drop-shadow(0 0 8px rgba(255,113,206,.8)) !important;
}
}
/* Desktop sidebar: now-playing badge on collapsed icon rail */
.sidebar-item.is-playing {
position: relative !important;
}
.sidebar-nav-badge {
position: absolute !important;
bottom: 2px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 20px !important;
height: 20px !important;
border-radius: 4px !important;
overflow: hidden !important;
border: 1.5px solid rgba(255, 113, 207, 0.6) !important;
box-shadow: 0 0 6px rgba(255, 113, 206, 0.5) !important;
z-index: 3 !important;
pointer-events: none !important;
}
.sidebar-nav-badge-art {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.dream-tab-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
filter: drop-shadow(0 0 6px currentColor) !important;
transition: filter .22s ease !important;
}
.dream-tab-icon svg {
display: block !important;
width: 24px !important;
height: 24px !important;
}
.dream-tab-label {
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.dream-tab-btn.active .dream-tab-label {
color: var(--dw-green) !important;
-webkit-text-fill-color: var(--dw-green) !important;
}
@media (min-width: 1100px) {
body.dream-app-open #minimal-ui {
padding: max(22px, env(safe-area-inset-top)) 0 0 !important;
align-items: stretch !important;
}
body.dream-app-open #minimal-ui::before {
opacity: 0 !important;
}
body.dream-app-open .dream-app-main {
margin-left: var(--dream-rail-width) !important;
width: calc(100vw - var(--dream-rail-width)) !important;
}
body.dream-app-open .mini-now-playing {
width: calc(100vw - var(--dream-rail-width)) !important;
margin-left: var(--dream-rail-width) !important;
margin-top: auto !important;
}
.dream-bottom-tabs {
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: auto !important;
width: var(--dream-rail-width) !important;
min-height: 100dvh !important;
padding: 28px 16px 26px !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 10px !important;
background: linear-gradient(180deg, rgba(10,10,16,.9), rgba(8,9,14,.84)) !important;
border-top: 0 !important;
border-right: 1px solid rgba(255,255,255,.05) !important;
border-top-right-radius: 24px !important;
border-bottom-right-radius: 24px !important;
box-shadow: 18px 0 48px rgba(0,0,0,.28), inset -14px 0 22px rgba(255,255,255,.02) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.dream-rail-brand {
display: grid !important;
gap: 4px !important;
padding: 0 8px 12px !important;
margin-bottom: 6px !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.dream-rail-brand strong {
color: rgba(255,255,255,.96) !important;
font: 900 18px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
}
.dream-rail-brand span {
color: rgba(255,255,255,.46) !important;
font: 700 11px/1.2 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
}
.dream-tab-btn {
width: 100% !important;
min-width: 0 !important;
flex-direction: row !important;
justify-content: flex-start !important;
gap: 12px !important;
padding: 12px 14px !important;
border-radius: 16px !important;
}
.dream-tab-label {
font-size: 13px !important;
letter-spacing: .06em !important;
}
/* FIX: content area needs right breathing room so card action buttons aren't clipped at viewport edge */
body.dream-app-open .dream-app-main {
padding-right: 18px !important;
}
/* ── Desktop rail: now-playing strip ─────────────────────────── */
.dream-rail-now-playing {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 14px !important;
margin: 12px 0 0 !important;
background: rgba(255, 255, 255, 0.055) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 16px !important;
cursor: pointer !important;
overflow: hidden !important;
}
.dream-rail-np-art-wrap {
flex-shrink: 0 !important;
width: 44px !important;
height: 44px !important;
border-radius: 10px !important;
overflow: hidden !important;
background: rgba(255, 255, 255, 0.08) !important;
}
.dream-rail-np-art-wrap img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.dream-rail-np-meta {
flex: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
}
.dream-rail-np-title {
font-size: 11.5px !important;
font-weight: 800 !important;
color: rgba(255, 255, 255, 0.94) !important;
white-space: normal !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.28 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
max-height: calc(1.28em * 2) !important;
}
.dream-rail-np-artist {
font-size: 10.5px !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.56) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.3 !important;
margin-top: 3px !important;
}
/* ── Desktop rail: queue + mode chips ──────────────────────── */
.dream-rail-queue-mode {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
padding: 12px 10px 10px !important;
margin-top: 10px !important;
border-radius: 16px !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
position: relative !important;
}
.dream-bottom-tabs .mobile-tab-btn {
margin-top: 8px !important;
align-self: stretch !important;
justify-content: flex-start !important;
min-height: 44px !important;
padding: 10px 12px !important;
border-radius: 14px !important;
border: 1px solid rgba(255,255,255,0.08) !important;
background: rgba(255,255,255,0.05) !important;
color: rgba(255,255,255,0.78) !important;
font: 700 12px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
}
.dream-bottom-tabs .mobile-tab-btn {
margin-top: 8px !important;
align-self: stretch !important;
justify-content: flex-start !important;
}
.dream-rail-mode {
display: flex !important;
gap: 6px !important;
align-items: center !important;
}
.dream-rail-queue {
display: flex !important;
align-items: center !important;
}
.dream-rail-chip {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
padding: 5px 10px !important;
border-radius: 999px !important;
min-height: 44px !important;
min-width: 44px !important;
background: rgba(255, 255, 255, 0.10) !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
color: rgba(255, 255, 255, 0.92) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
cursor: pointer !important;
transition: background 0.15s, color 0.15s, border-color 0.15s !important;
white-space: nowrap !important;
}
.dream-rail-chip:hover {
background: rgba(255, 255, 255, 0.16) !important;
color: #fff !important;
}
.dream-rail-chip.dream-rail-chip--active,
.dream-rail-chip:disabled {
background: rgba(255, 113, 207, 0.20) !important;
border-color: rgba(255, 113, 207, 0.50) !important;
color: #ffb3de !important;
}
/* ── Desktop rail: bottom spacer ──────────────────────────── */
.dream-bottom-tabs {
padding-bottom: 24px !important;
}
}
/* ═══════════════════════════════════════════════════════════════
PHASE 3B: DESKTOP MODE TOGGLE — Immersive vs Compact
Immersive = current behavior (rail 248px, mini-player at bottom)
Compact = rail 80px icon-only, floating PiP mini-player strip
═══════════════════════════════════════════════════════════════ */
/* Default rail width (immersive) */
:root {
--dream-rail-width: 264px;
--dream-rail-compact-width: 80px;
}
/* Desktop mode toggle pill — only visible on desktop (>520px) */
.dream-desktop-mode-toggle {
display: none !important;
}
@media (min-width: 521px) {
.dream-desktop-mode-toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
margin: 10px 6px 6px !important;
padding: 4px !important;
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
border-radius: 999px !important;
}
.dream-mode-btn {
flex: 1 !important;
padding: 5px 10px !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.38) !important;
background: transparent !important;
border: none !important;
border-radius: 999px !important;
cursor: pointer !important;
transition: color .18s ease, background .18s ease !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
}
.dream-mode-btn--active,
.dream-mode-btn:active {
background: rgba(255,113,207,0.18) !important;
color: #ff71ce !important;
}
.dream-mode-btn:hover:not(.dream-mode-btn--active) {
color: rgba(255,255,255,0.72) !important;
}
}
/* ── COMPACT MODE: rail shrinks to icon-only 80px ─────────────── */
@media (min-width: 521px) {
body.dream-desktop-minimal .dream-bottom-tabs {
width: var(--dream-rail-compact-width) !important;
padding: 22px 10px 24px !important;
align-items: center !important;
gap: 6px !important;
}
/* Compact rail: hide text labels, show only icons */
body.dream-desktop-minimal .dream-tab-btn {
justify-content: center !important;
padding: 12px !important;
width: 52px !important;
height: 52px !important;
}
body.dream-desktop-minimal .dream-tab-label {
display: none !important;
}
body.dream-desktop-minimal .dream-tab-icon {
width: 22px !important;
height: 22px !important;
}
body.dream-desktop-minimal .dream-tab-icon svg {
width: 22px !important;
height: 22px !important;
}
body.dream-desktop-minimal .dream-rail-brand {
display: none !important;
}
body.dream-desktop-minimal .dream-rail-now-playing {
display: none !important;
}
/* Compact rail: hide sidebar now-playing card */
body.dream-desktop-minimal #dreamDesktopSidebar {
width: var(--dream-rail-compact-width) !important;
}
body.dream-desktop-minimal #dreamDesktopSidebar .dream-desktop-sidebar-now-playing,
body.dream-desktop-minimal #dreamDesktopSidebar .dream-desktop-sidebar-up-next,
body.dream-desktop-minimal #dreamDesktopSidebar .dream-desktop-sidebar-section,
body.dream-desktop-minimal #dreamDesktopSidebar .dream-desktop-sidebar-label {
display: none !important;
}
/* Compact: content shifts to 80px rail */
body.dream-desktop-minimal .dream-app-main {
margin-left: var(--dream-rail-compact-width) !important;
width: calc(100vw - var(--dream-rail-compact-width)) !important;
}
/* Compact: mini-player is suppressed on browse routes, shown as floating PiP */
body.dream-desktop-minimal.dream-app-open[data-dream-route="discover"] .mini-now-playing,
body.dream-desktop-minimal.dream-app-open[data-dream-route="library"] .mini-now-playing,
body.dream-desktop-minimal.dream-app-open[data-dream-route="search"] .mini-now-playing,
body.dream-desktop-minimal.dream-app-open[data-dream-route="account"] .mini-now-playing,
body.dream-desktop-minimal.dream-app-open[data-dream-route="studio"] .mini-now-playing,
body.dream-desktop-minimal.dream-app-open[data-dream-route="upload"] .mini-now-playing {
display: none !important;
}
/* Compact browse routes: content area needs less bottom padding */
body.dream-desktop-minimal.dream-app-open[data-dream-route="discover"] #minimal-ui .dream-app-content,
body.dream-desktop-minimal.dream-app-open[data-dream-route="library"] #minimal-ui .dream-app-content,
body.dream-desktop-minimal.dream-app-open[data-dream-route="search"] #minimal-ui .dream-app-content,
body.dream-desktop-minimal.dream-app-open[data-dream-route="account"] #minimal-ui .dream-app-content,
body.dream-desktop-minimal.dream-app-open[data-dream-route="studio"] #minimal-ui .dream-app-content,
body.dream-desktop-minimal.dream-app-open[data-dream-route="upload"] #minimal-ui .dream-app-content {
padding-bottom: 90px !important;
}
/* Compact PiP strip: always-visible floating mini-player on browse routes */
body.dream-desktop-minimal .mini-now-playing {
position: fixed !important;
bottom: 24px !important;
right: 24px !important;
left: auto !important;
width: 320px !important;
margin-left: 0 !important;
border-radius: 18px !important;
box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
z-index: 500 !important;
background: rgba(10,10,18,.94) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
}
}
/* ── COMPACT MODE: #player route — compact player layout ────────── */
@media (min-width: 521px) {
body.dream-desktop-minimal[data-dream-route="player"] #minimal-ui {
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
}
body.dream-desktop-minimal[data-dream-route="player"] .vinyl-player {
width: min(380px, 88vw) !important;
padding: 22px 20px 18px !important;
gap: 14px !important;
}
body.dream-desktop-minimal[data-dream-route="player"] .minimal-player-card-stage {
min-height: 220px !important;
}
body.dream-desktop-minimal[data-dream-route="player"] #minimal-ui .dream-app-content {
display: none !important;
}
}
.minimal-app-btn,
#minimalAppBtn {
display: inline-flex !important;
position: fixed !important;
left: 14px !important;
top: max(14px, env(safe-area-inset-top)) !important;
width: 36px !important;
height: 36px !important;
z-index: 6 !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.10) !important;
color: rgba(255,255,255,.50) !important;
font: 600 10px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .08em !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
}
.dream-app-sheet {
position: fixed !important;
inset: 0 !important;
z-index: 30 !important;
display: none !important;
align-items: flex-end !important;
justify-content: center !important;
padding: max(62px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
box-sizing: border-box !important;
pointer-events: none !important;
opacity: 0 !important;
transform: translateY(18px) !important;
transition: opacity .24s ease, transform .24s ease !important;
}
.dream-app-sheet.open {
display: flex !important;
pointer-events: auto !important;
opacity: 1 !important;
transform: translateY(0) !important;
}
.dream-app-sheet::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.54) 38%, rgba(0,0,0,.82));
pointer-events: none;
}
.dream-app-panel {
position: relative !important;
width: min(720px, 100%) !important;
max-height: min(82dvh, 820px) !important;
overflow: hidden !important;
border-radius: 30px 30px 22px 22px !important;
background: linear-gradient(180deg, rgba(10,10,16,.35), rgba(5,5,8,.55)) !important;
border: 1px solid rgba(255,255,255,.12) !important;
box-shadow: 0 -22px 80px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.08) !important;
backdrop-filter: blur(28px) saturate(1.18) !important;
-webkit-backdrop-filter: blur(28px) saturate(1.18) !important;
color: #fff !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
}
.dream-app-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
padding: 20px 20px 10px !important;
}
.dream-app-header p,
.dream-kicker {
margin: 0 0 7px !important;
color: rgba(255,255,255,.5) !important;
font: 900 10px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
}
.dream-app-header h1 {
margin: 0 !important;
color: #fff !important;
font: 900 clamp(22px, 6vw, 34px)/.96 'DM Sans', system-ui, sans-serif !important;
letter-spacing: -.055em !important;
}
.dream-app-close {
appearance: none !important;
width: 40px !important;
height: 40px !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,.1) !important;
background: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.78) !important;
font: 900 16px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-app-header-actions {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
.dream-app-account {
appearance: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 40px !important;
min-width: 84px !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,.10) !important;
background: rgba(255,255,255,.045) !important;
color: rgba(255,255,255,.88) !important;
padding: 0 14px !important;
font: 800 11px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
.dream-app-account.authenticated {
background: rgba(30,215,96,.14) !important;
border-color: rgba(30,215,96,.35) !important;
color: rgba(217,255,231,.96) !important;
}
/* DW-FEAT-131: Bell icon in app shell header */
.dream-app-bell {
position: relative !important;
appearance: none !important;
width: 40px !important;
height: 40px !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,.10) !important;
background: rgba(255,255,255,.045) !important;
color: rgba(255,255,255,.78) !important;
display: inline-flex;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
flex-shrink: 0 !important;
}
.dream-app-bell:hover {
background: rgba(255,255,255,.10) !important;
color: rgba(255,255,255,.95) !important;
}
.dream-app-bell:active {
background: rgba(255,255,255,.16) !important;
}
/* Bell badge: red unread counter overlay */
.dream-bell-badge {
position: absolute !important;
top: -4px !important;
right: -4px !important;
min-width: 18px !important;
height: 18px !important;
border-radius: 999px !important;
background: #e91e63 !important;
color: #fff !important;
font: 700 9px/18px 'DM Sans', system-ui, sans-serif !important;
text-align: center !important;
padding: 0 4px !important;
box-sizing: border-box !important;
pointer-events: none !important;
z-index: 10 !important;
display: none !important;
}
.dream-app-tabs {
display: flex !important;
gap: 8px !important;
overflow-x: auto !important;
touch-action: pan-x !important;
padding: 0 20px 14px !important;
scrollbar-width: none !important;
}
.dream-app-tabs::-webkit-scrollbar { display: none !important; }
.dream-app-tabs button {
appearance: none !important;
flex: 0 0 auto !important;
border: 1px solid rgba(255,255,255,.1) !important;
border-radius: 999px !important;
background: rgba(255,255,255,.07) !important;
color: rgba(255,255,255,.66) !important;
padding: 10px 13px !important;
font: 800 12px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-app-tabs button.active {
background: #fff !important;
color: #07080a !important;
border-color: #fff !important;
}
.dream-app-content {
max-height: calc(min(82dvh, 820px) - 130px) !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
touch-action: pan-y !important;
padding: 0 20px 82px !important;
scrollbar-width: none !important;
}
.dream-app-content::-webkit-scrollbar { display: none !important; }
@media (min-width: 1100px) {
.dream-app-panel {
width: min(1040px, calc(100vw - 96px)) !important;
max-height: min(88dvh, 900px) !important;
}
.dream-app-header {
padding: 20px 24px 12px !important;
}
.dream-app-tabs {
padding: 0 24px 16px !important;
}
.dream-app-content {
max-height: calc(min(88dvh, 900px) - 136px) !important;
overflow-x: hidden !important;
padding: 0 24px 92px !important;
}
.dream-library-workspace {
grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) !important;
}
/* Library route: ensure Liked songs and lower sections clear the mini-player strip + safe-area */
/* Uses .mode-minimal for higher specificity to beat line-70's padding: shorthand */
body.mode-minimal.dream-app-open[data-dream-route="library"] #minimal-ui .dream-app-content {
padding: 0 0 220px !important;
}
}
.dream-hero,
.dream-profile-card,
.dream-section,
.dream-tier-card,
.dream-metric {
border: 1px solid rgba(255,255,255,.1) !important;
background: rgba(255,255,255,.065) !important;
border-radius: 22px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
/* Library route: moderate card opacity — video shows through with blur */
body.dream-app-open[data-dream-route="library"] .dream-hero,
body.dream-app-open[data-dream-route="library"] .dream-section,
body.dream-app-open[data-dream-route="library"] .dream-tier-card,
body.dream-app-open[data-dream-route="library"] .dream-metric {
background: rgba(10,10,16,0.55) !important;
}
.dream-hero { padding: 20px !important; margin-bottom: 12px !important; }
.dream-hero h2,
.dream-profile-card h2 {
margin: 0 0 10px !important;
color: #fff !important;
font: 900 clamp(26px, 7vw, 42px)/.94 'DM Sans', system-ui, sans-serif !important;
letter-spacing: -.06em !important;
}
.dream-hero p:not(.dream-kicker),
.dream-profile-card p:not(.dream-kicker) {
margin: 0 !important;
color: rgba(255,255,255,.78) !important;
font: 600 14px/1.45 'DM Sans', system-ui, sans-serif !important;
overflow-wrap: break-word !important;
max-width: 100% !important;
}
.dream-hero-actions,
.dream-action-grid {
display: flex !important;
gap: 9px !important;
flex-wrap: wrap !important;
margin-top: 16px !important;
}
.dream-primary,
.dream-secondary,
.dream-section-head button,
.dream-action-grid button {
appearance: none !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,.12) !important;
padding: 11px 14px !important;
font: 900 12px/1 'DM Sans', system-ui, sans-serif !important;
min-height: 44px !important;
}
.dream-primary { background: var(--dw-green) !important; color: #050506 !important; border-color: var(--dw-green) !important; }
.dream-secondary,
.dream-section-head button,
.dream-action-grid button { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.84) !important; }
/* ── Disabled state: all buttons ────────────────────────────── */
.dream-primary:disabled,
.dream-secondary:disabled,
button:disabled,
.dream-btn:disabled,
.dream-tab-btn:disabled {
opacity: 0.38 !important;
cursor: not-allowed !important;
pointer-events: none !important;
filter: grayscale(0.5) !important;
}
.dream-metrics {
display: grid !important;
grid-template-columns: repeat(3, minmax(0,1fr)) !important;
gap: 9px !important;
margin-bottom: 12px !important;
}
.dream-metric { padding: 13px !important; min-width: 0 !important; }
.dream-metric span,
.dream-metric em {
display: block !important;
color: rgba(255,255,255,.45) !important;
font: 800 10px/1.1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
.dream-metric strong {
display: block !important;
margin: 7px 0 5px !important;
color: #fff !important;
font: 900 20px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: -.04em !important;
}
.dream-metric em { text-transform: none !important; letter-spacing: 0 !important; font-size: 11px !important; font-style: normal !important; }
.dream-section { padding: 16px !important; margin-bottom: 12px !important; }
.dream-section h3,
.dream-tier-card h3 {
margin: 0 0 12px !important;
color: #fff !important;
font: 900 18px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: -.035em !important;
}
.dream-section-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
margin-bottom: 10px !important;
}
.dream-section-head h3 { margin: 0 !important; }
.dream-list { display: grid !important; gap: 4px !important; }
.dream-row {
width: 100% !important;
appearance: none !important;
display: grid !important;
grid-template-columns: 34px minmax(0, 1fr) auto !important;
gap: 10px !important;
align-items: center !important;
padding: 10px 2px !important;
border: 0 !important;
border-bottom: 1px solid rgba(255,255,255,.07) !important;
background: transparent !important;
color: #fff !important;
text-align: left !important;
}
.dream-row-index { color: rgba(255,255,255,.34) !important; font: 900 11px/1 'DM Sans', system-ui, sans-serif !important; }
.dream-row-main { min-width: 0 !important; }
.dream-row-main strong,
.dream-row-main em { display: block !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; }
.dream-row-main strong { color: rgba(255,255,255,.9) !important; font: 800 14px/1.2 'DM Sans', system-ui, sans-serif !important; }
.dream-row-main em { margin-top: 2px !important; color: rgba(255,255,255,.48) !important; font: 600 12px/1.2 'DM Sans', system-ui, sans-serif !important; font-style: normal !important; }
.dream-row-pill,
.dream-tier-badge {
border-radius: 999px !important;
background: rgba(15,18,24,.72) !important;
color: rgba(255,255,255,.88) !important;
padding: 6px 9px !important;
font: 900 10px/1 'DM Sans', system-ui, sans-serif !important;
text-transform: uppercase !important;
border: 1px solid rgba(255,255,255,.12) !important;
}
.dream-profile-card {
display: grid !important;
grid-template-columns: 58px minmax(0, 1fr) auto !important;
gap: 14px !important;
align-items: center !important;
padding: 16px !important;
margin-bottom: 12px !important;
}
.dream-avatar {
width: 58px !important;
height: 58px !important;
border-radius: 18px !important;
display: grid !important;
place-items: center !important;
background: linear-gradient(135deg, var(--dw-green), var(--dw-cyan)) !important;
color: #050506 !important;
font: 1000 24px/1 'DM Sans', system-ui, sans-serif !important;
overflow: hidden !important;
}
.dream-avatar img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.dream-setting-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
padding: 12px 0 !important;
border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.dream-setting-row span { color: rgba(255,255,255,.52) !important; font: 800 12px/1 'DM Sans', system-ui, sans-serif !important; }
.dream-setting-row strong { color: rgba(255,255,255,.9) !important; font: 900 13px/1 'DM Sans', system-ui, sans-serif !important; text-transform: uppercase !important; }
.dream-tier-grid { display: grid !important; gap: 10px !important; align-items: stretch !important; }
.dream-tier-card { padding: 16px 16px 24px !important; height: 100% !important; display: flex !important; flex-direction: column !important; }
.dream-tier-card.active { border-color: rgba(30,215,96,.55) !important; background: rgba(30,215,96,.11) !important; }
.dream-price { display: block !important; margin: 4px 0 12px !important; color: #fff !important; font: 1000 28px/1 'DM Sans', system-ui, sans-serif !important; letter-spacing: -.055em !important; }
.dream-tier-card ul { list-style: none !important; margin: 0 0 14px !important; padding: 0 !important; display: grid !important; gap: 7px !important; }
.dream-tier-card li { color: rgba(255,255,255,.85) !important; font: 650 13px/1.4 'DM Sans', system-ui, sans-serif !important; }
.dream-tier-card .dream-primary,
.dream-tier-card .dream-secondary {
margin-top: auto !important;
min-height: 44px !important;
}
.dream-tier-card li::before { content: '✓'; color: var(--dw-green); margin-right: 8px; }
/* Mobile tier card: single column on narrow screens */
@media (max-width: 640px) {
.dream-tier-grid { grid-template-columns: 1fr !important; }
.dream-tier-card { padding-bottom: 20px !important; }
.dream-tier-card .dream-primary,
.dream-tier-card .dream-secondary {
width: 100% !important;
min-height: 44px !important;
}
}
.dream-app-content code { color: var(--dw-green) !important; }
body.dream-app-open .playlist-drawer-toggle,
body.dream-app-open #minimalQueueBtn { opacity: .28 !important; pointer-events: none !important; }
@media (min-width: 780px) {
.dream-app-sheet { align-items: center !important; padding: 72px 18px 18px !important; }
.dream-app-panel { border-radius: 32px !important; }
.dream-tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1500px) {
.dream-tier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 460px) {
.dream-app-panel { max-height: 78dvh !important; }
.dream-app-content { max-height: calc(78dvh - 126px) !important; padding-left: 14px !important; padding-right: 14px !important; }
.dream-app-header { padding-left: 14px !important; padding-right: 14px !important; }
.dream-app-tabs { padding-left: 14px !important; padding-right: 14px !important; }
.dream-metrics { grid-template-columns: 1fr !important; }
.dream-row { grid-template-columns: 30px minmax(0,1fr) !important; }
.dream-row-actions .dream-row-pill { display: inline-flex !important; }
.dream-profile-card { grid-template-columns: 48px minmax(0,1fr) !important; }
.dream-tier-badge { grid-column: 1 / -1 !important; justify-self: start !important; }
}
/* Current product pass: full-page app shell + single playlist control + AI provenance reveal */
.playlist-drawer-toggle {
display: none !important;
}
.dream-app-sheet {
align-items: stretch !important;
justify-content: stretch !important;
padding: 0 !important;
transform: translateY(0) scale(.985) !important;
background: rgba(0,0,0,.18) !important;
}
.dream-app-sheet.open { transform: translateY(0) scale(1) !important; }
.dream-app-sheet::before {
background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.14) 30%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.22)) !important;
}
.dream-app-panel {
width: 100% !important;
max-width: none !important;
height: 100dvh !important;
max-height: none !important;
border-radius: 0 !important;
border: 0 !important;
background: linear-gradient(180deg, rgba(9,10,14,.35), rgba(5,5,8,.55)) !important;
box-shadow: none !important;
display: flex !important;
flex-direction: column !important;
}
.dream-app-header {
flex: 0 0 auto !important;
padding: max(18px, env(safe-area-inset-top)) 18px 10px !important;
}
.dream-app-tabs {
flex: 0 0 auto !important;
padding: 0 18px 14px !important;
}
.dream-app-content {
flex: 1 1 auto !important;
max-height: none !important;
min-height: 0 !important;
padding: 0 18px calc(104px + env(safe-area-inset-bottom)) !important;
}
body.dream-app-open .vinyl-player {
display: none !important;
}
body.dream-app-open #minimalQueueBtn,
body.dream-app-open #minimalModeToggle,
body.dream-app-open #minimalAppBtn {
opacity: .18 !important;
pointer-events: none !important;
}
/* Mini-player strip — shown when browsing tabs */
.mini-now-playing {
display: none !important;
}
body.dream-app-open .mini-now-playing {
display: flex !important;
flex-shrink: 0 !important;
align-items: center !important;
gap: 10px !important;
padding: 8px 14px !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
cursor: pointer !important;
position: relative !important;
-webkit-tap-highlight-color: transparent !important;
}
body.dream-app-open .mini-now-playing {
position: fixed !important;
bottom: calc(58px + env(safe-area-inset-bottom)) !important;
left: 0 !important;
right: 0 !important;
z-index: 1001 !important;
background: rgba(7,8,12,.92) !important;
border-radius: 0 !important;
border-bottom: none !important;
border-top: 1px solid rgba(255,255,255,0.06) !important;
gap: 6px !important;
padding: 8px 10px !important;
}
.mini-np-art {
width: 38px !important;
height: 38px !important;
border-radius: 6px !important;
overflow: hidden !important;
flex-shrink: 0 !important;
background: rgba(255,255,255,.06) !important;
}
.mini-np-art img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.mini-np-info {
flex: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
height: 100% !important;
}
.mini-np-title {
font-size: 13px !important;
font-weight: 600 !important;
color: #fff !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.2 !important;
}
.mini-np-artist {
font-size: 11px !important;
color: rgba(255,255,255,.55) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.3 !important;
margin-top: auto !important;
}
.mini-np-play {
appearance: none !important;
background: var(--dw-pink) !important;
border: none !important;
color: #fff !important;
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
font-size: 14px !important;
cursor: pointer !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
line-height: 1 !important;
}
.mini-np-progress {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 6px !important;
background: rgba(255,255,255,.08) !important;
cursor: pointer !important;
}
/* Tap zone extension — 44px hit area for comfortable touch seek */
.mini-np-progress::before {
content: '' !important;
position: absolute !important;
bottom: -21px !important;
left: 0 !important;
right: 0 !important;
height: 44px !important;
background: transparent !important;
z-index: 10 !important;
}
.mini-np-progress-fill {
height: 100% !important;
background: var(--dw-pink) !important;
width: 0% !important;
transition: width .3s linear !important;
}
/* Mini-player up-next preview — compact row shown when 2+ tracks in queue */
.mini-np-up-next {
display: none;
flex-shrink: 0 !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 1px !important;
padding-left: 8px !important;
border-left: 1px solid rgba(255,255,255,.12) !important;
min-width: 0 !important;
max-width: 140px !important;
overflow: hidden !important;
}
.mini-np-up-next-label {
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
color: rgba(255,255,255,.45) !important;
line-height: 1 !important;
}
.mini-np-up-next-name {
font-size: 24px !important;
font-weight: 600 !important;
color: rgba(255,255,255,.9) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.2 !important;
max-width: 100% !important;
}
.mini-np-up-next-artist {
font-size: 13px !important;
color: rgba(255,255,255,.55) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.2 !important;
max-width: 100% !important;
}
/* Queue icon button in mini-player strip */
.mini-np-queue {
appearance: none !important;
background: rgba(255,255,255,.08) !important;
border: none !important;
color: rgba(255,255,255,.6) !important;
width: 32px !important;
height: 32px !important;
border-radius: 6px !important;
font-size: 13px !important;
cursor: pointer !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
line-height: 1 !important;
margin-left: 4px !important;
}
.mini-np-queue:hover { background: rgba(255,255,255,.14) !important; color: #fff !important; }
.mini-np-queue.has-queue { color: var(--dw-pink) !important; }
/* Queue count badge */
.mini-np-queue-badge {
position: absolute !important;
top: -4px !important;
right: -4px !important;
min-width: 16px !important;
height: 16px !important;
background: var(--dw-pink) !important;
color: #fff !important;
border-radius: 8px !important;
font-size: 9px !important;
font-weight: 700 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 3px !important;
line-height: 1 !important;
pointer-events: none !important;
}
/* ── Queue Panel bottom sheet ── */
#dreamQueuePanel {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1100 !important;
background: rgba(8,9,18,.97) !important;
backdrop-filter: blur(24px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
border-top: 1px solid rgba(255,255,255,.08) !important;
border-radius: 18px 18px 0 0 !important;
padding: 0 0 env(safe-area-inset-bottom, 0) !important;
max-height: 80vh !important;
overflow-y: auto !important;
transform: translateY(100%) !important;
transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
touch-action: none !important;
box-shadow: 0 -8px 40px rgba(0,0,0,.6) !important;
}
#dreamQueuePanel.open {
transform: translateY(0) !important;
}
.dream-qp-handle {
width: 40px !important;
height: 4px !important;
background: rgba(255,255,255,.2) !important;
border-radius: 2px !important;
margin: 10px auto 0 !important;
flex-shrink: 0 !important;
}
.dream-qp-header {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 14px 16px 10px !important;
flex-shrink: 0 !important;
}
.dream-qp-title {
font-size: 16px !important;
font-weight: 700 !important;
color: #fff !important;
flex: 1 !important;
}
.dream-qp-count {
font-size: 12px !important;
color: rgba(255,255,255,.45) !important;
font-weight: 400 !important;
margin-left: -6px !important;
}
.dream-qp-clear {
appearance: none !important;
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.1) !important;
color: rgba(255,255,255,.7) !important;
border-radius: 8px !important;
font-size: 12px !important;
padding: 5px 10px !important;
cursor: pointer !important;
flex-shrink: 0 !important;
}
.dream-qp-clear:hover { background: rgba(255,80,80,.15) !important; border-color: rgba(255,80,80,.3) !important; color: #ff6b6b !important; }
.dream-qp-close {
appearance: none !important;
background: rgba(255,255,255,.06) !important;
border: none !important;
color: rgba(255,255,255,.55) !important;
border-radius: 50% !important;
width: 28px !important;
height: 28px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16px !important;
flex-shrink: 0 !important;
padding: 0 !important;
}
.dream-qp-close:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.dream-qp-divider {
height: 1px !important;
background: rgba(255,255,255,.06) !important;
margin: 0 16px !important;
flex-shrink: 0 !important;
}
.dream-qp-now-playing {
padding: 10px 16px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex-shrink: 0 !important;
}
.dream-qp-now-badge {
background: var(--dw-pink) !important;
color: #fff !important;
border-radius: 4px !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
padding: 2px 5px !important;
flex-shrink: 0 !important;
text-transform: uppercase !important;
}
.dream-qp-now-cover {
width: 44px !important;
height: 44px !important;
border-radius: 8px !important;
object-fit: cover !important;
background: rgba(255,255,255,.06) !important;
flex-shrink: 0 !important;
}
.dream-qp-now-info { flex: 1 !important; min-width: 0 !important; }
.dream-qp-now-name {
font-size: 14px !important;
font-weight: 600 !important;
color: #fff !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-qp-now-artist {
font-size: 12px !important;
color: rgba(255,255,255,.5) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-qp-list {
padding: 4px 0 8px !important;
flex: 1 !important;
overflow-y: auto !important;
}
.dream-qp-row {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 8px 16px !important;
border-bottom: 1px solid rgba(255,255,255,.04) !important;
cursor: default !important;
}
.dream-qp-row:last-child { border-bottom: none !important; }
.dream-qp-row-cover {
width: 40px !important;
height: 40px !important;
border-radius: 6px !important;
object-fit: cover !important;
background: rgba(255,255,255,.06) !important;
flex-shrink: 0 !important;
}
.dream-qp-row-info { flex: 1 !important; min-width: 0 !important; }
.dream-qp-row-name {
font-size: 13px !important;
font-weight: 600 !important;
color: #fff !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-qp-row-artist {
font-size: 11px !important;
color: rgba(255,255,255,.45) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-qp-row-play {
appearance: none !important;
background: rgba(255,255,255,.08) !important;
border: none !important;
color: rgba(255,255,255,.65) !important;
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
font-size: 11px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
padding: 0 !important;
}
.dream-qp-row-play:hover { background: var(--dw-pink) !important; color: #fff !important; }
.dream-qp-row-remove {
appearance: none !important;
background: transparent !important;
border: none !important;
color: rgba(255,255,255,.25) !important;
width: 28px !important;
height: 28px !important;
border-radius: 6px !important;
font-size: 14px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
padding: 0 !important;
}
.dream-qp-row-remove:hover { background: rgba(255,80,80,.12) !important; color: #ff6b6b !important; }
.dream-qp-empty {
padding: 40px 20px !important;
text-align: center !important;
color: rgba(255,255,255,.35) !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
/* Queue panel overlay backdrop */
body.queue-open::before {
content: '' !important;
position: fixed !important;
inset: 0 !important;
z-index: 1099 !important;
background: rgba(0,0,0,.35) !important;
pointer-events: none !important;
}
/* Popup menu queue actions */
.dream-popup-item.dream-play-next-action::before { content: '↑ ' !important; opacity: .7 !important; }
.dream-popup-item.dream-add-to-queue::before { content: '+ ' !important; opacity: .7 !important; }
.dream-row-card {
border-bottom: 1px solid rgba(255,255,255,.07) !important;
padding: 10px 0 !important;
}
.dream-row-card .dream-row {
border-bottom: 0 !important;
padding: 0 !important;
grid-template-columns: 38px minmax(0, 1fr) auto !important;
}
.dream-connection-list {
display: grid !important;
gap: 10px !important;
}
.dream-connection-row {
width: 100% !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 18px !important;
background: rgba(255,255,255,.04) !important;
padding: 12px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 12px !important;
}
.dream-connection-main {
appearance: none !important;
width: 100% !important;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: 42px minmax(0, 1fr) !important;
align-items: center !important;
gap: 12px !important;
text-align: left !important;
color: #fff !important;
}
.dream-connection-actions {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.dream-connection-open,
.dream-connection-follow {
appearance: none !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 999px !important;
background: rgba(255,255,255,.03) !important;
color: rgba(255,255,255,.82) !important;
padding: 7px 10px !important;
font: 700 11px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-connection-follow {
border-color: rgba(30,215,96,.22) !important;
color: rgba(125,255,176,.95) !important;
background: rgba(30,215,96,.09) !important;
}
.dream-connection-self {
flex-shrink: 0 !important;
}
.dream-connection-avatar {
width: 42px !important;
height: 42px !important;
border-radius: 14px !important;
object-fit: cover !important;
display: block !important;
}
.dream-connection-copy {
min-width: 0 !important;
display: grid !important;
gap: 4px !important;
}
.dream-connection-copy strong,
.dream-connection-copy em {
display: block !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.dream-connection-copy em {
color: rgba(255,255,255,.76) !important;
font-style: normal !important;
}
.dream-connection-meta,
.dream-activity-meta {
color: rgba(255,255,255,.48) !important;
font: 600 10.5px/1.35 'DM Sans', system-ui, sans-serif !important;
display: block !important;
}
.dream-activity-list {
display: grid !important;
gap: 10px !important;
}
.dream-activity-row-wrap {
display: grid !important;
gap: 8px !important;
}
.dream-activity-row {
appearance: none !important;
width: 100% !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 18px !important;
background: rgba(255,255,255,.04) !important;
padding: 12px !important;
display: grid !important;
grid-template-columns: 42px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 12px !important;
text-align: left !important;
color: #fff !important;
}
.dream-activity-actions {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
padding-left: 54px !important;
}
.dream-activity-action {
appearance: none !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 999px !important;
background: rgba(255,255,255,.03) !important;
color: rgba(255,255,255,.82) !important;
padding: 7px 10px !important;
font: 700 11px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-activity-avatar {
width: 42px !important;
height: 42px !important;
border-radius: 14px !important;
object-fit: cover !important;
display: block !important;
}
.dream-activity-copy {
min-width: 0 !important;
display: grid !important;
gap: 4px !important;
}
.dream-activity-copy strong,
.dream-activity-copy em {
display: block !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.dream-activity-copy em {
color: rgba(255,255,255,.76) !important;
font-style: normal !important;
}
.dream-creator-pulse-card {
border-color: rgba(132,190,255,.14) !important;
background: linear-gradient(160deg, rgba(15,22,42,.82), rgba(8,10,18,.92)) !important;
}
.dream-creator-pulse-grid {
display: grid !important;
gap: 6px !important;
}
.dream-activity-time {
color: rgba(255,255,255,.52) !important;
font: 700 11px/1 'DM Sans', system-ui, sans-serif !important;
white-space: nowrap !important;
}
.dream-row-play {
appearance: none !important;
width: 34px !important;
height: 34px !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,.12) !important;
background: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.88) !important;
font: 900 12px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-provenance-toggle {
border: 0 !important;
}
.dream-row-hint {
margin: 6px 0 0 48px !important;
color: rgba(255,255,255,.38) !important;
font: 700 11px/1.25 'DM Sans', system-ui, sans-serif !important;
}
.dream-provenance {
margin: 10px 0 0 48px !important;
padding: 12px !important;
border-radius: 16px !important;
background: rgba(0,0,0,.24) !important;
border: 1px solid rgba(255,255,255,.08) !important;
}
.dream-provenance[hidden] { display: none !important; }
.dream-provenance strong {
display: block !important;
color: rgba(255,255,255,.9) !important;
font: 900 13px/1 'DM Sans', system-ui, sans-serif !important;
margin-bottom: 8px !important;
}
.dream-provenance p {
margin: 0 !important;
color: rgba(255,255,255,.58) !important;
font: 650 12px/1.35 'DM Sans', system-ui, sans-serif !important;
overflow-wrap: break-word !important;
max-width: 100% !important;
}
.dream-provenance-row {
display: grid !important;
grid-template-columns: 84px minmax(0, 1fr) !important;
gap: 10px !important;
padding: 14px 0 !important;
border-top: 1px solid rgba(255,255,255,.055) !important;
min-height: 44px !important;
align-items: center !important;
}
.dream-provenance-row span {
color: rgba(255,255,255,.42) !important;
font: 900 10px/1.2 'DM Sans', system-ui, sans-serif !important;
text-transform: uppercase !important;
}
.dream-provenance-row em {
color: rgba(255,255,255,.72) !important;
font: 650 12px/1.25 'DM Sans', system-ui, sans-serif !important;
font-style: normal !important;
overflow-wrap: anywhere !important;
}
/* DW-FEAT-044 scope 2: Enhanced provenance reveal */
.dream-provenance-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
margin-bottom: 10px !important;
}
.dream-provenance-header strong {
margin-bottom: 0 !important;
}
.dream-provenance-disclosure-badge {
display: inline-flex !important;
align-items: center !important;
padding: 2px 7px !important;
border-radius: 6px !important;
font: 700 9px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .05em !important;
text-transform: uppercase !important;
flex-shrink: 0 !important;
}
.dream-provenance-disclosure-badge--summary {
background: rgba(0,184,212,.18) !important;
border: 1px solid rgba(0,184,212,.35) !important;
color: rgba(0,220,240,.95) !important;
}
.dream-provenance-disclosure-badge--full {
background: rgba(0,210,100,.18) !important;
border: 1px solid rgba(0,210,100,.35) !important;
color: rgba(0,230,120,.95) !important;
}
.dream-provenance-disclosure-badge--private {
background: rgba(255,80,80,.15) !important;
border: 1px solid rgba(255,80,80,.3) !important;
color: rgba(255,150,150,.95) !important;
}
.dream-provenance-disclosure-hint {
color: rgba(255,255,255,.32) !important;
font: 500 10px/1.2 'DM Sans', system-ui, sans-serif !important;
flex-shrink: 0 !important;
}
.dream-provenance-group-separator {
padding: 8px 0 2px !important;
margin-top: 4px !important;
}
.dream-provenance-group-separator span {
color: rgba(255,255,255,.22) !important;
font: 900 9px/1 'DM Sans', system-ui, sans-serif !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
}
.dream-provenance-row--not-disclosed em {
color: rgba(255,255,255,.25) !important;
font-style: italic !important;
}
/* DW-FEAT-071: Provenance mobile polish — row stacking, badge touch targets, section scroll */
@media (max-width: 420px) {
/* Stack provenance rows vertically on phone so 84px label + gap doesn't cause overflow */
.dream-player-section--provenance .dream-provenance-row {
grid-template-columns: 1fr !important;
gap: 4px !important;
padding: 8px 0 !important;
}
.dream-player-section--provenance .dream-provenance-row span {
font-size: 9px !important;
color: rgba(255,255,255,.38) !important;
}
.dream-player-section--provenance .dream-provenance-row em {
font-size: 11px !important;
}
/* Disclosure badge touch target: wrap as block flex container so whole badge is tappable */
.dream-player-section--provenance .dream-provenance-header {
flex-wrap: wrap !important;
gap: 6px !important;
}
.dream-player-section--provenance .dream-provenance-disclosure-badge {
min-height: 40px !important;
padding: 4px 10px !important;
font-size: 10px !important;
cursor: pointer !important;
}
/* Provenance private message badge touch target */
.dream-track-detail-ai-private-msg {
min-height: 40px !important;
display: flex !important;
align-items: center !important;
}
/* Provenance section scrolls within track detail surface — proven track detail already has overflow:auto */
.dream-player-section--provenance {
max-height: 240px !important;
overflow-y: auto !important;
scrollbar-width: none !important;
}
.dream-player-section--provenance::-webkit-scrollbar {
display: none !important;
}
/* DW-FEAT-072 FIX (DW-075): .dream-provenance-bottom-recovery moved OUTSIDE the overflow:auto provenance section.
It is now a direct child of .dream-player-secondary-grid (the scroll container).
Sticky relative to the player surface scroll context — sticks to bottom of the player surface.
DW-WAVE61-CONTROL-HIT-TARGET-CLEARANCE: keep visible bottom recovery inside the tappable scroll area. */
.dream-player-secondary-grid > .dream-provenance-bottom-recovery {
position: sticky !important;
bottom: max(58px, calc(env(safe-area-inset-bottom) + 44px)) !important;
left: 0 !important;
right: 0 !important;
z-index: 50 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 8px 0 calc(4px + env(safe-area-inset-bottom, 0px)) !important;
background: linear-gradient(to top, rgba(8,10,20,0.85) 0%, rgba(8,10,20,0.0) 100%) !important;
pointer-events: auto !important;
}
/* Bottom padding on the grid gives the sticky element room to "stick" into view at end of scroll */
.dream-player-secondary-grid {
padding-bottom: 108px !important;
}
.dream-player-secondary-grid > .dream-provenance-bottom-recovery .dream-provenance-back-btn {
min-height: 48px !important;
min-width: 148px !important;
padding: 8px 16px !important;
font-size: 13px !important;
font-weight: 500 !important;
color: rgba(255,255,255,0.9) !important;
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
border-radius: 22px !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
box-sizing: border-box !important;
margin-bottom: env(safe-area-inset-bottom, 0px) !important;
margin-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
.dream-player-secondary-grid > .dream-provenance-bottom-recovery .dream-provenance-back-btn:active {
background: rgba(255,255,255,0.15) !important;
transform: scale(0.97) !important;
}
}
/* DW-FEAT-044 scope 3: Share link management UI */
.dream-share-link-list {
display: grid !important;
gap: 8px !important;
margin-top: 8px !important;
}
.dream-share-link-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
padding: 8px 10px !important;
border-radius: 12px !important;
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.08) !important;
}
.dream-share-link-info {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
min-width: 0 !important;
flex: 1 !important;
}
.dream-share-link-url {
font: 500 11px/1.2 'DM Sans', system-ui, sans-serif !important;
color: rgba(0,184,212,.88) !important;
word-break: break-all !important;
overflow-wrap: anywhere !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 180px !important;
}
.dream-share-link-actions {
display: flex !important;
gap: 6px !important;
flex-shrink: 0 !important;
}
.dream-share-link-actions .dream-row-pill {
min-height: 44px !important;
padding: 10px 12px !important;
font-size: 12px !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
@media (max-width: 420px) {
.dream-share-link-row {
flex-direction: column !important;
align-items: flex-start !important;
}
.dream-share-link-info {
width: 100% !important;
}
.dream-share-link-url {
max-width: 100% !important;
white-space: normal !important;
}
.dream-share-link-actions {
width: 100% !important;
justify-content: flex-start !important;
}
.dream-share-link-actions .dream-row-pill {
flex: 1 !important;
text-align: center !important;
min-height: 44px !important;
box-sizing: border-box !important;
}
}
.dream-share-link-empty {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
padding: 16px 12px !important;
}
.dream-share-link-empty-text {
font-size: 13px !important;
color: rgba(255,255,255,.55) !important;
line-height: 1.4 !important;
}
.dream-share-link-empty-cta {
min-height: 44px !important;
padding: 10px 16px !important;
font-size: 13px !important;
font-weight: 600 !important;
box-sizing: border-box !important;
}
.dream-share-badge {
display: inline-block !important;
font-size: 10px !important;
padding: 4px 8px !important;
border-radius: 6px !important;
font-weight: 600 !important;
min-height: 24px !important;
line-height: 1.2 !important;
box-sizing: border-box !important;
vertical-align: middle !important;
}
.dream-share-badge--public { background: rgba(76,175,80,.2) !important; color: #81c784 !important; }
.dream-share-badge--unlisted { background: rgba(255,193,7,.18) !important; color: #ffd54f !important; }
.dream-share-badge--private { background: rgba(255,82,82,.15) !important; color: #ff5252 !important; }
.dream-share-badge--shared-private { background: rgba(156,39,176,.15) !important; color: #ce93d8 !important; }
.dream-share-badge--draft { background: rgba(158,158,158,.15) !important; color: #bdbdbd !important; }
@media (max-width: 420px) {
.dream-share-badge {
font-size: 9px !important;
padding: 3px 7px !important;
min-height: 24px !important;
}
}
/* DW-FEAT-096: Share link management */
.dream-share-link-manage-list {
display: grid !important;
gap: 8px !important;
margin-top: 8px !important;
}
.dream-share-link-manage-group {
display: grid !important;
gap: 4px !important;
}
.dream-share-link-manage-group-label {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .07em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.4) !important;
padding: 6px 4px 2px !important;
}
.dream-share-link-manage-row {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
padding: 10px 12px !important;
border-radius: 12px !important;
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.08) !important;
}
.dream-share-link-manage-meta {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-wrap: wrap !important;
}
.dream-share-link-resource-label {
font-size: 10px !important;
color: rgba(255,255,255,.4) !important;
font-weight: 500 !important;
letter-spacing: .04em !important;
}
.dream-share-link-date {
font-size: 10px !important;
color: rgba(255,255,255,.3) !important;
margin-left: auto !important;
}
.dream-share-link-url-wrap {
overflow: hidden !important;
}
.dream-share-link-manage-actions {
display: flex !important;
justify-content: flex-start !important;
gap: 6px !important;
}
.dream-share-link-manage-actions .dream-row-pill {
min-height: 44px !important;
padding: 10px 12px !important;
font-size: 12px !important;
box-sizing: border-box !important;
}
@media (max-width: 420px) {
.dream-share-link-manage-row {
padding: 10px 10px !important;
}
.dream-share-link-date {
display: none !important;
}
.dream-share-link-manage-actions {
width: 100% !important;
}
.dream-share-link-manage-actions .dream-row-pill {
flex: 1 !important;
text-align: center !important;
}
}
/* DW-FEAT-022: Track detail provenance reveal */
.dream-track-detail-ai-badge {
margin: 8px 0 6px !important;
}
.dream-ai-badge-label {
display: inline-block !important;
padding: 3px 8px !important;
border-radius: 6px !important;
background: rgba(120,80,255,.28) !important;
border: 1px solid rgba(120,80,255,.45) !important;
color: rgba(200,180,255,.95) !important;
font: 700 10px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
}
.dream-track-detail-ai-private-msg {
margin: 8px 0 4px !important;
color: rgba(255,255,255,.38) !important;
font: 650 12px/1.35 'DM Sans', system-ui, sans-serif !important;
font-style: normal !important;
}
.dream-track-detail-provenance-section {
margin-top: 8px !important;
}
.dream-track-detail-provenance-section[data-open="true"] {
display: block !important;
}
.dream-track-detail-provenance-section[data-open="false"],
.dream-track-detail-provenance-section:not([data-open]) {
display: none !important;
}
/* 44px min-height touch target for provenance toggle */
.dream-provenance-toggle-btn {
min-height: 44px !important;
width: 100% !important;
margin-top: 8px !important;
justify-content: center !important;
}
@media (max-width: 640px) {
.dream-provenance-toggle-btn {
min-height: 44px !important;
font-size: 13px !important;
}
}
.dream-upload-steps {
display: grid !important;
gap: 10px !important;
}
.dream-upload-steps div {
display: grid !important;
grid-template-columns: 34px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: center !important;
padding: 11px !important;
border-radius: 16px !important;
background: rgba(255,255,255,.055) !important;
}
.dream-upload-steps strong {
width: 30px !important;
height: 30px !important;
display: grid !important;
place-items: center !important;
border-radius: 999px !important;
background: var(--dw-green) !important;
color: #050506 !important;
font: 1000 13px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-upload-steps span {
color: rgba(255,255,255,.72) !important;
font: 700 13px/1.25 'DM Sans', system-ui, sans-serif !important;
}
.dream-account-stack {
display: grid;
gap: 12px;
}
.dream-account-shell {
display: grid !important;
grid-template-columns: minmax(0, 1.12fr) minmax(0, .85fr) !important;
gap: 16px !important;
overflow: visible !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
@media (min-width: 1280px) {
.dream-account-shell {
grid-template-columns: minmax(0, 1.12fr) minmax(0, .85fr) !important;
align-items: start !important;
}
/* Logged-out shell: login first (col 1), install (col 2).
Hero secondary sits below login in col 1 so it scrolls away on phone. */
.dream-account-shell--logged-out .dream-account-hero-card--secondary {
grid-column: 1 !important;
}
.dream-account-shell--logged-out .dream-account-login-section {
grid-column: 1 !important;
}
.dream-account-shell--logged-out .dream-account-install-section {
grid-column: 2 !important;
}
.dream-account-hero-card {
min-height: 100% !important;
}
.dream-account-login-section,
.dream-account-install-section {
margin: 0 !important;
min-width: 0 !important;
overflow: visible !important;
}
.dream-account-login-section {
padding-top: 0 !important;
}
.dream-account-install-section {
grid-column: 2 !important;
}
.dream-account-hero-list {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
margin-top: 16px !important;
}
.dream-account-hero-list li:last-child {
grid-column: 1 / -1 !important;
}
.dream-account-hero-list strong {
font-size: 11.6px !important;
letter-spacing: .06em !important;
}
.dream-account-hero-list span {
font-size: 12px !important;
line-height: 1.34 !important;
}
}
.dream-account-hero-card {
margin-bottom: 0 !important;
}
.dream-account-hero-list {
list-style: none !important;
display: grid !important;
gap: 10px !important;
margin: 18px 0 0 !important;
padding: 0 !important;
}
.dream-account-hero-list li {
display: grid !important;
gap: 6px !important;
padding: 12px 14px !important;
border-radius: 18px !important;
border: 1px solid rgba(255,255,255,.08) !important;
background: rgba(255,255,255,.035) !important;
}
.dream-account-hero-list strong {
display: block !important;
margin: 0 0 2px !important;
color: rgba(255,255,255,.95) !important;
font: 800 12px/1.1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
.dream-account-hero-list span {
display: block !important;
color: rgba(255,255,255,.76) !important;
font: 600 13px/1.42 'DM Sans', system-ui, sans-serif !important;
}
.dream-account-login-section {
padding-top: 14px !important;
}
.dream-account-topline {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 12px !important;
margin-bottom: 14px !important;
}
.dream-account-topline h3 {
margin: 4px 0 0 !important;
color: #f7f8f8 !important;
font: 800 clamp(20px, 4.8vw, 28px)/1.02 'DM Sans', system-ui, sans-serif !important;
letter-spacing: -.05em !important;
}
.dream-account-auth-close {
appearance: none !important;
border: none !important;
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.7) !important;
border-radius: 8px !important;
width: 44px !important;
height: 44px !important;
font-size: 16px !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
flex-shrink: 0 !important;
align-self: flex-start !important;
}
.dream-account-topline--with-close {
display: grid !important;
grid-template-columns: auto 1fr !important;
gap: 10px !important;
align-items: center !important;
}
.dream-account-topline--with-close h3 {
margin: 0 !important;
}
.dream-account-plan-link {
appearance: none !important;
border: 1px solid rgba(255,255,255,.08) !important;
background: rgba(255,255,255,.03) !important;
color: rgba(255,255,255,.72) !important;
border-radius: 999px !important;
min-height: 44px !important;
padding: 0 12px !important;
font: 700 11px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
.dream-account-auth-card {
border: 1px solid rgba(255,255,255,.10) !important;
background: linear-gradient(180deg, rgba(10,12,18,.96), rgba(8,9,14,.84)) !important;
border-radius: 24px !important;
padding: 20px !important;
color: rgba(255,255,255,.82) !important;
/* DW-VIS-NEW-1: ensure auth card layers above install surface on phone */
/* DW-VIS-ACCOUNT-MODAL-BOTTOM: must clear bottom nav z:20, z:35 used here */
position: relative !important;
z-index: 35 !important;
}
.dream-account-auth-card--compact {
padding: 18px !important;
}
.dream-account-auth-head {
display: grid !important;
gap: 8px !important;
margin-bottom: 14px !important;
}
.dream-account-auth-head p {
margin: 0 !important;
color: rgba(255,255,255,.68) !important;
font: 500 14px/1.45 'Inter', system-ui, sans-serif !important;
}
.dream-account-auth-actions {
display: grid !important;
grid-template-columns: minmax(0, 1.18fr) minmax(0, .92fr) !important;
gap: 10px !important;
margin-bottom: 16px !important;
}
.dream-account-auth-actions--stacked {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.dream-account-auth-actions--stacked .dream-account-github-auth {
grid-column: 1 / -1 !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
}
.dream-account-github-auth {
min-height: 48px !important;
width: 100% !important;
background: var(--dw-green) !important;
color: #050506 !important;
border-color: var(--dw-green) !important;
}
.dream-account-email-row {
display: flex !important;
justify-content: flex-start !important;
}
.dream-account-email-toggle {
appearance: none !important;
border: 0 !important;
background: transparent !important;
color: rgba(255,255,255,.72) !important;
font: 600 13px/1.35 'Inter', system-ui, sans-serif !important;
text-align: left !important;
padding: 0 2px !important;
}
.dream-account-auth-form-wrap {
border: 1px solid rgba(255,255,255,.08) !important;
background: rgba(255,255,255,.028) !important;
border-radius: 20px !important;
padding: 14px !important;
}
.dream-account-auth-form-title {
margin: 0 0 12px !important;
color: rgba(255,255,255,.78) !important;
font: 800 11px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
}
.dream-account-auth-form {
margin-top: 2px !important;
}
.dream-account-auth-footer {
margin-top: 14px !important;
display: flex !important;
justify-content: flex-start !important;
}
.dream-profile-card--account {
align-items: start;
grid-template-columns: 58px minmax(0, 1fr) auto !important;
gap: 14px !important;
}
.dream-account-identity {
min-width: 0 !important;
display: grid !important;
gap: 3px !important;
}
.dream-profile-card--account h2 {
font-size: clamp(24px, 6vw, 32px) !important;
line-height: 1.04 !important;
max-width: none !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
.dream-account-badge-stack {
display: grid !important;
justify-items: end !important;
align-self: start !important;
gap: 8px !important;
}
.dream-account-quick-card {
gap: 0 !important;
}
.dream-account-quick-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.dream-account-quick-grid button {
width: 100% !important;
min-height: 44px !important;
}
.dream-account-install-shell .dream-install-surface {
margin: 0 !important;
}
/* Phone: stack account hero + install section vertically, no 2-col grid */
@media (max-width: 780px) {
.dream-account-shell {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.dream-account-install-section {
grid-column: auto !important;
}
}
@media (min-width: 780px) {
.dream-app-sheet { padding: 0 !important; }
.dream-app-panel {
width: min(980px, 100%) !important;
margin: 0 auto !important;
border-left: 1px solid rgba(255,255,255,.08) !important;
border-right: 1px solid rgba(255,255,255,.08) !important;
}
}
@media (max-width: 460px) {
.dream-app-panel { max-height: none !important; }
.dream-app-content { max-height: none !important; padding-left: 14px !important; padding-right: 14px !important; padding-bottom: calc(var(--dream-mobile-tabs-clearance) + var(--dream-mobile-mini-clearance)) !important; }
.dream-row-hint,
.dream-provenance { margin-left: 44px !important; }
}
/* Phone: app-content always has bottom breathing room for mini player + nav */
@media (max-width: 520px) {
.dream-app-content {
padding-bottom: calc(var(--dream-mobile-tabs-clearance) + var(--dream-mobile-mini-clearance)) !important;
}
body.dream-app-open .dream-app-content {
padding-bottom: calc(var(--dream-mobile-tabs-clearance) + var(--dream-mobile-mini-clearance)) !important;
}
}
/* Creator discovery — Discover tab */
.dream-creator-cards {
display: flex !important;
gap: 12px !important;
overflow-x: auto !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
touch-action: pan-x !important;
padding: 0 2px !important;
}
.dream-creator-cards::-webkit-scrollbar { display: none !important; }
.dream-listen-again-scroll {
display: flex !important;
gap: 8px !important;
overflow-x: auto !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
touch-action: pan-x !important;
padding: 0 2px 4px !important;
}
.dream-listen-again-scroll::-webkit-scrollbar { display: none !important; }
.dream-listen-again-scroll .dream-collection-row {
flex: 0 0 220px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 10px !important;
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 14px !important;
white-space: nowrap !important;
overflow: hidden !important;
}
.dream-listen-again-scroll .dream-row-play {
flex-shrink: 0 !important;
font-size: 14px !important;
width: 28px !important;
height: 28px !important;
line-height: 28px !important;
background: rgba(255,255,255,0.12) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.dream-listen-again-scroll .dream-row-art {
width: 36px !important;
height: 36px !important;
flex-shrink: 0 !important;
border-radius: 8px !important;
object-fit: cover !important;
}
.dream-listen-again-scroll .dream-collection-track-copy {
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
overflow: hidden !important;
min-width: 0 !important;
}
.dream-listen-again-scroll .dream-collection-track-copy strong {
font-size: 13px !important;
font-weight: 600 !important;
color: #fff !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-listen-again-scroll .dream-collection-track-copy em {
font-size: 11px !important;
color: rgba(255,255,255,0.50) !important;
font-style: normal !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-listen-again-scroll .dream-collection-track-actions {
display: none !important;
}
.dream-section--trending {
padding: 14px 16px !important;
margin-bottom: 0 !important;
}
.dream-trending-scroll {
display: flex !important;
gap: 8px !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
touch-action: pan-x !important;
padding: 0 2px 4px !important;
padding-right: 12px !important;
flex-shrink: 0 !important;
}
.dream-trending-scroll::-webkit-scrollbar { display: none !important; }
.dream-trending-scroll .dream-collection-row {
flex: 0 0 min(260px, calc((100vw - 52px) / 2)) !important;
display: flex !important;
align-items: center !important;
scroll-snap-align: start !important;
padding: 10px 14px !important;
max-width: min(260px, calc((100vw - 52px) / 2)) !important;
box-sizing: border-box !important;
}
.dream-trending-scroll .dream-collection-track-main {
flex: 1 1 auto !important;
min-width: 0 !important;
flex-shrink: 0 !important;
}
.dream-trending-scroll .dream-collection-track-copy {
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
overflow: hidden !important;
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.dream-trending-scroll .dream-collection-track-copy strong {
font-size: 13px !important;
font-weight: 600 !important;
color: #fff !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-height: 1.4 !important;
padding-bottom: 2px !important;
}
.dream-trending-scroll .dream-collection-track-copy em {
font-size: 11px !important;
color: rgba(255,255,255,0.50) !important;
font-style: normal !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.dream-trending-scroll .dream-row-stat {
font-size: 10px !important;
color: rgba(255,255,255,0.40) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.dream-trending-scroll .dream-collection-row {
overflow: hidden !important;
}
.dream-trending-scroll .dream-collection-track-actions {
display: none !important;
}
.dream-trending-scroll .dream-row-play {
flex-shrink: 0 !important;
font-size: 14px !important;
width: 28px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.dream-trending-scroll .dream-row-art {
width: 36px !important;
height: 36px !important;
flex-shrink: 0 !important;
border-radius: 8px !important;
object-fit: cover !important;
}
.dream-section--listen-again {
padding: 14px 16px !important;
margin-bottom: 0 !important;
}
.dream-creator-card {
flex: 0 0 200px !important;
background: rgba(255,255,255,0.07) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
border-radius: 14px !important;
padding: 14px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 10px !important;
cursor: pointer !important;
-webkit-tap-highlight-color: transparent !important;
}
.dream-creator-card-avatar {
width: 56px !important;
height: 56px !important;
border-radius: 50% !important;
background: rgba(255,255,255,0.10) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 22px !important;
font-weight: 600 !important;
color: #fff !important;
overflow: hidden !important;
flex-shrink: 0 !important;
}
.dream-creator-card-avatar img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.dream-creator-card-info {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
width: 100% !important;
}
.dream-creator-card-info strong {
font-size: 14px !important;
font-weight: 600 !important;
color: #fff !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.dream-creator-card-info em {
font-size: 12px !important;
color: rgba(255,255,255,0.55) !important;
font-style: normal !important;
}
.dream-creator-card-info span {
font-size: 11px !important;
color: rgba(255,255,255,0.40) !important;
}
.dream-toggle-creator-follow {
margin-top: 4px !important;
padding: 6px 16px !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,0.25) !important;
background: transparent !important;
color: #fff !important;
font-size: 12px !important;
font-weight: 500 !important;
cursor: pointer !important;
min-height: 44px !important;
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
}
.dream-toggle-creator-follow.following,
.dream-toggle-creator-follow[data-following="1"] {
background: rgba(255,255,255,.1) !important;
color: rgba(255,255,255,.92) !important;
border-color: rgba(255,255,255,.2) !important;
}
/* Phone polish: hide app scroll chrome and make route nav feel intentional */
.dream-app-panel,
.dream-app-content {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.dream-app-panel::-webkit-scrollbar,
.dream-app-content::-webkit-scrollbar,
.dream-app-tabs::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
.dream-app-tabs {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
scroll-snap-type: x proximity !important;
padding-right: 18px !important;
mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 28px), rgba(0,0,0,0.15) 100%) !important;
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 28px), rgba(0,0,0,0.15) 100%) !important;
}
.dream-app-tabs button {
scroll-snap-align: start !important;
}
@media (max-width: 520px) {
.dream-app-tabs button {
padding: 8px 12px !important;
font-size: 11px !important;
}
.dream-app-close {
width: 40px !important;
height: 40px !important;
}
}
/* ── Player route: phone (max-width: 520px) ───────────────────────────── */
@media (max-width: 520px) {
body.dream-app-open[data-dream-route="player"] .dream-player-surface {
/* DW-VIS-249 fix: UP Next clips because parent chain (#minimal-ui → #dreamAppContent → #app-main)
has a fixed height inherited from body (723px minus Android chrome ~76px = 647px).
Override the fixed 443px min/max with flex-grow so surface expands to fill available space,
allowing UP NEXT to scroll fully within the surface without bottom clipping.
Remove calc-based constraints — use flex layout instead. */
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: none !important;
height: auto !important;
overflow-y: auto !important;
/* Override base translateY(100%) + opacity:0 which hides surface on phone */
transform: translateY(0) !important;
opacity: 1 !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-layout {
gap: 6px !important;
overflow-y: auto !important;
/* Override base grid with flex on phone so children can overflow-scroll */
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
/* Allow children to shrink — primary+secondary are taller than parent height */
overflow: visible !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-primary,
body.dream-app-open[data-dream-route="player"] .dream-player-secondary {
flex-shrink: 1 !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-art-wrap {
width: min(72vw, 180px) !important;
margin-top: 6px !important;
border-radius: 14px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-info {
gap: 3px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-info h2 {
font-size: clamp(18px, 5.5vw, 24px) !important;
max-width: 18ch !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-info--long h2,
body.dream-app-open[data-dream-route="player"] .dream-player-info--cjk h2 {
max-width: 14ch !important;
font-size: clamp(16px, 5vw, 22px) !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-info p {
font-size: 12px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-kicker {
font-size: 9px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-progress {
max-width: 100% !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-progress-bar {
height: 18px !important;
min-height: 18px !important;
touch-action: none !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-transport-card {
padding: 12px !important;
position: relative !important;
z-index: 100 !important;
/* DW-VIS-NEW-19 fix: allow scroll inside transport card so Up Next 3rd card is reachable */
overflow-y: auto !important;
max-height: calc(100dvh - 200px) !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-transport-card::-webkit-scrollbar {
display: none !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-ctrl--play {
width: 60px !important;
height: 60px !important;
font-size: 20px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-ctrl {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
font-size: 16px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-controls {
gap: 8px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-section {
padding: 10px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-context-card {
padding: 10px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-close {
top: 10px !important;
left: 10px !important;
right: auto !important;
width: auto !important;
min-width: 44px !important;
height: 44px !important;
padding: 0 13px !important;
font-size: 13px !important;
touch-action: manipulation !important;
z-index: 300 !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-actions {
gap: 6px !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-action--compact {
width: min(34vw, 132px) !important;
padding: 6px 10px !important;
font-size: 11px !important;
}
/* DW-FEAT-029 + DW-FEAT-107: bottom recovery button — z-index above bg video layer + sticky at bottom */
/* Root cause: position:static ignores z-index; wrapper creates own stacking context */
/* AC-4 fix: make wrapper FIXED so button is always pinned above Android nav bar */
/* NEW FIX (v898): wrapper was inside scrollable surface — convert to position:fixed
so it is viewport-relative, not scroll-relative. bottom clearance = 61px + safe-area. */
body.dream-app-open[data-dream-route="player"] .dream-player-bottom-recovery-wrapper {
position: fixed !important;
bottom: max(61px, calc(61px + env(safe-area-inset-bottom))) !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 14px !important;
pointer-events: auto !important;
background: transparent !important;
z-index: 2140 !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-bottom-recovery-wrapper .dream-player-bottom-recovery,
body.dream-app-open[data-dream-route="player"] .dream-player-bottom-recovery {
position: fixed !important;
bottom: max(61px, calc(61px + env(safe-area-inset-bottom))) !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 2140 !important;
pointer-events: auto !important;
width: auto !important;
min-width: 120px !important;
max-width: 260px !important;
height: 44px !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 600 !important;
appearance: none !important;
border: 1.5px solid rgba(255,255,255,.3) !important;
background: rgba(0,0,0,.55) !important;
color: rgba(255,255,255,1) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
flex: 1 !important;
touch-action: manipulation !important;
box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}
}
/* DW-VIS-PLAYER-DETAIL-FOOTER-RECOVERY-DEAD: pinned-to-viewport recovery for the
player dossier. Long-surface recovery contract: from any scroll position
(including the bottom of the dossier, which is at y≈2500+ in a 3397px-tall
player surface scroll owner), the user must have an in-app control that
closes the dossier and resets the player route scroll. The element is
rendered at the player surface boundary, then relocated to .dream-app-main
(outside the scroll owner), so position:fixed in this rule pins it to the
viewport rather than the surface. Sits above the existing "Back to controls"
button (bottom: 61px) by 64px to avoid overlap. */
body.dream-app-open[data-dream-route="player"] .dream-player-dossier-footer-recovery-wrapper {
position: fixed !important;
bottom: max(125px, calc(125px + env(safe-area-inset-bottom))) !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 14px !important;
pointer-events: auto !important;
background: transparent !important;
z-index: 2130 !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-dossier-footer-recovery {
position: relative !important;
width: min(100%, 320px) !important;
min-height: 44px !important;
padding: 10px 14px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: linear-gradient(180deg, rgba(8,10,16,.94), rgba(6,8,14,.88)) !important;
color: #fff !important;
border: 1.5px solid rgba(255,255,255,.32) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: .02em !important;
cursor: pointer !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
box-shadow: 0 12px 24px rgba(0,0,0,.42), 0 0 0 1px rgba(0,0,0,.3) inset !important;
backdrop-filter: blur(14px) saturate(120%) !important;
-webkit-backdrop-filter: blur(14px) saturate(120%) !important;
appearance: none !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-dossier-footer-recovery:hover,
body.dream-app-open[data-dream-route="player"] .dream-player-dossier-footer-recovery:focus-visible {
background: linear-gradient(180deg, rgba(14,18,30,.96), rgba(10,12,20,.92)) !important;
border-color: rgba(255,255,255,.5) !important;
}
/* DW-FEAT-101: creator profile bottom-recovery — sticky footer at scroll bottom */
body.dream-app-open[data-dream-route="creator"] .dream-creator-bottom-recovery-wrapper {
display: flex !important;
width: 100% !important;
justify-content: center !important;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
position: static !important;
bottom: auto !important;
z-index: 1 !important;
pointer-events: auto !important;
background: transparent !important;
flex-shrink: 0 !important;
margin: 12px 0 84px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-creator-bottom-recovery {
position: static !important;
width: auto !important;
min-width: 140px !important;
max-width: 280px !important;
height: 44px !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 600 !important;
appearance: none !important;
border: 1px solid rgba(255,255,255,.18) !important;
background: rgba(255,255,255,.09) !important;
color: rgba(255,255,255,.82) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 2 !important;
flex: 1 !important;
touch-action: manipulation !important;
}
/* ── Player route: hide sidebar at mobile widths (≤ 519px) ──────────── */
@media (max-width: 520px) {
/* Hide sidebar nav + mini-player + expanded card on player route */
body.dream-app-open[data-dream-route="player"] .dream-desktop-sidebar,
body.dream-app-open[data-dream-route="player"] .mini-now-playing,
body.dream-app-open[data-dream-route="player"] #miniNowPlaying,
body.dream-app-open[data-dream-route="player"] #miniNowPlayingExpanded,
body.dream-app-open[data-dream-route="player"] .dream-bottom-tabs {
display: none !important;
}
/* Player takes full width on mobile */
body.dream-app-open[data-dream-route="player"] .dream-app-main {
width: 100% !important;
max-width: 100% !important;
}
/* Prevent body scroll and zoom on player route — lock scroll, don't fix position */
body.dream-app-open[data-dream-route="player"] {
overflow: hidden !important;
overscroll-behavior: none !important;
}
/* Ensure the player surface content doesn't overflow horizontally */
body.dream-app-open[data-dream-route="player"] .dream-player-layout {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-primary,
body.dream-app-open[data-dream-route="player"] .dream-player-secondary {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
}
/* App-open scroll lock: route content scrolls, document itself does not */
body.dream-app-open {
overflow: hidden !important;
height: 100dvh !important;
}
/* Final mobile nav: no clipped half-tabs on phone */
@media (max-width: 520px) {
.dream-app-tabs {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
overflow: visible !important;
gap: 6px !important;
padding-right: 0 !important;
mask-image: none !important;
-webkit-mask-image: none !important;
}
.dream-app-tabs button {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
padding: 8px 6px !important;
font-size: 10.5px !important;
letter-spacing: .08em !important;
}
.dream-hero-actions,
.dream-action-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.dream-hero-actions .dream-primary {
grid-column: 1 / -1 !important;
}
.dream-hero-actions .dream-primary,
.dream-hero-actions .dream-secondary,
.dream-action-grid button {
width: 100% !important;
min-height: 42px !important;
}
}
/* Core app slice: compact library + agent surfaces */
.dream-collection-list {
display: grid !important;
gap: 8px !important;
}
.dream-collection-row {
display: grid !important;
grid-template-columns: 36px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 10px !important;
padding: 10px !important;
border-radius: 16px !important;
background: rgba(10,10,16,0.55) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
border: 1px solid rgba(255,255,255,.10) !important;
}
.dream-collection-icon {
width: 34px !important;
height: 34px !important;
display: grid !important;
place-items: center !important;
border-radius: 12px !important;
background: rgba(29,185,84,.14) !important;
color: var(--dw-green) !important;
font: 900 15px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-collection-row strong,
.dream-collection-row em {
display: block !important;
min-width: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-collection-row strong {
color: rgba(255,255,255,.92) !important;
font: 850 13px/1.2 'DM Sans', system-ui, sans-serif !important;
}
.dream-collection-row em {
margin-top: 3px !important;
color: rgba(255,255,255,.66) !important;
font: 650 11px/1.2 'DM Sans', system-ui, sans-serif !important;
font-style: normal !important;
}
.dream-status-chip {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 6px 9px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.85) !important;
border: 1px solid rgba(255,255,255,.08) !important;
font: 900 9.5px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .11em !important;
text-transform: uppercase !important;
}
/* DW-FEAT-014: Agent draft inline playback */
.dream-draft-row {
display: grid !important;
grid-template-columns: 44px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 10px !important;
padding: 10px !important;
border-radius: 16px !important;
background: rgba(10,10,16,0.85) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
border: 1px solid rgba(255,255,255,.10) !important;
min-height: 44px !important;
}
.dream-draft-play-btn {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
background: rgba(29,185,84,.18) !important;
border: 1.5px solid rgba(29,185,84,.45) !important;
color: var(--dw-green) !important;
font-size: 16px !important;
line-height: 1 !important;
cursor: pointer !important;
padding: 0 !important;
-webkit-tap-highlight-color: transparent !important;
touch-action: manipulation !important;
}
.dream-draft-play-btn:active {
background: rgba(29,185,84,.32) !important;
transform: scale(.95) !important;
}
.dream-draft-info {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
min-width: 0 !important;
overflow: hidden !important;
}
.dream-draft-info strong,
.dream-draft-info em {
display: block !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-draft-info strong {
color: rgba(255,255,255,.92) !important;
font: 850 13px/1.2 'DM Sans', system-ui, sans-serif !important;
}
.dream-draft-info em {
color: rgba(255,255,255,.66) !important;
font: 650 11px/1.2 'DM Sans', system-ui, sans-serif !important;
font-style: normal !important;
}
.dream-agent-draft-track-list {
display: grid !important;
gap: 8px !important;
margin-top: 12px !important;
}
.dream-agent-draft-track-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 10px !important;
align-items: center !important;
padding: 10px 12px !important;
border-radius: 14px !important;
border: 1px solid rgba(255,255,255,.09) !important;
background: rgba(7,8,11,.28) !important;
}
.dream-agent-draft-track-meta {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
min-width: 0 !important;
}
.dream-agent-draft-track-meta strong,
.dream-agent-draft-track-meta em {
display: block !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-agent-draft-track-meta strong {
color: rgba(255,255,255,.92) !important;
font: 800 13px/1.2 'DM Sans', system-ui, sans-serif !important;
}
.dream-agent-draft-track-meta em {
color: rgba(255,255,255,.76) !important;
font: 600 11px/1.2 'DM Sans', system-ui, sans-serif !important;
font-style: normal !important;
}
.dream-agent-draft-track-actions {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-end !important;
gap: 6px !important;
}
.dream-agent-draft-track-action {
min-height: 44px !important;
padding: 10px 12px !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,.14) !important;
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.92) !important;
font: 700 11px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-agent-draft-track-note {
margin: 8px 2px 0 !important;
color: rgba(255,255,255,.56) !important;
font: 600 11px/1.4 'DM Sans', system-ui, sans-serif !important;
}
/* FIX 1: track row / collection row album art — prevent border-radius from clipping artwork */
.dream-collection-row .dream-cover-thumb,
.dream-track-row .dream-cover-thumb,
.dream-shelf-grid .dream-cover-thumb img,
.dream-collection-grid .dream-cover-thumb img,
.library-grid .dream-cover-thumb img {
overflow: hidden !important;
border-radius: inherit !important;
}
.dream-agent-prompts {
display: grid !important;
gap: 8px !important;
}
.dream-agent-prompt {
width: 100% !important;
min-height: 44px !important;
padding: 11px 13px !important;
border-radius: 15px !important;
border: 1px solid rgba(255,255,255,.1) !important;
background: rgba(0,0,0,.2) !important;
color: rgba(255,255,255,.84) !important;
text-align: left !important;
font: 800 13px/1.2 'DM Sans', system-ui, sans-serif !important;
}
.dream-agent-prompt:active,
.dream-agent-prompt:hover {
border-color: rgba(29,185,84,.45) !important;
background: rgba(29,185,84,.10) !important;
}
/* Agent prompt history items — two-line chip with label + relative time */
.dream-agent-prompt-history {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 2px !important;
min-height: 52px !important;
padding: 8px 13px !important;
}
.dream-agent-history-label {
font-size: 12px !important;
font-weight: 700 !important;
color: rgba(255,255,255,.88) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
.dream-agent-history-time {
font-size: 10px !important;
font-weight: 500 !important;
color: rgba(255,255,255,.38) !important;
}
/* Agent custom prompt input row */
.dream-agent-custom-wrap {
display: flex !important;
gap: 8px !important;
align-items: center !important;
}
.dream-agent-custom-input {
flex: 1 1 auto !important;
min-height: 44px !important;
padding: 10px 13px !important;
border-radius: 15px !important;
border: 1px solid rgba(255,255,255,.14) !important;
background: rgba(255,255,255,.07) !important;
color: rgba(255,255,255,.95) !important;
font: 700 13px/1.2 'DM Sans', system-ui, sans-serif !important;
outline: none !important;
-webkit-appearance: none !important;
}
.dream-agent-custom-input::placeholder {
color: rgba(255,255,255,.30) !important;
font-weight: 500 !important;
}
.dream-agent-custom-input:focus {
border-color: rgba(29,185,84,.55) !important;
background: rgba(255,255,255,.10) !important;
}
.dream-agent-custom-btn {
flex: 0 0 auto !important;
min-height: 44px !important;
padding: 10px 18px !important;
border-radius: 15px !important;
border: 1px solid rgba(29,185,84,.45) !important;
background: rgba(29,185,84,.14) !important;
color: rgba(29,185,84,1) !important;
font: 800 13px/1 'DM Sans', system-ui, sans-serif !important;
cursor: pointer !important;
white-space: nowrap !important;
}
.dream-agent-custom-btn:active {
background: rgba(29,185,84,.28) !important;
}
/* DW-FEAT-025: Agent context toggle */
.dream-agent-context-toggle {
display: flex !important;
align-items: center !important;
gap: 7px !important;
margin-top: 9px !important;
cursor: pointer !important;
user-select: none !important;
}
.dream-agent-context-toggle input[type="checkbox"] {
width: 17px !important;
height: 17px !important;
cursor: pointer !important;
accent-color: rgba(29,185,84,.80) !important;
flex: 0 0 auto !important;
}
.dream-agent-context-toggle span {
color: rgba(255,255,255,.58) !important;
font: 600 11px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .01em !important;
}
/* DW-FEAT-041: Agent conversation transcript */
.dream-conversation-list {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.dream-conversation-item {
display: flex !important;
gap: 10px !important;
align-items: flex-start !important;
padding: 10px 12px !important;
border-radius: 14px !important;
border: 1px solid rgba(255,255,255,.10) !important;
background: rgba(255,255,255,.04) !important;
}
.dream-conversation-item--user {
background: rgba(29,185,84,.08) !important;
border-color: rgba(29,185,84,.22) !important;
}
.dream-conversation-item--agent {
background: rgba(120,80,220,.08) !important;
border-color: rgba(120,80,220,.22) !important;
}
.dream-conv-icon {
font-size: 16px !important;
line-height: 1.4 !important;
flex: 0 0 auto !important;
padding-top: 1px !important;
color: rgba(255,255,255,.55) !important;
}
.dream-conversation-item--user .dream-conv-icon { color: rgba(29,185,84,.80) !important; }
.dream-conversation-item--agent .dream-conv-icon { color: rgba(120,80,220,.80) !important; }
.dream-conv-body {
flex: 1 1 auto !important;
min-width: 0 !important;
}
.dream-conv-label {
display: block !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.38) !important;
margin-bottom: 3px !important;
}
.dream-conv-text {
font-size: 13px !important;
font-weight: 600 !important;
color: rgba(255,255,255,.88) !important;
margin: 0 0 3px 0 !important;
line-height: 1.35 !important;
word-break: break-word !important;
}
.dream-conv-summary {
font-size: 11px !important;
color: rgba(255,255,255,.50) !important;
margin: 0 0 2px 0 !important;
font-style: italic !important;
}
.dream-conv-time {
display: block !important;
font-size: 10px !important;
color: rgba(255,255,255,.28) !important;
}
/* DW-FEAT-041: Draft summary card */
.dream-draft-summary-card {
padding: 12px 14px !important;
border-radius: 13px !important;
border: 1px solid rgba(29,185,84,.28) !important;
background: rgba(29,185,84,.07) !important;
margin-bottom: 10px !important;
}
.dream-draft-summary-name {
font-size: 14px !important;
font-weight: 800 !important;
color: rgba(255,255,255,.92) !important;
margin: 0 0 4px 0 !important;
}
.dream-draft-summary-meta {
font-size: 11px !important;
color: rgba(255,255,255,.48) !important;
margin: 0 0 4px 0 !important;
}
.dream-draft-summary-prompt {
font-size: 10px !important;
color: rgba(255,255,255,.32) !important;
margin: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* DW-FEAT-041: Refinement chips */
.dream-refine-chips {
display: flex !important;
flex-wrap: wrap !important;
gap: 7px !important;
}
.dream-refine-chip {
flex: 0 0 auto !important;
padding: 7px 13px !important;
border-radius: 20px !important;
border: 1px solid rgba(120,80,220,.40) !important;
background: rgba(120,80,220,.12) !important;
color: rgba(200,170,255,.92) !important;
font: 700 11px/1 'DM Sans', system-ui, sans-serif !important;
cursor: pointer !important;
white-space: nowrap !important;
min-height: 44px !important;
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
}
.dream-refine-chip:active {
background: rgba(120,80,220,.28) !important;
border-color: rgba(120,80,220,.65) !important;
}
.dream-refine-chip:hover {
border-color: rgba(120,80,220,.65) !important;
background: rgba(120,80,220,.20) !important;
}
/* DW-FEAT-042: Save-as-playlist button on draft summary card */
.dream-draft-save-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-top: 10px !important;
padding: 9px 18px !important;
border-radius: 22px !important;
border: 1px solid rgba(0,200,120,.45) !important;
background: rgba(0,200,120,.14) !important;
color: rgba(0,230,140,.95) !important;
font-size: 12.5px !important;
font-weight: 700 !important;
min-height: 44px !important;
white-space: nowrap !important;
cursor: pointer !important;
width: 100% !important;
}
.dream-draft-save-btn:active {
background: rgba(0,200,120,.28) !important;
border-color: rgba(0,200,120,.75) !important;
transform: scale(.97) !important;
}
.dream-draft-save-btn:hover {
border-color: rgba(0,200,120,.75) !important;
background: rgba(0,200,120,.20) !important;
}
/* Row press-state + motion polish: tactile feedback for simplified rows
Model: Play button + tappable row body + single More overflow.
All press feedback here is additive — no new visible actions introduced. */
.dream-search-result-row,
.dream-collection-row,
.dream-collection-track-main,
.dream-collection-table-open,
.dream-playlist-track-row,
.dream-track-detail-action,
.dream-row-more-action,
.dream-player-preview-row {
transition:
background 140ms ease,
border-color 140ms ease,
box-shadow 140ms ease,
transform 110ms cubic-bezier(.22,.68,0,1.2) !important;
-webkit-transition:
background 140ms ease,
border-color 140ms ease,
box-shadow 140ms ease,
transform 110ms cubic-bezier(.22,.68,0,1.2) !important;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
touch-action: pan-y manipulation !important;
}
.dream-search-result-row:active,
.dream-collection-row:active,
.dream-collection-track-main:active,
.dream-collection-table-open:active,
.dream-playlist-track-row:active {
background: rgba(255,255,255,.10) !important;
border-color: rgba(255,255,255,.16) !important;
transform: scale(0.975) !important;
box-shadow: 0 2px 14px rgba(0,0,0,.28) !important;
}
.dream-row-more-action:active {
background: rgba(255,255,255,.11) !important;
border-color: rgba(255,255,255,.20) !important;
transform: scale(0.93) !important;
box-shadow: 0 1px 6px rgba(0,0,0,.22) !important;
}
.dream-player-preview-row:active {
background: rgba(255,255,255,.07) !important;
transform: scale(0.982) !important;
}
.dream-track-detail-action {
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
}
.dream-empty {
padding: 13px !important;
border-radius: 16px !important;
border: 1px dashed rgba(255,255,255,.14) !important;
background: rgba(255,255,255,.045) !important;
color: rgba(255,255,255,.76) !important;
font: 650 12px/1.35 'DM Sans', system-ui, sans-serif !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
}
@media (max-width: 520px) {
.dream-collection-row {
grid-template-columns: 34px minmax(0, 1fr) auto !important;
padding: 9px !important;
}
.dream-collection-row .dream-row-pill,
.dream-collection-row .dream-status-chip {
padding: 6px 7px !important;
font-size: 9px !important;
}
}
/* Phone polish v9: remove Android scroll chrome/artifacts and soften app header */
body.dream-app-open,
body.dream-app-open #app,
body.dream-app-open .dream-app-sheet,
body.dream-app-open .dream-app-panel,
body.dream-app-open .dream-app-content {
overflow-x: hidden !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
overscroll-behavior: contain !important;
}
body.dream-app-open::-webkit-scrollbar,
body.dream-app-open #app::-webkit-scrollbar,
body.dream-app-open .dream-app-sheet::-webkit-scrollbar,
body.dream-app-open .dream-app-panel::-webkit-scrollbar,
body.dream-app-open .dream-app-content::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
@media (max-width: 520px) {
.dream-app-header {
padding: max(14px, env(safe-area-inset-top)) 16px 8px !important;
gap: 10px !important;
}
.dream-app-header h1 {
font-size: clamp(22px, 7.2vw, 28px) !important;
letter-spacing: -.05em !important;
}
.dream-app-close {
width: 34px !important;
height: 34px !important;
font-size: 14px !important;
flex: 0 0 34px !important;
}
.dream-app-tabs {
padding-left: 16px !important;
padding-right: 16px !important;
padding-bottom: 12px !important;
}
}
/* Phone polish v10: mask Android's unavoidable overlay scroll indicator at the far edge */
body.dream-app-open .dream-app-panel::after {
display: none !important;
}
@media (min-width: 780px) {
body.dream-app-open .dream-app-panel::after { display: none !important; }
}
/* Phone polish v11: push the mobile app scroll thumb outside the clipped panel */
@media (max-width: 520px) {
body.dream-app-open .dream-app-panel {
overflow: hidden !important;
}
body.dream-app-open .dream-app-content {
width: calc(100% + 28px) !important;
margin-right: -28px !important;
padding-right: calc(16px + 28px) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
body.dream-app-open .dream-app-tabs,
body.dream-app-open .dream-app-header {
width: 100% !important;
}
}
/* Phone polish v12: native edge handle is system UI; remove page-side hacks and simplify surfaces */
@media (max-width: 520px) {
body.dream-app-open .dream-app-sheet {
overflow: hidden !important;
}
body.dream-app-open .dream-app-panel {
max-width: 100vw !important;
overflow: hidden !important;
}
body.dream-app-open .dream-app-panel::after {
display: none !important;
content: none !important;
}
body.dream-app-open .dream-app-content {
width: 100% !important;
margin-right: 0 !important;
padding-left: 16px !important;
padding-right: 16px !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
overflow-y: auto !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
scrollbar-color: transparent transparent !important;
-webkit-overflow-scrolling: touch !important;
}
body.dream-app-open .dream-app-content::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
background: transparent !important;
}
body.dream-app-open .dream-app-header {
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: start !important;
padding: max(14px, env(safe-area-inset-top)) 16px 10px !important;
gap: 9px !important;
}
body.dream-app-open .dream-app-header h1 {
font-size: clamp(22px, 7vw, 27px) !important;
letter-spacing: -.055em !important;
}
body.dream-app-open .dream-app-header p {
margin-bottom: 5px !important;
}
body.dream-app-open .dream-app-header-actions {
gap: 6px !important;
}
body.dream-app-open .dream-app-account {
min-height: 34px !important;
min-width: 74px !important;
padding: 0 10px !important;
font-size: 9.8px !important;
letter-spacing: .09em !important;
}
body.dream-app-open .dream-app-close {
width: 30px !important;
height: 30px !important;
flex: 0 0 30px !important;
background: rgba(255,255,255,.035) !important;
border-color: rgba(255,255,255,.055) !important;
color: rgba(255,255,255,.56) !important;
font-size: 12px !important;
}
body.dream-app-open .dream-app-tabs {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 5px !important;
padding: 0 16px 10px !important;
}
body.dream-app-open .dream-app-tabs button {
padding: 7px 5px !important;
font-size: 9.8px !important;
letter-spacing: .06em !important;
background: rgba(255,255,255,.043) !important;
border-color: rgba(255,255,255,.055) !important;
color: rgba(255,255,255,.76) !important;
}
body.dream-app-open .dream-app-tabs button.active {
background: rgba(255,255,255,.93) !important;
color: #050506 !important;
border-color: rgba(255,255,255,.93) !important;
}
body.dream-app-open .dream-hero,
body.dream-app-open .dream-profile-card,
body.dream-app-open .dream-section,
body.dream-app-open .dream-tier-card,
body.dream-app-open .dream-metric {
background: rgba(255,255,255,.045) !important;
border-color: rgba(255,255,255,.062) !important;
box-shadow: none !important;
}
body.dream-app-open .dream-hero {
padding: 17px !important;
border-radius: 20px !important;
margin-bottom: 10px !important;
}
body.dream-app-open .dream-hero h2,
body.dream-app-open .dream-profile-card h2 {
font-size: clamp(24px, 6.8vw, 34px) !important;
margin-bottom: 8px !important;
}
body.dream-app-open .dream-hero p:not(.dream-kicker),
body.dream-app-open .dream-profile-card p:not(.dream-kicker) {
font-size: 13px !important;
line-height: 1.36 !important;
color: rgba(255,255,255,.58) !important;
}
body.dream-app-open .dream-section {
padding: 13px !important;
margin-bottom: 10px !important;
border-radius: 19px !important;
}
body.dream-app-open .dream-section h3 {
font-size: 16px !important;
margin-bottom: 10px !important;
}
body.dream-app-open .dream-agent-prompts {
gap: 6px !important;
}
body.dream-app-open .dream-agent-prompt {
min-height: 39px !important;
padding: 9px 11px !important;
border-radius: 12px !important;
background: rgba(255,255,255,.032) !important;
border-color: rgba(255,255,255,.055) !important;
color: rgba(255,255,255,.82) !important;
font-size: 12.5px !important;
}
body.dream-app-open .dream-collection-row {
border-radius: 14px !important;
background: rgba(10,10,16,0.45) !important;
border-color: rgba(255,255,255,.10) !important;
}
}
/* FIX 2: Library route — ensure adequate bottom padding on desktop so lower sections
(Liked songs, Private tracks, etc.) clear the mini-player strip (~80–100px). */
@media (min-width: 521px) {
body.dream-app-open[data-dream-route="library"] #minimal-ui .dream-app-content {
padding-bottom: 180px !important;
}
}
/* DW-VIS-193 + DW-VIS-BOTTOM-NAV-CONTENT-OVERLAP: Phone — increase bottom clearance so
lower sections clear the stacked bottom chrome (mini-player ~52px + bottom nav ~65px +
safe-area ~24px). Increased from 180px to 220px to ensure full content reaches below
the tab bar top at ~650px on 384px viewport. */
@media (max-width: 520px) {
body.dream-app-open[data-dream-route="library"] #minimal-ui .dream-app-content {
padding-bottom: max(224px, calc(56px + 72px + env(safe-area-inset-bottom) + 24px)) !important;
}
}
/* Phone polish v13: let the cinematic video read through the app instead of becoming a black sheet */
body.dream-app-open .dream-app-sheet {
background: rgba(0,0,0,.16) !important;
}
body.dream-app-open .dream-app-sheet::before {
background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.42) 44%, rgba(0,0,0,.62)) !important;
}
body.dream-app-open .dream-app-panel {
background: linear-gradient(180deg, rgba(9,10,14,.35), rgba(5,5,8,.55)) !important;
backdrop-filter: blur(22px) saturate(1.08) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
}
@media (max-width: 520px) {
body.dream-app-open .dream-app-panel {
background: linear-gradient(180deg, rgba(9,10,14,.28), rgba(5,5,8,.48)) !important;
}
body.dream-app-open .dream-hero,
body.dream-app-open .dream-profile-card,
body.dream-app-open .dream-section,
body.dream-app-open .dream-tier-card,
body.dream-app-open .dream-metric {
background: rgba(12,13,18,.38) !important;
border-color: rgba(255,255,255,.07) !important;
backdrop-filter: blur(16px) saturate(1.06) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.06) !important;
}
body.dream-app-open .dream-agent-prompt,
body.dream-app-open .dream-collection-row,
body.dream-app-open .dream-empty {
background: rgba(7,8,11,.30) !important;
border-color: rgba(255,255,255,.06) !important;
}
body.dream-app-open .dream-app-tabs button {
background: rgba(7,8,11,.34) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
}
body.dream-app-open .dream-app-tabs button.active {
background: rgba(255,255,255,.92) !important;
}
}
/* v15 DW-FEAT-038: backend-sync library status — improved contrast, visibility, and signed-in chip */
.dream-library-source {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
width: fit-content !important;
max-width: 100% !important;
margin: 12px 0 0 !important;
padding: 8px 12px !important;
border: 1px solid rgba(255,255,255,.15) !important;
border-radius: 999px !important;
background: rgba(4,6,10,.38) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
backdrop-filter: blur(14px) saturate(130%) !important;
}
.dream-library-source strong {
color: rgba(255,255,255,1) !important;
font: 850 10.5px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
.dream-library-source span {
color: rgba(255,255,255,.72) !important;
font: 600 11.5px/1.2 'DM Sans', system-ui, sans-serif !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Synced state: stronger visual signal for signed-in users */
body.dream-app-open .dream-library-source.dream-library-source--synced {
border-color: rgba(0,200,120,.28) !important;
background: rgba(0,140,80,.18) !important;
}
body.dream-app-open .dream-library-source.dream-library-source--synced strong {
color: rgba(0,255,140,.95) !important;
}
@media (max-width: 520px) {
.dream-library-source {
width: 100% !important;
justify-content: flex-start !important;
padding: 7px 11px !important;
}
.dream-library-source span {
font-size: 10.5px !important;
}
}
.dream-library-status-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 10px !important;
margin-top: 12px !important;
}
.dream-library-status-row .dream-library-source {
flex: 1 1 260px !important;
margin: 0 !important;
}
.dream-hero-actions--library {
display: flex !important;
margin-top: 10px !important;
}
.dream-hero-create-playlist-form {
margin-top: 12px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.dream-hero-playlist-name-input {
width: 100% !important;
box-sizing: border-box !important;
padding: 9px 14px !important;
font-size: 14px !important;
background: rgba(255,255,255,0.07) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
border-radius: 12px !important;
color: #fff !important;
outline: none !important;
}
.dream-hero-playlist-name-input::placeholder {
color: rgba(255,255,255,0.35) !important;
}
.dream-hero-playlist-name-input:focus {
border-color: rgba(255,255,255,0.38) !important;
background: rgba(255,255,255,0.10) !important;
}
.dream-hero-create-playlist-actions {
display: flex !important;
gap: 8px !important;
}
.dream-library-toolbar {
display: grid !important;
gap: 14px !important;
margin-bottom: 14px !important;
padding: 16px 18px !important;
border: 1px solid rgba(255,255,255,.09) !important;
border-radius: 22px !important;
background: rgba(10,12,18,.66) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.dream-library-toolbar-head {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 12px !important;
}
.dream-library-toolbar-head h3 {
margin: 0 !important;
font: 800 18px/1.05 'DM Sans', system-ui, sans-serif !important;
color: rgba(255,255,255,.96) !important;
}
.dream-library-toolbar-meta {
max-width: 320px !important;
color: rgba(255,255,255,.56) !important;
font: 600 12px/1.4 'DM Sans', system-ui, sans-serif !important;
text-align: right !important;
}
.dream-library-toolbar-controls {
display: grid !important;
gap: 12px !important;
}
.dream-library-toolbar-utility-row {
display: grid !important;
gap: 10px !important;
min-width: 0 !important;
overflow: visible !important;
grid-template-columns: minmax(0, 1fr) min-content !important;
}
.dream-library-search-field {
display: grid !important;
gap: 7px !important;
min-width: 0 !important;
}
.dream-library-search-field span {
color: rgba(255,255,255,.58) !important;
font: 800 10px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
}
#dreamLibrarySearchInput {
width: 100% !important;
border-radius: 14px !important;
border: 1px solid rgba(255,255,255,.14) !important;
background: rgba(255,255,255,.045) !important;
color: rgba(255,255,255,.94) !important;
padding: 12px 14px !important;
}
#dreamLibrarySearchInput::placeholder {
color: rgba(255,255,255,.36) !important;
}
#dreamLibrarySearchInput:focus {
outline: none !important;
border-color: rgba(30,215,96,.55) !important;
background: rgba(255,255,255,.07) !important;
}
/* Playlist filter input — DW-FEAT-079 */
.dream-playlist-filter-wrap {
width: 100% !important;
margin-bottom: 6px !important;
}
.dream-playlist-filter-label {
display: grid !important;
gap: 5px !important;
min-width: 0 !important;
}
.dream-playlist-filter-label span {
color: rgba(255,255,255,.58) !important;
font: 800 10px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
}
#dreamPlaylistFilterInput {
width: 100% !important;
border-radius: 12px !important;
border: 1px solid rgba(255,255,255,.14) !important;
background: rgba(255,255,255,.045) !important;
color: rgba(255,255,255,.94) !important;
padding: 10px 14px !important;
font-size: 13px !important;
min-height: 44px !important;
box-sizing: border-box !important;
}
#dreamPlaylistFilterInput::placeholder {
color: rgba(255,255,255,.36) !important;
}
/* DW-FEAT-092: playlist sort pills */
.dream-playlist-sort-pills {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin-bottom: 6px !important;
}
.dream-sort-pill {
border-radius: 24px !important;
border: 1px solid rgba(255,255,255,.18) !important;
background: rgba(255,255,255,.05) !important;
color: rgba(255,255,255,.72) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .04em !important;
padding: 6px 12px !important;
min-height: 44px !important;
cursor: pointer !important;
transition: background .15s, color .15s, border-color .15s !important;
}
.dream-sort-pill.active {
background: rgba(30,215,96,.18) !important;
border-color: rgba(30,215,96,.55) !important;
color: rgba(30,215,96,.95) !important;
}
.dream-sort-pill:active {
background: rgba(30,215,96,.28) !important;
}
/* DW-FEAT-099: creator track sort pills — ≥44px touch targets on phone */
.dream-creator-sort-pills {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin-bottom: 6px !important;
}
.dream-creator-sort-pills .dream-sort-pill {
min-height: 44px !important;
padding: 6px 12px !important;
}
/* DW-FEAT-098: playlist visibility quick-filter pills */
.dream-playlist-visibility-pills {
display: flex !important;
flex-wrap: wrap !important;
gap: 5px !important;
margin-bottom: 4px !important;
}
.dream-visibility-filter-pill {
border-radius: 24px !important;
border: 1px solid rgba(255,255,255,.14) !important;
background: rgba(255,255,255,.04) !important;
color: rgba(255,255,255,.6) !important;
font-size: 10.5px !important;
font-weight: 600 !important;
letter-spacing: .04em !important;
padding: 5px 10px !important;
min-height: 32px !important;
cursor: pointer !important;
transition: background .15s, color .15s, border-color .15s !important;
}
.dream-visibility-filter-pill.active {
background: rgba(168,100,255,.18) !important;
border-color: rgba(168,100,255,.5) !important;
color: rgba(168,100,255,.95) !important;
}
.dream-visibility-filter-pill:active {
background: rgba(168,100,255,.28) !important;
}
#dreamPlaylistFilterInput:focus {
outline: none !important;
border-color: rgba(30,215,96,.55) !important;
background: rgba(255,255,255,.07) !important;
}
.dream-library-filter-row,
.dream-library-view-modes,
.dream-library-workspace-modes {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.dream-library-toolbar-mode-cluster {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
flex-direction: row !important;
align-items: center !important;
}
/* Combine filter + view mode + layout into a single compact row */
.dream-library-toolbar .dream-library-filter-row,
.dream-library-toolbar .dream-library-view-modes,
.dream-library-toolbar .dream-library-workspace-modes {
display: inline-flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
.dream-library-toolbar [role="tablist"] {
display: inline-flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
gap: 6px !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
}
.dream-library-toolbar [role="tablist"]::-webkit-scrollbar {
display: none !important;
}
/* DW-FEAT-124: two-row layout for My Playlists section heading */
.dream-playlists-head-top {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
align-items: center !important;
margin-bottom: 6px !important;
}
.dream-playlists-head-row {
display: flex !important;
flex-wrap: nowrap !important;
gap: 10px !important;
align-items: center !important;
}
.dream-playlists-head-row h3 { margin: 0 !important; flex: 0 0 auto !important; }
.dream-playlists-head-row .dream-create-playlist-action { flex: 0 0 auto !important; }
.dream-playlists-head-row .dream-status-chip { flex: 0 0 auto !important; }
.dream-section--library-playlists .dream-section-head {
flex-direction: column !important;
align-items: stretch !important;
}
.dream-library-filter {
appearance: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
min-height: 34px !important;
padding: 7px 11px !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,.1) !important;
background: rgba(255,255,255,.04) !important;
color: rgba(255,255,255,.8) !important;
font: 700 11px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-library-view-mode,
.dream-library-workspace-mode {
appearance: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 34px !important;
padding: 7px 12px !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,.1) !important;
background: rgba(255,255,255,.03) !important;
color: rgba(255,255,255,.72) !important;
font: 700 11px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-library-filter span {
color: rgba(255,255,255,.52) !important;
font-size: 10px !important;
}
.dream-library-filter.active,
.dream-library-view-mode.active,
.dream-library-workspace-mode.active {
background: rgba(30,215,96,.14) !important;
border-color: rgba(30,215,96,.34) !important;
color: rgba(216,255,230,.98) !important;
}
.dream-library-filter.active span {
color: rgba(216,255,230,.8) !important;
}
/* Library Sub-Tabs — mobile-first prominent tab bar (DW-FEAT-056) */
.dream-library-sub-tabs {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 6px !important;
padding: 10px 14px !important;
position: relative !important;
z-index: 5 !important;
}
.dream-library-sub-tab {
appearance: none !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
min-height: 44px !important;
padding: 6px 4px !important;
border-radius: 10px !important;
border: 1px solid rgba(255,255,255,.1) !important;
background: rgba(255,255,255,.04) !important;
color: rgba(255,255,255,.68) !important;
font: 600 10.5px/1 'DM Sans', system-ui, sans-serif !important;
text-align: center !important;
cursor: pointer !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
.dream-library-sub-tab span {
color: rgba(255,255,255,.45) !important;
font-size: 11px !important;
font-weight: 400 !important;
line-height: 1 !important;
}
.dream-library-sub-tab.active {
background: rgba(30,215,96,.14) !important;
border-color: rgba(30,215,96,.34) !important;
color: rgba(216,255,230,.98) !important;
}
.dream-library-sub-tab.active span {
color: rgba(216,255,230,.8) !important;
}
@media (min-width: 1100px) {
.dream-library-toolbar {
grid-template-columns: minmax(0, 1fr) !important;
align-items: stretch !important;
gap: 10px !important;
padding: 12px 14px !important;
}
.dream-library-toolbar-head {
justify-content: flex-start !important;
gap: 0 !important;
}
.dream-library-toolbar-controls {
align-items: stretch !important;
gap: 8px !important;
}
.dream-library-toolbar-utility-row {
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: start !important;
gap: 10px !important;
}
.dream-library-toolbar-mode-cluster {
justify-items: end !important;
align-self: start !important;
}
.dream-library-workspace-modes,
.dream-library-view-modes {
justify-content: flex-start !important;
}
}
@media (max-width: 640px) {
.dream-library-toolbar {
padding: 14px !important;
gap: 12px !important;
overflow-x: auto !important;
scrollbar-width: none !important;
position: relative !important;
/* Layered gradient fade on right edge to indicate scroll affordance */
background-image: linear-gradient(90deg, rgba(10,12,18,0), rgba(10,12,18,.72)) !important;
background-position: right center !important;
background-size: 32px 100% !important;
background-repeat: no-repeat !important;
}
.dream-library-toolbar::-webkit-scrollbar {
display: none !important;
}
.dream-library-toolbar::after {
content: '' !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 32px !important;
background: linear-gradient(90deg, rgba(10,12,18,0), rgba(10,12,18,.72)) !important;
pointer-events: none !important;
z-index: 10 !important;
border-radius: 0 22px 22px 0 !important;
}
.dream-library-toolbar-head {
display: grid !important;
}
.dream-library-toolbar-meta {
max-width: none !important;
text-align: left !important;
}
.dream-library-workspace-modes,
.dream-library-view-modes {
/* Removed: display: none !important — allow buttons to wrap/flex on narrow screens */
justify-content: flex-start !important;
}
/* DW-VIS-NEW-43: Shared tab clipped — filter row must scroll horizontally on narrow screens, not wrap */
.dream-library-filter-row {
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: none !important;
}
.dream-library-filter-row::-webkit-scrollbar {
display: none !important;
}
.dream-library-toolbar-mode-cluster {
flex-shrink: 0 !important;
}
.dream-library-status-row {
flex-wrap: wrap !important;
overflow-x: visible !important;
}
.dream-hero--library .dream-library-status-row {
flex-wrap: wrap !important;
}
}
.dream-empty--library-playlists {
position: relative !important;
z-index: 4 !important;
padding: 11px 12px !important;
border-radius: 14px !important;
font-size: 11px !important;
}
.dream-empty--library-playlists .dream-create-playlist-action {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 44px !important;
margin-top: 10px !important;
padding: 0 14px !important;
}
/* v16 mobile polish: de-crowd the top of the app sheet and tighten card rhythm */
@media (max-width: 520px) {
body.dream-app-open .dream-app-header {
align-items: flex-start !important;
padding: max(12px, env(safe-area-inset-top)) 14px 6px !important;
gap: 10px !important;
}
body.dream-app-open .dream-app-header > div {
min-width: 0 !important;
flex: 1 1 auto !important;
padding-right: 2px !important;
}
body.dream-app-open .dream-app-header p,
body.dream-app-open .dream-kicker {
margin-bottom: 4px !important;
font-size: 9px !important;
letter-spacing: .16em !important;
color: rgba(255,255,255,.46) !important;
}
body.dream-app-open .dream-app-header h1 {
font-size: clamp(20px, 6.6vw, 24px) !important;
line-height: .98 !important;
letter-spacing: -.045em !important;
}
body.dream-app-open .dream-app-close {
width: 28px !important;
height: 28px !important;
flex: 0 0 28px !important;
margin-top: 2px !important;
border-color: rgba(255,255,255,.09) !important;
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.72) !important;
font-size: 12px !important;
}
body.dream-app-open .dream-app-tabs {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
overflow-x: auto !important;
gap: 4px !important;
padding: 0 14px 8px !important;
scroll-padding-left: 14px !important;
mask-image: none !important;
-webkit-mask-image: none !important;
}
body.dream-app-open .dream-app-tabs button {
width: auto !important;
flex: 0 0 auto !important;
min-height: 30px !important;
padding: 6px 6px !important;
font-size: 9.25px !important;
letter-spacing: .02em !important;
white-space: nowrap !important;
background: rgba(7,8,11,.28) !important;
border-color: rgba(255,255,255,.075) !important;
color: rgba(255,255,255,.68) !important;
}
body.dream-app-open .dream-app-tabs button.active {
background: rgba(255,255,255,.95) !important;
border-color: rgba(255,255,255,.95) !important;
color: #050506 !important;
box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
}
body.dream-app-open .dream-app-content {
padding: 0 14px calc(108px + env(safe-area-inset-bottom)) !important;
}
body.dream-app-open .dream-hero,
body.dream-app-open .dream-profile-card {
padding: 15px !important;
border-radius: 18px !important;
margin-bottom: 9px !important;
}
body.dream-app-open .dream-hero h2,
body.dream-app-open .dream-profile-card h2 {
font-size: clamp(22px, 5.8vw, 28px) !important;
margin-bottom: 6px !important;
}
body.dream-app-open .dream-hero p:not(.dream-kicker),
body.dream-app-open .dream-profile-card p:not(.dream-kicker) {
font-size: 12px !important;
line-height: 1.32 !important;
}
body.dream-app-open .dream-hero-actions,
body.dream-app-open .dream-action-grid {
gap: 6px !important;
margin-top: 12px !important;
}
body.dream-app-open .dream-hero-actions .dream-primary,
body.dream-app-open .dream-hero-actions .dream-secondary,
body.dream-app-open .dream-action-grid button {
min-height: 44px !important;
padding: 9px 11px !important;
font-size: 10.5px !important;
}
body.dream-app-open .dream-section,
body.dream-app-open .dream-tier-card,
body.dream-app-open .dream-metric {
padding: 11px !important;
border-radius: 16px !important;
margin-bottom: 8px !important;
}
body.dream-app-open .dream-section h3 {
margin-bottom: 8px !important;
font-size: 15px !important;
}
body.dream-app-open .dream-metrics {
gap: 6px !important;
margin-bottom: 8px !important;
}
}
/* DREAMWAVE shell polish — account, playlist CRUD, and track detail surfaces */
.dream-app-panel {
width: min(1120px, calc(100vw - 28px)) !important;
}
.dream-app-content {
padding: 0 22px 36px !important;
}
.dream-app-content > * {
min-width: 0 !important;
}
.dream-hero,
.dream-section,
.dream-profile-card,
.dream-track-detail-surface {
border-radius: 28px !important;
backdrop-filter: blur(6px) saturate(110%) !important;
}
.dream-hero {
padding: clamp(22px, 4vw, 34px) !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
}
.dream-hero h2,
.dream-profile-card h2,
.dream-track-detail-copy h3 {
font-size: clamp(26px, 3.6vw, 40px) !important;
line-height: 1.02 !important;
max-width: 100% !important;
text-wrap: balance !important;
}
.dream-metrics {
gap: 14px !important;
margin: 16px 0 18px !important;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
}
.dream-section,
.dream-track-detail-surface {
padding: clamp(18px, 3vw, 26px) !important;
margin-top: 16px !important;
}
.dream-section-head {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 14px !important;
margin-bottom: 16px !important;
}
.dream-library-source,
.dream-inline-feedback,
.dream-account-helper {
border: 1px solid rgba(255,255,255,.10) !important;
background: rgba(255,255,255,.045) !important;
border-radius: 18px !important;
padding: 12px 14px !important;
margin-top: 14px !important;
}
.dream-inline-feedback[hidden] {
display: none !important;
}
.dream-account-subnav {
display: flex !important;
flex-wrap: nowrap !important;
gap: 6px !important;
margin-bottom: 14px !important;
overflow-x: auto !important;
scrollbar-width: none !important;
}
.dream-account-subnav-btn,
.dream-playlist-select,
.dream-action-grid button,
.dream-close-detail-action {
border: 1px solid rgba(255,255,255,.14) !important;
background: rgba(255,255,255,.04) !important;
color: #fff !important;
border-radius: 14px !important;
transition: transform .18s ease, background .18s ease, border-color .18s ease !important;
font-size: 12px !important;
}
.dream-account-subnav-btn,
.dream-close-detail-action {
padding: 7px 10px !important;
font-size: 11px !important;
white-space: nowrap !important;
min-height: 44px !important;
}
.dream-account-subnav-btn {
text-align: center !important;
justify-content: center !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
min-height: 44px !important;
}
.dream-hero-actions {
display: flex !important;
gap: 9px !important;
flex-wrap: wrap !important;
margin-top: 16px !important;
}
.dream-hero-actions button,
.dream-section-head button {
min-height: 44px !important;
}
.dream-account-subnav-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 18px !important;
height: 18px !important;
padding: 0 6px !important;
border-radius: 999px !important;
background: rgba(255, 113, 206, 0.22) !important;
border: 1px solid rgba(255, 179, 226, 0.42) !important;
color: rgba(255,255,255,.96) !important;
font: 800 10px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-account-subnav-btn.active .dream-account-subnav-badge {
background: rgba(255, 113, 206, 0.3) !important;
}
.dream-notification-list {
display: grid !important;
gap: 10px !important;
margin-top: 12px !important;
}
.dream-notification-row-wrap {
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 18px !important;
background: rgba(255,255,255,.03) !important;
overflow: hidden !important;
}
.dream-notification-row-wrap.is-unread {
border-color: rgba(255, 113, 206, 0.28) !important;
box-shadow: 0 0 0 1px rgba(255, 113, 206, 0.08) inset !important;
}
.dream-notification-type-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
font-size: 15px !important;
line-height: 1 !important;
flex-shrink: 0 !important;
margin-right: 6px !important;
}
.dream-notification-read-action {
min-height: 44px !important;
padding: 8px 14px !important;
}
.dream-activity-action {
min-height: 44px !important;
}
.dream-notification-row-meta {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
padding: 0 14px 14px !important;
}
.dream-notification-row-state {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
color: rgba(255,255,255,.68) !important;
font: 800 10px/1 'DM Sans', system-ui, sans-serif !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
}
.dream-notification-row-wrap.is-unread .dream-notification-row-state {
color: rgba(255, 190, 228, 0.96) !important;
}
.dream-notification-actions {
margin-top: 14px !important;
}
.dream-notification-inbox-card--full .dream-notification-list {
gap: 12px !important;
}
.dream-account-subnav-btn.active,
.dream-playlist-select.active {
background: rgba(156, 111, 255, .22) !important;
border-color: rgba(201, 176, 255, .55) !important;
}
/* Narrow phone — tighter sub-tabs */
@media (max-width: 420px) {
.dream-account-subnav {
gap: 5px !important;
margin-bottom: 10px !important;
}
.dream-account-subnav-btn {
padding: 7px 10px !important;
font-size: 11px !important;
border-radius: 12px !important;
min-height: 44px !important;
}
}
.dream-playlist-select {
width: 100% !important;
text-align: left !important;
}
.dream-playlist-sidebar .dream-playlist-select {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 4px !important;
padding: 14px 16px !important;
}
.dream-playlist-sidebar-preview,
.dream-collection-playlist-preview {
display: block !important;
margin-top: 4px !important;
color: rgba(255,255,255,.52) !important;
font: 600 10.5px/1.25 'DM Sans', system-ui, sans-serif !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-playlist-select em,
.dream-playlist-track-row em,
.dream-row-card .dream-row-hint,
.dream-account-helper,
.dream-library-source span,
.dream-inline-feedback {
color: rgba(255,255,255,.70) !important;
font-style: normal !important;
}
.dream-account-github-auth {
background: var(--dw-green) !important;
color: #050506 !important;
border-color: var(--dw-green) !important;
}
.dream-account-github-auth:hover,
.dream-account-github-auth:focus-visible {
background: color-mix(in srgb, var(--dw-green) 85%, white 15%) !important;
border-color: color-mix(in srgb, var(--dw-green) 85%, white 15%) !important;
}
.dream-library-workspace {
display: grid !important;
grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) !important;
gap: 18px !important;
}
.dream-library-workspace > *,
.dream-track-detail-grid > * {
min-width: 0 !important;
}
.dream-playlist-sidebar,
.dream-playlist-panel,
.dream-track-detail-grid {
display: grid !important;
gap: 16px !important;
}
.dream-playlist-list {
display: grid !important;
gap: 10px !important;
}
.dream-track-meta-card,
.dream-track-editor {
border: 1px solid rgba(255,255,255,.10) !important;
background: rgba(9,11,18,.72) !important;
border-radius: 24px !important;
padding: 18px !important;
}
.dream-form-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
}
.dream-form-grid label {
display: grid !important;
gap: 8px !important;
}
.dream-form-span-2 {
grid-column: span 2 !important;
}
.dream-form-grid input,
.dream-form-grid textarea,
.dream-form-grid select {
width: 100% !important;
border-radius: 16px !important;
border: 1px solid rgba(255,255,255,.14) !important;
background: rgba(255,255,255,.04) !important;
color: #fff !important;
padding: 13px 14px !important;
}
.dream-form-grid textarea {
min-height: 110px !important;
resize: vertical !important;
}
.dream-track-detail-head {
display: grid !important;
grid-template-columns: 108px minmax(0, 1fr) auto !important;
gap: 18px !important;
align-items: center !important;
}
.dream-track-detail-art {
width: 108px !important;
height: 108px !important;
object-fit: cover !important;
border-radius: 24px !important;
}
.dream-detail-pills,
.dream-hero-actions,
.dream-row-actions,
.dream-action-grid {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
}
.dream-action-grid button,
.dream-row-pill,
.dream-primary,
.dream-secondary {
min-height: 42px !important;
}
.dream-track-detail-grid {
grid-template-columns: 1.2fr .95fr !important;
margin-top: 18px !important;
}
.dream-provenance-static .dream-provenance {
display: block !important;
border-top: 0 !important;
padding-top: 0 !important;
}
.dream-provenance-row {
display: flex !important;
justify-content: space-between !important;
gap: 14px !important;
padding: 8px 0 !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.dream-provenance-row:last-child {
border-bottom: 0 !important;
}
.dream-playlist-track-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 12px !important;
align-items: center !important;
padding: 14px 0 !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.dream-playlist-track-row:last-child {
border-bottom: 0 !important;
}
.dream-playlist-track-row--matched {
margin-bottom: 8px !important;
padding: 12px 10px !important;
border: 1px solid rgba(30,215,96,.20) !important;
border-radius: 16px !important;
border-bottom-color: rgba(30,215,96,.20) !important;
background: linear-gradient(135deg, rgba(30,215,96,.10), rgba(9,11,18,.88)) !important;
}
.dream-playlist-track-row--matched:last-child {
margin-bottom: 0 !important;
}
.dream-status-chip--playlist-match {
background: rgba(30,215,96,.16) !important;
border-color: rgba(30,215,96,.28) !important;
color: rgba(235,255,242,.96) !important;
}
.dream-playlist-search-copy {
margin: 0 0 12px !important;
color: rgba(255,255,255,.72) !important;
font: 600 11px/1.45 'DM Sans', system-ui, sans-serif !important;
}
.dream-track-meta-card--playlist-search-matches {
border-color: rgba(30,215,96,.18) !important;
background: linear-gradient(160deg, rgba(19,31,24,.78), rgba(9,11,18,.88)) !important;
}
.dream-playlist-track-main {
display: flex !important;
gap: 12px !important;
align-items: center !important;
}
button.dream-collection-row--playlist {
display: grid !important;
grid-template-columns: 30px minmax(0, 1fr) minmax(0, max-content) !important;
gap: 12px !important;
align-items: center !important;
padding: 12px 14px !important;
overflow: hidden !important;
}
.dream-library-table {
border: 1px solid rgba(255,255,255,.1) !important;
border-radius: 20px !important;
background: rgba(7,9,14,.5) !important;
overflow: hidden !important;
}
.dream-library-table-head,
button.dream-collection-table-row--playlist,
.dream-collection-table-row,
.dream-playlist-track-row--table {
display: grid !important;
grid-template-columns: minmax(0, 1.35fr) minmax(120px, .72fr) minmax(160px, 1fr) auto !important;
gap: 14px !important;
align-items: center !important;
}
.dream-library-table-head {
padding: 12px 16px 10px !important;
background: rgba(255,255,255,.04) !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.dream-library-table-head span {
color: rgba(255,255,255,.54) !important;
font: 800 10px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
}
.dream-library-table-body {
display: grid !important;
}
button.dream-collection-table-row--playlist,
.dream-collection-table-row,
.dream-playlist-track-row--table {
width: 100% !important;
padding: 12px 16px !important;
border: 0 !important;
border-top: 1px solid rgba(255,255,255,.06) !important;
background: transparent !important;
text-align: left !important;
}
button.dream-collection-table-row--playlist:first-child,
.dream-collection-table-row:first-child,
.dream-playlist-track-row--table:first-child {
border-top: 0 !important;
}
.dream-collection-table-main,
.dream-playlist-track-table-main {
display: flex !important;
align-items: center !important;
gap: 12px !important;
min-width: 0 !important;
}
.dream-collection-table-open,
.dream-collection-track-main {
appearance: none !important;
border: 0 !important;
background: transparent !important;
color: inherit !important;
text-align: left !important;
padding: 0 !important;
min-width: 0 !important;
}
.dream-collection-table-open {
display: flex !important;
align-items: center !important;
gap: 12px !important;
min-width: 0 !important;
}
.dream-collection-track-main {
display: flex !important;
align-items: center !important;
gap: 12px !important;
min-width: 0 !important;
}
.dream-collection-table-main--playlist {
gap: 10px !important;
}
.dream-collection-table-copy,
.dream-playlist-track-table-copy,
.dream-collection-table-preview {
display: grid !important;
gap: 4px !important;
min-width: 0 !important;
}
.dream-collection-table-copy strong,
.dream-collection-table-copy em,
.dream-playlist-track-table-copy strong,
.dream-playlist-track-table-copy em,
.dream-collection-table-artist,
.dream-collection-table-meta,
.dream-playlist-track-table-artist,
.dream-playlist-track-table-meta {
min-width: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-collection-table-preview {
color: rgba(255,255,255,.78) !important;
font: 600 11px/1.45 'DM Sans', system-ui, sans-serif !important;
}
.dream-collection-table-preview .dream-collection-playlist-preview {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-collection-table-tail,
.dream-playlist-track-table-tail {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.dream-library-route--desktop-table .dream-collection-stack {
gap: 10px !important;
}
.dream-library-route--desktop-table .dream-playlist-list {
gap: 8px !important;
}
.dream-collection-playlist-main,
.dream-collection-playlist-copy {
min-width: 0 !important;
}
.dream-collection-playlist-copy strong,
.dream-collection-playlist-copy em {
display: block !important;
min-width: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-collection-playlist-meta {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
}
.dream-row-card.active {
border-color: rgba(201, 176, 255, .45) !important;
box-shadow: 0 10px 32px rgba(113, 69, 201, .18) !important;
}
.dream-empty {
border: 1px dashed rgba(255,255,255,.16) !important;
border-radius: 18px !important;
padding: 16px !important;
color: rgba(255,255,255,.72) !important;
}
@media (max-width: 900px) {
.dream-library-workspace,
.dream-track-detail-grid {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 640px) {
.dream-app-panel {
width: min(100vw, calc(100vw - 10px)) !important;
border-radius: 26px 26px 0 0 !important;
}
.dream-app-content {
padding: 0 14px 28px !important;
}
button.dream-collection-row--playlist {
grid-template-columns: 26px minmax(0, 1fr) !important;
align-items: flex-start !important;
}
.dream-collection-playlist-main {
display: grid !important;
gap: 6px !important;
}
.dream-collection-playlist-meta {
grid-column: 2 !important;
justify-content: flex-start !important;
}
.dream-hero,
.dream-section,
.dream-profile-card,
.dream-track-detail-surface,
.dream-track-meta-card,
.dream-track-editor {
border-radius: 22px !important;
}
.dream-track-detail-head {
grid-template-columns: 84px minmax(0, 1fr) !important;
}
.dream-close-detail-action {
grid-column: 1 / -1 !important;
}
.dream-track-detail-art {
width: 84px !important;
height: 84px !important;
border-radius: 18px !important;
}
.dream-form-grid {
grid-template-columns: 1fr !important;
}
.dream-form-span-2 {
grid-column: auto !important;
}
.dream-account-auth-actions {
grid-template-columns: 1fr !important;
}
.dream-account-auth-form-wrap {
padding: 12px !important;
}
.dream-profile-card--account {
grid-template-columns: 48px minmax(0,1fr) !important;
gap: 12px !important;
}
.dream-account-badge-stack {
grid-column: 1 / -1 !important;
justify-items: start !important;
}
.dream-profile-card--account h2 {
font-size: clamp(22px, 7vw, 28px) !important;
}
.dream-account-quick-grid {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.dream-playlist-track-row {
grid-template-columns: 1fr !important;
}
.dream-row-actions {
width: 100% !important;
}
.dream-row-actions > * {
flex: 1 1 calc(50% - 10px) !important;
}
.dream-account-subnav {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
overflow: visible !important;
padding-bottom: 0 !important;
scrollbar-width: auto !important;
}
.dream-account-subnav::-webkit-scrollbar {
display: none !important;
}
.dream-account-subnav-btn {
width: 100% !important;
}
}
/* DREAMWAVE refinement pass v2 — lighter mobile hierarchy, richer song details, and calmer cards */
.dream-app-tabs {
gap: 8px !important;
}
.dream-app-tabs button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 38px !important;
padding: 8px 12px !important;
border-radius: 14px !important;
border: 1px solid rgba(255,255,255,.09) !important;
background: rgba(255,255,255,.045) !important;
color: rgba(255,255,255,.76) !important;
font: 800 11.5px/1.05 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .045em !important;
}
.dream-app-tabs button.active {
background: rgba(255,255,255,.94) !important;
border-color: rgba(255,255,255,.98) !important;
color: #06070a !important;
box-shadow: 0 10px 24px rgba(0,0,0,.16) !important;
}
.dream-hero {
padding: clamp(18px, 3.4vw, 28px) !important;
border-radius: 24px !important;
}
.dream-hero h2,
.dream-profile-card h2,
.dream-track-detail-copy h3 {
font-size: clamp(24px, 3.2vw, 36px) !important;
line-height: 1.03 !important;
max-width: 12ch !important;
text-wrap: balance !important;
}
.dream-hero p,
.dream-track-detail-copy p,
.dream-metric strong,
.dream-metric em {
overflow-wrap: anywhere !important;
text-wrap: pretty !important;
}
.dream-hero p {
max-width: 48ch !important;
margin-top: 10px !important;
white-space: normal !important;
color: rgba(255,255,255,.74) !important;
font: 560 14px/1.5 'DM Sans', system-ui, sans-serif !important;
}
.dream-library-source,
.dream-inline-feedback,
.dream-account-helper {
border-radius: 16px !important;
padding: 10px 12px !important;
}
.dream-metrics {
gap: 10px !important;
margin: 14px 0 20px !important;
grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)) !important;
}
.dream-metric {
align-content: start !important;
min-height: 102px !important;
padding: 13px 14px !important;
border-radius: 20px !important;
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.028)) !important;
border: 1px solid rgba(255,255,255,.08) !important;
}
.dream-metric span {
font-size: 10px !important;
letter-spacing: .09em !important;
}
.dream-metric strong {
font-size: 22px !important;
}
.dream-metric em {
font-size: 12px !important;
line-height: 1.35 !important;
}
.dream-section,
.dream-track-detail-surface {
padding: 16px 16px 18px !important;
margin-top: 18px !important;
border-radius: 24px !important;
}
.dream-section-head {
gap: 12px !important;
margin-bottom: 14px !important;
}
.dream-library-workspace {
gap: 14px !important;
}
.dream-playlist-sidebar,
.dream-playlist-panel,
.dream-track-detail-grid {
gap: 14px !important;
}
.dream-track-meta-card,
.dream-track-editor {
border-radius: 20px !important;
padding: 16px !important;
background: linear-gradient(180deg, rgba(12,14,22,.78), rgba(10,12,18,.60)) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 34px rgba(0,0,0,.14) !important;
}
.dream-playlist-select {
border-radius: 18px !important;
padding: 12px 14px !important;
background: rgba(255,255,255,.035) !important;
}
.dream-playlist-select strong {
font-size: 14px !important;
}
.dream-row-card {
border: 1px solid rgba(255,255,255,.075) !important;
background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.024)) !important;
border-radius: 18px !important;
padding: 12px 12px 11px !important;
margin-top: 8px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.dream-row-card .dream-row {
display: grid !important;
grid-template-columns: 38px minmax(0, 1fr) auto !important;
gap: 10px !important;
align-items: center !important;
}
.dream-row-main,
.dream-playlist-track-main {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.dream-row-media {
flex: 0 0 auto !important;
}
.dream-row-play {
width: 32px !important;
height: 32px !important;
font-size: 11px !important;
}
.dream-row-art {
width: 44px !important;
height: 44px !important;
border-radius: 14px !important;
object-fit: cover !important;
box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
}
.dream-row-art--playlist {
width: 50px !important;
height: 50px !important;
}
.dream-row-copy,
.dream-playlist-track-copy {
min-width: 0 !important;
display: grid !important;
gap: 2px !important;
}
.dream-row-main strong,
.dream-row-main em,
.dream-row-copy span,
.dream-playlist-track-copy strong,
.dream-playlist-track-copy em,
.dream-playlist-track-copy span {
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-row-main strong,
.dream-playlist-track-copy strong {
color: rgba(255,255,255,.96) !important;
font: 820 14.5px/1.18 'DM Sans', system-ui, sans-serif !important;
white-space: normal !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
}
.dream-row-main em,
.dream-row-copy span,
.dream-playlist-track-copy em,
.dream-playlist-track-copy span {
color: rgba(255,255,255,.60) !important;
font: 620 11.5px/1.35 'DM Sans', system-ui, sans-serif !important;
font-style: normal !important;
white-space: nowrap !important;
}
.dream-row-copy span,
.dream-playlist-track-copy span {
color: rgba(255,255,255,.50) !important;
}
.dream-row-actions,
.dream-detail-pills,
.dream-hero-actions,
.dream-action-grid {
gap: 8px !important;
}
.dream-row-pill,
.dream-primary,
.dream-secondary,
.dream-action-grid button {
min-height: 38px !important;
}
.dream-detail-pills .dream-row-pill,
.dream-row-actions .dream-row-pill {
padding: 7px 11px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.065) !important;
color: rgba(255,255,255,.84) !important;
border: 1px solid rgba(255,255,255,.08) !important;
font-size: 11px !important;
}
.dream-collection-track-actions .dream-track-detail-action,
body.dream-app-open .dream-collection-track-actions .dream-track-detail-action,
body.dream-app-open .dream-row-actions .dream-track-detail-action,
body.dream-app-open .dream-discover-now-playing-actions .dream-track-detail-action {
min-height: 44px !important;
padding: 6px 10px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.04) !important;
color: rgba(255,255,255,.72) !important;
border: 1px solid rgba(255,255,255,.06) !important;
font-size: 10.5px !important;
letter-spacing: .02em !important;
}
.dream-row-hint {
margin: 8px 0 0 50px !important;
color: rgba(255,255,255,.46) !important;
font: 620 10.8px/1.4 'DM Sans', system-ui, sans-serif !important;
}
.dream-provenance {
margin: 8px 0 0 50px !important;
padding: 10px 11px !important;
border-radius: 14px !important;
}
.dream-track-detail-head {
grid-template-columns: 92px minmax(0, 1fr) auto !important;
gap: 16px !important;
align-items: start !important;
}
.dream-track-detail-art {
width: 92px !important;
height: 92px !important;
border-radius: 20px !important;
}
.dream-track-detail-copy p {
max-width: 48ch !important;
font-size: 13.5px !important;
line-height: 1.5 !important;
}
.dream-creator-hero-title {
display: block !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
text-wrap: nowrap !important;
line-height: 1.04 !important;
}
.dream-creator-context-strip {
margin-top: 8px !important;
}
.dream-release-notes-shelf,
.dream-release-notes-stack {
display: grid !important;
gap: 12px !important;
}
.dream-release-notes-card {
display: grid !important;
gap: 12px !important;
}
.dream-release-notes-card__head {
display: grid !important;
grid-template-columns: 96px minmax(0, 1fr) !important;
gap: 14px !important;
align-items: start !important;
}
.dream-release-notes-card__art {
width: 96px !important;
height: 96px !important;
border-radius: 20px !important;
object-fit: cover !important;
}
.dream-release-notes-card__copy {
min-width: 0 !important;
}
.dream-release-notes-card__copy h3 {
margin: 2px 0 6px !important;
}
.dream-release-notes-card__copy p,
.dream-release-notes-card__excerpt {
margin: 0 !important;
color: rgba(255,255,255,.7) !important;
}
.dream-release-notes-card__meta {
display: grid !important;
gap: 6px !important;
}
.dream-release-notes-narrative {
display: grid !important;
gap: 8px !important;
margin-top: 10px !important;
}
.dream-release-notes-beat {
border: 1px solid rgba(255,255,255,.07) !important;
border-radius: 16px !important;
background: rgba(255,255,255,.035) !important;
padding: 10px 12px !important;
}
.dream-release-notes-beat h4 {
margin: 0 0 4px !important;
color: rgba(255,255,255,.9) !important;
font: 800 11px/1.2 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
}
.dream-release-notes-beat p {
margin: 0 !important;
color: rgba(255,255,255,.72) !important;
font: 560 12.5px/1.55 'DM Sans', system-ui, sans-serif !important;
}
.dream-track-meta-card--release-notes {
border-color: rgba(201,176,255,.18) !important;
background: linear-gradient(160deg, rgba(31,19,49,.68), rgba(9,11,18,.9)) !important;
}
.dream-release-notes-card__actions {
margin-top: 12px !important;
}
.dream-creator-empty-state p {
margin: 0 !important;
color: rgba(255,255,255,.68) !important;
}
.dream-track-detail-copy .dream-creator-bio {
white-space: normal !important;
}
.dream-track-detail-metrics {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
gap: 12px !important;
margin-top: 16px !important;
}
.dream-track-detail-metrics .dream-metric {
min-height: 96px !important;
}
.dream-track-detail-story-card,
.dream-track-detail-lane-card {
display: grid !important;
gap: 10px !important;
}
.dream-track-detail-story-card .dream-kicker {
margin: 0 !important;
}
.dream-track-detail-story-copy {
margin: 0 !important;
color: rgba(255,255,255,.92) !important;
font: 560 14px/1.65 'DM Sans', system-ui, sans-serif !important;
}
.dream-track-detail-story-support {
margin: 0 !important;
color: rgba(255,255,255,.68) !important;
font: 500 12.2px/1.6 'DM Sans', system-ui, sans-serif !important;
}
.dream-track-detail-context-strip {
margin-top: 2px !important;
}
.dream-track-detail-lane-card .dream-hero-actions {
margin-top: 4px !important;
}
.dream-track-detail-surface--player {
margin-top: 18px !important;
}
.dream-track-detail-surface--player .dream-track-detail-head {
position: sticky !important;
top: max(10px, env(safe-area-inset-top)) !important;
z-index: 12 !important;
margin: -6px -6px 16px !important;
padding: 12px 12px 14px !important;
border-radius: 22px !important;
background: linear-gradient(180deg, rgba(6,8,14,.96), rgba(10,12,20,.88)) !important;
box-shadow: 0 16px 30px rgba(0,0,0,.28) !important;
backdrop-filter: blur(16px) saturate(120%) !important;
}
.dream-track-detail-surface--player .dream-close-detail-action--player {
position: fixed !important;
top: calc(env(safe-area-inset-top) + 18px) !important;
left: 18px !important;
z-index: 30 !important;
justify-self: start !important;
padding: 10px 14px !important;
border-radius: 999px !important;
background: rgba(6,8,14,.94) !important;
box-shadow: 0 14px 26px rgba(0,0,0,.32) !important;
}
/* DW-VIS-NEW-17: Track detail surface must not expand beyond its grid column
when rendered inside the player secondary column. Without a max-width the
surface can push the Up next queue and primary controls off-screen on
narrower desktop viewports. */
body.dream-app-open[data-dream-route="player"] .dream-track-detail-surface {
max-width: min(100%, 420px) !important;
width: 100% !important;
align-self: start !important;
}
/* DW-VIS-125: Track detail surface establishes its own scroll context so sticky recovery works */
.dream-track-detail-surface {
max-height: calc(100dvh - 260px) !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
}
.dream-track-detail-surface::-webkit-scrollbar {
display: none !important;
}
.dream-track-detail-recovery {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 10 !important;
display: flex !important;
justify-content: center !important;
margin-top: 18px !important;
/* Fade-in gradient behind the sticky recovery to mask content beneath */
background: linear-gradient(to top, rgba(10,12,20,0.85) 0%, rgba(10,12,20,0.0) 100%) !important;
padding: 12px 0 8px !important;
pointer-events: auto !important;
}
.dream-close-detail-action--player-footer {
width: min(100%, 320px) !important;
justify-content: center !important;
min-height: 44px !important;
font-size: 12px !important;
}
.dream-track-detail-recovery-btn {
width: min(100%, 320px) !important;
justify-content: center !important;
min-height: 44px !important;
font-size: 12px !important;
margin-top: 0 !important;
}
@media (max-width: 640px) {
.dream-track-detail-recovery-btn {
padding: 10px 16px !important;
}
}
.dream-setting-row {
align-items: flex-start !important;
padding: 10px 0 !important;
}
.dream-setting-row span {
font-size: 11px !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
}
.dream-setting-row strong {
text-transform: none !important;
text-align: right !important;
max-width: 60% !important;
line-height: 1.35 !important;
}
.dream-provenance-row {
align-items: flex-start !important;
padding: 7px 0 !important;
}
.dream-provenance-row em {
max-width: 60% !important;
text-align: right !important;
font-style: normal !important;
}
.dream-playlist-track-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 10px !important;
align-items: center !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 18px !important;
background: rgba(255,255,255,.03) !important;
padding: 12px !important;
}
.dream-playlist-track-row:last-child {
border-bottom: 0 !important;
}
@media (max-width: 640px) {
.dream-app-header {
padding: max(16px, env(safe-area-inset-top)) 14px 8px !important;
}
.dream-app-tabs {
padding: 0 14px 12px !important;
}
.dream-app-content {
padding: 0 14px calc(96px + env(safe-area-inset-bottom)) !important;
}
.dream-hero {
padding: 18px 16px !important;
}
.dream-hero h2,
.dream-profile-card h2,
.dream-track-detail-copy h3 {
font-size: clamp(22px, 7.2vw, 30px) !important;
max-width: 11ch !important;
}
.dream-hero-actions,
.dream-action-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.dream-hero-actions .dream-primary {
grid-column: 1 / -1 !important;
}
.dream-hero-actions .dream-primary,
.dream-hero-actions .dream-secondary,
.dream-action-grid button {
width: 100% !important;
min-height: 38px !important;
padding: 10px 12px !important;
}
body.dream-app-open .dream-track-detail-actions .dream-primary,
body.dream-app-open .dream-track-detail-actions .dream-secondary,
body.dream-app-open .dream-close-detail-action,
body.dream-app-open .dream-track-detail-recovery-btn,
body.dream-app-open .dream-share-link-actions .dream-row-pill,
body.dream-app-open .dream-create-share-link-action {
min-height: 44px !important;
padding: 10px 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.dream-library-workspace,
.dream-track-detail-grid {
gap: 12px !important;
}
.dream-track-detail-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.dream-track-detail-metrics .dream-metric {
min-height: 86px !important;
}
.dream-track-detail-story-copy {
font-size: 13.5px !important;
}
.dream-track-detail-story-support {
font-size: 12px !important;
}
.dream-detail-pills .dream-row-pill {
min-height: 30px !important;
padding: 6px 9px !important;
font-size: 10.5px !important;
}
.dream-track-detail-head {
grid-template-columns: 78px minmax(0, 1fr) !important;
gap: 12px !important;
}
.dream-close-detail-action {
grid-column: 1 / -1 !important;
justify-self: start !important;
}
.dream-track-detail-surface--player .dream-track-detail-head {
top: max(8px, env(safe-area-inset-top)) !important;
margin: -4px -4px 14px !important;
padding: 10px 10px 12px !important;
}
.dream-track-detail-surface--player .dream-close-detail-action--player {
top: calc(env(safe-area-inset-top) + 14px) !important;
left: 14px !important;
padding: 9px 12px !important;
}
.dream-track-detail-art {
width: 78px !important;
height: 78px !important;
border-radius: 18px !important;
}
.dream-form-grid {
grid-template-columns: 1fr !important;
}
.dream-form-span-2 {
grid-column: auto !important;
}
.dream-playlist-track-row {
grid-template-columns: 1fr !important;
}
.dream-row-actions {
width: 100% !important;
justify-content: flex-start !important;
}
.dream-row-actions > * {
flex: 0 1 auto !important;
}
.dream-account-subnav {
overflow-x: auto !important;
padding-bottom: 2px !important;
scrollbar-width: none !important;
}
.dream-account-subnav::-webkit-scrollbar {
display: none !important;
}
}
@media (max-width: 520px) {
body.dream-app-open .dream-app-tabs {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
overflow: visible !important;
gap: 6px !important;
padding: 0 14px 12px !important;
padding-right: 0 !important;
mask-image: none !important;
-webkit-mask-image: none !important;
}
body.dream-app-open .dream-app-tabs button {
width: 100% !important;
min-height: 34px !important;
justify-content: center !important;
text-align: center !important;
padding: 7px 6px !important;
font-size: 10px !important;
letter-spacing: .03em !important;
}
.dream-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 7px !important;
}
.dream-metrics .dream-metric:last-child:nth-child(odd) {
grid-column: 1 / -1 !important;
}
.dream-metric {
min-height: 82px !important;
padding: 11px !important;
}
.dream-metric strong {
font-size: 18px !important;
}
.dream-section,
.dream-track-detail-surface {
padding: 15px !important;
border-radius: 22px !important;
}
.dream-row-card {
padding: 11px !important;
border-radius: 18px !important;
}
.dream-row-card .dream-row {
grid-template-columns: 36px minmax(0, 1fr) !important;
gap: 10px !important;
}
.dream-row-play {
width: 30px !important;
height: 30px !important;
}
.dream-row-art {
width: 42px !important;
height: 42px !important;
border-radius: 13px !important;
}
.dream-row-actions {
grid-column: 1 / -1 !important;
width: auto !important;
min-width: 0 !important;
margin: 6px 0 0 46px !important;
gap: 6px !important;
}
.dream-row-actions > * {
flex: 0 0 auto !important;
max-width: 100% !important;
}
.dream-row-hint,
.dream-provenance {
margin-left: 46px !important;
}
.dream-row-main strong,
.dream-playlist-track-copy strong {
font-size: 14px !important;
}
.dream-row-main em,
.dream-row-copy span,
.dream-playlist-track-copy em,
.dream-playlist-track-copy span {
font-size: 11.5px !important;
}
}
@media (max-width: 360px) {
body.dream-app-open .dream-app-tabs {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.dream-app-open .dream-app-tabs button {
min-height: 35px !important;
padding: 8px 8px !important;
font-size: 10.4px !important;
}
.dream-hero {
padding: 16px 14px !important;
}
.dream-hero h2,
.dream-profile-card h2,
.dream-track-detail-copy h3 {
font-size: clamp(21px, 8vw, 28px) !important;
}
.dream-hero p {
font-size: 13px !important;
}
.dream-setting-row {
flex-direction: column !important;
gap: 5px !important;
}
.dream-setting-row strong {
max-width: none !important;
text-align: left !important;
}
.dream-row-actions {
margin-left: 0 !important;
}
.dream-row-card .dream-row {
grid-template-columns: 34px minmax(0, 1fr) !important;
}
.dream-row-main {
align-items: flex-start !important;
}
.dream-row-copy span,
.dream-playlist-track-copy span {
white-space: normal !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
}
}
/* v23 sleek mobile pass: calmer discover shell, lighter nav, flatter feed rows */
@media (max-width: 520px) {
body.dream-app-open .dream-app-tabs {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 5px !important;
padding: 0 14px 10px !important;
}
body.dream-app-open .dream-app-tabs button {
min-height: 32px !important;
padding: 6px 7px !important;
border-radius: 999px !important;
font-size: 9.55px !important;
letter-spacing: .04em !important;
background: rgba(255,255,255,.045) !important;
border-color: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.68) !important;
box-shadow: none !important;
}
body.dream-app-open .dream-track-detail-surface {
padding: 13px 13px calc(14px + env(safe-area-inset-bottom)) !important;
}
body.dream-app-open .dream-track-detail-head {
grid-template-columns: 68px minmax(0, 1fr) !important;
gap: 10px !important;
}
body.dream-app-open .dream-track-detail-art {
width: 68px !important;
height: 68px !important;
border-radius: 16px !important;
}
body.dream-app-open .dream-track-detail-copy h3 {
font-size: clamp(19px, 5.9vw, 24px) !important;
line-height: 1.01 !important;
max-width: none !important;
}
body.dream-app-open .dream-track-detail-copy p {
font-size: 11.6px !important;
line-height: 1.28 !important;
margin-top: 5px !important;
}
body.dream-app-open .dream-detail-pills {
gap: 5px !important;
margin-top: 5px !important;
}
body.dream-app-open .dream-detail-pills .dream-row-pill {
min-height: 26px !important;
padding: 5px 8px !important;
font-size: 9.8px !important;
}
body.dream-app-open .dream-track-meta-card {
padding: 13px !important;
}
body.dream-app-open .dream-setting-row {
padding: 7px 0 !important;
}
body.dream-app-open .dream-setting-row span {
font-size: 10px !important;
}
body.dream-app-open .dream-setting-row strong {
max-width: 58% !important;
font-size: 12px !important;
line-height: 1.28 !important;
}
body.dream-app-open .dream-setting-row--track-id {
display: none !important;
}
body.dream-app-open .dream-track-detail-actions {
margin-top: 10px !important;
gap: 6px !important;
}
body.dream-app-open .dream-track-detail-actions .dream-primary,
body.dream-app-open .dream-track-detail-actions .dream-secondary,
body.dream-app-open .dream-close-detail-action,
body.dream-app-open .dream-track-detail-recovery-btn,
body.dream-app-open .dream-share-link-actions .dream-row-pill,
body.dream-app-open .dream-create-share-link-action {
min-height: 44px !important;
padding: 10px 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
body.dream-app-open .dream-search-user-row {
grid-template-columns: 1fr !important;
}
body.dream-app-open .dream-search-user-actions {
justify-content: flex-start !important;
}
body.dream-app-open .dream-app-tabs button[data-app-group="primary"] {
font-size: 9.8px !important;
color: rgba(255,255,255,.84) !important;
}
body.dream-app-open .dream-app-tabs button[data-app-group="secondary"] {
min-height: 29px !important;
padding: 5px 6px !important;
font-size: 8.85px !important;
letter-spacing: .08em !important;
background: rgba(255,255,255,.02) !important;
border-color: rgba(255,255,255,.04) !important;
color: rgba(255,255,255,.52) !important;
}
body.dream-app-open .dream-app-tabs button.active {
background: rgba(255,255,255,.16) !important;
border-color: rgba(255,255,255,.22) !important;
color: rgba(255,255,255,.98) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
}
body.dream-app-open .dream-hero--discover {
padding: 14px 14px 12px !important;
border-radius: 20px !important;
background: rgba(9,10,14,.28) !important;
border-color: rgba(255,255,255,.055) !important;
}
body.dream-app-open .dream-discover-now-playing-strip {
gap: 6px !important;
margin-bottom: 6px !important;
padding: 8px 10px !important;
border-radius: 15px !important;
background: rgba(9,10,14,.16) !important;
}
body.dream-app-open .dream-discover-now-playing-copy {
gap: 3px !important;
}
body.dream-app-open .dream-discover-now-playing-topline {
gap: 6px !important;
}
body.dream-app-open .dream-discover-now-playing-copy strong {
font-size: 13px !important;
line-height: 1.06 !important;
}
body.dream-app-open .dream-discover-now-playing-copy em {
font-size: 10px !important;
line-height: 1.2 !important;
}
body.dream-app-open .dream-discover-now-playing-context-label {
font-size: 9.8px !important;
line-height: 1.2 !important;
}
body.dream-app-open .dream-discover-now-playing-actions {
justify-content: flex-start !important;
gap: 5px !important;
}
body.dream-app-open .dream-discover-now-playing-actions .dream-secondary,
body.dream-app-open .dream-discover-now-playing-actions .dream-inline-link {
min-height: 44px !important;
padding: 6px 12px !important;
font-size: 10px !important;
}
body.dream-app-open .dream-hero--discover .dream-kicker {
margin-bottom: 5px !important;
font-size: 8.5px !important;
letter-spacing: .18em !important;
color: rgba(255,255,255,.42) !important;
}
body.dream-app-open .dream-hero--discover h2 {
font-size: clamp(21px, 5.4vw, 26px) !important;
line-height: 1.15 !important;
margin-bottom: 5px !important;
}
body.dream-app-open .dream-hero--discover p:not(.dream-kicker):not(.dream-hero-footnote) {
font-size: 11.8px !important;
line-height: 1.3 !important;
color: rgba(255,255,255,.64) !important;
}
body.dream-app-open .dream-hero-actions--discover {
margin-top: 10px !important;
gap: 6px !important;
}
body.dream-app-open .dream-hero-actions--discover .dream-primary {
min-height: 30px !important;
padding: 7px 10px !important;
font-size: 10px !important;
}
body.dream-app-open .dream-hero-footnote {
display: none !important;
}
body.dream-app-open .dream-hero-badges {
display: none !important;
}
body.dream-app-open .dream-hero--discover {
padding: 10px 12px 10px !important;
}
body.dream-app-open .dream-hero--discover h2 {
font-size: clamp(18px, 5vw, 22px) !important;
line-height: 1.1 !important;
margin-bottom: 4px !important;
}
body.dream-app-open .dream-hero-actions--discover {
margin-top: 6px !important;
gap: 4px !important;
}
body.dream-app-open .dream-hero-inline-links {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
align-items: center !important;
margin-top: 6px !important;
}
body.dream-app-open .dream-hero-inline-links--discover {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
align-items: stretch !important;
}
body.dream-app-open .dream-hero-inline-links--discover-single {
grid-template-columns: minmax(0, 1fr) !important;
}
body.dream-app-open .dream-inline-link {
appearance: none !important;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
color: rgba(255,255,255,.68) !important;
font: 700 10.4px/1.2 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .04em !important;
text-align: left !important;
}
body.dream-app-open .dream-hero-inline-links--discover .dream-inline-link {
width: 100% !important;
min-height: 34px !important;
padding: 9px 10px !important;
border-radius: 12px !important;
border: 1px solid rgba(255,255,255,.15) !important;
background: rgba(255,255,255,.08) !important;
text-align: center !important;
justify-content: center !important;
}
body.dream-app-open .dream-hero-footnote {
margin-top: 9px !important;
margin-bottom: 0 !important;
color: rgba(255,255,255,.42) !important;
font: 600 10.3px/1.32 'DM Sans', system-ui, sans-serif !important;
}
body.dream-app-open .dream-metrics--discover {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
margin: 10px 0 8px !important;
}
body.dream-app-open .dream-discover-social-grid {
display: grid !important;
gap: 12px !important;
}
body.dream-app-open .dream-discover-summary {
margin: 0 2px 10px !important;
color: rgba(255,255,255,.76) !important;
font: 600 10.8px/1.45 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .03em !important;
}
body.dream-app-open .dream-metrics--discover .dream-metric {
min-height: 74px !important;
padding: 10px 11px !important;
border-radius: 15px !important;
background: rgba(255,255,255,.028) !important;
border-color: rgba(255,255,255,.05) !important;
}
body.dream-app-open .dream-metrics--discover .dream-metric span {
font-size: 8.9px !important;
letter-spacing: .14em !important;
color: rgba(255,255,255,.44) !important;
}
body.dream-app-open .dream-metrics--discover .dream-metric strong {
font-size: 20px !important;
line-height: 1 !important;
}
body.dream-app-open .dream-metrics--discover .dream-metric em {
font-size: 10.6px !important;
color: rgba(255,255,255,.54) !important;
}
body.dream-app-open .dream-section--feed {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 8px 0 0 !important;
margin-top: 6px !important;
}
body.dream-app-open .dream-section--feed .dream-section-head {
margin-bottom: 10px !important;
padding: 0 2px !important;
}
body.dream-app-open .dream-section--feed .dream-section-head h3 {
font-size: 14px !important;
margin: 0 !important;
}
body.dream-app-open .dream-list--discover {
gap: 8px !important;
}
body.dream-app-open .dream-list--discover .dream-row-card {
padding: 10px 10px 9px !important;
border-radius: 16px !important;
background: rgba(255,255,255,.024) !important;
border-color: rgba(255,255,255,.04) !important;
box-shadow: none !important;
}
body.dream-app-open .dream-list--discover .dream-row {
grid-template-columns: 34px minmax(0, 1fr) !important;
gap: 9px !important;
}
body.dream-app-open .dream-list--discover .dream-row-play {
width: 28px !important;
height: 28px !important;
font-size: 10px !important;
}
body.dream-app-open .dream-list--discover .dream-row-art {
width: 40px !important;
height: 40px !important;
border-radius: 12px !important;
}
body.dream-app-open .dream-list--discover .dream-row-main strong {
font-size: 13.4px !important;
letter-spacing: -.01em !important;
}
body.dream-app-open .dream-list--discover .dream-row-main em,
body.dream-app-open .dream-list--discover .dream-row-copy span {
font-size: 10.8px !important;
color: rgba(255,255,255,.56) !important;
}
body.dream-app-open .dream-list--discover .dream-row-hint {
display: none !important;
}
body.dream-app-open .dream-list--discover .dream-row-actions {
margin-top: 5px !important;
gap: 5px !important;
}
body.dream-app-open .dream-list--discover .dream-row-actions .dream-row-pill {
min-height: 40px !important;
padding: 5px 10px !important;
border-radius: 999px !important;
font-size: 9.4px !important;
background: rgba(255,255,255,.032) !important;
border-color: rgba(255,255,255,.05) !important;
color: rgba(255,255,255,.66) !important;
}
}
/* Always compact discover hero on phone screens */
@media (max-width: 520px) {
.dream-hero--discover {
padding: 14px 14px 12px !important;
border-radius: 20px !important;
background: rgba(9,10,14,.28) !important;
border-color: rgba(255,255,255,.055) !important;
}
.dream-hero--discover .dream-kicker {
margin-bottom: 5px !important;
font-size: 8.5px !important;
letter-spacing: .18em !important;
}
.dream-hero--discover h2 {
font-size: clamp(21px, 5.4vw, 26px) !important;
line-height: 1.01 !important;
margin-bottom: 5px !important;
}
.dream-hero--discover p:not(.dream-kicker):not(.dream-hero-footnote) {
font-size: 11.8px !important;
line-height: 1.3 !important;
}
.dream-hero-actions--discover {
margin-top: 10px !important;
gap: 0 !important;
}
.dream-hero-actions--discover .dream-primary {
min-height: 44px !important;
padding: 9px 12px !important;
font-size: 10.8px !important;
}
.dream-hero-inline-links {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
margin-top: 10px !important;
}
.dream-hero-footnote {
margin-top: 9px !important;
font: 600 10.3px/1.32 'DM Sans', system-ui, sans-serif !important;
}
.dream-metrics--discover {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
margin: 10px 0 8px !important;
}
}
/* v24 sleek micro-pass: cut duplicated eyebrow weight and slim discover rows */
@media (max-width: 520px) {
body.dream-app-open .dream-app-header {
padding: max(10px, env(safe-area-inset-top)) 14px 4px !important;
gap: 8px !important;
}
body.dream-app-open .dream-app-header p {
display: none !important;
}
body.dream-app-open .dream-app-close {
width: 26px !important;
height: 26px !important;
flex-basis: 26px !important;
}
body.dream-app-open .dream-app-tabs {
padding-bottom: 8px !important;
}
body.dream-app-open .dream-list--discover .dream-row-card {
padding: 9px 9px 8px !important;
}
body.dream-app-open .dream-list--discover .dream-row-copy span {
display: none !important;
}
}
/* DW-FEAT-004 mobile nav: More tray + secondary nav */
.dream-app-tabs-grid,
.dream-app-tabs-primary {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dream-app-more-toggle {
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.10) !important;
color: rgba(255,255,255,.72) !important;
font-size: 9.5px !important;
letter-spacing: .06em !important;
min-height: 32px !important;
padding: 5px 10px !important;
border-radius: 8px !important;
}
.dream-app-more-toggle.active {
background: rgba(255,255,255,.14) !important;
border-color: rgba(255,255,255,.28) !important;
color: rgba(255,255,255,.96) !important;
}
.dream-app-tabs-secondary {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
padding: 6px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
background: rgba(10,12,26,.42);
}
.dream-app-tabs-secondary[hidden] {
display: none !important;
}
@media (max-width: 520px) {
.dream-app-tabs-secondary {
gap: 5px;
padding: 5px;
border-radius: 10px;
}
}
.dream-account-subnav--auth {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.dream-account-subnav--auth .dream-account-subnav-btn {
min-height: 44px !important;
justify-content: center !important;
text-align: center !important;
}
@media (max-width: 520px) {
body.dream-app-open .dream-app-tabs {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
padding: 0 14px 8px !important;
}
body.dream-app-open .dream-app-tabs-grid,
body.dream-app-open .dream-app-tabs-primary {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 6px !important;
}
body.dream-app-open .dream-app-tabs button {
width: 100% !important;
min-height: 32px !important;
padding: 6px 7px !important;
border-radius: 999px !important;
font-size: 9.1px !important;
letter-spacing: .08em !important;
box-shadow: none !important;
}
body.dream-app-open .dream-account-subnav {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.dream-app-open .dream-account-subnav--auth {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
}
body.dream-app-open .dream-account-subnav-btn {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
}
body.dream-app-open .dream-account-subnav--auth .dream-account-subnav-btn {
min-height: 44px !important;
padding: 9px 8px !important;
font-size: 10px !important;
letter-spacing: .03em !important;
}
body.dream-app-open .dream-profile-card--account h2 {
font-size: clamp(19px, 5vw, 24px) !important;
line-height: 1.06 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
body.dream-app-open .dream-metrics--account {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 4px !important;
margin: 10px 0 12px !important;
}
body.dream-app-open .dream-metrics--account .dream-metric:last-child:nth-child(odd) {
grid-column: auto !important;
}
body.dream-app-open .dream-metrics--account .dream-metric {
min-height: 74px !important;
padding: 9px 2px !important;
border-radius: 14px !important;
}
body.dream-app-open .dream-metrics--account .dream-metric span {
font-size: 8.2px !important;
letter-spacing: .12em !important;
}
body.dream-app-open .dream-metrics--account .dream-metric strong {
margin: 5px 0 3px !important;
font-size: 18px !important;
}
body.dream-app-open .dream-metrics--account .dream-metric em {
font-size: 9.6px !important;
line-height: 1.16 !important;
}
body.dream-app-open .dream-section--account-overview {
padding: 11px !important;
}
/* DW-VIS-ACCOUNT-CREATOR-CUTOFF fix: allow visible overflow so the creator-tools
glass container is not clipped by the base .dream-section overflow:hidden rule.
The quick-card + install-shell inside this section need room to breathe. */
body.dream-app-open[data-dream-route="account"] .dream-section--account-overview {
overflow: visible !important;
}
body.dream-app-open .dream-account-subnav {
margin-bottom: 8px !important;
}
body.dream-app-open .dream-account-subnav-btn {
min-height: 44px !important;
padding: 9px 8px !important;
font-size: 10px !important;
}
body.dream-app-open .dream-profile-card--account {
grid-template-columns: 44px minmax(0, 1fr) auto !important;
gap: 10px !important;
padding: 11px !important;
}
body.dream-app-open .dream-profile-card--account .dream-avatar {
width: 44px !important;
height: 44px !important;
}
body.dream-app-open .dream-profile-card--account .dream-account-identity {
gap: 2px !important;
}
body.dream-app-open .dream-profile-card--account .dream-account-identity p:not(.dream-kicker) {
font-size: 10.8px !important;
line-height: 1.22 !important;
}
body.dream-app-open .dream-account-badge-stack {
align-self: start !important;
}
body.dream-app-open .dream-account-quick-card {
padding: 11px !important;
}
body.dream-app-open .dream-account-quick-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.dream-app-open .dream-account-quick-grid button {
min-height: 44px !important;
padding: 9px 8px !important;
font-size: 9.4px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
color: #ffffff !important;
background-color: #0a0c14 !important;
border: 1px solid rgba(255,255,255,0.14) !important;
}
body.dream-app-open .dream-account-install-shell .dream-install-surface {
gap: 10px !important;
padding: 11px !important;
border-radius: 16px !important;
margin: 0 !important;
}
body.dream-app-open .dream-account-install-shell .dream-install-copy h3 {
font-size: 15px !important;
margin: 2px 0 4px !important;
}
body.dream-app-open .dream-account-install-shell .dream-install-copy p:last-child {
font-size: 10.6px !important;
line-height: 1.24 !important;
}
body.dream-app-open .dream-account-install-shell .dream-install-action {
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
overflow: hidden !important;
}
body.dream-app-open .dream-account-install-shell .dream-install-action .dream-install-button {
min-width: 90px !important;
width: auto !important;
max-width: 110px !important;
min-height: 44px !important;
padding: 8px 10px !important;
font-size: 9.8px !important;
flex-shrink: 0 !important;
box-sizing: border-box !important;
}
}
/* ─── SEARCH ROUTE ─────────────────────────────────────────── */
/* DW-FEAT-140: flatten the search surface into a single scroll owner.
Previously .dream-hero--search was the inner scroller (max-height 575px,
overflow-y auto), creating a dual-carrier architecture where the outer
.dream-app-content AND the hero both scrolled. The hero now lets its
content flow naturally so .dream-app-content is the only scroll owner. */
.dream-hero--search {
padding-bottom: 14px !important;
max-height: none !important;
overflow: visible !important;
}
/* Hero scroll container — sticky chrome offsets */
body.dream-app-open .dream-hero--search {
max-height: none !important;
overflow: visible !important;
}
/* DW-FEAT-140: phone no longer needs a 575px hero cap. The outer app-content
is the sole scroll owner; this also makes the bottom-nav clearance math
in .dream-app-content work as the single source of truth. */
@media (max-width: 520px) {
.dream-hero--search {
height: auto !important;
max-height: none !important;
overflow: visible !important;
box-sizing: border-box !important;
}
}
.dream-search-field {
margin-top: 16px !important;
margin-bottom: 0 !important;
}
#dreamSearchInput {
width: 100% !important;
background: rgba(255,255,255,.07) !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 12px !important;
color: rgba(255,255,255,.9) !important;
font-size: 15px !important;
padding: 12px 16px !important;
outline: none !important;
box-sizing: border-box !important;
-webkit-appearance: none !important;
appearance: none !important;
}
#dreamSearchInput:focus {
border-color: var(--dw-green) !important;
background: rgba(255,255,255,.10) !important;
}
#dreamSearchInput::placeholder {
color: rgba(255,255,255,.35) !important;
}
.dream-search-clear {
position: absolute !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
height: 28px !important;
border: 0 !important;
border-radius: 999px !important;
background: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.72) !important;
font: 800 16px/1 'DM Sans', system-ui, sans-serif !important;
cursor: pointer !important;
}
.dream-search-clear[hidden] {
display: none !important;
}
.dream-search-results {
margin-top: 20px !important;
padding-bottom: max(450px, calc(72px + env(safe-area-inset-bottom) + 150px)) !important;
}
.dream-search-live-results-header {
display: flex !important;
align-items: baseline !important;
justify-content: space-between !important;
gap: 12px !important;
margin-bottom: 12px !important;
padding-bottom: 10px !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.dream-search-live-results-label {
font-size: 13px !important;
font-weight: 600 !important;
color: rgba(255,255,255,.7) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-search-live-results-count {
font-size: 11px !important;
color: rgba(255,255,255,.35) !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.dream-search-chips {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-top: 12px !important;
align-items: center !important;
}
.dream-search-chip-label {
color: rgba(255,255,255,.35) !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
margin-right: 2px !important;
}
.dream-search-chip {
appearance: none !important;
border: 1px solid rgba(255,255,255,.12) !important;
background: rgba(10,10,18,.72) !important;
color: rgba(255,255,255,.95) !important;
border-radius: 999px !important;
padding: 6px 14px !important;
font-size: 12px !important;
cursor: pointer !important;
transition: all .18s !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
white-space: nowrap !important;
}
.dream-search-chip:active {
background: rgba(255,255,255,.14) !important;
border-color: var(--dw-green) !important;
color: #fff !important;
}
.dream-search-hint,
.dream-search-loading,
.dream-search-no-results {
color: rgba(255,255,255,.45) !important;
font-size: 13px !important;
padding: 8px 0 !important;
font-style: italic !important;
}
.dream-search-section {
margin-bottom: 20px !important;
}
.dream-search-section .dream-section-head h4 {
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.4) !important;
margin: 0 0 8px !important;
}
.dream-search-browse {
margin-top: 16px !important;
}
.dream-search-browse h4 {
font-size: 13px !important;
font-weight: 600 !important;
color: rgba(255,255,255,.55) !important;
text-transform: uppercase !important;
letter-spacing: .1em !important;
margin: 0 0 10px !important;
}
.dream-browse-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.dream-browse-tile {
aspect-ratio: 1.2 !important;
border-radius: 10px !important;
border: 1px solid rgba(255,255,255,.08) !important;
display: flex !important;
align-items: flex-end !important;
padding: 14px !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #fff !important;
cursor: pointer !important;
text-align: left !important;
transition: transform .15s ease, filter .15s ease !important;
-webkit-tap-highlight-color: transparent !important;
}
.dream-browse-tile:active {
transform: scale(.96) !important;
filter: brightness(1.2) !important;
}
.dream-browse-tile span {
text-shadow: 0 2px 8px rgba(0,0,0,.75), 0 1px 2px rgba(0,0,0,.9) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: 100% !important;
}
.dream-search-row {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 12px !important;
border-radius: 14px !important;
border: 1px solid rgba(255,255,255,.08) !important;
background: rgba(255,255,255,.035) !important;
margin-bottom: 10px !important;
transition: background .15s, border-color .15s ease !important;
}
.dream-search-row:hover {
background: rgba(255,255,255,.07) !important;
border-color: rgba(255,255,255,.14) !important;
}
.dream-search-row--track {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas:
'main controls'
'. controls' !important;
align-items: center !important;
gap: 4px 10px !important;
cursor: default !important;
}
.dream-search-track-main {
grid-area: main !important;
appearance: none !important;
width: 100% !important;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: 36px minmax(0, 1fr) !important;
align-items: center !important;
gap: 10px !important;
color: #fff !important;
text-align: left !important;
cursor: pointer !important;
}
.dream-search-track-state {
display: none !important;
}
.dream-search-track-main:disabled {
cursor: default !important;
}
.dream-search-row .dream-row-art {
width: 36px !important;
height: 36px !important;
border-radius: 4px !important;
flex-shrink: 0 !important;
object-fit: cover !important;
}
.dream-search-row-copy {
display: block !important;
min-width: 0 !important;
/* Compact inline chrome: topline (name + creator + AI + status) + sub (artist) */
gap: 2px !important;
}
.dream-search-row-topline {
display: flex !important;
align-items: center !important;
gap: 5px !important;
flex-wrap: nowrap !important;
overflow: hidden !important;
}
.dream-search-row-title {
font-size: 13px !important;
font-weight: 700 !important;
color: rgba(255,255,255,.92) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
flex-shrink: 1 !important;
}
.dream-search-row-sub {
display: block !important;
font-size: 11px !important;
font-weight: 500 !important;
color: rgba(255,255,255,.44) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
margin-top: 2px !important;
}
.dream-search-ai-flag {
display: inline-flex !important;
align-items: center !important;
padding: 2px 5px !important;
border-radius: 999px !important;
background: rgba(255,205,238,.14) !important;
border: 1px solid rgba(255,205,238,.22) !important;
color: rgba(255,205,238,.80) !important;
font-size: 9px !important;
font-weight: 900 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
flex-shrink: 0 !important;
}
.dream-search-row-mood {
display: inline-flex !important;
align-items: center !important;
padding: 2px 6px !important;
border-radius: 999px !important;
background: rgba(0,184,212,.12) !important;
border: 1px solid rgba(0,184,212,.22) !important;
color: rgba(0,224,255,.88) !important;
font-size: 9px !important;
font-weight: 600 !important;
letter-spacing: .04em !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.dream-search-row-meta {
grid-area: meta !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
min-width: 0 !important;
}
.dream-search-meta-line {
display: block !important;
flex: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: rgba(255,255,255,.46) !important;
font-size: 12px !important;
line-height: 1.15 !important;
}
.dream-search-meta-artist {
color: rgba(255,255,255,.58) !important;
}
.dream-search-meta-separator,
.dream-search-meta-local {
color: rgba(255,255,255,.38) !important;
}
.dream-search-meta-flag {
color: rgba(255,205,238,.76) !important;
text-transform: uppercase !important;
letter-spacing: .05em !important;
}
.dream-search-creator-link,
.dream-search-creator-static {
font-size: inherit !important;
color: rgba(155,231,255,.84) !important;
text-decoration: none !important;
}
.dream-search-creator-link {
appearance: none !important;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
cursor: pointer !important;
}
.dream-search-row-controls {
grid-area: controls !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 4px !important;
align-self: center !important;
}
.dream-search-row-badges {
display: none !important;
}
.dream-search-row-actions {
display: none !important;
}
.dream-search-row-action {
appearance: none !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 999px !important;
background: rgba(255,255,255,.03) !important;
color: rgba(255,255,255,.82) !important;
width: 30px !important;
min-width: 30px !important;
height: 30px !important;
min-height: 30px !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
}
.dream-search-row-action:disabled {
opacity: .5 !important;
}
.dream-search-row-controls .dream-toggle-track-like-action::before {
content: '♡' !important;
font-size: 13px !important;
line-height: 1 !important;
}
.dream-search-row-controls .dream-toggle-track-like-action.liked::before {
content: '♥' !important;
}
.dream-search-row-controls .dream-search-more-action::before {
content: '⋯' !important;
font-size: 14px !important;
line-height: 1 !important;
}
.dream-search-row-action.liked,
.dream-search-row-action.active,
.dream-search-add-playlist.active {
border-color: rgba(30,215,96,.22) !important;
color: rgba(125,255,176,.95) !important;
background: rgba(30,215,96,.09) !important;
}
.dream-search-row-status {
flex-shrink: 0 !important;
padding: 3px 7px !important;
border: 1px solid rgba(255,164,43,.26) !important;
border-radius: 999px !important;
font: 700 9px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
border-color: rgba(255,164,43,.26) !important;
background: rgba(255,164,43,.14) !important;
color: rgba(255,219,173,.9) !important;
}
.dream-search-row--unplayable {
cursor: default !important;
opacity: .72 !important;
}
.dream-search-row--unplayable:after {
content: none !important;
}
.dream-search-playlist-action {
cursor: pointer !important;
}
.dream-search-user-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 12px !important;
border-radius: 14px !important;
border: 1px solid rgba(255,255,255,.08) !important;
background: rgba(255,255,255,.035) !important;
margin-bottom: 8px !important;
}
.dream-search-user-main {
appearance: none !important;
width: 100% !important;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: 38px minmax(0, 1fr) !important;
gap: 10px !important;
align-items: center !important;
text-align: left !important;
color: #fff !important;
}
.dream-search-user-avatar {
width: 38px !important;
height: 38px !important;
border-radius: 12px !important;
object-fit: cover !important;
display: block !important;
}
.dream-search-user-copy {
min-width: 0 !important;
display: grid !important;
gap: 3px !important;
}
.dream-search-user-copy strong,
.dream-search-user-copy em {
display: block !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.dream-search-user-copy strong {
font-size: 13px !important;
color: rgba(255,255,255,.92) !important;
}
.dream-search-user-copy em {
font-size: 11px !important;
color: rgba(255,255,255,.5) !important;
font-style: normal !important;
}
.dream-search-user-actions {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.dream-search-user-open,
.dream-search-user-follow {
appearance: none !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 999px !important;
background: rgba(255,255,255,.03) !important;
color: rgba(255,255,255,.82) !important;
padding: 7px 10px !important;
font: 700 11px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-search-user-follow {
border-color: rgba(30,215,96,.22) !important;
color: rgba(125,255,176,.95) !important;
background: rgba(30,215,96,.09) !important;
}
.dream-search-user-self {
flex-shrink: 0 !important;
}
.dream-search-chip {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 7px 14px !important;
background: rgba(255,255,255,.12) !important;
border-radius: 20px !important;
cursor: pointer !important;
font-size: 13px !important;
color: #fff !important;
transition: background .15s !important;
margin: 3px !important;
}
.dream-search-chip:hover {
background: rgba(255,255,255,.16) !important;
}
.dream-search-chip.active {
background: rgba(255,113,206,.18) !important;
border-color: rgba(255,113,206,.55) !important;
color: #fff !important;
box-shadow: 0 0 8px rgba(255,113,206,.25) !important;
}
.dream-search-playlist-icon {
font-size: 18px !important;
color: var(--dw-pink) !important;
flex-shrink: 0 !important;
}
/* ─── ROW LIKE BUTTON ──────────────────────────────────────── */
.dream-row-like {
background: none !important;
border: none !important;
color: rgba(255,255,255,.35) !important;
font-size: 16px !important;
cursor: pointer !important;
padding: 4px 6px !important;
border-radius: 6px !important;
transition: color .15s, transform .1s !important;
line-height: 1 !important;
}
.dream-row-like:hover {
color: rgba(255,255,255,.7) !important;
transform: scale(1.15) !important;
}
.dream-row-like.liked {
color: #ff4f7a !important;
}
.dream-row-like.liked:hover {
color: #ff6b91 !important;
}
/* ─── RECENTLY PLAYED ─────────────────────────────────────── */
.dream-recently-played-list {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
.dream-recently-played-row {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 6px 8px !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: background .15s !important;
}
.dream-recently-played-row:hover {
background: rgba(255,255,255,.06) !important;
}
.dream-recently-played-row .dream-row-art {
width: 34px !important;
height: 34px !important;
border-radius: 4px !important;
flex-shrink: 0 !important;
object-fit: cover !important;
}
.dream-recently-played-copy {
flex: 1 !important;
min-width: 0 !important;
}
.dream-recently-played-copy strong {
display: block !important;
font-size: 13px !important;
font-weight: 500 !important;
color: rgba(255,255,255,.85) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-recently-played-copy em {
display: block !important;
font-size: 11px !important;
color: rgba(255,255,255,.4) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-style: normal !important;
}
/* ─── UPLOAD, QUEUE, AND AGENT RESULT SURFACES ───────────────── */
.dream-upload-form {
display: grid !important;
gap: 12px !important;
}
.dream-upload-step {
display: grid !important;
gap: 12px !important;
padding: 14px !important;
border-radius: 20px !important;
border: 1px solid rgba(255,255,255,.08) !important;
background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.026)) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.dream-upload-step > strong,
.dream-upload-step > h4,
.dream-upload-step > .dream-upload-step-title {
margin: 0 !important;
color: rgba(255,255,255,.94) !important;
font: 850 14px/1.2 'DM Sans', system-ui, sans-serif !important;
letter-spacing: -.01em !important;
}
.dream-upload-step > p,
.dream-upload-step > .dream-upload-step-copy,
.dream-upload-step > small {
margin: 0 !important;
color: rgba(255,255,255,.60) !important;
font: 620 12px/1.45 'DM Sans', system-ui, sans-serif !important;
}
/* Desktop: two-column field-row, mobile override in @media (max-width: 768px) below */
.dream-upload-field-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.dream-upload-field {
min-width: 0 !important;
display: grid !important;
gap: 8px !important;
}
.dream-upload-field > label,
.dream-upload-field > span,
.dream-upload-field legend,
.dream-upload-provenance > strong,
.dream-upload-visibility-radio > strong,
.dream-upload-progress > strong {
margin: 0 !important;
color: rgba(255,255,255,.56) !important;
font: 850 10.5px/1.2 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
}
.dream-upload-field input,
.dream-upload-field textarea,
.dream-upload-field select {
width: 100% !important;
min-width: 0 !important;
border-radius: 16px !important;
border: 1px solid rgba(255,255,255,.12) !important;
background: var(--card-bg, rgba(255,255,255,.05)) !important;
color: var(--text-primary, rgba(255,255,255,.92)) !important;
padding: 13px 14px !important;
box-sizing: border-box !important;
font: 650 13px/1.35 'DM Sans', system-ui, sans-serif !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.dream-upload-field textarea {
min-height: 112px !important;
resize: vertical !important;
}
.dream-upload-field input::placeholder,
.dream-upload-field textarea::placeholder {
color: rgba(255,255,255,.38) !important;
}
.dream-upload-field input:focus,
.dream-upload-field textarea:focus,
.dream-upload-field select:focus {
outline: none !important;
border-color: rgba(30,215,96,.45) !important;
box-shadow: 0 0 0 3px rgba(30,215,96,.14) !important;
}
.dream-upload-field input[type="file"] {
padding: 10px !important;
cursor: pointer !important;
}
.dream-upload-field input[type="file"]::file-selector-button {
appearance: none !important;
margin-right: 10px !important;
padding: 8px 12px !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,.12) !important;
background: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.84) !important;
font: 800 11px/1 'DM Sans', system-ui, sans-serif !important;
}
/* ── Drop zone base styles (DW-FEAT-040 scope 2) ── */
.dream-upload-drop-zone {
position: relative !important;
border-radius: 18px !important;
border: 1.5px dashed rgba(255,255,255,.22) !important;
background: rgba(255,255,255,.028) !important;
padding: 22px 16px !important;
min-height: 80px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease !important;
user-select: none !important;
}
.dream-upload-drop-zone:hover,
.dream-upload-drop-zone.drag-over {
border-color: rgba(30,215,96,.60) !important;
background: rgba(30,215,96,.07) !important;
transform: scale(1.01) !important;
}
/* Full-file-input sits invisibly over the whole drop zone */
.dream-upload-file-input {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
opacity: 0 !important;
cursor: pointer !important;
z-index: 2 !important;
}
/* Hint block: icon + filename + preview btn — sits above the invisible input */
#audioDropHint {
display: flex !important;
align-items: center !important;
gap: 10px !important;
pointer-events: none !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
.dream-upload-drop-icon {
font-size: 22px !important;
line-height: 1 !important;
color: rgba(255,255,255,.40) !important;
flex-shrink: 0 !important;
}
#audioFileName {
color: rgba(255,255,255,.72) !important;
font: 650 13px/1.3 'DM Sans', system-ui, sans-serif !important;
text-align: center !important;
word-break: break-all !important;
}
.dream-upload-preview-btn {
pointer-events: auto !important;
flex-shrink: 0 !important;
}
.dream-upload-progress {
display: grid !important;
gap: 8px !important;
padding: 12px !important;
border-radius: 18px !important;
border: 1px solid rgba(255,255,255,.08) !important;
background: rgba(255,255,255,.045) !important;
}
.dream-upload-progress > span,
.dream-upload-progress > em,
.dream-upload-progress > small {
color: rgba(255,255,255,.76) !important;
font: 650 12px/1.35 'DM Sans', system-ui, sans-serif !important;
font-style: normal !important;
}
.dream-upload-progress progress {
width: 100% !important;
height: 8px !important;
appearance: none !important;
-webkit-appearance: none !important;
border: 0 !important;
border-radius: 999px !important;
overflow: hidden !important;
background: rgba(255,255,255,.14) !important;
}
.dream-upload-progress progress::-webkit-progress-bar {
background: rgba(255,255,255,.14) !important;
}
.dream-upload-progress progress::-webkit-progress-value {
background: var(--spotify-green, var(--dw-green, var(--neon-green, #1ed760))) !important;
box-shadow: 0 0 16px rgba(30,215,96,.32) !important;
}
.dream-upload-progress progress::-moz-progress-bar {
background: var(--spotify-green, var(--dw-green, var(--neon-green, #1ed760))) !important;
box-shadow: 0 0 16px rgba(30,215,96,.32) !important;
}
/* ── Div-based progress bar (DW-FEAT-040 scope 1) ── */
.dream-upload-progress-bar {
width: 100% !important;
height: 8px !important;
border-radius: 999px !important;
overflow: hidden !important;
background: rgba(255,255,255,.14) !important;
}
.dream-upload-progress-fill {
height: 100% !important;
border-radius: 999px !important;
background: linear-gradient(90deg, #1ed760, #1dd77a) !important;
box-shadow: 0 0 14px rgba(30,215,96,.35) !important;
transition: width 0.25s ease !important;
min-width: 0 !important;
max-width: 100% !important;
}
.dream-upload-visibility-radio {
display: grid !important;
gap: 8px !important;
}
.dream-upload-visibility-radio label {
display: grid !important;
grid-template-columns: 18px minmax(0, 1fr) !important;
align-items: start !important;
gap: 10px !important;
padding: 12px !important;
border-radius: 16px !important;
border: 1px solid rgba(255,255,255,.08) !important;
background: rgba(255,255,255,.04) !important;
cursor: pointer !important;
}
.dream-upload-visibility-radio input {
margin: 2px 0 0 !important;
accent-color: var(--spotify-green, var(--dw-green, var(--neon-green, #1ed760))) !important;
}
.dream-upload-visibility-radio label strong,
.dream-upload-visibility-radio label span {
display: block !important;
}
.dream-upload-visibility-radio label strong {
color: rgba(255,255,255,.92) !important;
font: 760 13px/1.2 'DM Sans', system-ui, sans-serif !important;
}
.dream-upload-visibility-radio label span {
margin-top: 3px !important;
color: rgba(255,255,255,.56) !important;
font: 620 11.5px/1.35 'DM Sans', system-ui, sans-serif !important;
}
.dream-upload-provenance {
display: grid !important;
gap: 10px !important;
padding: 12px !important;
border-radius: 18px !important;
border: 1px solid rgba(255,255,255,.08) !important;
background: rgba(0,0,0,.18) !important;
}
.dream-upload-cover-preview {
min-height: 176px !important;
display: grid !important;
place-items: center !important;
gap: 10px !important;
padding: 12px !important;
border-radius: 20px !important;
border: 1px dashed rgba(255,255,255,.18) !important;
background: rgba(255,255,255,.03) !important;
overflow: hidden !important;
}
.dream-upload-cover-preview img {
width: 100% !important;
max-width: 220px !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
border-radius: 18px !important;
box-shadow: 0 12px 34px rgba(0,0,0,.24) !important;
}
.dream-upload-cover-preview span,
.dream-upload-cover-preview em,
.dream-upload-cover-preview small {
color: rgba(255,255,255,.54) !important;
font: 620 12px/1.35 'DM Sans', system-ui, sans-serif !important;
font-style: normal !important;
text-align: center !important;
}
.dream-upload-cover-preview-img,
.dream-upload-summary-art-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: inherit !important;
display: block !important;
}
.dream-upload-summary-card {
display: grid !important;
gap: 12px !important;
padding: 14px !important;
border-radius: 22px !important;
border: 1px solid rgba(255,255,255,.08) !important;
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)) !important;
}
.dream-upload-summary-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.dream-upload-summary-metric {
display: grid !important;
gap: 3px !important;
padding: 10px !important;
border-radius: 17px !important;
background: rgba(255,255,255,.048) !important;
border: 1px solid rgba(255,255,255,.055) !important;
}
/* Upload audio preview button */
.dream-upload-preview-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 40px !important;
min-height: 40px !important;
width: 40px !important;
height: 40px !important;
padding: 0 !important;
margin-left: 8px !important;
border-radius: 50% !important;
border: 1px solid rgba(255,255,255,.18) !important;
background: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.9) !important;
font-size: 16px !important;
line-height: 1 !important;
cursor: pointer !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
transition: background 0.15s ease !important;
}
.dream-upload-preview-btn:hover:not(:disabled) {
background: rgba(255,255,255,.14) !important;
}
.dream-upload-preview-btn:disabled {
opacity: 0.35 !important;
cursor: not-allowed !important;
}
/* Drag-drop zone: visual highlight when file dragged over */
#audioDropZone {
transition: border-color 0.15s ease, background 0.15s ease !important;
}
#audioDropZone.drag-over {
border-color: rgba(30,215,96,.55) !important;
background: rgba(30,215,96,.06) !important;
}
/* Progress row: label + percentage side by side */
.dream-upload-progress-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
}
.dream-upload-progress-pct {
color: rgba(30,215,96,.9) !important;
font: 800 11px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .06em !important;
min-width: 32px !important;
text-align: right !important;
}
/* Upload cancel button */
.dream-upload-cancel-btn {
appearance: none !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,.18) !important;
padding: 10px 16px !important;
font: 800 11px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
background: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.75) !important;
cursor: pointer !important;
min-height: 44px !important;
display: grid !important;
place-items: center !important;
transition: background 0.15s ease !important;
}
.dream-upload-cancel-btn:hover {
background: rgba(255,255,255,.14) !important;
}
/* Upload submit button: enforce 44px min-height on mobile */
.dream-upload-submit {
min-height: 44px !important;
}
/* Upload error/success: ensure inline and visible on mobile */
.dream-upload-error {
padding: 12px 14px !important;
border-radius: 14px !important;
border: 1px solid rgba(255,80,80,.45) !important;
background: rgba(255,80,80,.08) !important;
color: rgba(255,140,140,.95) !important;
font: 700 13px/1.3 'DM Sans', system-ui, sans-serif !important;
display: block !important;
}
.dream-upload-error:empty { display: none !important; }
/* AC-2: Upload success confirmation state */
.dream-upload-success {
padding: 12px 14px !important;
border-radius: 14px !important;
border: 1px solid rgba(30,215,96,.45) !important;
background: rgba(30,215,96,.08) !important;
color: rgba(140,255,160,.95) !important;
font: 700 13px/1.3 'DM Sans', system-ui, sans-serif !important;
display: block !important;
margin-top: 6px !important;
align-items: center !important;
gap: 8px !important;
}
.dream-upload-success:empty { display: none !important; }
.dream-upload-success-check {
font-size: 16px !important;
line-height: 1 !important;
}
.dream-upload-view-studio-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 44px !important;
padding: 0 14px !important;
background: rgba(30,215,96,.18) !important;
border: 1px solid rgba(30,215,96,.4) !important;
border-radius: 999px !important;
color: #1ed760 !important;
font: 600 12px/1 'DM Sans', system-ui, sans-serif !important;
cursor: pointer !important;
margin-left: 6px !important;
white-space: nowrap !important;
vertical-align: middle !important;
}
/* Mobile dropzone touch target (DW-FEAT-040 scope 5) */
@media (max-width: 768px) {
.dream-upload-drop-zone {
min-height: 60px !important;
padding: 16px 14px !important;
}
.dream-upload-file-input {
z-index: 10 !important;
}
#audioDropHint {
gap: 8px !important;
flex-direction: column !important;
align-items: center !important;
}
#audioFileName {
font-size: 12px !important;
}
/* Cover art preview enhancement on mobile (DW-FEAT-040 scope 6) */
.dream-upload-cover-preview {
min-height: 120px !important;
border-radius: 16px !important;
padding: 14px !important;
}
.dream-upload-cover-preview img {
max-height: 140px !important;
width: auto !important;
border-radius: 12px !important;
}
/* DW-FEAT-057: field-row single-column on tablet/mobile */
.dream-upload-field-row {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* DW-FEAT-057: visibility radio rows full-width stacked on mobile */
.dream-upload-visibility-radio label {
grid-template-columns: 18px 1fr !important;
padding: 10px 12px !important;
border-radius: 12px !important;
align-items: start !important;
}
.dream-upload-visibility-radio label span span {
display: block !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
/* DW-FEAT-057: upload progress non-overlapping with form fields */
.dream-upload-progress {
margin-top: 4px !important;
padding: 14px !important;
}
/* DW-FEAT-057: error has bottom clearance */
.dream-upload-error {
padding: 10px 14px !important;
border-radius: 12px !important;
margin-top: 4px !important;
}
/* DW-FEAT-057: submit + cancel 44px touch targets on mobile */
.dream-upload-submit {
min-height: 48px !important;
width: 100% !important;
font-size: 15px !important;
border-radius: 16px !important;
margin-top: 4px !important;
}
.dream-upload-cancel-btn {
min-height: 44px !important;
width: 100% !important;
border-radius: 16px !important;
margin-top: 4px !important;
padding: 0 14px !important;
}
/* AC-2: success state on mobile */
.dream-upload-success {
padding: 10px 14px !important;
border-radius: 12px !important;
margin-top: 6px !important;
font-size: 12.5px !important;
}
.dream-upload-view-studio-btn {
min-height: 38px !important;
padding: 0 12px !important;
font-size: 11.5px !important;
display: inline-flex !important;
}
}
@media (max-width: 520px) {
/* DW-FEAT-057: tighter phone spacing */
.dream-upload-step {
padding: 12px 10px !important;
gap: 10px !important;
}
.dream-upload-field input,
.dream-upload-field textarea,
.dream-upload-field select {
padding: 12px 12px !important;
font-size: 14px !important;
}
/* DW-FEAT-057: visibility radio compact on very narrow phones */
.dream-upload-visibility-radio label {
padding: 8px 10px !important;
}
.dream-upload-visibility-radio label strong {
font-size: 12.5px !important;
}
.dream-upload-visibility-radio label span {
font-size: 11px !important;
}
}
@media (max-width: 520px) {
.dream-upload-drop-zone {
min-height: 80px !important;
}
#audioDropHint {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
}
.dream-upload-summary-metric span {
color: rgba(255,255,255,.52) !important;
font: 800 10.5px/1.2 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
}
.dream-upload-summary-metric strong {
color: rgba(255,255,255,.94) !important;
font: 800 14px/1.2 'DM Sans', system-ui, sans-serif !important;
}
.dream-upload-summary-metric em {
color: rgba(255,255,255,.60) !important;
font: 620 11.5px/1.4 'DM Sans', system-ui, sans-serif !important;
font-style: normal !important;
}
.dream-upload-summary-track {
display: grid !important;
grid-template-columns: 72px minmax(0, 1fr) !important;
gap: 10px !important;
align-items: center !important;
}
.dream-upload-summary-art {
width: 72px !important;
height: 72px !important;
border-radius: 18px !important;
border: 1px dashed rgba(255,255,255,.14) !important;
background: rgba(255,255,255,.035) !important;
display: grid !important;
place-items: center !important;
overflow: hidden !important;
}
.dream-upload-summary-art span {
color: rgba(255,255,255,.54) !important;
font: 700 10.2px/1.25 'DM Sans', system-ui, sans-serif !important;
text-align: center !important;
padding: 0 8px !important;
}
.dream-upload-summary-copy {
min-width: 0 !important;
display: grid !important;
gap: 3px !important;
}
.dream-upload-summary-kicker {
color: rgba(155,231,255,.74) !important;
font: 780 9.5px/1.2 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
}
.dream-upload-summary-copy strong {
color: rgba(255,255,255,.95) !important;
font: 800 16px/1.15 'DM Sans', system-ui, sans-serif !important;
}
.dream-upload-summary-copy em,
.dream-upload-summary-copy span:last-child {
color: rgba(255,255,255,.76) !important;
font: 620 12px/1.45 'DM Sans', system-ui, sans-serif !important;
font-style: normal !important;
}
.dream-upload-recent-list {
display: grid !important;
gap: 8px !important;
}
.dream-upload-recent-row {
display: grid !important;
grid-template-columns: 44px minmax(0, 1fr) !important;
gap: 10px !important;
align-items: center !important;
padding: 9px !important;
border-radius: 16px !important;
background: rgba(255,255,255,.045) !important;
border: 1px solid rgba(255,255,255,.055) !important;
}
.dream-upload-recent-art {
width: 44px !important;
height: 44px !important;
border-radius: 12px !important;
object-fit: cover !important;
}
.dream-upload-recent-copy {
min-width: 0 !important;
display: grid !important;
gap: 3px !important;
}
.dream-upload-recent-copy strong {
color: rgba(255,255,255,.95) !important;
font: 760 13px/1.2 'DM Sans', system-ui, sans-serif !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-upload-recent-copy em,
.dream-upload-recent-empty {
color: rgba(255,255,255,.56) !important;
font: 620 11.5px/1.4 'DM Sans', system-ui, sans-serif !important;
font-style: normal !important;
}
.dream-upload-recent-empty {
padding: 11px !important;
border-radius: 16px !important;
background: rgba(255,255,255,.04) !important;
border: 1px dashed rgba(255,255,255,.09) !important;
}
.dream-upload-provenance-visibility {
margin-top: 4px !important;
}
.dream-studio-upload-notice {
margin-top: 10px !important;
padding: 10px 12px !important;
border-radius: 18px !important;
background: rgba(120,229,185,.10) !important;
border: 1px solid rgba(120,229,185,.18) !important;
color: rgba(235,255,243,.88) !important;
font: 630 11.5px/1.42 'DM Sans', system-ui, sans-serif !important;
}
.dream-studio-upload-row-fresh {
border-color: rgba(120,229,185,.20) !important;
box-shadow: 0 0 0 1px rgba(120,229,185,.05), 0 12px 28px rgba(0,0,0,.14) !important;
}
.dream-status-chip--fresh {
background: rgba(120,229,185,.10) !important;
color: rgba(232,255,241,.86) !important;
border-color: rgba(120,229,185,.16) !important;
}
@media (max-width: 640px) {
.dream-upload-summary-grid {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 520px) {
.dream-upload-summary-track {
grid-template-columns: 56px minmax(0, 1fr) !important;
gap: 9px !important;
align-items: start !important;
}
.dream-upload-summary-art {
width: 56px !important;
height: 56px !important;
border-radius: 16px !important;
}
body[data-dream-route="search"] .mini-now-playing,
body[data-dream-route="upload"] .mini-now-playing,
body[data-dream-route="studio"] .mini-now-playing,
body[data-dream-route="account"] .mini-now-playing,
body.dream-app-open[data-dream-route="search"] .mini-now-playing,
body.dream-app-open[data-dream-route="upload"] .mini-now-playing,
body.dream-app-open[data-dream-route="studio"] .mini-now-playing,
body.dream-app-open[data-dream-route="account"] .mini-now-playing {
display: none !important;
}
body[data-dream-route="search"] .dream-bottom-tabs,
body[data-dream-route="upload"] .dream-bottom-tabs,
body[data-dream-route="studio"] .dream-bottom-tabs,
body[data-dream-route="account"] .dream-bottom-tabs,
body[data-dream-route="billing"] .dream-bottom-tabs,
body.dream-app-open[data-dream-route="search"] .dream-bottom-tabs,
body.dream-app-open[data-dream-route="upload"] .dream-bottom-tabs,
body.dream-app-open[data-dream-route="studio"] .dream-bottom-tabs,
body.dream-app-open[data-dream-route="account"] .dream-bottom-tabs,
body.dream-app-open[data-dream-route="billing"] .dream-bottom-tabs {
bottom: 0 !important;
}
body[data-dream-route="search"] .dream-app-content,
body[data-dream-route="upload"] .dream-app-content,
body[data-dream-route="studio"] .dream-app-content,
body[data-dream-route="account"] .dream-app-content,
body[data-dream-route="billing"] .dream-app-content,
body.dream-app-open[data-dream-route="search"] .dream-app-content,
body.dream-app-open[data-dream-route="upload"] .dream-app-content,
body.dream-app-open[data-dream-route="studio"] .dream-app-content,
body.dream-app-open[data-dream-route="account"] .dream-app-content,
body.dream-app-open[data-dream-route="billing"] .dream-app-content {
padding: 0 14px calc(var(--dream-mobile-tabs-clearance) + var(--dream-mobile-mini-clearance)) !important;
}
body[data-dream-route="upload"] .dream-hero,
body.dream-app-open[data-dream-route="upload"] .dream-hero {
padding: 13px 14px !important;
margin-bottom: 6px !important;
}
body[data-dream-route="upload"] .dream-upload-summary-card,
body[data-dream-route="upload"] .dream-upload-step,
body.dream-app-open[data-dream-route="upload"] .dream-upload-summary-card,
body.dream-app-open[data-dream-route="upload"] .dream-upload-step {
padding: 10px !important;
border-radius: 18px !important;
}
body[data-dream-route="upload"] .dream-section-head,
body.dream-app-open[data-dream-route="upload"] .dream-section-head {
align-items: flex-start !important;
gap: 8px !important;
}
body[data-dream-route="upload"] .dream-status-chip,
body[data-dream-route="studio"] .dream-status-chip,
body.dream-app-open[data-dream-route="upload"] .dream-status-chip,
body.dream-app-open[data-dream-route="studio"] .dream-status-chip {
padding: 3px 7px !important;
font-size: 8.5px !important;
letter-spacing: .09em !important;
background: rgba(155,231,255,.08) !important;
border-color: rgba(155,231,255,.10) !important;
color: rgba(230,247,255,.72) !important;
}
body[data-dream-route="upload"] .dream-upload-summary-grid,
body.dream-app-open[data-dream-route="upload"] .dream-upload-summary-grid {
gap: 8px !important;
}
body[data-dream-route="upload"] .dream-upload-summary-metric,
body.dream-app-open[data-dream-route="upload"] .dream-upload-summary-metric {
padding: 9px !important;
}
body[data-dream-route="upload"] .dream-upload-summary-copy strong,
body.dream-app-open[data-dream-route="upload"] .dream-upload-summary-copy strong {
font-size: 15px !important;
line-height: 1.1 !important;
}
body[data-dream-route="upload"] .dream-upload-summary-copy em,
body[data-dream-route="upload"] .dream-upload-summary-copy span:last-child,
body.dream-app-open[data-dream-route="upload"] .dream-upload-summary-copy em,
body.dream-app-open[data-dream-route="upload"] .dream-upload-summary-copy span:last-child,
body[data-dream-route="upload"] .dream-upload-step-copy,
body.dream-app-open[data-dream-route="upload"] .dream-upload-step-copy {
font-size: 11.5px !important;
line-height: 1.35 !important;
}
body[data-dream-route="upload"] .dream-upload-step--recent,
body.dream-app-open[data-dream-route="upload"] .dream-upload-step--recent {
margin-top: 8px !important;
}
}
@media (max-width: 640px) {
.dream-studio-upload-row {
gap: 0.72rem;
padding: 0.8rem;
border-radius: 16px;
}
.dream-studio-upload-notice {
margin-top: 8px !important;
padding: 9px 11px !important;
font: 630 11px/1.38 'DM Sans', system-ui, sans-serif !important;
}
.dream-status-chip--fresh {
padding: 3px 6px !important;
font-size: 8px !important;
letter-spacing: .10em !important;
}
}
.queue-header {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin: 0 0 10px !important;
}
.queue-header-title {
min-width: 0 !important;
flex: 1 1 auto !important;
color: rgba(255,255,255,.88) !important;
font: 900 11px/1.1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
}
.queue-header-actions {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-wrap: wrap !important;
}
.queue-clear-btn,
.queue-save-btn {
appearance: none !important;
border: 1px solid rgba(255,255,255,.10) !important;
background: rgba(255,255,255,.05) !important;
color: rgba(255,255,255,.74) !important;
border-radius: 999px !important;
min-height: 44px !important;
padding: 0 14px !important;
font: 850 10px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
cursor: pointer !important;
}
.queue-clear-btn:hover,
.queue-clear-btn:active,
.queue-save-btn:hover,
.queue-save-btn:active {
border-color: rgba(255,255,255,.16) !important;
background: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.9) !important;
}
.queue-empty {
padding: 16px 14px !important;
border-radius: 18px !important;
border: 1px dashed rgba(255,255,255,.14) !important;
background: rgba(255,255,255,.035) !important;
color: rgba(255,255,255,.56) !important;
text-align: center !important;
font: 620 12px/1.45 'DM Sans', system-ui, sans-serif !important;
}
.queue-list {
display: grid !important;
gap: 0 !important;
}
.queue-now-playing {
display: grid !important;
gap: 8px !important;
margin: 0 0 12px !important;
padding: 12px !important;
border-radius: 18px !important;
border: 1px solid rgba(255,255,255,.08) !important;
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.028)) !important;
}
.queue-now-label {
color: var(--spotify-green, var(--dw-green, var(--neon-green, #1ed760))) !important;
font: 900 10px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
}
.queue-now-item,
.queue-item {
display: grid !important;
grid-template-columns: auto auto 30px 42px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 8px !important;
}
/* Prevent 300ms touch delay on queue items — responsive without zoom */
.queue-item,
.q-remove,
.queue-list {
touch-action: manipulation !important;
}
.queue-now-item {
grid-template-columns: 42px minmax(0, 1fr) !important;
}
.queue-item {
padding: 10px 0 !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
cursor: pointer !important;
position: relative !important;
transition: background .15s ease, border-color .15s ease, opacity .15s ease !important;
}
.queue-item:last-child {
border-bottom: 0 !important;
}
.queue-item:hover,
.queue-item:active {
background: rgba(255,255,255,.04) !important;
}
/* DW-FEAT-028: active track in queue list — distinct from Now Playing card */
.queue-item--active {
background: rgba(0, 184, 212, .08) !important;
border-left: 3px solid #00b8d4 !important;
padding-left: calc(10px - 3px) !important;
}
.queue-item--active .q-name {
color: #00e5ff !important;
font-weight: 600 !important;
}
.queue-item--active .q-num {
color: #00e5ff !important;
}
.queue-item--active .q-drag-handle {
color: rgba(0, 229, 255, .55) !important;
}
.queue-item.dragging {
opacity: .62 !important;
}
.queue-item.drag-over {
border-top: 1px solid var(--spotify-green, var(--dw-green, var(--neon-green, #1ed760))) !important;
}
.queue-item .q-cover,
.queue-now-item .q-cover {
width: 42px !important;
height: 42px !important;
border-radius: 14px !important;
object-fit: cover !important;
border: 1px solid rgba(255,255,255,.08) !important;
box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
}
.queue-item .q-info,
.queue-now-item .q-info {
min-width: 0 !important;
}
.queue-item .q-name,
.queue-now-item .q-name {
color: rgba(255,255,255,.92) !important;
font: 800 13px/1.2 'DM Sans', system-ui, sans-serif !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.queue-item .q-artist,
.queue-now-item .q-artist {
margin-top: 2px !important;
color: rgba(255,255,255,.56) !important;
font: 620 11.5px/1.25 'DM Sans', system-ui, sans-serif !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.queue-item .q-album,
.queue-now-item .q-album {
margin-top: 2px !important;
color: rgba(255,255,255,.42) !important;
font: 620 10.5px/1.2 'DM Sans', system-ui, sans-serif !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.queue-item .q-drag-handle {
color: rgba(255,255,255,.32) !important;
font-size: 13px !important;
cursor: grab !important;
line-height: 1 !important;
}
.queue-item .q-drag-handle:active {
cursor: grabbing !important;
}
@media (max-width: 520px) {
#queuePanel .queue-item .q-drag-handle {
display: none !important;
}
}
.queue-item .q-reorder {
display: none !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px !important;
width: 30px !important;
}
@media (max-width: 520px) {
#queuePanel .queue-item .q-reorder {
display: flex !important;
}
}
.queue-item .q-move {
appearance: none !important;
border: 0 !important;
background: transparent !important;
color: rgba(255,255,255,.42) !important;
font-size: 9px !important;
line-height: 1 !important;
padding: 4px 2px !important;
cursor: pointer !important;
min-width: 30px !important;
min-height: 22px !important;
border-radius: 6px !important;
}
.queue-item .q-move:hover,
.queue-item .q-move:active {
background: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.88) !important;
}
.queue-item .q-num {
width: 18px !important;
color: rgba(255,255,255,.34) !important;
text-align: center !important;
font: 900 10px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .08em !important;
}
.queue-item .q-remove {
width: 30px !important;
height: 30px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
border-radius: 999px !important;
border: 0 !important;
background: rgba(255,255,255,.05) !important;
color: rgba(255,255,255,.46) !important;
}
.queue-item .q-remove:hover,
.queue-item .q-remove:active {
background: rgba(255,255,255,.10) !important;
color: rgba(255,255,255,.86) !important;
}
.add-to-queue-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 34px !important;
height: 32px !important;
padding: 0 10px !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,.10) !important;
background: rgba(255,255,255,.045) !important;
color: rgba(255,255,255,.72) !important;
font: 900 10px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .11em !important;
text-transform: uppercase !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.add-to-queue-btn:hover,
.add-to-queue-btn:active {
border-color: rgba(30,215,96,.34) !important;
background: rgba(30,215,96,.12) !important;
color: var(--spotify-green, var(--dw-green, var(--neon-green, #1ed760))) !important;
}
.add-to-queue-btn[aria-pressed="true"],
.add-to-queue-btn.is-active,
.add-to-queue-btn.is-queued {
border-color: var(--spotify-green, var(--dw-green, var(--neon-green, #1ed760))) !important;
background: var(--spotify-green, var(--dw-green, var(--neon-green, #1ed760))) !important;
color: #050506 !important;
box-shadow: 0 10px 24px rgba(30,215,96,.22) !important;
}
.agent-results-list {
display: grid !important;
gap: 10px !important;
}
.agent-result-card {
display: grid !important;
gap: 10px !important;
padding: 14px !important;
border-radius: 20px !important;
border: 1px solid rgba(255,255,255,.08) !important;
background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028)) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.agent-result-card > strong,
.agent-result-card > h4,
.agent-result-card .agent-result-title {
margin: 0 !important;
color: rgba(255,255,255,.94) !important;
font: 840 14px/1.22 'DM Sans', system-ui, sans-serif !important;
letter-spacing: -.01em !important;
}
.agent-result-card > p,
.agent-result-card > em,
.agent-result-card .agent-result-copy,
.agent-result-card .agent-result-meta {
margin: 0 !important;
color: rgba(255,255,255,.60) !important;
font: 620 12px/1.45 'DM Sans', system-ui, sans-serif !important;
font-style: normal !important;
}
.agent-result-card .dream-status-chip {
justify-self: start !important;
background: rgba(30,215,96,.12) !important;
border-color: rgba(30,215,96,.16) !important;
color: var(--spotify-green, var(--dw-green, var(--neon-green, #1ed760))) !important;
}
.agent-result-card .dream-row-actions {
margin-top: 2px !important;
}
.agent-result-card .dream-row-actions > * {
flex: 0 0 auto !important;
}
@media (min-width: 760px) {
.agent-results-list {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 520px) {
.dream-upload-step,
.dream-upload-progress,
.dream-upload-provenance,
.agent-result-card {
padding: 12px !important;
border-radius: 18px !important;
}
.dream-upload-cover-preview {
min-height: 152px !important;
border-radius: 18px !important;
}
.queue-item {
grid-template-columns: 14px 18px 40px minmax(0, 1fr) 28px !important;
gap: 8px !important;
}
.queue-now-item {
grid-template-columns: 40px minmax(0, 1fr) !important;
}
.queue-item .q-cover,
.queue-now-item .q-cover {
width: 40px !important;
height: 40px !important;
border-radius: 12px !important;
}
.queue-clear-btn,
.add-to-queue-btn {
min-height: 30px !important;
height: 30px !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
}
/* ─── Creator Studio ─────────────────────────────────────────────────────────── */
.dream-studio-shell {
display: block;
background: rgba(8,9,14,0.72);
backdrop-filter: blur(12px) saturate(1.1);
-webkit-backdrop-filter: blur(12px) saturate(1.1);
border-radius: 0 0 24px 24px;
}
.dream-studio-hero {
padding: 1.2rem 1.1rem 0.8rem;
border-bottom: 1px solid rgba(255,255,255,0.06);
background: rgba(8,9,14,0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.dream-studio-hero--primary,
.dream-studio-stats {
max-height: 220px;
overflow: hidden;
opacity: 1;
transition: max-height 0.22s ease, opacity 0.18s ease, padding 0.18s ease, border-color 0.18s ease, margin 0.18s ease;
}
.dream-studio-hero--primary {
display: block;
}
.dream-studio-shell.is-editing .dream-studio-hero--primary {
max-height: 0;
opacity: 0;
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
border-bottom-color: transparent;
}
.dream-studio-shell.is-editing .dream-studio-stats {
max-height: 0;
opacity: 0;
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
border-bottom-color: transparent;
}
.dream-studio-shell.is-editing .dream-studio-section {
padding-top: 0.4rem;
}
.dream-studio-hero h2 {
font-size: 1.05rem;
margin: 0.22rem 0 0;
letter-spacing: -0.01em;
opacity: 0.92;
text-shadow: 0 1px 6px rgba(0,0,0,0.85), 0 0 18px rgba(0,0,0,0.6) !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
max-width: 100% !important;
}
@media (min-width: 641px) {
.dream-studio-hero h2 {
font-size: 1.18rem;
letter-spacing: -0.03em;
}
}
.dream-studio-hero p { margin: 0.22rem 0 0; opacity: 0.68; font-size: 0.82rem; line-height: 1.4; max-width: 24rem; }
.dream-studio-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.45rem;
padding: 0.65rem 1.1rem 0.8rem;
border-bottom: 1px solid rgba(255,255,255,0.06);
background: rgba(8,9,14,0.48);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.dream-studio-stat {
background: rgba(12,12,20,0.78);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 0.55rem 0.65rem;
text-align: center;
}
.dream-studio-stat strong { display: block; font-size: 1.4rem; color: var(--neon-pink, #ff71ce); }
.dream-studio-stat span { font-size: 0.66rem; opacity: 0.58; text-transform: uppercase; letter-spacing: 0.08em; }
.dream-studio-section {
padding: 0.65rem 1.1rem 0.4rem;
background: rgba(8,9,14,0.38);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.dream-studio-section h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.62; margin: 0 0 0.5rem; }
.dream-studio-upload-row {
display: flex;
align-items: flex-start;
gap: 0.72rem;
padding: 0.8rem;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 18px;
background: rgba(10,10,18,0.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
font-size: 0.875rem;
}
.dream-studio-upload-row + .dream-studio-upload-row { margin-top: 0.55rem; }
.dream-studio-upload-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.07); }
.dream-studio-upload-meta { flex: 1; min-width: 0; }
.dream-studio-upload-meta strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.94rem; line-height: 1.2; }
.dream-studio-upload-meta em { display: block; margin-top: 0.22rem; font-size: 0.72rem; line-height: 1.35; opacity: 0.6; }
.dream-studio-row-actions {
display: flex;
align-items: stretch;
gap: 0.45rem;
flex-wrap: nowrap;
flex: 0 0 148px;
flex-direction: column;
justify-content: flex-start;
}
.dream-studio-row-status {
display: grid;
align-items: stretch;
gap: 0.38rem;
flex-wrap: nowrap;
justify-content: stretch;
}
.dream-studio-action-buttons {
display: grid;
align-items: stretch;
gap: 0.4rem;
flex-wrap: nowrap;
justify-content: stretch;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dream-studio-select-wrap {
display: grid;
align-items: stretch;
gap: 0.25rem;
width: 100%;
}
.dream-studio-status-pill {
font-size: 0.58rem;
text-transform: uppercase;
letter-spacing: 0.12em;
opacity: 0.44;
}
.dream-studio-visibility-select {
min-height: 40px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.07);
color: #fff;
padding: 0.3rem 0.72rem;
font-size: 0.7rem;
width: 100%;
}
.dream-studio-visibility {
font-size: 0.65rem;
padding: 0.15rem 0.4rem;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.dream-studio-visibility.public { background: rgba(0,200,100,0.15); color: #00c864; }
.dream-studio-visibility.private { background: rgba(255,200,0,0.12); color: #ffc800; }
.dream-studio-visibility.draft { background: rgba(255,255,255,0.08); color: #aaa; }
.dream-studio-delete,
.dream-studio-edit,
.dream-studio-save,
.dream-studio-cancel {
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.16);
color: rgba(255,255,255,0.78);
border-radius: 999px;
padding: 0.38rem 0.6rem;
font-size: 0.68rem;
cursor: pointer;
flex-shrink: 0;
min-height: 44px;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dream-studio-delete {
background: rgba(255,80,80,0.04);
border-color: rgba(255,80,80,0.3);
color: rgba(255,80,80,0.7);
}
.dream-studio-delete:hover { background: rgba(255,80,80,0.15); color: #ff5050; border-color: rgba(255,80,80,0.6); }
.dream-studio-edit:hover,
.dream-studio-save:hover,
.dream-studio-cancel:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.3); }
.dream-studio-save { border-color: rgba(30,215,96,0.35); color: rgba(30,215,96,0.9); }
.dream-studio-save:hover { background: rgba(30,215,96,0.12); border-color: rgba(30,215,96,0.55); color: #7dffb0; }
.dream-studio-cancel { color: rgba(255,255,255,0.6); }
.dream-studio-plays { font-size: 0.68rem; opacity: 0.56; flex-shrink: 0; min-width: 0; text-align: left; padding-left: 2px; }
.dream-studio-footer-cta { padding: 0.45rem 1.1rem 0.85rem; }
.dream-studio-footer-cta .dream-secondary { width: 100%; }
.dream-studio-edit-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
.dream-studio-edit-toolbar {
display: grid;
gap: 0.75rem;
}
.dream-studio-edit-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
.dream-studio-save-feedback,
.dream-studio-validation-error {
grid-column: 1 / -1;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: 0.25rem 0.65rem;
border-radius: 999px;
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.16s ease, transform 0.16s ease;
pointer-events: none;
}
.dream-studio-save-feedback {
border: 1px solid rgba(30,215,96,0.24);
background: rgba(30,215,96,0.12);
color: rgba(125,255,176,0.95);
}
.dream-studio-save-feedback.is-visible {
opacity: 1;
transform: translateY(0);
}
.dream-studio-validation-error.is-visible {
opacity: 1;
transform: translateY(0);
}
.dream-studio-validation-error {
border: 1px solid rgba(255,114,94,0.3);
background: rgba(255,114,94,0.12);
color: rgba(255,184,176,0.96);
}
.dream-studio-visibility-feedback {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
padding: 0.22rem 0.55rem;
border-radius: 999px;
border: 1px solid rgba(120,180,255,0.22);
background: rgba(120,180,255,0.10);
color: rgba(190,220,255,0.95);
font-size: 0.64rem;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0;
transform: translateY(3px);
transition: opacity 0.16s ease, transform 0.16s ease;
pointer-events: none;
}
.dream-studio-visibility-feedback.is-visible {
opacity: 1;
transform: translateY(0);
}
.dream-studio-edit-actions-inline {
display: grid;
}
.dream-studio-edit-actions-dock {
display: grid;
}
.dream-studio-edit-dock {
display: none;
}
.dream-studio-edit-dock-spacer {
display: none;
}
.dream-studio-edit-grid label {
display: grid;
gap: 0.25rem;
}
.dream-studio-edit-grid span {
font-size: 0.65rem;
opacity: 0.55;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.dream-studio-edit-grid input {
min-width: 0;
min-height: 36px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.06);
color: #fff;
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
}
.dream-studio-edit-grid input.is-invalid {
border-color: rgba(255,114,94,0.55);
box-shadow: 0 0 0 1px rgba(255,114,94,0.22);
background: rgba(255,114,94,0.08);
}
/* ── Desktop (>=1100px): studio edit inputs float over cinematic video — boost opacity ── */
@media (min-width: 1100px) {
/* Opaque inputs so text is legible over any video/gradient background */
.dream-studio-edit-grid input {
background: rgba(14, 16, 28, 0.78) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-color: rgba(255, 255, 255, 0.18) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.08) !important;
color: #f0f4ff !important;
text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}
/* Label spans need dark background + shadow so they're visible over video */
.dream-studio-edit-grid label span {
background: rgba(8, 10, 20, 0.72) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
color: rgba(255, 255, 255, 0.9) !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
border-radius: 4px !important;
padding: 1px 4px !important;
}
/* Track meta (title/artist) visible over video */
.dream-studio-upload-meta strong {
text-shadow: 0 1px 4px rgba(0,0,0,0.65) !important;
}
.dream-studio-upload-meta em {
text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
}
/* Increase row contrast so edit toolbar stands out over video */
.dream-studio-upload-row-editing {
background: rgba(10, 12, 24, 0.62) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
}
}
@media (max-width: 640px) {
.dream-studio-upload-row {
flex-direction: column;
align-items: stretch;
gap: 0.68rem;
padding: 0.76rem;
}
.dream-studio-upload-meta,
.dream-studio-row-actions {
width: 100%;
}
.dream-studio-row-actions {
align-items: stretch;
gap: 0.55rem;
}
.dream-studio-row-status {
display: grid;
gap: 0.4rem;
width: 100%;
justify-content: stretch;
}
.dream-studio-select-wrap {
display: grid;
gap: 0.35rem;
width: 100%;
}
.dream-studio-visibility-select {
width: 100%;
}
.dream-studio-plays {
min-width: 0;
text-align: left;
}
.dream-studio-action-buttons {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
gap: 0.42rem;
}
.dream-studio-action-buttons > * {
min-width: 0;
min-height: 44px;
}
.dream-studio-edit-grid {
grid-template-columns: 1fr;
gap: 0.7rem;
}
.dream-studio-edit-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
width: 100%;
}
.dream-studio-edit-actions-inline {
display: none;
}
.dream-studio-edit-actions-dock {
width: 100%;
box-sizing: border-box;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 0.55rem;
max-width: 440px;
margin: 0 auto;
}
.dream-studio-edit-dock {
position: fixed;
left: 10px;
right: 10px;
bottom: calc(84px + env(safe-area-inset-bottom));
z-index: 1001;
display: flex;
justify-content: center;
pointer-events: none;
}
.dream-studio-edit-dock .dream-studio-edit-actions-dock {
pointer-events: auto;
padding: 0.62rem 0.66rem;
background: linear-gradient(180deg, rgba(14,17,28,0.98), rgba(7,9,16,0.94));
border: 1px solid rgba(255,255,255,0.10);
border-radius: 18px;
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.dream-studio-edit-actions-dock .dream-studio-save-feedback {
grid-column: 1;
justify-content: flex-start;
min-height: 0;
padding-left: 0.2rem;
padding-right: 0.2rem;
}
.dream-studio-edit-actions-dock .dream-studio-validation-error {
grid-column: 1 / -1;
}
.dream-connection-row {
grid-template-columns: 1fr !important;
}
.dream-connection-actions {
justify-content: flex-start !important;
}
.dream-studio-edit-dock-spacer {
display: block;
min-height: 96px;
}
.dream-studio-edit-grid label {
gap: 0.35rem;
}
.dream-studio-edit-grid input {
width: 100%;
box-sizing: border-box;
min-height: 42px;
}
}
@media (max-width: 420px) {
.dream-studio-edit-actions {
grid-template-columns: 1fr;
}
.dream-studio-edit-actions-dock {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dream-studio-edit-actions-dock .dream-studio-save-feedback,
.dream-studio-edit-actions-dock .dream-studio-validation-error {
grid-column: 1 / -1;
justify-content: center;
}
body.dream-app-open .dream-app-header {
padding: max(8px, env(safe-area-inset-top)) 12px 4px !important;
gap: 6px !important;
}
body.dream-app-open .dream-app-header h1 {
font-size: clamp(20px, 6vw, 22px) !important;
line-height: .98 !important;
letter-spacing: -.04em !important;
}
body.dream-app-open .dream-app-header-actions {
gap: 5px !important;
}
body.dream-app-open .dream-app-account {
min-width: 0 !important;
max-width: 108px !important;
min-height: 32px !important;
padding: 0 8px !important;
font-size: 9px !important;
letter-spacing: .05em !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body.dream-app-open .dream-app-close {
width: 24px !important;
height: 24px !important;
flex-basis: 24px !important;
font-size: 11px !important;
}
body.dream-app-open .dream-app-tabs {
padding: 0 12px 7px !important;
gap: 5px !important;
}
body.dream-app-open .dream-app-tabs button {
min-height: 30px !important;
padding: 5px 6px !important;
font-size: 8.8px !important;
letter-spacing: .06em !important;
}
}
@media (max-width: 420px) {
.dream-studio-action-buttons {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.dream-studio-empty { text-align: center; padding: 1.1rem 0.9rem 0.75rem; opacity: 0.56; font-size: 0.82rem; line-height: 1.4; }
.dream-studio-upgrade {
margin: 0.75rem 1.25rem;
padding: 0.75rem;
background: rgba(255,113,206,0.08);
border: 1px solid rgba(255,113,206,0.2);
border-radius: 8px;
font-size: 0.875rem;
}
.dream-creator-gate-shell {
display: grid !important;
gap: 12px !important;
}
.dream-creator-gate-support {
display: grid !important;
gap: 12px !important;
}
.dream-creator-gate-support .dream-studio-upgrade {
margin: 0 !important;
}
@media (min-width: 1280px) {
.dream-creator-gate-shell {
grid-template-columns: minmax(0, 1.16fr) minmax(360px, 440px) !important;
align-items: start !important;
}
.dream-creator-gate-hero,
.dream-creator-gate-support {
margin-bottom: 0 !important;
}
.dream-creator-gate-support {
max-width: 440px !important;
justify-self: end !important;
}
}
.dream-studio-upgrade strong { color: var(--neon-pink, #ff71ce); }
.dream-studio-loading { text-align: center; padding: 2rem; opacity: 0.4; }
/* ===== Creator Profile Overlay ===== */
.creator-overlay {
position: fixed;
inset: 0;
z-index: 50;
display: none;
align-items: flex-end;
}
.creator-overlay.open {
display: flex;
}
.creator-overlay-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,.62);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.creator-overlay-panel {
position: relative;
width: 100%;
max-height: 82vh;
background: linear-gradient(180deg, rgba(14,16,24,.98) 0%, rgba(8,10,16,.96) 100%);
border-radius: 24px 24px 0 0;
border-top: 1px solid rgba(255,255,255,.08);
display: flex;
flex-direction: column;
overflow: hidden;
animation: creatorSlideUp .35s cubic-bezier(.22,.8,.24,1);
}
@keyframes creatorSlideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.creator-overlay-handle {
width: 36px;
height: 4px;
background: rgba(255,255,255,.15);
border-radius: 2px;
margin: 10px auto 6px;
flex-shrink: 0;
}
.creator-overlay-close {
position: absolute;
top: 10px;
right: 14px;
z-index: 2;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.40);
color: rgba(255,255,255,.55);
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(12px);
}
.creator-overlay-content {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0 20px 32px;
}
.creator-overlay-loading {
text-align: center;
padding: 3rem 1rem;
opacity: .5;
color: rgba(255,255,255,.6);
}
.creator-overlay-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}
.creator-overlay-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(255,113,206,.18);
box-shadow: 0 4px 20px rgba(255,113,206,.14);
flex-shrink: 0;
}
.creator-overlay-info {
min-width: 0;
flex: 1;
}
.creator-overlay-name {
font-size: 20px;
font-weight: 700;
color: #fff;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.creator-overlay-handle {
font-size: 13px;
color: rgba(255,255,255,.45);
letter-spacing: .03em;
}
.creator-overlay-bio {
font-size: 13px;
color: rgba(255,255,255,.55);
line-height: 1.5;
margin-top: 6px;
}
.creator-overlay-stats {
display: flex;
gap: 18px;
margin: 16px 0;
}
.creator-overlay-stat {
text-align: center;
flex: 1;
}
.creator-overlay-stat strong {
display: block;
font-size: 18px;
color: #fff;
font-weight: 700;
}
.creator-overlay-stat span {
font-size: 10px;
color: rgba(255,255,255,.38);
text-transform: uppercase;
letter-spacing: .08em;
}
.creator-overlay-actions {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.creator-overlay-follow {
flex: 1;
padding: 12px;
border-radius: 14px;
border: 1px solid var(--neon-pink, #ff71ce);
background: var(--neon-pink, #ff71ce);
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all .2s ease;
}
.creator-overlay-follow.following {
background: transparent;
color: var(--neon-pink, #ff71ce);
}
.creator-overlay-follow.self {
background: transparent;
border-color: rgba(255,255,255,.12);
color: rgba(255,255,255,.40);
cursor: default;
}
.creator-overlay-play {
padding: 12px 20px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.75);
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.creator-overlay-section {
margin-top: 18px;
}
.creator-overlay-section h4 {
font-size: 11px;
color: rgba(255,255,255,.30);
text-transform: uppercase;
letter-spacing: .12em;
margin-bottom: 10px;
}
.creator-overlay-track {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.05);
margin-bottom: 6px;
cursor: pointer;
transition: background .15s ease;
}
.creator-overlay-track:hover {
background: rgba(255,255,255,.04);
}
.creator-overlay-track-art {
width: 40px;
height: 40px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
}
.creator-overlay-track-info {
min-width: 0;
flex: 1;
}
.creator-overlay-track-name {
font-size: 13px;
color: rgba(255,255,255,.85);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.creator-overlay-track-meta {
font-size: 11px;
color: rgba(255,255,255,.38);
}
.creator-overlay-track-duration {
font-size: 12px;
color: rgba(255,255,255,.30);
flex-shrink: 0;
}
/* Phone: bigger touch targets for track play buttons */
@media (max-width: 520px) {
.dream-row-play {
width: 44px !important;
height: 44px !important;
font-size: 15px !important;
flex-shrink: 0 !important;
}
.dream-row-card .dream-row {
grid-template-columns: 48px minmax(0, 1fr) !important;
gap: 12px !important;
}
/* Kill 300ms tap delay + make buttons feel instant */
.dream-play-first,
.dream-row-play,
.dream-track-action,
.dream-primary,
.dream-tab-btn,
.mini-np-play {
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
user-select: none !important;
-webkit-user-select: none !important;
}
/* More breathing room between Start listening and Compare plans */
.dream-hero-actions--discover {
gap: 16px !important;
}
.dream-hero-inline-links {
margin-top: 12px !important;
}
}
/* Phone audit pass — Apr 29 2026: make the cinematic shell behave like a native mobile music app. */
@media (max-width: 520px) {
:root {
--dw-muted: rgba(255,255,255,.76);
}
body::before {
background:
radial-gradient(circle at 50% 12%, rgba(255,113,206,.06), transparent 55%),
linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.30) 30%, rgba(0,0,0,.38) 55%, rgba(0,0,0,.46)) !important;
}
#minimal-ui::before {
top: max(10px, env(safe-area-inset-top)) !important;
font-size: 10px !important;
letter-spacing: .24em !important;
opacity: .78 !important;
}
.vinyl-player {
width: min(344px, 89vw) !important;
padding: 18px 16px 16px !important;
gap: 12px !important;
border-radius: 24px !important;
background: linear-gradient(180deg, rgba(12,12,18,.96), rgba(4,4,8,.98)) !important;
}
.vinyl-container {
width: min(188px, 50vw) !important;
height: min(188px, 50vw) !important;
}
.vinyl-bg,
.vinyl-album-art { border-radius: 22px !important; }
.minimal-track-name {
font-size: clamp(20px, 5.8vw, 25px) !important;
line-height: 1.04 !important;
margin-bottom: 5px !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.minimal-track-artist {
color: rgba(255,255,255,.82) !important;
font-size: 14px !important;
}
.minimal-progress-container {
max-width: 300px !important;
padding: 10px 0 4px !important;
}
.minimal-progress {
height: 6px !important;
background: rgba(255,255,255,.34) !important;
box-shadow: 0 0 0 8px rgba(255,255,255,0) !important;
}
.minimal-progress::after {
content: '' !important;
position: absolute !important;
right: -4px !important;
top: 50% !important;
width: 12px !important;
height: 12px !important;
transform: translateY(-50%) !important;
border-radius: 999px !important;
background: var(--dw-green) !important;
box-shadow: 0 0 18px rgba(30,215,96,.55) !important;
}
.minimal-time { color: rgba(255,255,255,.76) !important; }
.minimal-btn { width: 44px !important; height: 44px !important; }
.minimal-btn.play { width: 58px !important; height: 58px !important; }
#minimalQueueBtn {
width: 44px !important;
height: 44px !important;
right: 16px !important;
bottom: max(12px, env(safe-area-inset-bottom)) !important;
color: rgba(255,255,255,.78) !important;
background: rgba(12,12,18,.76) !important;
border-color: rgba(255,255,255,.18) !important;
}
body.dream-app-open .dream-bottom-tabs {
bottom: 0 !important;
min-height: 50px !important;
padding: 5px 10px max(4px, env(safe-area-inset-bottom)) !important;
background: rgba(5,6,12,.96) !important;
}
body.dream-app-open .mini-now-playing {
bottom: 60px !important;
min-height: 44px !important;
background: rgba(8,8,15,.96) !important;
}
body.dream-app-open .dream-app-content {
padding: 0 14px 176px !important;
}
.dream-tab-btn {
min-width: 0 !important;
flex: 1 1 0 !important;
padding: 5px 4px !important;
min-height: 48px !important;
opacity: .74 !important;
}
.dream-tab-label {
font-size: 10.5px !important;
letter-spacing: .04em !important;
}
.dream-tab-icon,
.dream-tab-icon svg {
width: 21px !important;
height: 21px !important;
}
.dream-hero,
.dream-profile-card,
.dream-section,
.dream-tier-card,
.dream-metric,
.dream-account-auth-card {
background: rgba(8,9,14,.94) !important;
border-color: rgba(255,255,255,.14) !important;
}
.dream-hero {
padding: 14px !important;
border-radius: 20px !important;
margin-bottom: 10px !important;
}
.dream-hero h2,
.dream-profile-card h2 {
font-size: clamp(21px, 5.7vw, 26px) !important;
line-height: 1.02 !important;
margin-bottom: 7px !important;
}
.dream-hero p:not(.dream-kicker),
.dream-profile-card p:not(.dream-kicker),
.dream-account-hero-list span {
color: rgba(255,255,255,.76) !important;
font-size: 12.5px !important;
line-height: 1.35 !important;
overflow-wrap: anywhere !important;
}
.dream-kicker,
.dream-search-chip-label,
.dream-search-browse h4,
.dream-metric span,
.dream-metric em {
color: rgba(255,255,255,.66) !important;
}
.dream-hero-actions {
margin-top: 12px !important;
gap: 8px !important;
}
.dream-primary,
.dream-secondary,
.dream-section-head button,
.dream-action-grid button {
min-height: 42px !important;
padding: 11px 13px !important;
}
.dream-library-source {
margin-top: 12px !important;
padding: 10px 12px !important;
display: grid !important;
gap: 3px !important;
background: rgba(255,255,255,.07) !important;
border-radius: 16px !important;
}
.dream-library-source span { color: rgba(255,255,255,.72) !important; }
.dream-metrics,
.dream-metrics--library {
grid-template-columns: repeat(2, minmax(0,1fr)) !important;
gap: 8px !important;
}
.dream-metric { padding: 12px !important; }
.dream-account-quick-actions {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
margin-top: 14px !important;
}
.dream-account-hero-list {
gap: 8px !important;
margin-top: 12px !important;
}
.dream-account-hero-list li {
padding: 10px 12px !important;
border-radius: 15px !important;
background: rgba(255,255,255,.055) !important;
}
.dream-account-login-section {
padding-top: 12px !important;
}
.dream-account-auth-card--compact { padding: 14px !important; }
/* DW-VIS-165: Account sign-in modal cut off at bottom on phone.
The login section renders above the bottom chrome but the auth card's
nested form footer (email input + submit + toggle) clips below the card
when expanded, making the bottom CTA inaccessible.
Add bottom padding so expanded form content clears the fixed bottom nav. */
.dream-account-login-section {
padding-bottom: max(72px, calc(72px + env(safe-area-inset-bottom))) !important;
}
/* Constrain the auth card so internal form content scrolls rather than
bleeding past the card bottom into the nav chrome. */
.dream-account-auth-card {
max-height: calc(100dvh - 160px) !important;
overflow-y: auto !important;
}
/* NEW-FIX: on phone (max-width:520) the card itself must be height-constrained
so its internal scroll keeps the form footer visible above the bottom nav.
Also add explicit bottom clearance on the login-section for the expanded form. */
@media (max-width: 520px) {
body.dream-app-open[data-dream-route="account"] .dream-account-auth-card {
max-height: calc(100dvh - 148px - env(safe-area-inset-bottom)) !important;
overflow-y: auto !important;
}
body.dream-app-open[data-dream-route="account"] .dream-account-login-section {
padding-bottom: max(90px, calc(148px + env(safe-area-inset-bottom))) !important;
}
}
.dream-hero--search { padding-bottom: 14px !important; }
.dream-search-field {
position: relative !important;
margin-top: 12px !important;
}
.dream-search-icon {
position: absolute !important;
left: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: rgba(255,255,255,.84) !important;
font: 900 18px/1 'DM Sans', system-ui, sans-serif !important;
pointer-events: none !important;
}
#dreamSearchInput {
min-height: 48px !important;
padding: 13px 44px 13px 40px !important;
border-radius: 999px !important;
background: rgba(2,3,8,.88) !important;
border-color: rgba(255,255,255,.24) !important;
color: #fff !important;
}
#dreamSearchInput::placeholder { color: rgba(255,255,255,.68) !important; }
.dream-search-chips {
gap: 7px !important;
margin-top: 10px !important;
}
.dream-search-pill-row--start,
.dream-search-pill-row--moods {
flex-wrap: wrap !important;
justify-content: center !important;
overflow-x: auto !important;
}
.dream-search-chip {
min-height: 44px !important;
padding: 8px 12px !important;
color: rgba(255,255,255,.84) !important;
background: rgba(255,255,255,.075) !important;
}
.dream-search-results { margin-top: 14px !important; }
.dream-search-browse { margin-top: 12px !important; }
.dream-browse-grid { gap: 8px !important; flex-wrap: wrap !important; justify-content: center !important; }
.dream-browse-tile {
aspect-ratio: 1.55 !important;
min-height: 76px !important;
border-radius: 16px !important;
padding: 12px !important;
}
}
/* Phone audit follow-up: fix seek thumb state and reduce duplicate/covered auth chrome. */
@media (max-width: 520px) {
.minimal-progress {
position: relative !important;
overflow: visible !important;
}
.minimal-progress::after {
display: none !important;
}
.minimal-progress-fill {
position: relative !important;
min-width: 0 !important;
overflow: visible !important;
}
.minimal-progress-fill::after {
content: '' !important;
position: absolute !important;
right: -5px !important;
top: 50% !important;
width: 12px !important;
height: 12px !important;
transform: translateY(-50%) !important;
border-radius: 999px !important;
background: var(--dw-green) !important;
box-shadow: 0 0 18px rgba(30,215,96,.55) !important;
}
body.dream-app-open #minimal-ui .dream-app-content {
padding-bottom: 172px !important;
}
body.dream-app-open .mini-now-playing {
bottom: 60px !important;
min-height: 48px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
}
body.dream-app-open .dream-bottom-tabs {
min-height: 52px !important;
}
body.dream-app-open .dream-account-subnav.dream-account-subnav--auth,
.dream-account-subnav.dream-account-subnav--auth {
display: none !important;
}
.dream-account-login-section {
padding-top: 8px !important;
}
}
/* DW-VIS-099: Account sign-in first-fold density — compact hero + login so CTA enters first viewport */
/* Target: CTA button bottom must be ≤ y≈622 (within 44px of 666 bottom nav) */
@media (max-width: 420px) {
/* DW-VIS-ACCOUNT-MODAL-CLOSE: show close button topline on phone — use double class
for specificity that beats the generic .dream-account-topline { display:none } below */
.dream-account-topline.dream-account-topline--with-close { display: grid !important; }
/* Hide non-essential topline on mobile — saves ~36px */
.dream-account-topline { display: none !important; }
/* Compact shell gap */
.dream-account-shell { gap: 4px !important; }
/* Compact hero: tighter padding, smaller type, 2-line title + 1-2 line desc */
.dream-account-hero-card {
padding: 6px 12px 4px !important;
}
.dream-account-hero-card .dream-kicker {
font-size: 9px !important;
margin-bottom: 1px !important;
letter-spacing: .06em !important;
}
.dream-account-hero-card h2 {
font-size: 13px !important;
line-height: 1.15 !important;
margin-bottom: 2px !important;
/* Ensure single line at 384px */
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-account-hero-card > p:not(.dream-kicker) {
font-size: 9.5px !important;
line-height: 1.3 !important;
margin-bottom: 4px !important;
/* Allow 2 lines, then ellipsis */
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Compact hero list: 3 items × ~28px each + gaps */
.dream-account-hero-list {
margin-top: 3px !important;
gap: 3px !important;
}
.dream-account-hero-list li {
padding: 4px 7px !important;
border-radius: 8px !important;
min-height: 0 !important;
}
.dream-account-hero-list strong {
font-size: 9px !important;
margin-bottom: 0 !important;
display: block !important;
line-height: 1.2 !important;
}
.dream-account-hero-list span {
font-size: 9px !important;
line-height: 1.2 !important;
}
/* Login section: tighter padding, pushes auth card higher */
.dream-account-login-section {
padding-top: 2px !important;
padding-bottom: 0 !important;
}
/* DW-VIS-119 follow-up: login section is now first in DOM.
Sticky no longer needed — auth CTAs naturally enter the first viewport.
Hero secondary scrolls behind as supplementary info. */
.dream-account-login-section {
position: static !important;
top: auto !important;
z-index: auto !important;
background: transparent !important;
border-radius: 0 !important;
}
/* Hero secondary: hide on phone — supplementary info, not needed above fold */
.dream-account-hero-card--secondary {
display: none !important;
}
/* Auth card: aggressively compact */
.dream-account-auth-card {
padding: 8px 10px !important;
}
.dream-account-auth-card--compact {
padding: 8px 10px !important;
}
/* Auth footer button: use dark bg not the generic .dream-secondary grey */
.dream-account-auth-card .dream-account-auth-footer > button.dream-secondary {
background-color: rgba(5,6,10,.90) !important;
color: rgba(255,255,255,.97) !important;
}
/* Auth head: tiny or removed */
.dream-account-auth-head {
margin-bottom: 4px !important;
}
.dream-account-auth-head p {
font-size: 10px !important;
line-height: 1.3 !important;
}
/* Auth actions: 2 buttons (44px each) + email toggle row (24px) = ~120px + gaps */
.dream-account-auth-actions {
gap: 4px !important;
margin-bottom: 6px !important;
}
.dream-account-auth-actions .dream-primary,
.dream-account-auth-actions .dream-secondary {
min-height: 42px !important;
color: var(--dw-text) !important;
}
.dream-account-auth-actions .dream-primary {
background: var(--dw-green) !important;
}
.dream-account-auth-actions .dream-secondary {
background: rgba(255,255,255,.28) !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 10px !important;
}
.dream-account-email-row {
min-height: 24px !important;
}
.dream-account-email-toggle {
font-size: 11px !important;
padding: 4px 8px !important;
color: rgba(255,255,255,.97) !important;
background-color: rgba(45,48,58,.92) !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 6px !important;
background-image: none !important;
}
/* Helper: very compact */
.dream-account-helper {
font-size: 9.5px !important;
line-height: 1.3 !important;
margin-top: 2px !important;
}
/* Auth footer: tiny */
.dream-account-auth-footer {
margin-top: 4px !important;
min-height: 24px !important;
}
.dream-account-auth-footer > button.dream-secondary {
background-color: rgba(5,6,10,.90) !important;
background-image: none !important;
color: rgba(255,255,255,.97) !important;
border: 1px solid rgba(255,255,255,.18) !important;
}
body.dream-app-open .dream-account-auth-card .dream-account-auth-footer > button.dream-secondary,
body.dream-app-open .dream-account-auth-card .dream-account-auth-form-wrap .dream-account-auth-footer > button.dream-secondary {
background: rgba(5,6,10,.90) !important;
background-color: rgba(5,6,10,.90) !important;
color: rgba(255,255,255,.97) !important;
}
/* Install section: hidden on mobile to save ~90px */
.dream-account-install-section { display: none !important; }
}
/* Task 2 mobile polish final override block */
@media (max-width: 520px) {
body.dream-app-open #minimal-ui {
padding: max(18px, env(safe-area-inset-top)) 0 0 !important;
max-width: 100vw !important;
}
body.dream-app-open #minimal-ui::before {
top: max(12px, env(safe-area-inset-top)) !important;
font-size: 10px !important;
letter-spacing: .18em !important;
color: rgba(255,255,255,.86) !important;
}
body.dream-app-open .dream-app-main,
body.dream-app-open .dream-app-sheet,
body.dream-app-open .dream-app-panel,
body.dream-app-open .dream-app-content,
body.dream-app-open .dream-app-tabs,
body.dream-app-open .dream-bottom-tabs,
body.dream-app-open .dream-metrics,
body.dream-app-open .dream-tier-grid,
body.dream-app-open .dream-browse-grid,
body.dream-app-open .dream-search-results,
body.dream-app-open .dream-collection-list {
max-width: 100vw !important;
overflow-x: hidden !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
body.dream-app-open .dream-app-main::-webkit-scrollbar,
body.dream-app-open .dream-app-sheet::-webkit-scrollbar,
body.dream-app-open .dream-app-panel::-webkit-scrollbar,
body.dream-app-open .dream-app-content::-webkit-scrollbar,
body.dream-app-open .dream-app-tabs::-webkit-scrollbar,
body.dream-app-open .dream-bottom-tabs::-webkit-scrollbar,
body.dream-app-open .dream-metrics::-webkit-scrollbar,
body.dream-app-open .dream-tier-grid::-webkit-scrollbar,
body.dream-app-open .dream-browse-grid::-webkit-scrollbar,
body.dream-app-open .dream-search-results::-webkit-scrollbar,
body.dream-app-open .dream-collection-list::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
body.dream-app-open .dream-app-sheet {
background: rgba(0,0,0,.26) !important;
}
body.dream-app-open .dream-app-sheet::before,
body.dream-app-open .dream-app-panel::before,
body.dream-app-open .dream-app-panel::after {
left: 0 !important;
right: 0 !important;
inset-inline: 0 !important;
max-width: 100vw !important;
clip-path: inset(0) !important;
}
body.dream-app-open .dream-app-panel {
background: linear-gradient(180deg, rgba(10,11,16,.97), rgba(7,8,12,.95)) !important;
}
body.dream-app-open .dream-app-header {
padding: max(10px, env(safe-area-inset-top)) 12px 6px !important;
gap: 8px !important;
align-items: center !important;
}
body.dream-app-open .dream-app-header p {
margin-bottom: 4px !important;
letter-spacing: .14em !important;
}
body.dream-app-open .dream-app-header h1 {
font-size: clamp(20px, 6.1vw, 25px) !important;
line-height: .94 !important;
}
body.dream-app-open .dream-app-header-actions {
gap: 6px !important;
}
body.dream-app-open .dream-app-account,
body.dream-app-open .dream-app-close {
min-height: 44px !important;
}
body.dream-app-open .dream-app-account {
min-width: 82px !important;
padding: 0 12px !important;
font-size: 10px !important;
letter-spacing: .07em !important;
background: rgba(255,255,255,.11) !important;
border-color: rgba(255,255,255,.18) !important;
color: rgba(255,255,255,.94) !important;
}
body.dream-app-open .dream-app-close {
width: 44px !important;
height: 44px !important;
flex: 0 0 44px !important;
background: rgba(255,255,255,.10) !important;
border-color: rgba(255,255,255,.16) !important;
color: rgba(255,255,255,.86) !important;
}
body.dream-app-open .dream-app-tabs {
padding: 0 12px 10px !important;
gap: 6px !important;
}
body.dream-app-open .dream-app-tabs button {
min-height: 44px !important;
padding: 8px 8px !important;
font-size: 10px !important;
letter-spacing: .06em !important;
background: rgba(255,255,255,.14) !important;
border-color: rgba(255,255,255,.18) !important;
color: rgba(255,255,255,.82) !important;
}
body.dream-app-open #minimal-ui .dream-app-content {
padding: 0 12px calc(148px + env(safe-area-inset-bottom)) !important;
}
body.dream-app-open .dream-hero,
body.dream-app-open .dream-profile-card,
body.dream-app-open .dream-section,
body.dream-app-open .dream-tier-card,
body.dream-app-open .dream-metric,
body.dream-app-open .dream-account-auth-card,
body.dream-app-open .dream-library-source,
body.dream-app-open .dream-account-hero-list li,
body.dream-app-open .dream-agent-prompt,
body.dream-app-open .dream-collection-row,
body.dream-app-open .dream-empty,
body.dream-app-open .dream-search-chip,
body.dream-app-open .dream-browse-tile {
background: rgba(7,8,12,.95) !important;
border-color: rgba(255,255,255,.16) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.dream-app-open .dream-hero {
padding: 12px 12px 13px !important;
margin-bottom: 8px !important;
border-radius: 18px !important;
}
body.dream-app-open .dream-profile-card {
gap: 10px !important;
padding: 12px !important;
grid-template-columns: 48px minmax(0, 1fr) auto !important;
}
body.dream-app-open .dream-section,
body.dream-app-open .dream-tier-card {
padding: 12px !important;
margin-bottom: 8px !important;
border-radius: 18px !important;
}
body.dream-app-open .dream-metric {
padding: 11px !important;
}
body.dream-app-open .dream-hero h2,
body.dream-app-open .dream-profile-card h2 {
font-size: clamp(20px, 5.8vw, 24px) !important;
margin-bottom: 6px !important;
}
body.dream-app-open .dream-hero p:not(.dream-kicker),
body.dream-app-open .dream-profile-card p:not(.dream-kicker),
body.dream-app-open .dream-account-hero-list span,
body.dream-app-open .dream-row-main em,
body.dream-app-open .dream-collection-row em,
body.dream-app-open .dream-tier-card li,
body.dream-app-open .dream-setting-row span,
body.dream-app-open .dream-library-source span,
body.dream-app-open .dream-empty {
color: rgba(255,255,255,.74) !important;
}
body.dream-app-open .dream-kicker,
body.dream-app-open .dream-search-chip-label,
body.dream-app-open .dream-search-browse h4,
body.dream-app-open .dream-metric span,
body.dream-app-open .dream-metric em,
body.dream-app-open .mini-np-artist {
color: rgba(255,255,255,.72) !important;
}
body.dream-app-open .dream-secondary,
body.dream-app-open .dream-section-head button,
body.dream-app-open .dream-action-grid button {
min-height: 44px !important;
padding: 11px 14px !important;
background: rgba(255,255,255,.15) !important;
border-color: rgba(255,255,255,.22) !important;
color: rgba(255,255,255,.96) !important;
box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
}
body.dream-app-open .dream-primary {
min-height: 44px !important;
}
body.dream-app-open .dream-bottom-tabs {
bottom: 0 !important;
min-height: 50px !important;
padding: 4px 8px calc(8px + env(safe-area-inset-bottom)) !important;
background: rgba(5,6,10,.98) !important;
border-top: 1px solid rgba(255,255,255,.12) !important;
box-shadow: 0 -10px 28px rgba(0,0,0,.46) !important;
}
body.dream-app-open .dream-tab-btn {
min-height: 44px !important;
padding: 4px 3px !important;
opacity: .82 !important;
}
body.dream-app-open .dream-tab-icon,
body.dream-app-open .dream-tab-icon svg {
width: 20px !important;
height: 20px !important;
}
body.dream-app-open .dream-tab-label {
font-size: 10px !important;
letter-spacing: .05em !important;
}
body.dream-app-open .dream-tab-btn--desktop-only,
body.dream-app-open .dream-rail-mode,
body.dream-app-open .dream-rail-section-label,
body.dream-app-open .dream-rail-now-playing,
body.dream-app-open .dream-rail-queue {
display: none !important;
}
body.dream-app-open .mini-now-playing {
bottom: calc(60px + env(safe-area-inset-bottom)) !important;
min-height: 44px !important;
padding: 3px 10px 5px !important;
gap: 8px !important;
background: rgba(7,8,12,.98) !important;
border-top: 1px solid rgba(255,255,255,.12) !important;
}
body.dream-app-open .mini-np-art {
width: 44px !important;
height: 44px !important;
border-radius: 8px !important;
}
body.dream-app-open .mini-np-title {
font-size: 12.5px !important;
}
body.dream-app-open .mini-np-play {
width: 44px !important;
height: 44px !important;
font-size: 14px !important;
box-shadow: 0 10px 24px rgba(255,113,206,.18) !important;
}
}
/* Post-v78 phone QA tightening: remove scroll slivers and reclaim first viewport space. */
@media (max-width: 520px) {
html,
body,
#app,
#minimal-ui,
body.dream-app-open #minimal-ui,
body.dream-app-open .dream-app-main,
body.dream-app-open .dream-app-sheet,
body.dream-app-open .dream-app-panel,
body.dream-app-open .dream-app-content {
max-width: 100vw !important;
overflow-x: clip !important;
}
body.dream-app-open * {
scrollbar-width: none !important;
}
body.dream-app-open *::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
background: transparent !important;
}
body.dream-app-open .dream-app-content {
padding-top: 10px !important;
padding-bottom: 238px !important;
}
body.dream-app-open .dream-hero,
body.dream-app-open .dream-section,
body.dream-app-open .dream-track-meta-card {
padding: 12px !important;
margin-bottom: 8px !important;
}
body.dream-app-open .dream-hero h2,
body.dream-app-open .dream-hero h3 {
font-size: clamp(20px, 5.5vw, 24px) !important;
line-height: 1.02 !important;
margin-bottom: 4px !important;
}
body.dream-app-open .dream-hero p,
body.dream-app-open .dream-hero .dream-hero-copy,
body.dream-app-open .dream-hero .dream-muted,
body.dream-app-open .dream-account-helper {
font-size: 11.2px !important;
line-height: 1.28 !important;
}
body.dream-app-open .dream-hero-actions,
body.dream-app-open .dream-account-hero-actions,
body.dream-app-open .dream-actions {
gap: 8px !important;
margin-top: 9px !important;
}
body.dream-app-open .dream-metrics,
body.dream-app-open .dream-account-feature-grid,
body.dream-app-open .dream-browse-grid {
gap: 8px !important;
}
body.dream-app-open .dream-metric,
body.dream-app-open .dream-account-feature,
body.dream-app-open .dream-local-status-card {
padding: 10px !important;
min-height: 0 !important;
}
body.dream-app-open .dream-browse-tile {
min-height: 74px !important;
aspect-ratio: auto !important;
padding: 10px !important;
}
body.dream-app-open .dream-search-field {
min-height: 42px !important;
margin-bottom: 8px !important;
}
body.dream-app-open .dream-search-chips,
body.dream-app-open .dream-search-suggestions {
gap: 6px !important;
margin-bottom: 10px !important;
}
body.dream-app-open .dream-search-chip {
min-height: 44px !important;
padding: 7px 10px !important;
}
body.dream-app-open .mini-now-playing {
height: 48px !important;
min-height: 48px !important;
box-shadow: 0 -12px 30px rgba(0,0,0,.42) !important;
}
body.dream-app-open .mini-np-art {
width: 44px !important;
height: 44px !important;
}
}
/* Post-v79 fixed-dock containment: browsing content stops above mini-player/tab dock. */
@media (max-width: 520px) {
body.dream-app-open .dream-app-main {
height: calc(100dvh - 110px - env(safe-area-inset-bottom)) !important;
max-height: calc(100dvh - 110px - env(safe-area-inset-bottom)) !important;
min-height: 0 !important;
overflow: hidden !important;
}
body.dream-app-open .dream-app-content {
height: 100% !important;
max-height: 100% !important;
min-height: 0 !important;
padding-bottom: 126px !important;
overscroll-behavior: contain !important;
}
}
/* Post-v80 visual clearance: add an intentional air gap above the fixed dock and push mobile scrollbars off-canvas. */
@media (max-width: 520px) {
body.dream-app-open .dream-app-main {
height: calc(100dvh - 120px - env(safe-area-inset-bottom)) !important;
max-height: calc(100dvh - 120px - env(safe-area-inset-bottom)) !important;
}
body.dream-app-open .dream-app-content {
width: calc(100% + 28px) !important;
max-width: calc(100vw + 28px) !important;
padding-right: 28px !important;
box-sizing: border-box !important;
}
}
/* Post-v81 edge cleanup: keep the dock gap but restore exact viewport width. */
@media (max-width: 520px) {
body.dream-app-open .dream-app-content {
width: 100% !important;
max-width: 100vw !important;
padding-right: 0 !important;
}
}
/* Post-v82 background edge scrub: mask the cinematic video crop at the far right without touching controls. */
@media (max-width: 520px) {
body.dream-app-open #minimal-ui::after {
content: '' !important;
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: calc(108px + env(safe-area-inset-bottom)) !important;
width: 12px !important;
pointer-events: none !important;
z-index: 18 !important;
background: linear-gradient(90deg, rgba(5,6,10,0), rgba(5,6,10,.72)) !important;
}
}
/* Post-v83 hard edge mask: final phone QA showed the video crop can still peek through on Discover. */
@media (max-width: 520px) {
body.dream-app-open #app::after {
content: '' !important;
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: calc(108px + env(safe-area-inset-bottom)) !important;
width: 14px !important;
pointer-events: none !important;
z-index: 2147483000 !important;
background: linear-gradient(90deg, rgba(5,6,10,0), rgba(5,6,10,.92) 55%, rgba(5,6,10,.92)) !important;
}
}
/* Sprint 2 install-grade PWA surface. */
.dream-install-surface {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
margin: 10px 0 14px;
padding: 16px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 22px;
background: linear-gradient(135deg, rgba(7,8,12,.92), rgba(18,8,31,.86));
box-shadow: 0 18px 44px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
}
.dream-install-copy {
min-width: 0;
}
.dream-install-copy h3 {
margin: 2px 0 5px;
font-size: clamp(18px, 4.8vw, 23px);
line-height: 1.02;
}
.dream-install-copy p:last-child {
margin: 0;
color: rgba(255,255,255,.72);
font-size: 13px;
line-height: 1.35;
}
.dream-install-action {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: nowrap;
min-width: 0;
}
.dream-install-status {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 6px 10px;
border: 1px solid rgba(30,215,96,.32);
border-radius: 999px;
color: #1ed760;
background: rgba(30,215,96,.10);
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
}
.dream-install-button[disabled] {
opacity: .58;
cursor: default;
}
@media (max-width: 640px) {
body.dream-app-open .dream-account-install-shell .dream-install-surface {
grid-template-columns: 1fr !important;
margin: 0 0 6px !important;
padding: 7px 9px !important;
border-radius: 12px !important;
gap: 5px !important;
min-height: 0 !important;
height: 88px !important;
overflow: hidden !important;
}
body.dream-app-open .dream-account-install-shell .dream-install-copy {
min-width: 0 !important;
overflow: hidden !important;
}
body.dream-app-open .dream-account-install-shell .dream-install-copy .dream-kicker {
font-size: 9px !important;
margin: 0 0 1px !important;
}
body.dream-app-open .dream-account-install-shell .dream-install-copy h3 {
font-size: 11px !important;
margin: 0 0 2px !important;
line-height: 1.15 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body.dream-app-open .dream-account-install-shell .dream-install-copy p:last-child {
font-size: 10px !important;
line-height: 1.2 !important;
margin: 0 !important;
}
body.dream-app-open .dream-account-install-shell .dream-install-action {
justify-content: flex-start !important;
align-items: center !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 5px !important;
overflow: hidden !important;
}
body.dream-app-open .dream-account-install-shell .dream-install-status {
align-self: center !important;
font-size: 9px !important;
padding: 3px 6px !important;
min-height: 18px !important;
flex-shrink: 0 !important;
}
body.dream-app-open .dream-account-install-shell .dream-install-action .dream-install-button {
min-height: 30px !important;
font-size: 10px !important;
padding: 4px 10px !important;
flex-shrink: 0 !important;
}
/* Compress the quick-card above the install surface to save room */
body.dream-app-open .dream-account-quick-card {
padding: 6px !important;
}
}
.dream-settings-shell {
display: grid !important;
gap: 14px !important;
overflow-y: auto !important;
max-height: 100% !important;
}
.dream-settings-utility-grid {
display: grid !important;
gap: 12px !important;
}
.dream-settings-install-card,
.dream-settings-playback-card {
min-width: 0 !important;
}
.dream-settings-install-card .dream-install-surface,
.dream-settings-playback-card {
margin: 0 !important;
height: auto !important;
overflow: hidden !important;
}
@media (max-width: 520px) {
body.dream-app-open[data-dream-route="settings"] #minimal-ui .dream-app-content {
padding-bottom: max(220px, calc(56px + 100px + env(safe-area-inset-bottom) + 64px)) !important;
}
/* Force settings install card into single-col compact layout matching account shell */
body.dream-app-open .dream-settings-install-card .dream-install-surface {
grid-template-columns: 1fr !important;
height: 88px !important;
margin: 0 0 6px !important;
padding: 7px 9px !important;
border-radius: 12px !important;
gap: 5px !important;
min-height: 0 !important;
overflow: hidden !important;
}
body.dream-app-open .dream-settings-install-card .dream-install-copy {
min-width: 0 !important;
overflow: hidden !important;
}
body.dream-app-open .dream-settings-install-card .dream-install-copy h3 {
font-size: 14px !important;
margin: 2px 0 3px !important;
line-height: 1.2 !important;
}
body.dream-app-open .dream-settings-install-card .dream-install-copy p {
font-size: 10px !important;
line-height: 1.2 !important;
margin: 0 !important;
}
body.dream-app-open .dream-settings-install-card .dream-install-action {
align-items: center !important;
}
body.dream-app-open .dream-settings-install-card .dream-install-action .dream-install-button {
min-height: 36px !important;
padding: 6px 10px !important;
font-size: 10px !important;
border-radius: 8px !important;
}
}
.dream-settings-playback-card .dream-secondary {
width: 100% !important;
}
.dream-settings-video-state {
margin-top: 12px !important;
}
.dream-settings-switch-block {
margin-top: 12px !important;
}
.dream-settings-switch-block .dream-action-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.dream-settings-switch-block .dream-action-grid button {
width: 100% !important;
}
@media (min-width: 1100px) {
.dream-settings-utility-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
align-items: start !important;
}
}
.minimal-flip-state {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Sprint 2 v86 phone QA: overscan the background video and keep only a subtle seam fade. */
@media (max-width: 520px) {
html,
body,
#app {
overflow-x: hidden !important;
}
#bgVideo {
left: -6px !important;
width: calc(100% + 12px) !important;
max-width: none !important;
}
body.dream-app-open #app::after {
width: 6px !important;
background: linear-gradient(90deg, rgba(5,6,10,0), rgba(5,6,10,.72) 55%, rgba(5,6,10,.9)) !important;
}
body.dream-app-open .dream-app-panel,
body.dream-app-open .dream-app-content {
transform: translateZ(0) !important;
contain: paint !important;
}
/* Player route: relax containment so the fixed-position close button escapes the scroll container */
body.dream-app-open[data-dream-route="player"] .dream-app-content {
transform: none !important;
contain: none !important;
}
}
/* Post-v90 content-first Discover + Library IA */
.dream-hero-badges {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-top: 12px !important;
}
.dream-hero-badge {
display: inline-flex !important;
align-items: center !important;
min-height: 30px !important;
padding: 7px 11px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.055) !important;
border: 1px solid rgba(255,255,255,.07) !important;
color: rgba(255,255,255,.72) !important;
font: 760 10.2px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
max-width: 100% !important;
white-space: normal !important;
overflow-wrap: break-word !important;
}
.dream-discover-lead-grid,
.dream-library-overview-grid {
display: grid !important;
gap: 12px !important;
margin-bottom: 12px !important;
}
.dream-discover-lead-grid .dream-section,
.dream-library-overview-grid .dream-section {
margin-bottom: 0 !important;
}
@media (min-width: 1100px) {
.dream-section--discover-lead {
margin-top: 6px !important;
border: 1px solid rgba(255,255,255,.12) !important;
background: linear-gradient(180deg, rgba(10,12,18,.94), rgba(8,10,16,.86)) !important;
box-shadow: 0 16px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.dream-section--discover-lead .dream-section-head {
margin-bottom: 12px !important;
}
}
.dream-collection-stack {
display: grid !important;
gap: 8px !important;
}
.dream-collection-row--track,
button.dream-collection-row--playlist {
width: 100% !important;
appearance: none !important;
text-align: left !important;
}
.dream-collection-row--track {
grid-template-columns: 34px minmax(0, 1fr) auto !important;
}
.dream-collection-row--track .dream-row-play {
width: 34px !important;
height: 34px !important;
align-self: center !important;
}
.dream-collection-track-main {
min-width: 0 !important;
display: grid !important;
grid-template-columns: 44px minmax(0, 1fr) !important;
align-items: center !important;
gap: 10px !important;
}
.dream-collection-track-main .dream-row-art {
width: 44px !important;
height: 44px !important;
border-radius: 12px !important;
object-fit: cover !important;
}
.dream-collection-track-copy {
min-width: 0 !important;
}
.dream-collection-track-copy strong,
.dream-collection-track-copy em,
.dream-collection-track-copy span {
display: block !important;
min-width: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-collection-track-copy strong {
color: rgba(255,255,255,.92) !important;
font: 850 13px/1.2 'DM Sans', system-ui, sans-serif !important;
}
.dream-collection-track-copy em {
margin-top: 3px !important;
color: rgba(255,255,255,.58) !important;
font: 680 11px/1.2 'DM Sans', system-ui, sans-serif !important;
font-style: normal !important;
}
.dream-collection-track-copy span {
margin-top: 3px !important;
color: rgba(255,255,255,.42) !important;
font: 620 10.5px/1.2 'DM Sans', system-ui, sans-serif !important;
}
.dream-collection-track-actions {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
padding-right: 2px !important;
min-width: 68px !important;
}
button.dream-collection-row--playlist.active {
border-color: rgba(30,215,96,.28) !important;
background: rgba(30,215,96,.12) !important;
}
.dream-collection-row--track-disabled {
opacity: .68 !important;
}
@media (min-width: 760px) {
.dream-library-overview-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (min-width: 1100px) {
.dream-library-route--desktop-dense .dream-library-overview-grid {
gap: 10px !important;
}
.dream-library-route--desktop-dense .dream-section,
.dream-library-route--desktop-dense .dream-track-meta-card {
padding: 13px 14px !important;
}
.dream-library-route--desktop-dense .dream-collection-stack,
.dream-library-route--desktop-dense .dream-playlist-list {
gap: 6px !important;
}
.dream-library-route--desktop-dense .dream-collection-row--track {
grid-template-columns: 30px minmax(0, 1fr) auto !important;
}
.dream-library-route--desktop-dense .dream-collection-row--track .dream-row-play,
.dream-library-route--desktop-dense .dream-playlist-track-row .dream-row-play {
width: 30px !important;
height: 30px !important;
}
.dream-library-route--desktop-dense .dream-collection-track-main,
.dream-library-route--desktop-dense .dream-playlist-track-main {
grid-template-columns: 36px minmax(0, 1fr) !important;
gap: 8px !important;
}
.dream-library-route--desktop-dense .dream-collection-track-main .dream-row-art,
.dream-library-route--desktop-dense .dream-playlist-track-main .dream-row-art,
.dream-library-route--desktop-dense .dream-playlist-track-main .dream-row-art--playlist {
width: 36px !important;
height: 36px !important;
border-radius: 10px !important;
}
.dream-library-route--desktop-dense .dream-collection-track-copy strong,
.dream-library-route--desktop-dense .dream-collection-track-copy em,
.dream-library-route--desktop-dense .dream-collection-track-copy span,
.dream-library-route--desktop-dense .dream-playlist-track-copy strong,
.dream-library-route--desktop-dense .dream-playlist-track-copy em,
.dream-library-route--desktop-dense .dream-playlist-track-copy span,
.dream-library-route--desktop-dense .dream-playlist-select strong,
.dream-library-route--desktop-dense .dream-playlist-select em {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-library-route--desktop-dense .dream-row-pill,
.dream-library-route--desktop-dense .dream-status-chip,
.dream-library-route--desktop-dense .dream-playlist-select,
.dream-library-route--desktop-dense .dream-playlist-track-row {
font-size: 10.5px !important;
}
.dream-library-route--desktop-dense .dream-collection-row--playlist {
grid-template-columns: 28px minmax(0, 1fr) auto !important;
gap: 10px !important;
padding: 10px 11px !important;
}
.dream-library-route--desktop-dense .dream-collection-playlist-preview,
.dream-library-route--desktop-dense .dream-playlist-sidebar-preview {
font-size: 10px !important;
}
.dream-library-route--desktop-dense .dream-row-pill {
min-height: 28px !important;
padding: 6px 10px !important;
}
.dream-library-route--desktop-dense .dream-playlist-select {
padding: 10px 11px !important;
}
.dream-library-route--desktop-dense .dream-playlist-track-row {
gap: 8px !important;
padding: 9px 10px !important;
}
.dream-library-route--desktop-dense .dream-playlist-sidebar {
position: sticky !important;
top: 0 !important;
align-self: start !important;
max-height: calc(88dvh - 220px) !important;
overflow: auto !important;
}
}
@media (max-width: 520px) {
body.dream-app-open .dream-hero--discover,
body.dream-app-open .dream-hero--library {
padding: 12px 12px 10px !important;
margin-bottom: 10px !important;
}
body.dream-app-open .dream-hero--discover h2,
body.dream-app-open .dream-hero--library h2 {
font-size: clamp(19px, 5.1vw, 24px) !important;
line-height: 1.02 !important;
margin-bottom: 4px !important;
}
body.dream-app-open .dream-hero--discover p:not(.dream-kicker):not(.dream-hero-footnote),
body.dream-app-open .dream-hero--library p:not(.dream-kicker):not(.dream-hero-footnote) {
font-size: 11px !important;
line-height: 1.28 !important;
}
body.dream-app-open .dream-hero--discover .dream-hero-actions,
body.dream-app-open .dream-hero--library .dream-hero-actions {
margin-top: 8px !important;
}
body.dream-app-open .dream-hero--discover .dream-primary,
body.dream-app-open .dream-hero--library .dream-primary {
min-height: 34px !important;
padding: 8px 11px !important;
font-size: 10.6px !important;
}
body.dream-app-open .dream-hero--library .dream-library-source {
padding: 8px 10px !important;
gap: 8px !important;
}
body.dream-app-open .dream-hero-badges {
gap: 6px !important;
margin-top: 10px !important;
}
body.dream-app-open .dream-hero-badge {
min-height: 28px !important;
padding: 6px 9px !important;
font-size: 9.6px !important;
}
body.dream-app-open .dream-hero-create-playlist-form {
margin-top: 10px !important;
}
body.dream-app-open .dream-hero-playlist-name-input {
font-size: 13px !important;
padding: 8px 11px !important;
}
body.dream-app-open .dream-hero-create-playlist-actions {
gap: 6px !important;
}
body.dream-app-open .dream-hero-create-playlist-actions .dream-primary,
body.dream-app-open .dream-hero-create-playlist-actions .dream-secondary {
min-height: 32px !important;
padding: 7px 10px !important;
font-size: 10.4px !important;
}
body.dream-app-open .dream-discover-lead-grid,
body.dream-app-open .dream-library-overview-grid {
gap: 10px !important;
margin-bottom: 10px !important;
}
body.dream-app-open .dream-collection-stack {
gap: 7px !important;
}
body.dream-app-open .dream-collection-row--track,
body.dream-app-open button.dream-collection-row--playlist {
grid-template-columns: 30px minmax(0, 1fr) auto !important;
padding: 9px !important;
border-radius: 15px !important;
}
body.dream-app-open .dream-collection-row--track .dream-row-play {
width: 30px !important;
height: 30px !important;
font-size: 10px !important;
}
body.dream-app-open .dream-collection-track-main {
grid-template-columns: 40px minmax(0, 1fr) !important;
gap: 9px !important;
}
body.dream-app-open .dream-collection-track-main .dream-row-art {
width: 40px !important;
height: 40px !important;
}
body.dream-app-open .dream-collection-track-copy strong,
body.dream-app-open .dream-collection-row--playlist strong {
font-size: 12.8px !important;
}
body.dream-app-open .dream-collection-track-copy em,
body.dream-app-open .dream-collection-row--playlist em {
font-size: 10.5px !important;
}
}
/* Post-v120 Library first-viewport compaction: prioritize real content over summary chrome. */
@media (max-width: 520px) {
body.dream-app-open .dream-hero--library {
padding: 8px 10px 7px !important;
margin-bottom: 5px !important;
border-radius: 16px !important;
}
body.dream-app-open .dream-hero--library .dream-kicker {
margin-bottom: 3px !important;
font-size: 7.6px !important;
}
body.dream-app-open .dream-hero--library h2 {
font-size: clamp(16px, 4.6vw, 20px) !important;
line-height: 1 !important;
margin-bottom: 0 !important;
}
body.dream-app-open .dream-library-status-row {
margin-top: 6px !important;
gap: 6px !important;
}
body.dream-app-open .dream-hero--library .dream-library-source {
flex: 1 1 auto !important;
min-width: 0 !important;
padding: 6px 8px !important;
gap: 6px !important;
}
body.dream-app-open .dream-hero--library .dream-library-source strong {
font-size: 8.4px !important;
}
body.dream-app-open .dream-hero--library .dream-library-source span {
font-size: 9.2px !important;
}
body.dream-app-open .dream-hero--library .dream-library-sync-action {
min-height: 28px !important;
padding: 6px 10px !important;
font-size: 9px !important;
white-space: nowrap !important;
max-width: 120px !important;
flex: 0 0 auto !important;
overflow: visible !important;
text-overflow: clip !important;
}
body.dream-app-open .dream-hero--library .dream-library-status-row {
flex-wrap: nowrap !important;
overflow: hidden !important;
max-width: 100% !important;
}
body.dream-app-open .dream-hero-actions--library {
margin-top: 6px !important;
display: flex !important;
justify-content: flex-start !important;
}
body.dream-app-open .dream-hero-actions--library .dream-primary {
min-height: 30px !important;
width: auto !important;
padding: 7px 10px !important;
font-size: 9.4px !important;
}
body.dream-app-open .dream-section--library-playlists-empty {
padding-bottom: 10px !important;
}
body.dream-app-open .dream-empty--library-playlists {
padding: 10px 11px !important;
font-size: 10.5px !important;
border-radius: 13px !important;
}
/* DW-VIS-LIBRARY-EXPLORE-LOWCONTRAST: Library hero secondary buttons — boost contrast on dark bg */
body.dream-app-open .dream-hero-actions--library .dream-secondary {
background: rgba(255,255,255,0.22) !important;
color: #fff !important;
font-weight: 700 !important;
}
}
/* Post-v95 Discover first-viewport compaction: get four rotation rows above the dock on phone. */
@media (max-width: 520px) {
body.dream-app-open .dream-hero--discover {
padding: 10px 12px 9px !important;
margin-bottom: 6px !important;
border-radius: 18px !important;
}
body.dream-app-open .dream-hero--discover .dream-kicker {
margin-bottom: 4px !important;
font-size: 8px !important;
}
body.dream-app-open .dream-hero--discover h2 {
font-size: clamp(18px, 5vw, 22px) !important;
line-height: 1 !important;
margin-bottom: 4px !important;
}
body.dream-app-open .dream-hero--discover p:not(.dream-kicker):not(.dream-hero-footnote) {
font-size: 10.8px !important;
line-height: 1.24 !important;
}
body.dream-app-open .dream-hero-actions--discover {
margin-top: 8px !important;
}
body.dream-app-open .dream-hero-actions--discover .dream-primary {
min-height: 34px !important;
padding: 8px 11px !important;
font-size: 10px !important;
}
body.dream-app-open .dream-hero-inline-links {
gap: 10px !important;
margin-top: 8px !important;
}
body.dream-app-open .dream-inline-link {
font-size: 10px !important;
}
body.dream-app-open .dream-hero--discover .dream-hero-badges,
body.dream-app-open .dream-hero--discover .dream-hero-footnote {
display: none !important;
}
body.dream-app-open .dream-discover-lead-grid {
gap: 8px !important;
}
body.dream-app-open .dream-discover-lead-grid > .dream-section {
padding: 10px 10px 9px !important;
margin-top: 0 !important;
}
body.dream-app-open .dream-discover-lead-grid > .dream-section .dream-section-head {
margin-bottom: 8px !important;
}
body.dream-app-open .dream-collection-stack {
gap: 5px !important;
}
body.dream-app-open .dream-collection-row--track,
body.dream-app-open button.dream-collection-row--playlist {
grid-template-columns: 28px minmax(0, 1fr) auto !important;
padding: 7px 8px !important;
border-radius: 14px !important;
}
body.dream-app-open .dream-collection-row--track .dream-row-play {
width: 26px !important;
height: 26px !important;
font-size: 9px !important;
}
body.dream-app-open .dream-collection-track-main {
grid-template-columns: 34px minmax(0, 1fr) !important;
gap: 7px !important;
}
body.dream-app-open .dream-collection-track-main .dream-row-art {
width: 34px !important;
height: 34px !important;
border-radius: 10px !important;
}
body.dream-app-open .dream-collection-track-copy strong,
body.dream-app-open .dream-collection-row--playlist strong {
font-size: 12px !important;
line-height: 1.14 !important;
}
body.dream-app-open .dream-collection-track-copy em,
body.dream-app-open .dream-collection-row--playlist em {
font-size: 9.8px !important;
line-height: 1.14 !important;
}
}
/* Post-v92 mobile Search density — compact cards and compressed header */
@media (max-width: 520px) {
body.dream-app-open .dream-hero--search {
padding: 4px 9px 2px !important;
margin-bottom: 3px !important;
}
body.dream-app-open .dream-hero--search h2 {
font-size: 15px !important;
line-height: 1.04 !important;
margin-bottom: 2px !important;
}
body.dream-app-open .dream-hero--search .dream-kicker {
display: none !important;
}
body.dream-app-open .dream-hero--search .dream-search-hero-copy {
font-size: 10.3px !important;
line-height: 1.2 !important;
}
body.dream-app-open .dream-hero--search .dream-search-chips {
display: flex !important;
flex-wrap: wrap !important;
overflow: visible !important;
gap: 6px !important;
align-items: center !important;
}
body.dream-app-open .dream-hero--search .dream-search-chips::-webkit-scrollbar { display: none !important; }
body.dream-app-open .dream-hero--search .dream-search-chip-label {
flex: 0 0 100% !important;
margin-right: 0 !important;
margin-bottom: 2px !important;
}
body.dream-app-open .dream-search-chip {
padding: 5px 10px !important;
font-size: 11px !important;
}
body.dream-app-open .dream-search-row {
padding: 6px 10px !important;
margin-bottom: 4px !important;
border-radius: 10px !important;
}
body.dream-app-open .dream-search-row .dream-row-art {
width: 28px !important;
height: 28px !important;
}
body.dream-app-open .dream-search-row-copy strong {
font-size: 12px !important;
}
body.dream-app-open .dream-search-meta-line {
font-size: 10px !important;
}
body.dream-app-open .dream-search-row-action {
width: 28px !important;
min-width: 28px !important;
height: 28px !important;
min-height: 28px !important;
padding: 0 !important;
}
body.dream-app-open .dream-search-row-controls {
gap: 3px !important;
}
body.dream-app-open .dream-search-row-controls .dream-toggle-track-like-action::before {
font-size: 12px !important;
}
body.dream-app-open .dream-search-row-controls .dream-search-more-action::before {
font-size: 13px !important;
}
body.dream-app-open .dream-search-field {
margin-top: 8px !important;
}
body.dream-app-open .dream-search-icon {
left: 12px !important;
font-size: 15px !important;
}
body.dream-app-open .dream-search-clear {
right: 7px !important;
width: 26px !important;
height: 26px !important;
font-size: 15px !important;
}
body.dream-app-open #dreamSearchInput {
min-height: 42px !important;
padding: 11px 42px 11px 34px !important;
}
body.dream-app-open .dream-search-results {
margin-top: 10px !important;
}
body.dream-app-open .dream-hero--search-active {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
body.dream-app-open .dream-hero--search-active .dream-kicker,
body.dream-app-open .dream-hero--search-active h2,
body.dream-app-open .dream-hero--search-active .dream-search-hero-copy {
display: none !important;
}
body.dream-app-open .dream-hero--search-active .dream-search-field {
margin-top: 2px !important;
}
body.dream-app-open .dream-hero--search-active .dream-search-results {
margin-top: 8px !important;
}
}
/* Player route surface styles */
.dream-player-backdrop {
position: fixed !important;
inset: 0 !important;
z-index: -1 !important;
background-size: cover !important;
background-position: center !important;
backdrop-filter: blur(24px) brightness(0.35) saturate(1.2) !important;
pointer-events: none !important;
transition: opacity 0.4s ease !important;
}
.dream-player-surface {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 10px !important;
padding: 20px 16px 34px !important;
min-height: calc(100dvh - 180px) !important;
max-height: 100% !important;
background: linear-gradient(180deg, rgba(6,8,14,.48), rgba(2,4,8,.66)) !important;
border-radius: 24px 24px 0 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
touch-action: pan-y !important;
transform: translateY(100%) !important;
opacity: 0 !important;
transition: transform 0.38s cubic-bezier(0.32,0.72,0,1), opacity 0.3s ease !important;
z-index: 100 !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-surface {
/* DW-VIS-PLAYER-BOTTOM-RECOVERY-NEW fix: use 'none' instead of translateY(0)
translateY(0) is still a transform (identity matrix) that creates a containing block,
which breaks sticky positioning for .dream-provenance-bottom-recovery inside.
'none' removes the transform entirely, restoring sticky behavior. */
transform: none !important;
opacity: 1 !important;
}
.dream-player-surface > * {
position: relative !important;
z-index: 1 !important;
flex-shrink: 0 !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-backdrop {
opacity: 1 !important;
}
.dream-player-layout {
width: 100% !important;
display: grid !important;
justify-items: center !important;
gap: 10px !important;
}
.dream-player-primary,
.dream-player-secondary {
width: 100% !important;
display: grid !important;
justify-items: center !important;
gap: 10px !important;
}
.dream-player-secondary {
align-content: start !important;
}
.dream-player-close {
position: fixed !important;
top: 54px !important;
left: 14px !important;
right: auto !important;
appearance: none !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 999px !important;
background: rgba(5,8,14,.72) !important;
color: rgba(255,255,255,.94) !important;
width: auto !important;
min-width: 44px !important;
height: 44px !important;
padding: 0 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: .02em !important;
cursor: pointer !important;
z-index: 200 !important;
touch-action: manipulation !important;
box-shadow: 0 12px 30px rgba(0,0,0,.34) !important;
backdrop-filter: blur(14px) saturate(130%) !important;
}
.dream-player-close-icon {
font-size: 16px !important;
line-height: 1 !important;
}
.dream-player-close-label {
display: inline-block !important;
max-width: 96px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.dream-player-art-wrap {
margin-top: 10px !important;
width: min(72vw, 280px) !important;
aspect-ratio: 1 !important;
border-radius: 22px !important;
overflow: hidden !important;
box-shadow: 0 18px 60px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.08), 0 0 44px rgba(255,113,206,.12) !important;
}
@media (max-width: 520px) {
.dream-player-art-wrap {
width: min(72vw, 180px) !important;
}
}
.dream-player-art {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
border-radius: 16px !important;
box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(255,113,206,0.08) !important;
}
.dream-player-info {
display: grid !important;
gap: 5px !important;
text-align: center !important;
}
.dream-player-kicker {
color: rgba(255,255,255,.46) !important;
font: 700 10px/1.1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
text-align: center !important;
}
.dream-player-info h2 {
margin: 0 !important;
font-size: clamp(24px, 4.6vw, 32px) !important;
font-weight: 800 !important;
color: #fff !important;
line-height: 1.02 !important;
text-wrap: balance !important;
}
.dream-player-info p {
margin: 0 !important;
font-size: 14px !important;
color: rgba(255,255,255,.72) !important;
font-weight: 600 !important;
}
.dream-player-support {
color: rgba(255,255,255,.48) !important;
font: 500 12px/1.4 'Inter', system-ui, sans-serif !important;
}
.dream-player-info--long h2 {
max-width: 16ch !important;
line-height: 1.04 !important;
}
.dream-player-info--cjk h2 {
max-width: 11ch !important;
line-height: 1.08 !important;
letter-spacing: -.03em !important;
}
.dream-player-meta {
display: flex !important;
justify-content: center !important;
width: 100% !important;
}
.dream-player-mood {
display: inline-flex !important;
align-items: center !important;
min-height: 30px !important;
padding: 6px 12px !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,.1) !important;
background: rgba(255,255,255,.05) !important;
color: rgba(255,255,255,.74) !important;
font: 800 10.5px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
.dream-player-progress {
width: 100% !important;
max-width: 340px !important;
}
.dream-player-progress-bar {
width: 100% !important;
height: 4px !important;
background: rgba(255,255,255,.1) !important;
border-radius: 2px !important;
cursor: pointer !important;
touch-action: none !important;
}
.dream-player-progress-bar::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 18px !important;
height: 18px !important;
border-radius: 50% !important;
background: #fff !important;
cursor: pointer !important;
box-shadow: 0 1px 4px rgba(0,0,0,.5) !important;
margin-top: -7px !important;
}
.dream-player-progress-bar::-moz-range-thumb {
width: 18px !important;
height: 18px !important;
border-radius: 50% !important;
background: #fff !important;
cursor: pointer !important;
border: 0 !important;
box-shadow: 0 1px 4px rgba(0,0,0,.5) !important;
}
.dream-player-progress-fill {
height: 100% !important;
background: linear-gradient(90deg, var(--dw-pink, #ff71ce), var(--dw-green, #01f5a6)) !important;
border-radius: 2px !important;
width: 0% !important;
}
.dream-player-time {
display: flex !important;
justify-content: space-between !important;
margin-top: 4px !important;
font-size: 11px !important;
color: rgba(255,255,255,.65) !important;
font-variant-numeric: tabular-nums !important;
}
.dream-player-controls {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 20px !important;
}
.dream-player-ctrl {
appearance: none !important;
border: 0 !important;
background: transparent !important;
color: rgba(255,255,255,.7) !important;
font-size: 28px !important;
cursor: pointer !important;
width: 44px !important;
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.dream-player-volume {
display: flex !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
max-width: 300px !important;
margin: 2px auto !important;
}
.dream-player-volume-btn {
appearance: none !important;
border: 0 !important;
background: transparent !important;
color: rgba(255,255,255,.6) !important;
font-size: 16px !important;
cursor: pointer !important;
width: 28px !important;
height: 28px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.dream-player-volume-slider {
flex: 1 !important;
appearance: none !important;
-webkit-appearance: none !important;
height: 3px !important;
background: transparent !important;
border-radius: 2px !important;
outline: none !important;
cursor: pointer !important;
accent-color: var(--dw-pink) !important;
}
.dream-player-volume-slider::-webkit-slider-runnable-track {
height: 3px !important;
background: rgba(255,255,255,.15) !important;
border-radius: 2px !important;
}
.dream-player-volume-slider::-moz-range-track {
height: 3px !important;
background: rgba(255,255,255,.15) !important;
border-radius: 2px !important;
border: 0 !important;
}
.dream-player-volume-slider::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 14px !important;
height: 14px !important;
border-radius: 50% !important;
background: #fff !important;
cursor: pointer !important;
box-shadow: 0 1px 4px rgba(0,0,0,.4) !important;
}
.dream-player-volume-slider::-moz-range-thumb {
width: 14px !important;
height: 14px !important;
border-radius: 50% !important;
background: #fff !important;
cursor: pointer !important;
border: 0 !important;
}
.dream-player-ctrl--play {
width: 64px !important;
height: 64px !important;
border-radius: 50% !important;
background: var(--dw-green, #01f5a6) !important;
color: #fff !important;
font-size: 24px !important;
}
.dream-player-actions {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
flex-wrap: wrap !important;
}
.dream-player-action {
appearance: none !important;
border: 1px solid rgba(255,255,255,.1) !important;
border-radius: 999px !important;
background: rgba(255,255,255,.05) !important;
color: rgba(255,255,255,.75) !important;
padding: 8px 14px !important;
font: 700 12px/1 'DM Sans', system-ui, sans-serif !important;
cursor: pointer !important;
}
.dream-player-action.liked {
border-color: rgba(30,215,96,.25) !important;
color: rgba(125,255,176,.95) !important;
background: rgba(30,215,96,.1) !important;
}
.dream-player-action--compact {
padding: 7px 12px !important;
font-size: 11px !important;
min-height: 44px !important;
min-width: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.dream-player-toggle-row {
width: min(100%, 420px) !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 9px !important;
margin: 0 auto !important;
}
.dream-player-quick-actions {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
margin-top: 14px !important;
padding-top: 14px !important;
border-top: 1px solid rgba(255,255,255,.06) !important;
position: relative !important;
}
.dream-player-quick-action {
appearance: none !important;
border: 1px solid rgba(255,255,255,.12) !important;
border-radius: 999px !important;
background: rgba(255,255,255,.07) !important;
color: rgba(255,255,255,.8) !important;
padding: 8px 16px !important;
font: 600 12px/1 'DM Sans', system-ui, sans-serif !important;
cursor: pointer !important;
letter-spacing: .02em !important;
transition: background .15s, color .15s, border-color .15s !important;
}
.dream-player-quick-action:active {
transform: scale(.96) !important;
}
.dream-player-quick-like--liked {
border-color: rgba(30,215,96,.3) !important;
color: rgba(125,255,176,.95) !important;
background: rgba(30,215,96,.12) !important;
}
.dream-player-quick-timer {
border-color: rgba(1,205,254,.25) !important;
color: rgba(1,205,254,.85) !important;
background: rgba(1,205,254,.06) !important;
}
.dream-player-quick-timer--active {
border-color: rgba(1,205,254,.55) !important;
color: #01cdfe !important;
background: rgba(1,205,254,.12) !important;
}
.dream-player-quick-playlist-picker {
position: absolute !important;
top: calc(100% + 8px) !important;
left: 50% !important;
transform: translateX(-50%) !important;
background: rgba(10,10,18,.96) !important;
backdrop-filter: blur(6px) saturate(110%) !important;
border: 1px solid rgba(255,255,255,.1) !important;
border-radius: 20px !important;
padding: 14px !important;
min-width: 220px !important;
max-width: 320px !important;
width: max-content !important;
z-index: 200 !important;
box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}
.dream-quick-playlist-header {
font-size: 11px !important;
font-weight: 700 !important;
color: rgba(255,255,255,.45) !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
margin-bottom: 8px !important;
}
.dream-quick-playlist-row {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 6px 0 !important;
border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.dream-quick-playlist-row:last-of-type {
border-bottom: none !important;
}
.dream-quick-playlist-add {
appearance: none !important;
border: 1px solid rgba(255,255,255,.15) !important;
border-radius: 999px !important;
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.7) !important;
width: 26px !important;
height: 26px !important;
font-size: 13px !important;
line-height: 1 !important;
cursor: pointer !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.dream-quick-playlist-add.added {
border-color: rgba(30,215,96,.3) !important;
color: rgba(125,255,176,.9) !important;
background: rgba(30,215,96,.1) !important;
}
.dream-quick-playlist-name {
flex: 1 !important;
font-size: 13px !important;
color: rgba(255,255,255,.85) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-quick-playlist-count {
font-size: 11px !important;
color: rgba(255,255,255,.3) !important;
flex-shrink: 0 !important;
}
.dream-quick-playlist-empty {
font-size: 12px !important;
color: rgba(255,255,255,.4) !important;
margin-bottom: 8px !important;
}
.dream-quick-create-playlist {
margin-top: 8px !important;
width: 100% !important;
font-size: 11px !important;
}
/* DW-FEAT-084: Track Detail Save to Playlist picker */
.dream-playlist-picker {
background: rgba(10,10,18,.96) !important;
backdrop-filter: blur(6px) saturate(110%) !important;
border: 1px solid rgba(255,255,255,.1) !important;
border-radius: 16px !important;
padding: 14px !important;
margin-top: 8px !important;
box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
max-height: 400px !important;
overflow-y: auto !important;
scrollbar-width: none !important;
}
.dream-playlist-picker::-webkit-scrollbar { display: none !important; }
.dream-playlist-picker-header {
font-size: 11px !important;
font-weight: 700 !important;
color: rgba(255,255,255,.45) !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
margin-bottom: 8px !important;
}
.dream-playlist-picker-row {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 6px 0 !important;
border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.dream-playlist-picker-row:last-of-type { border-bottom: none !important; }
.dream-playlist-picker-add {
appearance: none !important;
border: 1px solid rgba(255,255,255,.15) !important;
border-radius: 999px !important;
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.7) !important;
font-size: 11px !important;
font-weight: 600 !important;
width: 26px !important;
height: 26px !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
min-height: 26px !important;
}
.dream-playlist-picker-add.added {
border-color: rgba(30,215,96,.3) !important;
color: rgba(125,255,176,.9) !important;
background: rgba(30,215,96,.1) !important;
}
.dream-playlist-picker-add:hover {
background: rgba(255,255,255,.12) !important;
}
.dream-playlist-picker-name {
flex: 1 !important;
font-size: 13px !important;
color: rgba(255,255,255,.85) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-playlist-picker-count {
font-size: 11px !important;
color: rgba(255,255,255,.3) !important;
flex-shrink: 0 !important;
}
.dream-playlist-picker-empty {
font-size: 12px !important;
color: rgba(255,255,255,.4) !important;
margin-bottom: 8px !important;
}
.dream-playlist-picker-create {
margin-top: 8px !important;
width: 100% !important;
font-size: 11px !important;
}
@media (max-width: 520px) {
.dream-player-quick-action {
padding: 7px 12px !important;
font-size: 11px !important;
}
.dream-player-quick-actions {
gap: 6px !important;
}
}
.dream-player-tier-strip {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 6px !important;
padding: 9px 14px !important;
margin-bottom: 10px !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 999px !important;
background: rgba(255,255,255,.04) !important;
}
.dream-player-tier-name {
color: #f7f8f8 !important;
font: 700 12px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-player-tier-sep {
color: rgba(255,255,255,.35) !important;
font: 400 11px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-player-tier-quality {
color: rgba(255,255,255,.6) !important;
font: 500 11px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-player-tier-status {
margin-left: 4px !important;
padding: 2px 7px !important;
border-radius: 999px !important;
font: 600 10px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .02em !important;
}
.dream-player-tier-status--inactive,
.dream-player-tier-status--past_due,
.dream-player-tier-status--canceled {
background: rgba(255,80,80,.18) !important;
color: #ff8a8a !important;
}
.dream-player-tier-status--trialing,
.dream-player-tier-status--pending {
background: rgba(255,200,60,.15) !important;
color: #ffd060 !important;
}
.dream-player-tier-action {
margin-left: 4px !important;
padding: 2px 9px !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,.18) !important;
background: rgba(255,255,255,.07) !important;
color: rgba(255,255,255,.85) !important;
font: 600 10px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .02em !important;
cursor: pointer !important;
}
.dream-player-tier-action--upgrade {
border-color: rgba(200,160,255,.35) !important;
background: rgba(140,80,220,.15) !important;
color: #d4aaff !important;
}
.dream-player-context-card,
.dream-player-section {
width: min(100%, 420px) !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 20px !important;
background: rgba(10,12,18,0.72) !important;
box-shadow: 0 18px 44px rgba(0,0,0,.24) !important;
}
.dream-player-context-card {
padding: 14px !important;
}
.dream-player-section--details {
background: rgba(18,22,30,0.58) !important;
border-color: rgba(255,255,255,.1) !important;
box-shadow: 0 12px 30px rgba(0,0,0,.16) !important;
}
.dream-player-context-return {
appearance: none !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 999px !important;
background: rgba(255,255,255,.10) !important;
color: rgba(255,255,255,.96) !important;
min-height: 36px !important;
padding: 0 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font: 800 11px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
touch-action: manipulation !important;
}
.dream-player-context-strip {
width: min(100%, 420px) !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 10px 12px !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 999px !important;
background: rgba(10,12,18,0.72) !important;
}
.dream-player-context-strip strong {
color: #f7f8f8 !important;
font: 700 13px/1.1 'DM Sans', system-ui, sans-serif !important;
}
.dream-player-context-strip .dream-player-context-queue {
color: rgba(255,255,255,.58) !important;
font: 600 10.5px/1.1 'DM Sans', system-ui, sans-serif !important;
}
.dream-player-context-topline {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
margin-bottom: 10px !important;
}
.dream-player-context-topline strong {
color: #f7f8f8 !important;
font: 700 14px/1.2 'DM Sans', system-ui, sans-serif !important;
letter-spacing: -.02em !important;
}
.dream-player-stat-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.dream-player-stat {
display: grid !important;
gap: 4px !important;
padding: 10px 12px !important;
border-radius: 14px !important;
background: rgba(255,255,255,.035) !important;
}
.dream-player-stat span {
color: rgba(255,255,255,.52) !important;
font: 700 10px/1.1 'DM Sans', system-ui, sans-serif !important;
text-transform: uppercase !important;
letter-spacing: .12em !important;
}
.dream-player-stat strong {
color: #f7f8f8 !important;
font: 700 13px/1.2 'DM Sans', system-ui, sans-serif !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: 100% !important;
}
.dream-player-section {
padding: 14px !important;
display: grid !important;
gap: 10px !important;
}
.dream-player-secondary-grid {
width: 100% !important;
display: grid !important;
gap: 10px !important;
overflow: visible !important;
}
.dream-player-section--details .dream-setting-row {
align-items: flex-start !important;
}
.dream-player-section--details .dream-setting-row:last-of-type {
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
.dream-player-setting-value {
min-width: 0 !important;
flex: 1 1 auto !important;
max-width: 100% !important;
color: rgba(255,255,255,.88) !important;
font: 700 12.5px/1.35 'Inter', system-ui, sans-serif !important;
text-transform: none !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
}
.dream-player-section .dream-setting-row > span {
flex: 0 0 96px !important;
color: rgba(255,255,255,.42) !important;
font: 400 11px/1.4 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .01em !important;
padding-top: 1px !important;
}
.dream-player-section--trackinfo {
padding: 10px 0 6px !important;
}
.dream-trackinfo-body {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 14px !important;
}
.dream-equalizer-shell {
display: flex !important;
flex-direction: row !important;
align-items: flex-end !important;
gap: 3px !important;
height: 28px !important;
flex-shrink: 0 !important;
}
.dream-eq-bar {
width: 4px !important;
border-radius: 2px !important;
background: var(--dream-mood-from, #ff2d7a) !important;
animation: dreamEqBounce 0.9s ease-in-out infinite alternate !important;
transform-origin: bottom !important;
}
.dream-eq-bar:nth-child(1) { height: 40%; animation-duration: 0.75s; }
.dream-eq-bar:nth-child(2) { height: 70%; animation-duration: 0.55s; animation-delay: 0.1s; }
.dream-eq-bar:nth-child(3) { height: 55%; animation-duration: 0.85s; animation-delay: 0.2s; }
.dream-eq-bar:nth-child(4) { height: 85%; animation-duration: 0.65s; animation-delay: 0.05s; }
.dream-eq-bar:nth-child(5) { height: 60%; animation-duration: 0.8s; animation-delay: 0.15s; }
.dream-eq-bar:nth-child(6) { height: 45%; animation-duration: 0.7s; animation-delay: 0.25s; }
.dream-eq-bar:nth-child(7) { height: 75%; animation-duration: 0.6s; animation-delay: 0.08s; }
@keyframes dreamEqBounce {
from { transform: scaleY(0.25); opacity: 0.6; }
to { transform: scaleY(1); opacity: 1; }
}
body:not(.dream-app-playing) .dream-eq-bar {
animation-play-state: paused !important;
opacity: 0.3 !important;
}
.dream-trackinfo-meta {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
min-width: 0 !important;
}
.dream-trackinfo-pills {
display: flex !important;
flex-wrap: wrap !important;
gap: 5px !important;
}
.dream-trackinfo-pill {
display: inline-block !important;
padding: 3px 9px !important;
border-radius: 20px !important;
font: 600 10px/1.4 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
.dream-trackinfo-pill--mood {
background: var(--dream-mood-from, #ff2d7a) !important;
color: #fff !important;
}
.dream-trackinfo-pill--bpm {
background: rgba(255,255,255,.1) !important;
color: rgba(255,255,255,.8) !important;
border: 1px solid rgba(255,255,255,.14) !important;
}
.dream-trackinfo-pill--genre {
background: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.65) !important;
border: 1px solid rgba(255,255,255,.1) !important;
}
.dream-trackinfo-duration {
color: rgba(255,255,255,.38) !important;
font: 400 10.5px/1.4 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .01em !important;
}
@media (pointer: coarse) {
.dream-trackinfo-body { gap: 10px !important; }
.dream-equalizer-shell { height: 22px !important; }
.dream-eq-bar { width: 3px !important; }
}
.dream-player-section .dream-setting-row {
display: grid !important;
grid-template-columns: 96px minmax(0, 1fr) !important;
align-items: flex-start !important;
}
.dream-player-section .dream-setting-row > span {
color: rgba(255,255,255,.42) !important;
font: 400 11px/1.4 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .01em !important;
padding-top: 1px !important;
}
.dream-player-section--trackinfo {
padding: 10px 0 6px !important;
}
.dream-trackinfo-body {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 14px !important;
}
.dream-equalizer-shell {
display: flex !important;
flex-direction: row !important;
align-items: flex-end !important;
gap: 3px !important;
height: 28px !important;
flex-shrink: 0 !important;
}
.dream-eq-bar {
width: 4px !important;
border-radius: 2px !important;
background: var(--dream-mood-from, #ff2d7a) !important;
animation: dreamEqBounce 0.9s ease-in-out infinite alternate !important;
transform-origin: bottom !important;
}
.dream-eq-bar:nth-child(1) { height: 40%; animation-duration: 0.75s; }
.dream-eq-bar:nth-child(2) { height: 70%; animation-duration: 0.55s; animation-delay: 0.1s; }
.dream-eq-bar:nth-child(3) { height: 55%; animation-duration: 0.85s; animation-delay: 0.2s; }
.dream-eq-bar:nth-child(4) { height: 85%; animation-duration: 0.65s; animation-delay: 0.05s; }
.dream-eq-bar:nth-child(5) { height: 60%; animation-duration: 0.8s; animation-delay: 0.15s; }
.dream-eq-bar:nth-child(6) { height: 45%; animation-duration: 0.7s; animation-delay: 0.25s; }
.dream-eq-bar:nth-child(7) { height: 75%; animation-duration: 0.6s; animation-delay: 0.08s; }
@keyframes dreamEqBounce {
from { transform: scaleY(0.25); opacity: 0.6; }
to { transform: scaleY(1); opacity: 1; }
}
body:not(.dream-app-playing) .dream-eq-bar {
animation-play-state: paused !important;
opacity: 0.3 !important;
}
.dream-trackinfo-meta {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
min-width: 0 !important;
}
.dream-trackinfo-pills {
display: flex !important;
flex-wrap: wrap !important;
gap: 5px !important;
}
.dream-trackinfo-pill {
display: inline-block !important;
padding: 3px 9px !important;
border-radius: 20px !important;
font: 600 10px/1.4 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
.dream-trackinfo-pill--mood {
background: var(--dream-mood-from, #ff2d7a) !important;
color: #fff !important;
}
.dream-trackinfo-pill--bpm {
background: rgba(255,255,255,.1) !important;
color: rgba(255,255,255,.8) !important;
border: 1px solid rgba(255,255,255,.14) !important;
}
.dream-trackinfo-pill--genre {
background: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.65) !important;
border: 1px solid rgba(255,255,255,.1) !important;
}
.dream-trackinfo-duration {
color: rgba(255,255,255,.38) !important;
font: 400 10.5px/1.4 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .01em !important;
}
@media (pointer: coarse) {
.dream-trackinfo-body { gap: 10px !important; }
.dream-equalizer-shell { height: 22px !important; }
.dream-eq-bar { width: 3px !important; }
}
.dream-player-section .dream-setting-row > span {
color: rgba(255,255,255,.42) !important;
font: 400 11px/1.4 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .01em !important;
padding-top: 1px !important;
}
.dream-player-details-id {
margin: 2px 0 0 !important;
color: rgba(255,255,255,.42) !important;
font: 600 10.5px/1.4 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .03em !important;
overflow-wrap: anywhere !important;
}
.dream-player-section--provenance .dream-provenance-static {
margin-top: 2px !important;
}
.dream-player-section--provenance .dream-provenance {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.dream-player-section--provenance .dream-provenance > strong {
display: none !important;
}
.dream-player-section--provenance .dream-provenance p {
color: rgba(255,255,255,.76) !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
max-width: 100% !important;
}
.dream-player-section--provenance .dream-provenance-row:first-of-type {
border-top: 0 !important;
}
.dream-player-preview-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 12px !important;
align-items: center !important;
padding: 10px 0 !important;
border-top: 1px solid rgba(255,255,255,.06) !important;
}
.dream-player-preview-row:first-of-type {
border-top: 0 !important;
padding-top: 0 !important;
}
.dream-player-preview-copy {
appearance: none !important;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: 52px minmax(0, 1fr) !important;
gap: 10px !important;
align-items: center !important;
text-align: left !important;
cursor: pointer !important;
}
.dream-player-preview-art-shell {
width: 52px !important;
height: 52px !important;
border-radius: 14px !important;
overflow: hidden !important;
box-shadow: 0 14px 30px rgba(0,0,0,.24) !important;
}
.dream-player-preview-art {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.dream-player-preview-text {
min-width: 0 !important;
display: grid !important;
gap: 3px !important;
}
.dream-player-preview-copy strong {
color: #f7f8f8 !important;
font: 700 13px/1.2 'DM Sans', system-ui, sans-serif !important;
}
.dream-player-preview-copy span {
color: rgba(255,255,255,.56) !important;
font: 500 12px/1.35 'Inter', system-ui, sans-serif !important;
}
.dream-player-preview-copy em {
display: block !important;
margin-top: 2px !important;
color: rgba(255,255,255,.42) !important;
font: 600 10.5px/1.35 'DM Sans', system-ui, sans-serif !important;
font-style: normal !important;
}
.dream-player-preview-actions {
display: grid !important;
justify-items: end !important;
gap: 4px !important;
min-width: 132px !important;
}
.dream-player-preview-topline {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
width: 100% !important;
flex-wrap: wrap !important;
}
.dream-player-preview-tagline {
color: rgba(255,255,255,.42) !important;
font: 600 10px/1.35 'DM Sans', system-ui, sans-serif !important;
font-style: normal !important;
text-align: right !important;
max-width: 22ch !important;
}
.dream-player-preview-tag {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 24px !important;
padding: 0 10px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.58) !important;
font: 700 10px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
}
.dream-player-preview-tag--queue {
background: rgba(110,231,183,.14) !important;
color: rgba(187,247,208,.96) !important;
}
.dream-player-preview-tag--context {
background: rgba(96,165,250,.14) !important;
color: rgba(191,219,254,.94) !important;
}
.dream-player-preview-tag--history {
background: rgba(244,114,182,.14) !important;
color: rgba(251,207,232,.94) !important;
}
.dream-player-section-note {
margin-top: -2px !important;
color: rgba(255,255,255,.44) !important;
font: 600 11px/1.4 'DM Sans', system-ui, sans-serif !important;
}
.dream-player-mini-action {
appearance: none !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 999px !important;
background: rgba(255,255,255,.08) !important;
color: #f7f8f8 !important;
min-height: 28px !important;
padding: 0 10px !important;
font: 700 11px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-player-mini-action--ghost {
background: transparent !important;
color: rgba(255,255,255,.72) !important;
}
@media (min-width: 1100px) {
body.dream-app-open[data-dream-route="player"] .mini-now-playing {
display: none !important;
}
body.dream-app-open[data-dream-route="player"] #minimal-ui .dream-app-content {
padding-bottom: 32px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.dream-player-surface--desktop {
align-items: stretch !important;
padding: 18px 24px 24px !important;
overflow-x: visible !important;
}
.dream-player-surface--desktop .dream-player-layout--desktop {
width: min(100%, 1408px) !important;
margin: 0 auto !important;
grid-template-columns: minmax(376px, 456px) minmax(0, 1fr) !important;
justify-items: stretch !important;
align-items: start !important;
gap: 20px !important;
}
.dream-player-surface--desktop .dream-player-secondary {
min-width: 0 !important;
overflow: visible !important;
justify-items: stretch !important;
align-content: start !important;
}
.dream-player-surface--desktop .dream-player-primary {
position: sticky !important;
top: 10px !important;
min-width: 0 !important;
overflow: hidden !important;
}
.dream-player-surface--desktop .dream-player-art-wrap {
width: min(100%, 240px) !important;
margin-top: 0 !important;
justify-self: flex-start !important;
}
.dream-player-surface--desktop .dream-player-info {
width: 100% !important;
max-width: none !important;
text-align: left !important;
gap: 5px !important;
}
.dream-player-surface--desktop .dream-player-info h2 {
font-size: clamp(28px, 2.2vw, 36px) !important;
line-height: .98 !important;
max-width: 13ch !important;
}
.dream-player-surface--desktop .dream-player-info--long h2 {
max-width: 15ch !important;
}
.dream-player-surface--desktop .dream-player-info--cjk h2 {
max-width: 10ch !important;
font-size: clamp(25px, 2vw, 32px) !important;
}
.dream-player-surface--desktop .dream-player-info p {
font-size: 15px !important;
}
.dream-player-surface--desktop .dream-player-support {
font-size: 12.5px !important;
}
.dream-player-surface--desktop .dream-player-meta {
justify-content: flex-start !important;
}
.dream-player-surface--desktop .dream-player-progress,
.dream-player-surface--desktop .dream-player-toggle-row,
.dream-player-surface--desktop .dream-player-actions,
.dream-player-surface--desktop .dream-player-transport-card,
.dream-player-surface--desktop .dream-player-context-card,
.dream-player-surface--desktop .dream-player-context-strip,
.dream-player-surface--desktop .dream-player-section,
.dream-player-surface--desktop .dream-player-secondary-grid {
width: 100% !important;
max-width: none !important;
}
.dream-player-surface--desktop .dream-player-progress {
margin-bottom: 4px !important;
}
.dream-player-surface--desktop .dream-player-controls,
.dream-player-surface--desktop .dream-player-toggle-row,
.dream-player-surface--desktop .dream-player-actions {
justify-content: flex-start !important;
}
.dream-player-surface--desktop .dream-player-transport-card {
padding: 12px !important;
gap: 8px !important;
order: 3 !important;
}
.dream-player-surface--desktop .dream-player-transport-card .dream-player-progress-bar {
height: 8px !important;
}
.dream-player-surface--desktop .dream-player-section {
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
}
.dream-player-surface--desktop .dream-player-context-card {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
padding: 10px !important;
order: 4 !important;
}
.dream-player-surface--desktop .dream-player-secondary-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
gap: 16px !important;
align-items: start !important;
}
.dream-player-surface--desktop .dream-player-section--details,
.dream-player-surface--desktop .dream-player-section--provenance {
align-self: stretch !important;
min-width: 0 !important;
}
.dream-player-surface--desktop .dream-player-section--details {
gap: 8px !important;
align-content: start !important;
}
.dream-player-surface--desktop .dream-player-section--details .dream-setting-row {
align-items: center !important;
gap: 10px !important;
padding: 7px 0 !important;
}
.dream-player-surface--desktop .dream-player-section--details .dream-setting-row span {
font-size: 10px !important;
}
.dream-player-surface--desktop .dream-player-section--details .dream-setting-row strong {
max-width: none !important;
text-align: left !important;
font-size: 12px !important;
line-height: 1.22 !important;
}
.dream-player-surface--desktop .dream-player-section--history-empty {
grid-column: 1 / -1 !important;
min-height: 200px !important;
align-content: center !important;
}
/* DW-VIS-NEW-17: constrain track detail surface within the secondary grid column */
.dream-player-surface--desktop .dream-track-detail-surface {
max-width: min(100%, 420px) !important;
width: 100% !important;
align-self: start !important;
}
.dream-player-surface--desktop .dream-player-section--queue-empty .dream-player-preview-row:last-of-type {
padding-bottom: 0 !important;
}
.dream-player-surface--desktop .dream-player-section--queue-empty .dream-player-preview-tagline {
max-width: 38ch !important;
}
.dream-player-surface--desktop .dream-player-section--history-empty .dream-empty {
max-width: 46ch !important;
}
.dream-player-surface--desktop .dream-player-stat {
padding: 10px 12px !important;
}
.dream-player-surface--desktop .dream-player-stat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
overflow: hidden !important;
}
.dream-player-surface--desktop .dream-player-stat {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.dream-player-surface--desktop .dream-player-stat span {
min-width: 0 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.2 !important;
}
.dream-player-surface--desktop .dream-player-stat strong {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.dream-player-surface--desktop .dream-player-setting-value {
min-width: 0 !important;
max-width: 100% !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.4 !important;
}
.dream-player-surface--desktop .dream-player-section--details .dream-setting-row,
.dream-player-surface--desktop .dream-player-section--provenance .dream-setting-row {
grid-template-columns: 1fr !important;
gap: 4px !important;
}
.dream-player-surface--desktop .dream-player-section--details .dream-setting-row > span,
.dream-player-surface--desktop .dream-player-section--provenance .dream-setting-row > span {
padding-top: 0 !important;
font-size: 10px !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.5) !important;
}
.dream-player-surface--desktop .dream-player-section--details .dream-setting-row strong,
.dream-player-surface--desktop .dream-player-section--provenance .dream-setting-row strong,
.dream-player-surface--desktop .dream-player-section--provenance .dream-provenance-row em {
display: block !important;
max-width: 100% !important;
width: 100% !important;
text-align: left !important;
white-space: normal !important;
overflow: visible !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
text-overflow: clip !important;
}
.dream-player-surface--desktop .dream-track-detail-story-copy,
.dream-player-surface--desktop .dream-track-detail-story-support,
.dream-player-surface--desktop .dream-player-section-note,
.dream-player-surface--desktop .dream-player-setting-value {
display: block !important;
width: 100% !important;
max-width: 100% !important;
white-space: normal !important;
overflow: visible !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
text-overflow: clip !important;
}
.dream-player-surface--desktop .dream-track-detail-context-strip {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
}
.dream-player-surface--desktop .dream-track-detail-context-strip .dream-row-pill {
white-space: normal !important;
max-width: 100% !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
}
}
@media (max-width: 1400px) {
.dream-player-surface--desktop .dream-player-layout--desktop {
width: min(100%, 1040px) !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.dream-player-surface--desktop .dream-player-primary {
position: static !important;
}
.dream-player-surface--desktop .dream-player-art-wrap {
width: min(100%, 280px) !important;
justify-self: center !important;
}
.dream-player-surface--desktop .dream-player-info,
.dream-player-surface--desktop .dream-player-controls,
.dream-player-surface--desktop .dream-player-toggle-row,
.dream-player-surface--desktop .dream-player-actions {
justify-content: center !important;
text-align: center !important;
}
.dream-player-surface--desktop .dream-player-secondary-grid {
grid-template-columns: 1fr !important;
}
.dream-player-surface--desktop .dream-track-detail-grid {
grid-template-columns: 1fr !important;
}
}
@media (min-width: 1600px) {
.dream-player-surface--desktop .dream-player-layout--desktop {
transform: translateX(-148px) !important;
}
.dream-player-surface--desktop .dream-player-secondary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (min-width: 1800px) {
.dream-player-surface--desktop .dream-player-layout--desktop {
transform: translateX(-176px) !important;
}
}
@media (min-width: 1600px) {
.dream-player-surface--desktop .dream-player-stat-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
.dream-billing-section {
display: grid !important;
gap: 10px !important;
}
body.dream-app-open[data-dream-route="billing"] .mini-now-playing {
display: none !important;
}
body.mode-minimal.dream-app-open[data-dream-route="billing"] #minimal-ui .dream-app-content {
padding-bottom: calc(148px + env(safe-area-inset-bottom)) !important;
}
body.mode-minimal.dream-app-open[data-dream-route="account"] #minimal-ui .dream-app-content {
padding-bottom: calc(140px + env(safe-area-inset-bottom)) !important;
}
@media (max-width: 520px) {
body.dream-app-open[data-dream-route="player"] .mini-now-playing,
body.dream-app-open[data-dream-route="player"] .dream-bottom-tabs {
display: none !important;
}
body.dream-app-open[data-dream-route="player"] .dream-app-main {
height: calc(100dvh - 76px - env(safe-area-inset-bottom)) !important;
max-height: calc(100dvh - 76px - env(safe-area-inset-bottom)) !important;
}
body.dream-app-open[data-dream-route="player"] #minimal-ui .dream-app-content,
body.dream-app-open[data-dream-route="player"] #dreamAppContent,
body.dream-app-open[data-dream-route="player"] .dream-app-content {
padding: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-surface {
/* DW-VIS-PLAYER-UPNEXT-CLIP fix: replace 443px clamp (v682 attempt) with flex-grow
pattern that matches the later (line ~3867) correct implementation.
443px static value overflowed because parent .dream-app-main has fixed 647px height
while .dream-player-up-next-card bottom=697px exceeds 443px surface by ~254px.
Use flex:1 1 auto + min-height:0 so surface fills available space and upNext scrolls
within the surface instead of overflowing below it. */
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: none !important;
height: auto !important;
overflow-y: auto !important;
padding: 12px 10px 18px !important;
gap: 4px !important;
border-radius: 22px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-art-wrap {
/* DW-WAVE54-PLAYER-UPNEXT-FIRST-FOLD: the late phone density block overrode
the earlier 180px art cap with 240px, pushing the Up Next CTA ~22px below
the player surface. Cap at 200px so the CTA clears the surface at scrollTop=0. */
width: min(62vw, 200px) !important;
margin-top: 0 !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-primary {
gap: 4px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-ctrl--play {
width: 64px !important;
height: 64px !important;
font-size: 24px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-kicker {
font-size: 8.5px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-info {
gap: 3px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-info h2 {
font-size: 18.5px !important;
line-height: 1.01 !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-info--long h2 {
font-size: 17px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-info--cjk h2 {
font-size: 16.5px !important;
line-height: 1.06 !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-info p {
font-size: 12px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-support {
font-size: 10.5px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-mood {
min-height: 26px !important;
padding: 5px 10px !important;
font-size: 9.5px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-context-strip {
gap: 5px !important;
padding: 7px 9px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-context-strip strong {
font-size: 11.5px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-context-strip .dream-player-context-queue {
font-size: 9.2px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-context-card,
body.dream-app-open[data-dream-route="player"] .dream-player-section {
padding: 10px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-section-note {
font-size: 10.2px !important;
line-height: 1.3 !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-transport-card {
gap: 9px !important;
padding: 12px !important;
border-radius: 20px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-stat {
padding: 8px 10px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-toggle-row {
gap: 4px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-action--compact {
padding: 5px 8px !important;
font-size: 9.5px !important;
min-height: 44px !important;
min-width: 44px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-controls {
gap: 12px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-ctrl {
width: 44px !important;
height: 44px !important;
font-size: 22px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-ctrl--play {
width: 48px !important;
height: 48px !important;
font-size: 18px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-actions {
gap: 5px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-actions .dream-player-action {
padding: 6px 9px !important;
font-size: 9.5px !important;
min-height: 44px !important;
min-width: 44px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-preview-row {
grid-template-columns: 1fr !important;
gap: 8px !important;
padding: 8px 0 !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-preview-copy {
grid-template-columns: 44px minmax(0, 1fr) !important;
gap: 8px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-preview-art-shell {
width: 44px !important;
height: 44px !important;
border-radius: 12px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-preview-actions {
justify-items: start !important;
min-width: 0 !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-preview-topline {
justify-content: space-between !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-preview-tagline {
text-align: left !important;
max-width: none !important;
}
}
/* Phone: player preview More button / topline sizing */
@media (max-width: 640px) {
/* Ensure the topline and actions row are not crushed on narrow phone */
body.dream-app-open[data-dream-route="player"] .dream-player-preview-actions {
min-width: 0 !important;
justify-items: start !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-preview-topline {
justify-content: space-between !important;
width: 100% !important;
min-height: 28px !important;
flex-wrap: nowrap !important;
}
/* Show .dream-player-secondary on player route so preview rows are visible */
body.dream-app-open[data-dream-route="player"] .dream-player-secondary {
display: grid !important;
overflow-y: auto !important;
max-height: 400px !important;
align-content: start !important;
}
/* More button: explicit width so it never collapses to 0 */
.dream-player-preview-more-action {
display: flex !important;
width: 44px !important;
min-width: 44px !important;
min-height: 28px !important;
height: 28px !important;
padding: 0 8px !important;
font-size: 10px !important;
flex-shrink: 0 !important;
}
/* Compact tag + More topline — keep both inline without wrapping */
.dream-player-preview-tag {
min-height: 22px !important;
padding: 0 6px !important;
font-size: 9px !important;
white-space: nowrap !important;
}
}
/* Search More popup menu */
.dream-search-more-popup {
position: fixed !important;
bottom: 120px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 100 !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
padding: 8px !important;
min-width: 180px !important;
background: rgba(12,14,20,.96) !important;
border: 1px solid rgba(255,255,255,.12) !important;
border-radius: 16px !important;
box-shadow: 0 12px 48px rgba(0,0,0,.6) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
.dream-popup-item {
appearance: none !important;
border: 0 !important;
background: transparent !important;
color: rgba(255,255,255,.82) !important;
padding: 10px 14px !important;
font: 700 12px/1 'DM Sans', system-ui, sans-serif !important;
text-align: left !important;
border-radius: 10px !important;
cursor: pointer !important;
transition: background .12s !important;
}
.dream-popup-item:hover,
.dream-popup-item:active {
background: rgba(255,255,255,.08) !important;
}
.dream-popup-item.dream-popup-close {
color: rgba(255,255,255,.45) !important;
text-align: center !important;
}
.dream-popup-item--danger {
color: #ff5252 !important;
}
.dream-popup-note {
padding: 10px 14px !important;
font: 400 12px/1.4 'DM Sans', system-ui, sans-serif !important;
color: rgba(255,255,255,.45) !important;
text-align: left !important;
border-radius: 10px !important;
}
/* discover richness pass — deeper compact browse shelves */
.dream-discover-browse-grid {
display: grid !important;
gap: 12px !important;
margin: 12px 0 16px !important;
}
.dream-discover-browse-grid .dream-section {
margin-bottom: 0 !important;
}
@media (min-width: 1280px) {
.dream-discover-route--desktop .dream-discover-browse-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 520px) {
body.dream-app-open .dream-discover-browse-grid {
gap: 8px !important;
margin: 10px 0 14px !important;
grid-template-columns: minmax(0, 1fr) !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
}
body.dream-app-open .dream-discover-browse-grid > .dream-section {
padding: 10px 10px 9px !important;
margin-top: 0 !important;
max-width: 100% !important;
overflow-x: clip !important;
scroll-snap-align: start !important;
}
body.dream-app-open .dream-discover-browse-grid > .dream-section .dream-section-head {
margin-bottom: 8px !important;
}
}
/* DW-FEAT-054: browse shelf horizontal scroll — phone-first streaming-app shelves */
/* DW-FEAT-054-REGRESS fix: max-width:100% constrains flex container to viewport, enabling scrollLeft */
body.dream-app-open .dream-discover-browse-grid > .dream-section .dream-collection-stack {
display: flex !important;
gap: 8px !important;
overflow-x: auto !important;
max-width: 100% !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
padding: 0 2px 4px !important;
}
body.dream-app-open .dream-discover-browse-grid > .dream-section .dream-collection-stack::-webkit-scrollbar {
display: none !important;
}
body.dream-app-open .dream-discover-browse-grid > .dream-section .dream-collection-stack .dream-collection-row {
flex: 0 0 200px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 10px !important;
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 14px !important;
white-space: nowrap !important;
overflow: hidden !important;
scroll-snap-align: start !important;
}
body.dream-app-open .dream-discover-browse-grid > .dream-section .dream-collection-stack .dream-row-play {
flex-shrink: 0 !important;
font-size: 14px !important;
width: 28px !important;
height: 28px !important;
line-height: 28px !important;
background: rgba(255,255,255,0.12) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.dream-app-open .dream-discover-browse-grid > .dream-section .dream-collection-stack .dream-row-art {
width: 36px !important;
height: 36px !important;
flex-shrink: 0 !important;
border-radius: 8px !important;
object-fit: cover !important;
}
body.dream-app-open .dream-discover-browse-grid > .dream-section .dream-collection-stack .dream-collection-track-copy {
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
overflow: hidden !important;
min-width: 0 !important;
}
body.dream-app-open .dream-discover-browse-grid > .dream-section .dream-collection-stack .dream-collection-track-copy strong {
font-size: 13px !important;
font-weight: 600 !important;
color: #fff !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
body.dream-app-open .dream-discover-browse-grid > .dream-section .dream-collection-stack .dream-collection-track-copy em {
font-size: 11px !important;
color: rgba(255,255,255,0.50) !important;
font-style: normal !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
body.dream-app-open .dream-discover-browse-grid > .dream-section .dream-collection-stack .dream-collection-track-actions {
display: none !important;
}
/* search richness pass — calmer idle modules + phone-first quick strips */
.dream-search-hero-copy {
margin: 8px 0 0 !important;
color: rgba(255,255,255,.76) !important;
font-size: 13px !important;
line-height: 1.35 !important;
max-width: 42ch !important;
}
.dream-search-idle {
display: grid !important;
gap: 14px !important;
margin-top: 10px !important;
padding-bottom: calc(var(--dream-mobile-tabs-clearance, 72px) + var(--dream-mobile-mini-clearance, 34px) + 12px) !important;
}
.dream-search-idle-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
.dream-search-module {
display: grid !important;
gap: 10px !important;
padding: 12px !important;
border-radius: 18px !important;
border: 1px solid rgba(255,255,255,.08) !important;
background: rgba(255,255,255,.035) !important;
min-width: 0 !important;
overflow: hidden !important;
}
.dream-search-module--start {
gap: 8px !important;
overflow-x: auto !important;
}
.dream-section-head--search-start {
align-items: start !important;
gap: 8px !important;
}
.dream-search-inline-note {
color: rgba(255,255,255,.5) !important;
font: 700 10px/1.35 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .04em !important;
}
.dream-search-module-empty {
color: rgba(255,255,255,.92) !important;
font-size: 12px !important;
line-height: 1.35 !important;
padding: 12px !important;
border: 1px dashed rgba(255,255,255,.18) !important;
border-radius: 14px !important;
background: rgba(255,255,255,.06) !important;
}
.dream-search-pill-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
overflow: visible !important;
}
.dream-search-pill-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
overflow: visible !important;
flex-shrink: 0 !important;
}
.dream-search-pill-row--scroll {
flex-wrap: nowrap !important;
overflow-x: auto !important;
padding-bottom: 4px !important;
padding-right: 36px !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
position: relative !important;
flex-shrink: 0 !important;
}
/* Fade hint on right edge when chips overflow */
.dream-search-pill-row--scroll::after {
content: '' !important;
position: absolute !important;
right: 0 !important;
top: 0 !important;
bottom: 4px !important;
width: 32px !important;
background: linear-gradient(to right, transparent, rgba(10,10,18,.55)) !important;
pointer-events: none !important;
z-index: 1 !important;
}
.dream-search-pill-row--scroll::-webkit-scrollbar {
display: none !important;
}
.dream-search-pill-row--history,
.dream-search-pill-row--start,
.dream-search-pill-row--trending,
.dream-search-pill-row--moods {
flex-wrap: wrap !important;
justify-content: center !important;
gap: 7px !important;
padding-bottom: 14px !important;
overflow-x: visible !important;
}
.dream-search-chip--history,
.dream-search-chip--trend,
.dream-search-chip--mood {
border-color: rgba(255,255,255,.12) !important;
background: rgba(255,255,255,.05) !important;
min-height: 44px !important;
}
.dream-browse-grid--compact {
grid-template-columns: repeat(2, minmax(100px, 1fr)) !important;
}
.dream-search-feature-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
overflow: visible !important;
}
.dream-search-feature-card,
.dream-search-featured-playlist {
display: grid !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
border: 1px solid rgba(255,255,255,.08) !important;
background: rgba(255,255,255,.04) !important;
color: rgba(255,255,255,.92) !important;
}
.dream-search-feature-card {
grid-template-columns: 40px minmax(0, 1fr) !important;
padding: 10px 11px !important;
border-radius: 16px !important;
text-align: left !important;
}
.dream-search-feature-art {
width: 40px !important;
height: 40px !important;
aspect-ratio: 1 !important;
border-radius: 12px !important;
object-fit: cover !important;
overflow: hidden !important;
}
.dream-search-feature-copy,
.dream-search-row-copy {
min-width: 0 !important;
display: grid !important;
}
.dream-search-feature-copy strong,
.dream-search-row-copy strong {
color: rgba(255,255,255,.92) !important;
font: 800 12px/1.2 'DM Sans', system-ui, sans-serif !important;
overflow: hidden !important;
text-overflow: initial !important;
white-space: normal !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
}
.dream-search-feature-copy em,
.dream-search-row-copy em {
color: rgba(255,255,255,.72) !important;
font: 500 11px/1.25 'DM Sans', system-ui, sans-serif !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.dream-search-feature-list {
display: grid !important;
gap: 8px !important;
}
.dream-search-refinement-bar {
display: grid !important;
gap: 10px !important;
margin: 0 0 10px !important;
}
.dream-search-refinement-primary {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
}
.dream-search-refinement-secondary,
.dream-search-sort-group,
.dream-search-utility-group,
.dream-search-density-group {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
.dream-search-sort,
.dream-search-utility,
.dream-search-density,
.dream-search-reset {
appearance: none !important;
min-height: 32px !important;
padding: 6px 10px !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,.1) !important;
background: rgba(255,255,255,.035) !important;
color: rgba(255,255,255,.76) !important;
font: 700 10.5px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-search-sort.active,
.dream-search-utility.active,
.dream-search-density.active {
border-color: rgba(155,231,255,.28) !important;
background: rgba(155,231,255,.1) !important;
color: rgba(235,250,255,.96) !important;
}
.dream-search-refinement-summary {
margin: 0 !important;
}
.dream-search-results-grid {
display: grid !important;
gap: 12px !important;
}
.dream-search-results-main,
.dream-search-results-side {
display: grid !important;
gap: 12px !important;
}
.dream-search-route--desktop {
display: flex !important;
flex-direction: column !important;
}
.dream-search-desktop-shell {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(280px, 340px) !important;
gap: 16px !important;
align-items: start !important;
}
.dream-search-sidecar {
position: sticky !important;
top: 18px !important;
display: grid !important;
gap: 12px !important;
}
.dream-search-main-stack {
min-width: 0 !important;
}
.dream-library-desktop-shell {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(280px, 340px) !important;
gap: 16px !important;
align-items: start !important;
}
.dream-library-sidecar {
position: sticky !important;
top: 18px !important;
display: grid !important;
gap: 12px !important;
}
.dream-library-main-stack {
min-width: 0 !important;
}
.dream-track-detail-surface--library .dream-track-detail-grid {
grid-template-columns: 1fr !important;
}
.dream-track-detail-surface--library .dream-track-detail-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.dream-track-detail-surface--library .dream-track-detail-head {
grid-template-columns: 72px minmax(0, 1fr) !important;
gap: 12px !important;
}
.dream-track-detail-surface--library .dream-close-detail-action {
grid-column: 1 / -1 !important;
justify-self: start !important;
}
.dream-track-detail-surface--search .dream-track-detail-grid {
grid-template-columns: 1fr !important;
}
.dream-track-detail-surface--search .dream-track-detail-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.dream-track-detail-surface--search .dream-track-detail-head {
grid-template-columns: 72px minmax(0, 1fr) !important;
gap: 12px !important;
}
.dream-track-detail-surface--search .dream-close-detail-action {
grid-column: 1 / -1 !important;
justify-self: start !important;
}
/* DW-SCOUT-134: sticky head + fixed close for discover surface long-scroll recovery */
.dream-track-detail-surface--discover .dream-track-detail-head {
position: sticky !important;
top: max(10px, env(safe-area-inset-top)) !important;
z-index: 12 !important;
margin: -6px -6px 16px !important;
padding: 12px 12px 14px !important;
border-radius: 22px !important;
background: linear-gradient(180deg, rgba(6,8,14,.96), rgba(10,12,20,.88)) !important;
box-shadow: 0 16px 30px rgba(0,0,0,.28) !important;
backdrop-filter: blur(16px) saturate(120%) !important;
}
.dream-track-detail-surface--discover .dream-close-detail-action {
position: fixed !important;
top: calc(env(safe-area-inset-top) + 18px) !important;
right: 18px !important;
left: auto !important;
z-index: 30 !important;
padding: 10px 14px !important;
border-radius: 999px !important;
background: rgba(6,8,14,.94) !important;
box-shadow: 0 14px 26px rgba(0,0,0,.32) !important;
}
/* Inline × close button for empty-state sidecar panels */
.dream-sidecar-inline-close {
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.14) !important;
border-radius: 50% !important;
color: rgba(255,255,255,.7) !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 15px !important;
line-height: 1 !important;
width: 26px !important;
height: 26px !important;
padding: 0 !important;
margin-left: auto !important;
flex-shrink: 0 !important;
transition: background .15s, color .15s !important;
}
.dream-sidecar-inline-close:hover {
background: rgba(255,255,255,.16) !important;
color: #fff !important;
}
.dream-section-head .dream-sidecar-inline-close {
position: absolute !important;
top: 10px !important;
right: 10px !important;
margin-left: 0 !important;
}
.dream-section-head {
position: relative !important;
}
/* Slide-in animation for sidecar panels */
@keyframes dreamSidecarSlideIn {
from {
opacity: 0;
transform: translateX(24px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.dream-track-detail-surface--sidecar {
animation: dreamSidecarSlideIn .22s ease-out forwards !important;
}
/* Mobile: sidecar becomes bottom sheet overlay */
@media (max-width: 1099px) {
.dream-search-desktop-shell,
.dream-library-desktop-shell {
grid-template-columns: 1fr !important;
}
.dream-search-sidecar,
.dream-library-sidecar {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
z-index: 900 !important;
border-radius: 18px 18px 0 0 !important;
box-shadow: 0 -8px 40px rgba(0,0,0,.55) !important;
max-height: 78vh !important;
overflow-y: auto !important;
animation: dreamSidecarSlideIn .28s ease-out forwards !important;
}
}
@media (min-width: 1100px) {
#bgVideo {
left: -8px !important;
width: calc(100% + 16px) !important;
max-width: none !important;
}
.dream-discover-social-grid--paired {
grid-template-columns: minmax(0, 1.16fr) minmax(320px, .84fr) !important;
align-items: start !important;
gap: 16px !important;
}
.dream-discover-social-grid--single {
display: grid !important;
justify-content: center !important;
}
.dream-discover-social-primary,
.dream-discover-social-secondary {
min-width: 0 !important;
}
.dream-discover-social-secondary {
max-width: 420px !important;
justify-self: stretch !important;
}
.dream-discover-social-grid--single .dream-discover-social-secondary {
width: min(100%, 720px) !important;
max-width: 720px !important;
justify-self: center !important;
}
.dream-discover-creators .dream-section-head {
margin-bottom: 10px !important;
}
.dream-connection-list--discover-rail {
gap: 8px !important;
}
.dream-discover-creators .dream-connection-row {
padding: 10px !important;
border-radius: 16px !important;
gap: 10px !important;
}
.dream-discover-creators .dream-connection-main {
grid-template-columns: 36px minmax(0, 1fr) !important;
gap: 10px !important;
}
.dream-discover-creators .dream-connection-avatar {
width: 36px !important;
height: 36px !important;
border-radius: 12px !important;
}
.dream-discover-creators .dream-connection-copy strong {
font-size: 13px !important;
}
.dream-discover-creators .dream-connection-copy em {
font-size: 11px !important;
}
.dream-discover-creators .dream-connection-actions {
align-self: center !important;
}
.dream-discover-creators .dream-connection-follow {
min-width: 94px !important;
justify-content: center !important;
padding: 7px 12px !important;
}
/* DW-FEAT-073: Following now suggested creators row */
.dream-discover-following-suggested {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.dream-discover-following-suggested .dream-discover-creator-card {
padding: 10px 12px !important;
border-radius: 16px !important;
}
.dream-hero--search,
.dream-hero--library {
padding: 20px 18px 24px !important;
}
.dream-hero--search .dream-kicker,
.dream-hero--search .dream-search-hero-copy {
display: none !important;
}
.dream-hero--search h2 {
margin: 0 0 8px !important;
font-size: 22px !important;
line-height: 1.08 !important;
overflow: visible !important;
}
.dream-hero--library {
padding: 16px 18px 18px !important;
}
.dream-hero--library h2 {
margin: 0 0 8px !important;
font-size: 30px !important;
line-height: 1.04 !important;
max-width: 14ch !important;
text-wrap: pretty !important;
}
.dream-hero--library .dream-library-summary-copy {
max-width: 72ch !important;
font-size: 13px !important;
line-height: 1.42 !important;
}
.dream-hero--library .dream-library-status-row {
margin-top: 12px !important;
gap: 10px !important;
}
.dream-hero--library .dream-hero-actions--library {
margin-top: 10px !important;
gap: 8px !important;
}
.dream-library-toolbar {
gap: 12px !important;
margin-bottom: 12px !important;
padding: 14px 16px !important;
}
.dream-library-toolbar-utility-row {
gap: 8px !important;
}
.dream-library-toolbar [role="tablist"] {
gap: 5px !important;
}
.dream-search-results {
margin-top: 14px !important;
}
.dream-search-field {
position: relative !important;
margin-top: 0 !important;
padding: 0 2px !important;
border: 1px solid rgba(255,255,255,.1) !important;
border-radius: 18px !important;
background: rgba(9,12,18,.72) !important;
backdrop-filter: blur(6px) !important;
overflow: visible !important;
min-width: 0 !important;
}
.dream-search-field input {
background: transparent !important;
min-width: 0 !important;
width: 100% !important;
}
.dream-search-icon {
position: absolute !important;
left: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
.dream-search-refinement-bar {
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
padding: 12px 14px !important;
border: 1px solid rgba(255,255,255,.09) !important;
border-radius: 18px !important;
background: rgba(9,12,18,.7) !important;
backdrop-filter: blur(6px) !important;
}
.dream-search-refinement-primary {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 10px !important;
}
.dream-search-refinement-summary {
display: inline-flex !important;
align-items: center !important;
margin-left: auto !important;
white-space: nowrap !important;
}
.dream-search-refinement-summary .dream-search-results-summary-context {
max-width: 28ch !important;
}
.dream-search-reset {
display: none !important;
}
.dream-search-refinement-secondary {
justify-content: flex-end !important;
align-items: center !important;
gap: 8px !important;
}
.dream-search-results-grid {
grid-template-columns: minmax(0, 1.45fr) minmax(280px, .9fr) !important;
align-items: start !important;
}
.dream-search-results-main {
padding: 12px 14px !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 20px !important;
background: rgba(8,11,17,.58) !important;
backdrop-filter: blur(16px) !important;
}
.dream-search-results-main .dream-search-section {
margin-bottom: 0 !important;
}
.dream-search-results-side {
position: sticky !important;
top: 0 !important;
}
.dream-search-results-side .dream-search-section {
margin-bottom: 0 !important;
padding: 12px 14px !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 18px !important;
background: rgba(8,11,17,.62) !important;
backdrop-filter: blur(16px) !important;
}
.dream-search-idle {
grid-template-columns: minmax(0, 1.2fr) minmax(320px, .88fr) !important;
grid-template-areas:
'start start'
'recent resume'
'featured resume'
'moods moods' !important;
align-items: start !important;
}
@media (max-width: 520px) {
body.dream-app-open[data-dream-route="search"] .dream-search-idle {
grid-template-columns: 1fr !important;
grid-template-areas:
'start'
'recent'
'featured'
'moods' !important;
}
body.dream-app-open[data-dream-route="search"] .dream-search-idle > .dream-search-module--start,
body.dream-app-open[data-dream-route="search"] .dream-search-idle > .dream-search-module--recent,
body.dream-app-open[data-dream-route="search"] .dream-search-idle > .dream-search-module--featured,
body.dream-app-open[data-dream-route="search"] .dream-search-idle > .dream-search-module--recent-plays,
body.dream-app-open[data-dream-route="search"] .dream-search-idle > .dream-search-module--trending,
body.dream-app-open[data-dream-route="search"] .dream-search-idle > .dream-search-module--moods {
grid-template-columns: 1fr !important;
}
/* Force browse/mood pill rows to scroll (nowrap), fill viewport width */
body.dream-app-open[data-dream-route="search"] .dream-search-pill-row--start,
body.dream-app-open[data-dream-route="search"] .dream-search-module--moods .dream-search-pill-row--moods {
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding-right: 0 !important;
flex-shrink: 0 !important;
box-sizing: border-box !important;
}
/* DW-VIS-SEARCH-CHIP-RIGHT-CLIP-FIX: keep ::after scroll-hint gradient when row is nowrap.
The original rule (line above this comment) killed the gradient because the row was
wrapping; now flex-wrap is forced to nowrap in the @media (max-width: 520px) block
above, so the gradient is the correct affordance to keep — it fades the rightmost
clipped chip (e.g. mallsoft in Browse, Driving in Mood map) into the background and
signals "more content, scroll right" to the user. We re-enable the gradient here
because the row no longer wraps. */
body.dream-app-open[data-dream-route="search"] .dream-search-pill-row--scroll::after {
display: block !important;
width: 28px !important;
background: linear-gradient(to right, transparent, rgba(8,10,18,.78) 80%, rgba(8,10,18,.92)) !important;
}
body.dream-app-open[data-dream-route="search"] .dream-search-chip--trend,
body.dream-app-open[data-dream-route="search"] .dream-search-chip--mood {
flex: 0 0 auto !important;
max-width: none !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* Let module containers grow naturally to fit wrapped chips */
body.dream-app-open[data-dream-route="search"] .dream-search-module {
height: auto !important;
max-height: none !important;
overflow-y: visible !important;
}
}
.dream-search-module--start {
grid-area: start !important;
}
.dream-search-idle-grid {
grid-area: recent !important;
grid-template-columns: 1fr !important;
align-items: start !important;
}
.dream-search-module--recent {
align-self: start !important;
}
.dream-search-module--recent .dream-search-module-empty {
min-height: 72px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
border-style: solid !important;
border-color: rgba(255,255,255,.08) !important;
background: rgba(255,255,255,.03) !important;
}
.dream-search-module--featured {
grid-area: featured !important;
}
.dream-search-module--recent-plays {
grid-area: resume !important;
align-self: start !important;
}
.dream-search-module--moods {
grid-area: moods !important;
align-self: start !important;
min-height: 280px !important;
}
.dream-search-module--moods .dream-browse-grid--compact {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
align-items: start !important;
}
.dream-search-module--moods .dream-browse-tile {
aspect-ratio: auto !important;
min-height: 82px !important;
padding: 10px !important;
}
/* DW-FEAT-113 AC-3 mobile: mood chips pill row scrolls horizontally on narrow screens */
.dream-search-module--moods .dream-search-pill-row--moods {
flex-wrap: nowrap !important;
overflow-x: auto !important;
padding-bottom: 14px !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.dream-search-module--moods .dream-search-pill-row--moods::-webkit-scrollbar { display: none !important; }
/* DW-FEAT-113 AC-3: hero mood filter chips scroll on narrow phone */
.dream-hero--search .dream-search-chips {
flex-wrap: nowrap !important;
overflow-x: auto !important;
padding-bottom: 4px !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.dream-hero--search .dream-search-chips::-webkit-scrollbar { display: none !important; }
.dream-search-feature-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.dream-search-feature-list {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.dream-search-row--track {
gap: 6px 12px !important;
}
.dream-search-row {
background: rgba(9,12,18,.74) !important;
border-color: rgba(255,255,255,.12) !important;
}
.dream-search-row:hover {
background: rgba(12,16,24,.86) !important;
border-color: rgba(255,255,255,.18) !important;
}
.dream-search-track-main {
grid-template-columns: 44px minmax(0, 1fr) !important;
gap: 12px !important;
}
.dream-search-row .dream-row-art {
width: 44px !important;
height: 44px !important;
border-radius: 10px !important;
}
.dream-search-row-copy em {
display: block !important;
}
.dream-search-results-grid--comfortable .dream-search-row {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.dream-search-results-grid--comfortable .dream-search-track-main {
grid-template-columns: 48px minmax(0, 1fr) !important;
}
.dream-search-results-grid--comfortable .dream-search-row .dream-row-art {
width: 48px !important;
height: 48px !important;
}
}
.dream-search-featured-playlist {
grid-template-columns: 22px minmax(0, 1fr) !important;
padding: 10px 11px !important;
border-radius: 16px !important;
text-align: left !important;
}
.dream-search-playlist-icon {
color: rgba(255,255,255,.64) !important;
font-size: 12px !important;
}
.dream-search-scopes {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
flex: 1 1 auto !important;
min-width: 0 !important;
margin-bottom: 0 !important;
}
.dream-search-scope {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
min-width: 0 !important;
min-height: 44px !important;
padding: 7px 14px 7px 10px !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,.18) !important;
background: rgba(255,255,255,.12) !important;
color: rgba(255,255,255,.78) !important;
text-align: left !important;
}
.dream-search-scope-label {
font: 800 11px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-search-scope-count {
font: 700 10px/1 'DM Sans', system-ui, sans-serif !important;
color: rgba(255,255,255,.58) !important;
}
.dream-search-scope.active {
border-color: rgba(255,113,206,.38) !important;
background: rgba(255,113,206,.18) !important;
color: rgba(255,255,255,1) !important;
}
.dream-search-scope.active .dream-search-scope-count {
color: rgba(255,255,255,.9) !important;
}
.dream-search-results-summary {
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 5px !important;
flex: 0 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
color: rgba(255,255,255,.76) !important;
font-size: 10px !important;
white-space: nowrap !important;
}
.dream-search-results-summary strong {
color: rgba(255,255,255,.92) !important;
font-size: 10.5px !important;
}
.dream-search-results-summary-sep {
color: rgba(255,255,255,.35) !important;
}
.dream-search-results-summary-context {
color: rgba(255,255,255,.54) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-discover-now-playing-strip {
display: grid !important;
gap: 10px !important;
margin-bottom: 12px !important;
padding: 12px 14px !important;
border-radius: 18px !important;
border: 1px solid rgba(255,255,255,.08) !important;
background: rgba(9,10,14,.22) !important;
}
.dream-discover-now-playing-copy {
display: grid !important;
gap: 5px !important;
}
.dream-discover-now-playing-topline {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
}
.dream-discover-now-playing-copy strong {
color: rgba(255,255,255,.94) !important;
font: 800 15px/1.08 'DM Sans', system-ui, sans-serif !important;
}
.dream-discover-now-playing-copy em {
color: rgba(255,255,255,.58) !important;
font: 500 11px/1.3 'DM Sans', system-ui, sans-serif !important;
}
.dream-discover-now-playing-context-label {
color: rgba(255,255,255,.52) !important;
font: 600 10.5px/1.25 'DM Sans', system-ui, sans-serif !important;
font-style: italic !important;
opacity: .9 !important;
}
.dream-discover-now-playing-actions {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
}
/* DW-FEAT-143: Continue listening compact card above the hero on cold-load. */
.dream-discover-continue-row {
display: block !important;
margin-bottom: 12px !important;
}
.dream-discover-continue-card {
display: grid !important;
grid-template-columns: 56px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
padding: 8px 14px 8px 8px !important;
border-radius: 16px !important;
border: 1px solid rgba(120, 170, 255, 0.18) !important;
background: linear-gradient(135deg, rgba(28, 32, 60, 0.55), rgba(14, 18, 32, 0.35)) !important;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22) !important;
color: inherit !important;
text-align: left !important;
cursor: pointer !important;
-webkit-tap-highlight-color: rgba(120, 170, 255, 0.18) !important;
transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease !important;
font: inherit !important;
}
.dream-discover-continue-card:hover,
.dream-discover-continue-card:focus-visible {
border-color: rgba(120, 170, 255, 0.42) !important;
background: linear-gradient(135deg, rgba(36, 42, 78, 0.62), rgba(18, 22, 38, 0.42)) !important;
outline: none !important;
}
.dream-discover-continue-card:active {
transform: scale(0.985) !important;
}
.dream-discover-continue-art {
display: block !important;
width: 56px !important;
height: 56px !important;
border-radius: 10px !important;
overflow: hidden !important;
background: rgba(255, 255, 255, 0.06) !important;
flex: 0 0 56px !important;
}
.dream-discover-continue-art img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.dream-discover-continue-copy {
display: grid !important;
gap: 2px !important;
min-width: 0 !important;
}
.dream-discover-continue-kicker {
color: rgba(120, 170, 255, 0.95) !important;
font: 700 10px/1.2 'DM Sans', system-ui, sans-serif !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
.dream-discover-continue-name {
color: rgba(255, 255, 255, 0.96) !important;
font: 800 14px/1.18 'DM Sans', system-ui, sans-serif !important;
display: block !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
.dream-discover-continue-artist {
color: rgba(255, 255, 255, 0.62) !important;
font: 500 11px/1.3 'DM Sans', system-ui, sans-serif !important;
display: block !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
font-style: normal !important;
}
.dream-discover-continue-dot {
color: rgba(255, 255, 255, 0.32) !important;
margin: 0 2px !important;
}
.dream-discover-continue-actions {
display: grid !important;
grid-template-columns: 22px auto !important;
align-items: center !important;
gap: 6px !important;
padding: 6px 12px !important;
border-radius: 999px !important;
background: rgba(120, 170, 255, 0.18) !important;
border: 1px solid rgba(120, 170, 255, 0.32) !important;
color: rgba(220, 232, 255, 0.95) !important;
font: 700 11px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: 0.04em !important;
flex: 0 0 auto !important;
white-space: nowrap !important;
}
.dream-discover-continue-play-icon {
color: rgba(220, 232, 255, 0.95) !important;
font-size: 11px !important;
line-height: 1 !important;
text-align: center !important;
}
.dream-discover-continue-play-label {
color: rgba(220, 232, 255, 0.95) !important;
font: 700 11px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
@media (max-width: 380px) {
.dream-discover-continue-card {
grid-template-columns: 48px minmax(0, 1fr) auto !important;
padding: 6px 10px 6px 6px !important;
gap: 10px !important;
}
.dream-discover-continue-art,
.dream-discover-continue-art img {
width: 48px !important;
height: 48px !important;
flex: 0 0 48px !important;
}
.dream-discover-continue-actions {
padding: 5px 10px !important;
}
}
/* DW-FEAT-144: Continue listening compact card on the Library Overview mobile stack.
Mirrors the DW-FEAT-143 discover pattern; same gradient/border so the two cards
read as a single design system across routes. */
.dream-library-continue-row {
display: block !important;
margin-bottom: 12px !important;
}
.dream-library-continue-card {
display: grid !important;
grid-template-columns: 56px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
padding: 8px 14px 8px 8px !important;
border-radius: 16px !important;
border: 1px solid rgba(120, 170, 255, 0.18) !important;
background: linear-gradient(135deg, rgba(28, 32, 60, 0.55), rgba(14, 18, 32, 0.35)) !important;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22) !important;
color: inherit !important;
text-align: left !important;
cursor: pointer !important;
-webkit-tap-highlight-color: rgba(120, 170, 255, 0.18) !important;
transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease !important;
font: inherit !important;
}
.dream-library-continue-card:hover,
.dream-library-continue-card:focus-visible {
border-color: rgba(120, 170, 255, 0.42) !important;
background: linear-gradient(135deg, rgba(36, 42, 78, 0.62), rgba(18, 22, 38, 0.42)) !important;
outline: none !important;
}
.dream-library-continue-card:active {
transform: scale(0.985) !important;
}
.dream-library-continue-art {
display: block !important;
width: 56px !important;
height: 56px !important;
border-radius: 10px !important;
overflow: hidden !important;
background: rgba(255, 255, 255, 0.06) !important;
flex: 0 0 56px !important;
}
.dream-library-continue-art img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.dream-library-continue-copy {
display: grid !important;
gap: 2px !important;
min-width: 0 !important;
}
.dream-library-continue-kicker {
color: rgba(120, 170, 255, 0.95) !important;
font: 700 10px/1.2 'DM Sans', system-ui, sans-serif !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
.dream-library-continue-name {
color: rgba(255, 255, 255, 0.96) !important;
font: 800 14px/1.18 'DM Sans', system-ui, sans-serif !important;
display: block !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
.dream-library-continue-artist {
color: rgba(255, 255, 255, 0.62) !important;
font: 500 11px/1.3 'DM Sans', system-ui, sans-serif !important;
display: block !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
font-style: normal !important;
}
.dream-library-continue-dot {
color: rgba(255, 255, 255, 0.32) !important;
margin: 0 2px !important;
}
.dream-library-continue-actions {
display: grid !important;
grid-template-columns: 22px auto !important;
align-items: center !important;
gap: 6px !important;
padding: 6px 12px !important;
border-radius: 999px !important;
background: rgba(120, 170, 255, 0.18) !important;
border: 1px solid rgba(120, 170, 255, 0.32) !important;
color: rgba(220, 232, 255, 0.95) !important;
font: 700 11px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: 0.04em !important;
flex: 0 0 auto !important;
white-space: nowrap !important;
}
.dream-library-continue-play-icon {
color: rgba(220, 232, 255, 0.95) !important;
font-size: 11px !important;
line-height: 1 !important;
text-align: center !important;
}
.dream-library-continue-play-label {
color: rgba(220, 232, 255, 0.95) !important;
font: 700 11px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
@media (max-width: 380px) {
.dream-library-continue-card {
grid-template-columns: 48px minmax(0, 1fr) auto !important;
padding: 6px 10px 6px 6px !important;
gap: 10px !important;
}
.dream-library-continue-art,
.dream-library-continue-art img {
width: 48px !important;
height: 48px !important;
flex: 0 0 48px !important;
}
.dream-library-continue-actions {
padding: 5px 10px !important;
}
}
.dream-discover-route--desktop {
display: grid !important;
gap: 18px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.dream-discover-desktop-shell {
display: grid !important;
grid-template-columns: minmax(0, 1fr) clamp(300px, 17vw, 340px) !important;
align-items: start !important;
gap: clamp(22px, 1.8vw, 30px) !important;
width: 100% !important;
max-width: 100% !important;
}
.dream-discover-main-stack {
min-width: 0 !important;
margin-top: 0 !important;
}
/* FIX: reduce gap between marquee and first browse shelf */
body.dream-app-open .dream-discover-main-stack {
margin-top: 8px !important;
}
.dream-discover-sidecar {
min-width: 0 !important;
position: sticky !important;
top: 18px !important;
display: grid !important;
gap: 12px !important;
}
.dream-discover-marquee {
display: grid !important;
grid-template-columns: minmax(0, 1.58fr) minmax(232px, 280px) !important;
gap: 14px !important;
padding: 14px !important;
border-radius: 28px !important;
border: 1px solid rgba(255,255,255,.1) !important;
background: linear-gradient(145deg, rgba(10,12,18,.78), rgba(10,10,16,.52)) !important;
box-shadow: 0 28px 90px rgba(0,0,0,.28) !important;
backdrop-filter: blur(22px) saturate(130%) !important;
overflow: hidden !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.dream-discover-marquee-main {
display: grid !important;
grid-template-columns: 96px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: center !important;
}
.dream-discover-marquee-art-shell {
width: 96px !important;
aspect-ratio: 1 !important;
border-radius: 20px !important;
overflow: hidden !important;
box-shadow: 0 18px 48px rgba(0,0,0,.30) !important;
}
.dream-discover-marquee-art {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.dream-discover-marquee-copy {
display: grid !important;
gap: 12px !important;
min-width: 0 !important;
}
.dream-discover-marquee-copy h2 {
margin: 0 !important;
color: rgba(255,255,255,.96) !important;
font: 900 clamp(24px, 2.3vw, 34px)/1.12 'DM Sans', system-ui, sans-serif !important;
letter-spacing: -.04em !important;
max-width: 100% !important;
}
.dream-discover-marquee-titleline {
display: grid !important;
gap: 7px !important;
}
.dream-discover-marquee-titleline strong {
color: rgba(255,255,255,.96) !important;
font: 800 clamp(16px, 1.8vw, 18px)/1.15 'DM Sans', system-ui, sans-serif !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
}
.dream-discover-marquee-titleline span,
.dream-discover-marquee-helper {
color: rgba(255,255,255,.82) !important;
font: 500 12.5px/1.5 'Inter', system-ui, sans-serif !important;
}
.dream-discover-marquee-helper {
max-width: 58ch !important;
}
.dream-discover-marquee-chips,
.dream-discover-marquee-actions {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
align-items: center !important;
min-width: 0 !important;
overflow: visible !important;
}
.dream-discover-marquee-actions {
margin-top: 4px !important;
}
.dream-discover-marquee-side {
display: grid !important;
gap: 10px !important;
align-content: start !important;
min-width: 0 !important;
overflow: visible !important;
}
.dream-discover-marquee-stat,
.dream-discover-marquee-tracklist {
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 20px !important;
background: rgba(255,255,255,.04) !important;
}
.dream-discover-marquee-stat {
padding: 10px 12px !important;
display: grid !important;
gap: 4px !important;
}
.dream-discover-marquee-stat span {
color: rgba(255,255,255,.72) !important;
font: 700 10px/1.1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
}
.dream-discover-marquee-stat strong {
color: rgba(255,255,255,.94) !important;
font: 800 16px/1.08 'DM Sans', system-ui, sans-serif !important;
word-break: break-word !important;
}
.dream-discover-marquee-tracklist {
display: grid !important;
gap: 0 !important;
overflow: hidden !important;
}
.dream-discover-marquee-track {
appearance: none !important;
border: 0 !important;
border-top: 1px solid rgba(255,255,255,.06) !important;
background: transparent !important;
color: rgba(255,255,255,.88) !important;
padding: 10px 12px !important;
display: grid !important;
gap: 4px !important;
text-align: left !important;
}
.dream-discover-marquee-track:first-child {
border-top: 0 !important;
}
.dream-discover-marquee-track strong {
color: rgba(255,255,255,.92) !important;
font: 700 13px/1.18 'DM Sans', system-ui, sans-serif !important;
}
.dream-discover-marquee-track span {
color: rgba(255,255,255,.54) !important;
font: 500 11px/1.35 'Inter', system-ui, sans-serif !important;
}
.dream-track-detail-surface--sidecar {
margin-top: 0 !important;
}
.dream-track-detail-surface--sidecar .dream-track-detail-grid {
grid-template-columns: 1fr !important;
}
.dream-track-detail-surface--player .dream-track-detail-grid {
grid-template-columns: 1fr !important;
}
.dream-track-detail-surface--sidecar .dream-track-detail-metrics,
.dream-track-detail-surface--player .dream-track-detail-metrics {
grid-template-columns: 1fr !important;
}
.dream-track-detail-surface--sidecar .dream-metric,
.dream-track-detail-surface--player .dream-metric {
min-height: 0 !important;
}
.dream-track-detail-surface--sidecar .dream-metric strong,
.dream-track-detail-surface--sidecar .dream-metric em,
.dream-track-detail-surface--sidecar .dream-metric span,
.dream-track-detail-surface--player .dream-metric strong,
.dream-track-detail-surface--player .dream-metric em,
.dream-track-detail-surface--player .dream-metric span {
max-width: 100% !important;
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
}
.dream-track-detail-surface--sidecar .dream-metric strong,
.dream-track-detail-surface--player .dream-metric strong {
font-size: 14px !important;
line-height: 1.25 !important;
}
.dream-track-detail-surface--sidecar .dream-track-detail-head {
grid-template-columns: 72px minmax(0, 1fr) !important;
gap: 12px !important;
}
.dream-track-detail-surface--sidecar .dream-close-detail-action {
grid-column: 1 / -1 !important;
justify-self: start !important;
}
.dream-track-detail-surface--sidecar .dream-setting-row,
.dream-track-detail-surface--player .dream-setting-row,
.dream-track-detail-surface--sidecar .dream-provenance-row,
.dream-track-detail-surface--player .dream-provenance-row {
align-items: flex-start !important;
}
.dream-track-detail-surface--sidecar .dream-setting-row,
.dream-track-detail-surface--player .dream-setting-row {
flex-direction: column !important;
gap: 5px !important;
}
.dream-track-detail-surface--sidecar .dream-setting-row strong,
.dream-track-detail-surface--sidecar .dream-provenance-row em,
.dream-track-detail-surface--player .dream-setting-row strong,
.dream-track-detail-surface--player .dream-provenance-row em {
max-width: 100% !important;
width: 100% !important;
display: block !important;
text-align: left !important;
white-space: normal !important;
overflow: visible !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
text-overflow: clip !important;
}
.dream-track-detail-surface--sidecar .dream-track-meta-card,
.dream-track-detail-surface--sidecar .dream-track-detail-story-copy,
.dream-track-detail-surface--sidecar .dream-track-detail-story-support,
.dream-track-detail-surface--sidecar .dream-detail-pills,
.dream-track-detail-surface--sidecar .dream-row-pill,
.dream-track-detail-surface--sidecar .dream-player-section-note,
.dream-track-detail-surface--player .dream-track-meta-card,
.dream-track-detail-surface--player .dream-track-detail-story-copy,
.dream-track-detail-surface--player .dream-track-detail-story-support,
.dream-track-detail-surface--player .dream-detail-pills,
.dream-track-detail-surface--player .dream-row-pill,
.dream-track-detail-surface--player .dream-player-section-note {
min-width: 0 !important;
max-width: 100% !important;
white-space: normal !important;
overflow: visible !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
text-overflow: clip !important;
}
.dream-track-detail-surface--ambient {
background: linear-gradient(160deg, rgba(12,14,22,.76), rgba(8,10,15,.55)) !important;
}
.dream-track-meta-card--sidecar-summary {
background: rgba(255,255,255,.03) !important;
}
.dream-section--release-notes .dream-empty--release-notes {
display: grid !important;
gap: 10px !important;
min-height: 172px !important;
align-content: center !important;
background: linear-gradient(160deg, rgba(113, 69, 201, .12), rgba(255,255,255,.03)) !important;
border-color: rgba(201,176,255,.2) !important;
}
.dream-empty--release-notes strong {
color: rgba(255,255,255,.92) !important;
font: 800 16px/1.1 'DM Sans', system-ui, sans-serif !important;
}
.dream-empty--release-notes p {
margin: 0 !important;
color: rgba(255,255,255,.76) !important;
font: 500 12px/1.55 'Inter', system-ui, sans-serif !important;
}
.dream-release-notes-empty-pills {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.dream-discover-creator-grid {
display: grid !important;
gap: 12px !important;
}
.dream-discover-creator-card {
display: grid !important;
gap: 12px !important;
padding: 16px !important;
border-radius: 22px !important;
border: 1px solid rgba(255,255,255,.08) !important;
background: linear-gradient(160deg, rgba(11,14,22,.76), rgba(8,10,15,.58)) !important;
}
.dream-discover-creator-main {
appearance: none !important;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: 56px minmax(0, 1fr) !important;
gap: 12px !important;
text-align: left !important;
}
.dream-discover-creator-avatar {
width: 56px !important;
height: 56px !important;
border-radius: 16px !important;
object-fit: cover !important;
}
.dream-discover-creator-copy,
.dream-discover-creator-topline {
display: grid !important;
gap: 6px !important;
}
.dream-discover-creator-topline strong {
color: rgba(255,255,255,.94) !important;
font: 800 14px/1.1 'DM Sans', system-ui, sans-serif !important;
}
.dream-discover-creator-topline em,
.dream-discover-creator-summary,
.dream-discover-creator-proof,
.dream-discover-creator-proofline {
color: rgba(255,255,255,.56) !important;
font: 500 11px/1.4 'Inter', system-ui, sans-serif !important;
font-style: normal !important;
}
.dream-discover-creator-summary {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.dream-discover-creator-meta,
.dream-discover-creator-actions {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 10px !important;
}
.dream-discover-creator-cta {
appearance: none !important;
border: 1px solid rgba(255,255,255,.1) !important;
border-radius: 999px !important;
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.82) !important;
min-height: 34px !important;
padding: 0 12px !important;
font: 700 11px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-discover-creator-cta.following {
background: rgba(30,215,96,.12) !important;
border-color: rgba(30,215,96,.24) !important;
color: rgba(148,255,186,.96) !important;
}
.dream-discover-creator-cta--ghost {
background: transparent !important;
}
@media (max-width: 520px) {
body.dream-app-open .dream-discover-creator-grid {
gap: 5px !important;
}
body.dream-app-open .dream-discover-creator-card {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: stretch !important;
gap: 4px !important;
padding: 5px 8px !important;
border-radius: 12px !important;
min-height: 48px !important;
max-height: 50px !important;
overflow: hidden !important;
}
body.dream-app-open .dream-discover-creator-main {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 5px !important;
min-width: 0 !important;
}
body.dream-app-open .dream-discover-creator-avatar {
width: 26px !important;
height: 26px !important;
border-radius: 8px !important;
flex-shrink: 0 !important;
}
body.dream-app-open .dream-discover-creator-copy,
body.dream-app-open .dream-discover-creator-topline {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 3px !important;
min-width: 0 !important;
overflow: hidden !important;
}
body.dream-app-open .dream-discover-creator-topline {
flex-wrap: nowrap !important;
white-space: nowrap !important;
}
body.dream-app-open .dream-discover-creator-topline strong {
font: 800 10px/1 'DM Sans', system-ui, sans-serif !important;
flex-shrink: 0 !important;
}
body.dream-app-open .dream-discover-creator-topline em {
font: 500 9px/1 'Inter', system-ui, sans-serif !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
flex-shrink: 1 !important;
white-space: nowrap !important;
}
body.dream-app-open .dream-discover-creator-summary,
body.dream-app-open .dream-discover-creator-proof,
body.dream-app-open .dream-discover-creator-proofline {
display: none !important;
}
body.dream-app-open .dream-discover-creator-actions {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: 3px !important;
min-width: 36px !important;
flex-shrink: 0 !important;
}
body.dream-app-open .dream-discover-creator-actions .dream-discover-creator-cta:not(.dream-view-creator-action) {
display: none !important;
}
body.dream-app-open .dream-discover-creator-cta {
min-height: 18px !important;
padding: 0 4px !important;
font: 700 7px/1 'DM Sans', system-ui, sans-serif !important;
flex-shrink: 0 !important;
}
}
.dream-player-transport-card {
width: min(100%, 440px) !important;
display: grid !important;
gap: 12px !important;
padding: 16px !important;
border-radius: 24px !important;
border: 1px solid rgba(255,255,255,.1) !important;
background: linear-gradient(160deg, rgba(10,12,18,.72), rgba(10,10,16,.52)) !important;
box-shadow: 0 24px 64px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
/* Up-next card — first-class preview in the player transport area */
/* DW-VIS-118 fix: margin-top clears the sticky bottom-recovery button (~44px) */
.dream-player-up-next-card {
margin-top: 64px !important;
padding: 10px 12px !important;
background: rgba(255,255,255,.05) !important;
border: 1px solid rgba(255,255,255,.1) !important;
border-radius: 12px !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
.dream-player-up-next-label {
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.4) !important;
}
.dream-player-up-next-tag {
display: inline-block !important;
font-size: 8px !important;
font-weight: 600 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
color: rgba(125,255,176,.7) !important;
background: rgba(30,215,96,.12) !important;
border: 1px solid rgba(30,215,96,.2) !important;
border-radius: 4px !important;
padding: 1px 5px !important;
margin-left: 4px !important;
vertical-align: middle !important;
}
.dream-player-up-next-inner {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.dream-player-up-next-art {
width: 36px !important;
height: 36px !important;
object-fit: cover !important;
border-radius: 6px !important;
flex-shrink: 0 !important;
}
.dream-player-up-next-text {
flex: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
}
.dream-player-up-next-name {
font-size: 12px !important;
font-weight: 600 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
color: rgba(255,255,255,.85) !important;
max-width: 100% !important;
}
.dream-player-up-next-artist {
font-size: 10px !important;
color: rgba(255,255,255,.45) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-player-up-next-btn {
flex-shrink: 0 !important;
background: rgba(255,255,255,.12) !important;
border: 1px solid rgba(255,255,255,.2) !important;
border-radius: 20px !important;
color: rgba(255,255,255,.8) !important;
font-size: 9px !important;
font-weight: 600 !important;
letter-spacing: .04em !important;
padding: 4px 10px !important;
cursor: pointer !important;
white-space: nowrap !important;
min-height: 44px !important;
min-width: 44px !important;
}
.dream-player-up-next-card--empty {
background: transparent !important;
border-color: rgba(255,255,255,.06) !important;
}
.dream-player-up-next-empty {
font-size: 10px !important;
color: rgba(255,255,255,.3) !important;
font-style: italic !important;
}
@media (max-width: 520px) {
.dream-player-up-next-card {
margin-top: 47px !important;
padding: 8px 10px !important;
}
.dream-player-up-next-art {
width: 30px !important;
height: 30px !important;
}
.dream-player-up-next-name {
font-size: 11px !important;
}
.dream-player-up-next-btn {
min-height: 44px !important;
min-width: 44px !important;
}
/* DW-VIS-118 fix: add clearance between up-next cards and sticky bottom recovery button */
.dream-player-bottom-recovery-wrapper {
margin-top: 72px !important;
}
}
@media (min-width: 1024px) {
.dream-player-up-next-card {
margin-top: 14px !important;
padding: 12px 16px !important;
}
.dream-player-up-next-art {
width: 42px !important;
height: 42px !important;
}
}
.dream-player-transport-card .dream-player-progress {
max-width: none !important;
}
.dream-player-transport-card .dream-player-progress-bar {
height: 6px !important;
border-radius: 999px !important;
touch-action: none !important;
}
.dream-player-transport-card .dream-player-progress-fill {
border-radius: 999px !important;
}
@media (max-width: 1400px) {
.dream-discover-desktop-shell,
.dream-discover-marquee {
grid-template-columns: 1fr !important;
}
.dream-discover-marquee {
gap: 12px !important;
}
}
@media (min-width: 1400px) {
.dream-discover-route--desktop .dream-discover-creator-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 520px) {
body.dream-app-open .dream-search-hero-copy {
margin-top: 4px !important;
max-width: 30ch !important;
font-size: 11px !important;
line-height: 1.22 !important;
}
body.dream-app-open .dream-search-idle {
gap: 6px !important;
margin-top: 6px !important;
}
body.dream-app-open .dream-search-idle-grid {
grid-template-columns: 1fr !important;
gap: 7px !important;
}
body.dream-app-open .dream-search-module {
gap: 7px !important;
padding: 9px 10px !important;
border-radius: 16px !important;
}
body.dream-app-open .dream-search-module--start {
gap: 6px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
body.dream-app-open .dream-section-head--search-start {
display: grid !important;
grid-template-columns: auto 1fr !important;
align-items: center !important;
gap: 6px !important;
}
body.dream-app-open .dream-section-head--search-start h4 {
margin: 0 !important;
font-size: 11px !important;
}
body.dream-app-open .dream-section-head--search-start .dream-search-inline-note {
justify-self: end !important;
font-size: 9px !important;
line-height: 1.2 !important;
letter-spacing: .05em !important;
}
body.dream-app-open .dream-search-pill-row--scroll {
margin-right: -10px !important;
padding-right: 16px !important;
padding-bottom: 2px !important;
}
body.dream-app-open .dream-search-pill-row--start {
gap: 6px !important;
}
body.dream-app-open[data-dream-route="search"] #minimal-ui .dream-app-content,
body.dream-app-open[data-dream-route="discover"] #minimal-ui .dream-app-content {
padding-bottom: calc(140px + env(safe-area-inset-bottom)) !important;
}
body.dream-app-open .dream-mood-filter-row {
gap: 6px !important;
overflow-x: auto !important;
scrollbar-width: none !important;
}
body.dream-app-open .dream-mood-chip {
padding: 5px 10px !important;
padding-inline: 10px !important;
font-size: 11.5px !important;
overflow: visible !important;
width: auto !important;
min-width: 0 !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
body.dream-app-open .dream-search-feature-grid {
grid-template-columns: 1fr !important;
}
body.dream-app-open .dream-search-scopes {
flex-wrap: nowrap !important;
gap: 5px !important;
margin-bottom: 5px !important;
overflow-x: auto !important;
padding-bottom: 2px !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
body.dream-app-open .dream-search-scopes::-webkit-scrollbar {
display: none !important;
}
body.dream-app-open .dream-search-scope {
flex: 0 0 auto !important;
min-width: 0 !important;
min-height: 44px !important;
gap: 4px !important;
padding: 6px 9px !important;
}
body.dream-app-open .dream-search-scope-label {
font-size: 10px !important;
}
body.dream-app-open .dream-search-scope-count {
font-size: 9px !important;
}
body.dream-app-open .dream-search-results-summary {
gap: 4px !important;
margin: 0 !important;
font-size: 10px !important;
}
body.dream-app-open .dream-search-refinement-secondary {
display: none !important;
}
body.dream-app-open .dream-search-chip--history,
body.dream-app-open .dream-search-chip--trend,
body.dream-app-open .dream-search-chip--mood {
min-height: 44px !important;
padding: 6px 10px !important;
font-size: 10px !important;
}
/* DW-FEAT-030: idle scope bar — compact scope tabs when search is idle */
body.dream-app-open .dream-search-idle-scope-bar {
display: flex !important;
align-items: center !important;
gap: 5px !important;
overflow-x: auto !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
padding-bottom: 2px !important;
padding-right: 36px !important;
margin-bottom: 4px !important;
position: relative !important;
flex-shrink: 0 !important;
}
body.dream-app-open .dream-search-idle-scope-bar::-webkit-scrollbar {
display: none !important;
}
/* DW-FEAT-142: right-edge fade on the idle scope bar — mirrors the
.dream-search-pill-row--scroll::after pattern. The scope row is
overflow-x: auto on phone (520px MQ), and the rightmost chip is
clipped off-screen with no scroll affordance. The fade signals
"more content this way" so users know the row scrolls. */
body.dream-app-open .dream-search-idle-scope-bar::after {
content: '' !important;
position: absolute !important;
right: 0 !important;
top: 0 !important;
bottom: 2px !important;
width: 32px !important;
background: linear-gradient(to right, rgba(120,170,255,0) 0%, rgba(120,170,255,.18) 45%, rgba(160,140,255,.42) 100%) !important;
pointer-events: none !important;
z-index: 1 !important;
}
body.dream-app-open .dream-search-idle-scope-bar .dream-search-scope {
flex: 0 0 auto !important;
min-width: 0 !important;
min-height: 44px !important;
gap: 4px !important;
padding: 6px 14px 6px 10px !important;
}
/* DW-069: Discover lead More pills use .dream-collection-track-actions */
body.dream-app-open .dream-list--discover .dream-collection-track-actions .dream-row-pill,
body.dream-app-open .dream-collection-track-actions .dream-row-pill {
min-height: 40px !important;
padding: 5px 10px !important;
border-radius: 999px !important;
font-size: 9.4px !important;
background: rgba(255,255,255,.032) !important;
border-color: rgba(255,255,255,.05) !important;
color: rgba(255,255,255,.66) !important;
}
body.dream-app-open .dream-search-idle-scope-bar .dream-search-scope-label {
font-size: 10px !important;
}
/* DW-FEAT-047: show scope count badges on idle scope bar */
body.dream-app-open .dream-search-idle-scope-bar .dream-search-scope-count {
display: inline !important;
margin-left: 3px !important;
font-size: 9px !important;
opacity: 0.75 !important;
}
}
@media (display-mode: standalone) {
#minimal-ui {
padding-top: max(16px, env(safe-area-inset-top)) !important;
padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
}
#minimal-ui::before {
top: max(10px, env(safe-area-inset-top)) !important;
padding: 4px 12px !important;
font-size: 11px !important;
letter-spacing: .22em !important;
background: rgba(0,0,0,.28) !important;
}
.minimal-app-btn,
#minimalAppBtn {
left: max(14px, env(safe-area-inset-left)) !important;
top: max(10px, env(safe-area-inset-top)) !important;
}
#minimalModeToggle {
right: max(14px, env(safe-area-inset-right)) !important;
top: max(10px, env(safe-area-inset-top)) !important;
}
#minimalQueueBtn {
right: max(14px, env(safe-area-inset-right)) !important;
bottom: max(14px, env(safe-area-inset-bottom)) !important;
}
.playlist-drawer-toggle {
bottom: max(14px, env(safe-area-inset-bottom)) !important;
}
body.dream-app-open #minimal-ui {
padding-top: max(10px, env(safe-area-inset-top)) !important;
padding-bottom: 0 !important;
gap: 0 !important;
}
body.dream-app-open #minimal-ui::before {
opacity: 0 !important;
transform: translate(-50%, -10px) !important;
}
body.dream-app-open .minimal-app-btn,
body.dream-app-open #minimalAppBtn,
body.dream-app-open #minimalModeToggle {
opacity: 0 !important;
pointer-events: none !important;
}
body.dream-app-open .dream-app-content {
padding-left: max(16px, env(safe-area-inset-left)) !important;
padding-right: max(16px, env(safe-area-inset-right)) !important;
padding-bottom: calc(156px + env(safe-area-inset-bottom)) !important;
}
body.dream-app-open .dream-bottom-tabs {
left: max(10px, env(safe-area-inset-left)) !important;
right: max(10px, env(safe-area-inset-right)) !important;
bottom: max(10px, env(safe-area-inset-bottom)) !important;
min-height: 54px !important;
padding: 7px 10px max(8px, env(safe-area-inset-bottom)) !important;
border: 1px solid rgba(255,255,255,.1) !important;
border-radius: 18px !important;
background: rgba(5,6,12,.94) !important;
box-shadow: 0 -10px 30px rgba(0,0,0,.34) !important;
}
body.dream-app-open .mini-now-playing {
left: max(10px, env(safe-area-inset-left)) !important;
right: max(10px, env(safe-area-inset-right)) !important;
bottom: calc(max(10px, env(safe-area-inset-bottom)) + 62px) !important;
border-radius: 18px !important;
border-top: 1px solid rgba(255,255,255,.08) !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
background: rgba(8,8,15,.92) !important;
box-shadow: 0 -8px 24px rgba(0,0,0,.28) !important;
}
}
/* Creator route phone micro-density (v2 — phone-first, ~384px viewport) */
@media (max-width: 520px) {
body.dream-app-open[data-dream-route="creator"] .dream-hero {
padding: 12px 14px 10px !important;
margin-bottom: 10px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-track-detail-head {
grid-template-columns: 72px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-track-detail-art {
width: 72px !important;
height: 72px !important;
border-radius: 16px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-track-detail-copy h2 {
font-size: clamp(18px, 5vw, 22px) !important;
line-height: 1.05 !important;
margin-bottom: 4px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-track-detail-copy p:not(.dream-kicker) {
font-size: 11.5px !important;
line-height: 1.35 !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-track-detail-copy .dream-creator-bio {
font-size: 11px !important;
line-height: 1.38 !important;
margin-top: 4px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-creator-context-strip {
margin-top: 6px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-detail-pills {
gap: 5px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-row-pill {
min-height: 28px !important;
padding: 5px 8px !important;
font-size: 9.5px !important;
letter-spacing: .04em !important;
}
/* DW-FEAT-063: Creator track rows play button ≥44px touch target */
body.dream-app-open[data-dream-route="creator"] .dream-list--discover .dream-row-play {
min-height: 44px !important;
width: 44px !important;
min-width: 44px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-hero-actions {
margin-top: 10px !important;
gap: 6px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-hero-actions button {
min-height: 34px !important;
padding: 8px 11px !important;
font-size: 10.5px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-metrics {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important;
margin-bottom: 10px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-metric {
min-height: 70px !important;
padding: 9px 7px !important;
border-radius: 14px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-metric strong {
font-size: 17px !important;
margin: 4px 0 2px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-metric span {
font-size: 8.5px !important;
letter-spacing: .1em !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-metric em {
font-size: 9px !important;
line-height: 1.15 !important;
}
/* DW-038: Follow button 44px touch target — specificity must beat .dream-hero-actions button (0,3,2) */
body.dream-app-open[data-dream-route="creator"] .dream-hero-actions .dream-toggle-creator-follow {
min-height: 44px !important;
padding: 6px 14px !important;
font-size: 12px !important;
}
/* DW-FEAT-021: Creator Public Profile Stats — mobile fixes */
@media (max-width: 640px) {
/* Force metrics to fit 3-across on phone without overflow */
body.dream-app-open[data-dream-route="creator"] .dream-metrics {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important;
margin-bottom: 10px !important;
overflow: visible !important;
}
/* Ensure metric cards don't overflow their container */
body.dream-app-open[data-dream-route="creator"] .dream-metric {
min-height: 70px !important;
padding: 9px 5px !important;
border-radius: 14px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-metric strong {
font-size: 16px !important;
word-break: break-word !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-metric em {
font-size: 8px !important;
line-height: 1.2 !important;
}
/* DW-038: Follow button 44px touch target — specificity must beat .dream-hero-actions button (0,3,2) */
body.dream-app-open[data-dream-route="creator"] .dream-hero-actions .dream-toggle-creator-follow {
min-height: 44px !important;
padding: 6px 14px !important;
font-size: 12px !important;
}
}
body.dream-app-open[data-dream-route="creator"] .dream-section {
padding: 12px 14px !important;
margin-bottom: 10px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-section-head {
margin-bottom: 8px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-section-head h3 {
font-size: 15px !important;
margin: 0 0 6px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-section-head .dream-status-chip {
font-size: 8.5px !important;
padding: 3px 7px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-creator-spotlight > .dream-section-head {
margin-bottom: 8px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-creator-pulse-card {
padding: 11px 12px !important;
border-radius: 16px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-creator-pulse-grid {
gap: 5px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-account-stack > div {
border-radius: 16px !important;
margin-bottom: 8px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-activity-card {
padding: 11px 12px !important;
border-radius: 16px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-track-meta-card {
padding: 12px !important;
border-radius: 16px !important;
}
/* Social section row density — activity / connection rows */
body.dream-app-open[data-dream-route="creator"] .dream-activity-list {
gap: 6px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-activity-row {
padding: 9px 11px !important;
gap: 9px !important;
border-radius: 14px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-activity-row-wrap {
gap: 6px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-activity-avatar {
width: 36px !important;
height: 36px !important;
border-radius: 11px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-activity-copy {
gap: 2px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-activity-copy strong {
font-size: 12.5px !important;
line-height: 1.2 !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-activity-copy em {
font-size: 11.5px !important;
line-height: 1.25 !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-activity-action {
padding: 5px 8px !important;
font-size: 10px !important;
border-radius: 999px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-activity-actions {
padding-left: 45px !important;
gap: 5px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-connection-list {
gap: 6px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-connection-row {
padding: 9px 11px !important;
gap: 9px !important;
border-radius: 14px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-connection-copy {
gap: 2px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-connection-copy strong {
font-size: 12.5px !important;
line-height: 1.2 !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-connection-copy em {
font-size: 11.5px !important;
line-height: 1.25 !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-connection-avatar {
width: 36px !important;
height: 36px !important;
border-radius: 11px !important;
}
body.dream-app-open[data-dream-route="creator"] .dream-connection-open,
body.dream-app-open[data-dream-route="creator"] .dream-connection-follow {
padding: 5px 8px !important;
font-size: 10px !important;
}
}
@media (max-width: 759px), (pointer: coarse) {
body.dream-app-open .dream-tab-btn--desktop-only,
body.dream-app-open .dream-rail-mode,
body.dream-app-open .dream-rail-section-label,
body.dream-app-open .dream-rail-now-playing,
body.dream-app-open .dream-rail-queue {
display: none !important;
}
}
/* Wave 5: creator release-notes archive shelf */
/* Creator release-notes archive */
.dream-creator-notes-archive {
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 16px !important;
padding: 18px 16px 20px !important;
background: rgba(255,255,255,.025) !important;
margin-bottom: 24px !important;
box-shadow: 0 2px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.dream-creator-notes-archive .dream-section-head {
margin-bottom: 14px !important;
}
.dream-creator-notes-archive .dream-section-head h3 {
color: rgba(255,255,255,.92) !important;
font-size: 15px !important;
}
.dream-creator-notes-archive .dream-status-chip {
background: rgba(255,113,206,.18) !important;
color: #ff71ce !important;
border: 1px solid rgba(255,113,206,.28) !important;
font-size: 11px !important;
padding: 2px 8px !important;
border-radius: 20px !important;
}
.dream-creator-notes-archive .dream-release-notes-stack {
margin-top: 0;
}
.dream-creator-notes-archive .dream-release-notes-card {
border-color: rgba(255,255,255,.10) !important;
border-radius: 12px !important;
background: rgba(255,255,255,.04) !important;
margin-bottom: 10px !important;
box-shadow: 0 1px 6px rgba(0,0,0,.25) !important;
transition: border-color .15s, background .15s !important;
}
.dream-creator-notes-archive .dream-release-notes-card:last-child {
margin-bottom: 0 !important;
}
.dream-creator-notes-archive .dream-release-notes-card:hover {
border-color: rgba(255,113,206,.28) !important;
background: rgba(255,255,255,.065) !important;
}
.dream-creator-notes-archive .dream-release-notes-card__head {
padding: 12px 14px !important;
}
.dream-creator-notes-archive .dream-release-notes-card__art {
width: 52px !important;
height: 52px !important;
border-radius: 8px !important;
flex-shrink: 0 !important;
}
.dream-creator-notes-archive .dream-release-notes-card__copy h3 {
font-size: 14px !important;
line-height: 1.3 !important;
margin: 2px 0 4px !important;
}
.dream-creator-notes-archive .dream-release-notes-card__copy p {
font-size: 12px !important;
color: rgba(255,255,255,.55) !important;
margin: 0 0 4px !important;
}
.dream-creator-notes-archive .dream-track-meta-card--release-notes {
padding: 10px 14px 12px !important;
}
.dream-creator-notes-archive .dream-release-notes-card__excerpt {
font-size: 12px !important;
color: rgba(255,255,255,.65) !important;
line-height: 1.5 !important;
margin: 0 0 8px !important;
}
.dream-creator-notes-archive .dream-release-notes-card__meta {
margin-top: 8px !important;
padding-top: 8px !important;
border-top: 1px solid rgba(255,255,255,.06) !important;
}
.dream-creator-notes-archive .dream-release-notes-card__actions {
margin-top: 10px !important;
gap: 6px !important;
}
.dream-creator-notes-archive .dream-release-notes-card__actions .dream-primary,
.dream-creator-notes-archive .dream-release-notes-card__actions .dream-secondary {
font-size: 12px !important;
padding: 6px 12px !important;
border-radius: 8px !important;
}
/* Premium empty state for creator notes archive */
.dream-creator-notes-archive-empty {
text-align: center !important;
padding: 28px 16px !important;
border: 1px dashed rgba(255,255,255,.14) !important;
border-radius: 12px !important;
background: rgba(255,255,255,.02) !important;
margin-top: 4px !important;
}
.dream-creator-notes-archive-empty p {
margin: 0 !important;
font-size: 13px !important;
color: rgba(255,255,255,.42) !important;
line-height: 1.55 !important;
}
.dream-creator-notes-archive-empty p strong {
display: block !important;
color: rgba(255,255,255,.76) !important;
font-size: 14px !important;
margin-bottom: 4px !important;
}
.dream-creator-notes-archive-empty .dream-creator-notes-archive-empty-icon {
font-size: 28px !important;
display: block !important;
margin-bottom: 8px !important;
opacity: .35 !important;
}
@media (max-width: 640px) {
body.dream-app-open .dream-creator-notes-archive {
margin-bottom: 12px !important;
padding: 14px 12px 16px !important;
border-radius: 12px !important;
}
}
/* Discover Playlists modal */
.dream-discover-playlists-overlay {
position: fixed !important;
inset: 0 !important;
z-index: 900 !important;
background: rgba(10, 10, 18, 0.75) !important;
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
}
.dream-discover-playlists-overlay[hidden] {
display: none !important;
}
.dream-discover-playlists-sheet {
background: #14141f !important;
border-radius: 20px 20px 0 0 !important;
width: 100% !important;
max-width: 680px !important;
max-height: 82vh !important;
overflow-y: auto !important;
padding: 18px 14px env(safe-area-inset-bottom, 14px) !important;
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55) !important;
}
.dream-discover-playlists-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 14px !important;
}
.dream-discover-playlists-header h3 {
color: rgba(255, 255, 255, 0.92) !important;
font: 700 16px/1.2 'DM Sans', system-ui, sans-serif !important;
margin: 0 !important;
}
.dream-discover-playlists-close {
appearance: none !important;
background: rgba(255, 255, 255, 0.06) !important;
border: none !important;
border-radius: 50% !important;
color: rgba(255, 255, 255, 0.6) !important;
cursor: pointer !important;
font-size: 18px !important;
line-height: 1 !important;
width: 30px !important;
height: 30px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.dream-discover-playlists-close:hover {
background: rgba(255, 255, 255, 0.1) !important;
color: rgba(255, 255, 255, 0.9) !important;
}
.dream-discover-playlists-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
@media (min-width: 520px) {
.dream-discover-playlists-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
.dream-discover-playlist-card {
background: rgba(255, 255, 255, 0.04) !important;
border-radius: 14px !important;
padding: 10px !important;
display: flex !important;
flex-direction: column !important;
gap: 7px !important;
}
.dream-discover-playlist-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
grid-template-rows: 1fr 1fr !important;
gap: 2px !important;
border-radius: 8px !important;
overflow: hidden !important;
aspect-ratio: 1 !important;
position: relative !important;
height: 0 !important;
padding-bottom: 100% !important;
}
.dream-discover-playlist-grid .dream-discover-playlist-cover {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.dream-discover-playlist-meta {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
min-width: 0 !important;
}
.dream-discover-playlist-name {
color: rgba(255, 255, 255, 0.9) !important;
font: 700 12px/1.2 'DM Sans', system-ui, sans-serif !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-discover-playlist-creator {
color: rgba(255, 255, 255, 0.45) !important;
font: 620 10px/1.2 'DM Sans', system-ui, sans-serif !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-discover-playlist-count {
color: rgba(255, 255, 255, 0.35) !important;
font: 600 9.5px/1.2 'DM Sans', system-ui, sans-serif !important;
}
.dream-discover-playlist-follow {
appearance: none !important;
background: rgba(30, 215, 96, 0.15) !important;
border: 1px solid rgba(30, 215, 96, 0.3) !important;
border-radius: 20px !important;
color: #1ed760 !important;
cursor: pointer !important;
font: 680 10px/1 'DM Sans', system-ui, sans-serif !important;
letter-spacing: 0.02em !important;
padding: 5px 12px !important;
text-align: center !important;
width: 100% !important;
transition: background 0.15s, border-color 0.15s !important;
}
.dream-discover-playlist-follow:hover {
background: rgba(30, 215, 96, 0.25) !important;
}
.dream-discover-playlist-follow.followed {
background: rgba(30, 215, 96, 0.22) !important;
border-color: rgba(30, 215, 96, 0.5) !important;
color: #1ed760 !important;
}
/* ===== PWA SHELL: Safe-area handling ===== */
body {
padding-top: env(safe-area-inset-top) !important;
padding-left: env(safe-area-inset-left) !important;
padding-right: env(safe-area-inset-right) !important;
}
/* Bottom nav: always account for safe-area */
body.dream-app-open .dream-bottom-tabs {
bottom: calc(0px + env(safe-area-inset-bottom)) !important;
}
/* Mini-player: account for bottom safe-area on player route */
body.dream-app-open[data-dream-route="player"] .mini-now-playing {
bottom: calc(56px + env(safe-area-inset-bottom)) !important;
}
/* Content: compensate for safe-area-inset-bottom above bottom nav */
body.dream-app-open .dream-app-content {
padding-bottom: calc(160px + env(safe-area-inset-bottom)) !important;
}
/* ===== PWA SHELL: Standalone mode — hide browser chrome compensation ===== */
@media (display-mode: standalone) {
body {
overflow: hidden !important;
}
#minimal-ui,
body.dream-app-open #minimal-ui {
padding-top: 0 !important;
}
body.dream-app-open .dream-app-content {
padding-top: env(safe-area-inset-top) !important;
}
}
/* ===== PWA SHELL: Install prompt banner ===== */
#dreamwave-install-banner {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
background: rgba(8, 10, 18, 0.97);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 13px;
color: rgba(255, 255, 255, 0.9);
align-items: center;
justify-content: space-between;
gap: 12px;
}
#dreamwave-install-banner.visible {
display: flex;
}
#dreamwave-install-banner .banner-text {
flex: 1;
line-height: 1.4;
}
#dreamwave-install-banner .banner-text strong {
color: #fff;
font-weight: 600;
}
#dreamwave-install-banner .banner-close {
appearance: none;
-webkit-appearance: none;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50%;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
font-size: 16px;
line-height: 1;
width: 28px;
height: 28px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
}
#dreamwave-install-banner .banner-close:hover {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
#dreamwave-install-btn {
appearance: none;
-webkit-appearance: none;
background: #1ed760;
border: none;
border-radius: 16px;
color: #000;
cursor: pointer;
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 12px;
font-weight: 700;
padding: 6px 14px;
white-space: nowrap;
transition: background 0.15s;
}
#dreamwave-install-btn:hover {
background: #1fdf67;
}
@media (display-mode: browser) {
}
@media (min-width: 521px) {
#dreamwave-install-banner {
display: none !important;
}
}
@media (display-mode: standalone) {
#dreamwave-install-banner {
display: none !important;
}
}
/* ================================================================
AUDIO SETTINGS — EQ, Crossfade, Normalization
================================================================ */
/* Mini-player gear button */
.mini-np-gear {
flex-shrink: 0 !important;
background: none !important;
border: none !important;
color: rgba(255,255,255,0.55) !important;
font-size: 18px !important;
line-height: 1 !important;
cursor: pointer !important;
padding: 6px 8px !important;
border-radius: 8px !important;
transition: color 0.15s, background 0.15s !important;
min-width: 36px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
}
.mini-np-gear:hover {
color: rgba(255,255,255,0.92) !important;
background: rgba(255,255,255,0.08) !important;
}
/* Mini-player gear button */
.mini-np-gear {
background: none !important;
border: none !important;
color: rgba(255,255,255,0.5) !important;
font-size: 18px !important;
cursor: pointer !important;
padding: 4px 8px !important;
border-radius: 6px !important;
line-height: 1 !important;
transition: color 0.15s, background 0.15s !important;
flex-shrink: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 36px !important;
min-height: 44px !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
margin-left: auto !important;
}
.mini-np-gear:hover {
color: rgba(255,255,255,0.92) !important;
background: rgba(255,255,255,0.08) !important;
}
/* EQ bar animation pauses when not playing */
body.dream-eq-paused .dream-audio-eq-bar,
.dream-eq-paused .dream-audio-eq-bar {
animation-play-state: paused !important;
}
/* Setting row in audio section */
.dream-setting-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
margin-top: 14px !important;
}
.dream-setting-info p {
font-size: 14px !important;
font-weight: 600 !important;
color: rgba(255,255,255,0.88) !important;
margin: 0 !important;
}
.dream-setting-info .dream-audio-hint {
margin-top: 2px !important;
}
/* Audio settings overlay sheet */
.dream-audio-settings-sheet {
position: fixed !important;
inset: 0 !important;
z-index: 900 !important;
background: rgba(5,5,10,0.96) !important;
display: flex !important;
flex-direction: column !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
}
.dream-audio-settings-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 16px 18px 12px !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
position: sticky !important;
top: 0 !important;
background: rgba(5,5,10,0.98) !important;
z-index: 1 !important;
}
.dream-audio-settings-header span {
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
color: rgba(255,255,255,0.9) !important;
}
.dream-audio-settings-close {
background: rgba(255,255,255,0.06) !important;
border: none !important;
border-radius: 50% !important;
width: 32px !important;
height: 32px !important;
color: rgba(255,255,255,0.7) !important;
font-size: 14px !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 0.15s !important;
}
.dream-audio-settings-close:hover {
background: rgba(255,255,255,0.14) !important;
}
/* Audio settings inner panel */
.dream-audio-settings {
padding: 16px 18px 32px !important;
}
/* Audio section blocks */
.dream-audio-section {
background: rgba(12,12,20,0.7) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 16px !important;
padding: 16px !important;
margin-bottom: 14px !important;
}
.dream-audio-section .dream-section-head {
margin-bottom: 12px !important;
}
.dream-audio-section .dream-section-head h3 {
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
color: rgba(255,255,255,0.7) !important;
text-transform: uppercase !important;
margin: 0 !important;
}
/* EQ preset pill buttons */
.dream-eq-preset-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 7px !important;
margin-bottom: 14px !important;
}
.dream-eq-preset-btn {
background: rgba(255,255,255,0.07) !important;
border: 1px solid rgba(255,255,255,0.14) !important;
border-radius: 24px !important;
color: rgba(255,255,255,0.72) !important;
font-size: 12px !important;
font-weight: 600 !important;
padding: 7px 14px !important;
cursor: pointer !important;
transition: background 0.15s, color 0.15s, border-color 0.15s !important;
white-space: nowrap !important;
min-height: 44px !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
}
.dream-eq-preset-btn:hover {
background: rgba(255,255,255,0.12) !important;
color: rgba(255,255,255,0.92) !important;
}
.dream-eq-preset-btn.active {
background: rgba(255,113,206,0.22) !important;
border-color: rgba(255,113,206,0.55) !important;
color: #ff71ce !important;
}
/* Visual EQ bars */
.dream-eq-visual-wrap {
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
height: 72px !important;
background: rgba(0,0,0,0.3) !important;
border-radius: 10px !important;
padding: 8px 12px !important;
gap: 5px !important;
}
.dream-audio-eq-shell {
display: flex !important;
align-items: flex-end !important;
gap: 5px !important;
height: 56px !important;
width: 100% !important;
max-width: 220px !important;
}
.dream-audio-eq-bar {
flex: 1 !important;
height: var(--eq-height, 30%) !important;
min-height: 4px !important;
border-radius: 3px 3px 0 0 !important;
background: linear-gradient(to top, #ff71ce 0%, #9be7ff 100%) !important;
animation: dream-eq-bounce 1.4s ease-in-out infinite !important;
animation-delay: calc(var(--eq-bars-index, 0) * 0.12s) !important;
transition: height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.dream-audio-eq-bar:nth-child(1) { --eq-bars-index: 0; }
.dream-audio-eq-bar:nth-child(2) { --eq-bars-index: 1; }
.dream-audio-eq-bar:nth-child(3) { --eq-bars-index: 2; }
.dream-audio-eq-bar:nth-child(4) { --eq-bars-index: 3; }
.dream-audio-eq-bar:nth-child(5) { --eq-bars-index: 4; }
.dream-audio-eq-bar:nth-child(6) { --eq-bars-index: 5; }
.dream-audio-eq-bar:nth-child(7) { --eq-bars-index: 6; }
@keyframes dream-eq-bounce {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(0.7); }
}
/* Toggle switch */
.dream-audio-toggle-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
}
.dream-audio-toggle-label {
font-size: 14px !important;
font-weight: 600 !important;
color: rgba(255,255,255,0.88) !important;
}
.dream-audio-hint {
font-size: 11.5px !important;
color: rgba(255,255,255,0.42) !important;
margin: 4px 0 0 !important;
line-height: 1.4 !important;
}
.dream-toggle-switch {
position: relative !important;
width: 46px !important;
height: 26px !important;
border-radius: 13px !important;
background: rgba(255,255,255,0.14) !important;
border: 1px solid rgba(255,255,255,0.2) !important;
cursor: pointer !important;
transition: background 0.2s !important;
flex-shrink: 0 !important;
min-width: 44px !important;
min-height: 44px !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
}
.dream-toggle-switch.on {
background: rgba(30,215,96,0.7) !important;
border-color: rgba(30,215,96,0.8) !important;
}
.dream-toggle-thumb {
position: absolute !important;
top: 3px !important;
left: 3px !important;
width: 18px !important;
height: 18px !important;
border-radius: 50% !important;
background: #fff !important;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
display: block !important;
}
.dream-toggle-switch.on .dream-toggle-thumb {
transform: translateX(20px) !important;
}
/* Crossfade slider */
.dream-crossfade-row {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-top: 10px !important;
transition: opacity 0.2s !important;
}
.dream-crossfade-row.disabled {
opacity: 0.38 !important;
pointer-events: none !important;
}
.dream-crossfade-slider {
flex: 1 !important;
-webkit-appearance: none !important;
appearance: none !important;
height: 4px !important;
border-radius: 2px !important;
background: rgba(255,255,255,0.18) !important;
outline: none !important;
cursor: pointer !important;
}
.dream-crossfade-slider::-webkit-slider-thumb {
-webkit-appearance: none !important;
appearance: none !important;
width: 18px !important;
height: 18px !important;
border-radius: 50% !important;
background: #ff71ce !important;
cursor: pointer !important;
box-shadow: 0 0 6px rgba(255,113,206,0.5) !important;
transition: transform 0.15s !important;
}
.dream-crossfade-slider::-webkit-slider-thumb:hover {
transform: scale(1.2) !important;
}
.dream-crossfade-slider::-moz-range-thumb {
width: 18px !important;
height: 18px !important;
border-radius: 50% !important;
background: #ff71ce !important;
border: none !important;
cursor: pointer !important;
}
.dream-crossfade-val {
font-size: 13px !important;
font-weight: 700 !important;
color: rgba(255,255,255,0.72) !important;
min-width: 26px !important;
text-align: right !important;
}
.dream-crossfade-row datalist {
display: none !important;
}
/* ─── Artist detail page ───────────────────────────────────────────────────── */
.dream-artist-header {
padding: 20px 16px 16px;
text-align: center;
}
.dream-artist-back-row {
text-align: left;
margin-bottom: 14px;
}
.dream-back-button {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.72);
border-radius: 24px;
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s;
}
.dream-back-button:hover {
background: rgba(255,255,255,.14);
color: #fff;
}
.dream-artist-avatar {
width: 140px;
height: 140px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 4px 24px rgba(0,0,0,.5);
margin: 0 auto 14px;
display: block;
}
.dream-artist-meta {
text-align: center;
}
.dream-artist-meta .dream-kicker {
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--dw-pink, #ff71ce);
margin: 0 0 4px;
}
.dream-artist-name {
font-size: 26px;
font-weight: 800;
margin: 0 0 4px;
letter-spacing: -.01em;
line-height: 1.15;
}
.dream-artist-handle {
font-size: 14px;
color: rgba(255,255,255,.5);
margin: 0 0 12px;
}
.dream-artist-stats-row {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
font-size: 13px;
color: rgba(255,255,255,.62);
margin-bottom: 16px;
}
.dream-artist-stat-sep {
opacity: .4;
}
.dream-artist-actions {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 16px;
}
.dream-artist-actions .dream-primary {
background: var(--dw-green, #1ed760);
color: #000;
font-weight: 700;
border-radius: 24px;
padding: 10px 22px;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 14px;
transition: opacity 0.15s;
}
.dream-artist-actions .dream-primary:hover {
opacity: .88;
}
.dream-artist-actions .dream-secondary {
background: rgba(255,255,255,.1);
color: rgba(255,255,255,.82);
font-weight: 600;
border-radius: 24px;
padding: 10px 18px;
border: 1px solid rgba(255,255,255,.18);
cursor: pointer;
font-size: 14px;
transition: background 0.15s;
}
.dream-artist-actions .dream-secondary:hover {
background: rgba(255,255,255,.16);
}
.dream-artist-bio {
font-size: 14px;
color: rgba(255,255,255,.58);
line-height: 1.55;
max-width: 380px;
margin: 0 auto;
}
/* ─── Album release card (on artist page) ─────────────────────────────────── */
.dream-album-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
.dream-album-release-card {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.09);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: background 0.15s, transform 0.15s;
}
.dream-album-release-card:hover {
background: rgba(255,255,255,.1);
transform: translateY(-2px);
}
.dream-album-release-art {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
display: block;
}
.dream-album-release-info {
padding: 8px 10px 10px;
}
.dream-album-release-name {
display: block;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,.88);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 3px;
}
.dream-album-release-meta {
display: block;
font-size: 11px;
color: rgba(255,255,255,.48);
}
/* ─── Album detail page ────────────────────────────────────────────────────── */
.dream-album-header {
padding: 20px 16px 16px;
text-align: center;
}
.dream-album-back-row {
text-align: left;
margin-bottom: 14px;
}
.dream-album-cover {
width: 180px;
height: 180px;
border-radius: 10px;
object-fit: cover;
box-shadow: 0 6px 32px rgba(0,0,0,.55);
margin: 0 auto 16px;
display: block;
}
.dream-album-meta {
text-align: center;
}
.dream-album-meta .dream-kicker {
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--dw-cyan, #9be7ff);
margin: 0 0 4px;
}
.dream-album-name {
font-size: 24px;
font-weight: 800;
margin: 0 0 8px;
letter-spacing: -.01em;
line-height: 1.15;
}
.dream-album-artist-line {
font-size: 14px;
color: rgba(255,255,255,.62);
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 4px;
margin: 0 0 16px;
}
.dream-album-artist-link {
color: rgba(255,255,255,.82);
font-weight: 600;
cursor: pointer;
}
.dream-album-artist-link:hover {
color: #fff;
}
.dream-album-meta-sep {
color: rgba(255,255,255,.3);
}
.dream-album-actions {
display: flex;
justify-content: center;
margin-bottom: 4px;
}
.dream-album-actions .dream-primary {
background: var(--dw-green, #1ed760);
color: #000;
font-weight: 700;
border-radius: 24px;
padding: 10px 22px;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 14px;
transition: opacity 0.15s;
}
.dream-album-actions .dream-primary:hover {
opacity: .88;
}
.dream-album-actions .dream-secondary {
background: rgba(255,255,255,.1);
color: rgba(255,255,255,.82);
font-weight: 600;
border-radius: 24px;
padding: 10px 18px;
border: 1px solid rgba(255,255,255,.18);
cursor: pointer;
font-size: 14px;
transition: background 0.15s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.dream-album-actions .dream-secondary:hover {
background: rgba(255,255,255,.16);
}
/* ─── Shared track rows on artist/album pages ──────────────────────────────── */
.dream-track-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0 10px !important;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.dream-track-row:last-child {
border-bottom: none;
}
.dream-track-row-num {
min-width: 22px;
font-size: 13px;
color: rgba(255,255,255,.32);
text-align: right;
flex-shrink: 0;
}
.dream-track-row-play {
background: none;
border: none;
color: rgba(255,255,255,.62);
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
transition: color 0.15s, background 0.15s;
}
.dream-track-row-play:hover {
color: var(--dw-green, #1ed760);
background: rgba(30,215,96,.12);
}
.dream-track-row-body {
flex: 1;
min-width: 0;
}
.dream-track-row-name {
display: block;
font-size: 14px;
font-weight: 500;
color: rgba(255,255,255,.88);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 2px;
}
.dream-track-row-sub {
display: block;
font-size: 12px;
color: rgba(255,255,255,.42);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dream-track-row-more {
background: none;
border: none;
color: rgba(255,255,255,.38);
cursor: pointer;
padding: 4px 6px;
display: flex;
align-items: center;
flex-shrink: 0;
border-radius: 4px;
transition: color 0.15s;
}
.dream-track-row-more:hover {
color: rgba(255,255,255,.78);
}
/* Touch targets for heart/like and more icons — 44px minimum */
.dream-track-row-play,
.dream-track-row-more {
min-width: 44px !important;
min-height: 44px !important;
padding: 8px 6px !important;
}
/* ─── Artist/Album — desktop ───────────────────────────────────────────────── */
@media (min-width: 700px) {
.dream-artist-header,
.dream-album-header {
padding: 32px 40px 24px;
text-align: left;
}
.dream-artist-back-row,
.dream-album-back-row {
margin-bottom: 20px;
}
.dream-artist-avatar {
width: 180px;
height: 180px;
margin: 0 0 20px;
float: left;
margin-right: 28px;
}
.dream-artist-meta,
.dream-album-meta {
text-align: left;
}
.dream-artist-stats-row,
.dream-artist-actions,
.dream-album-actions {
justify-content: flex-start;
}
.dream-album-cover {
width: 220px;
height: 220px;
float: left;
margin-right: 28px;
margin-bottom: 16px;
}
.dream-album-meta {
text-align: left;
}
.dream-album-artist-line {
justify-content: flex-start;
}
.dream-artist-bio {
margin: 12px 0 0;
max-width: none;
}
.dream-album-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
}
/* Artist/Album route — mobile ≤420px — touch targets + clean stacking */
@media (max-width: 420px) {
/* Back button ≥44px touch target */
.dream-back-button {
min-height: 44px !important;
min-width: 44px !important;
padding: 10px 14px !important;
font-size: 13px !important;
}
/* Artist hero stacks cleanly, handle ellipsis */
.dream-artist-header {
padding: 14px 14px 12px !important;
}
.dream-artist-avatar {
width: 100px !important;
height: 100px !important;
margin: 0 auto 12px !important;
float: none !important;
}
.dream-artist-name {
font-size: 22px !important;
}
.dream-artist-handle {
font-size: 13px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
.dream-artist-bio {
font-size: 12px !important;
line-height: 1.5 !important;
margin-top: 8px !important;
}
.dream-artist-stats-row {
font-size: 12px !important;
gap: 6px !important;
}
/* Artist action buttons ≥44px touch targets — 2-column grid on very narrow */
.dream-artist-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
margin-bottom: 14px !important;
}
.dream-artist-actions .dream-primary,
.dream-artist-actions .dream-secondary {
min-height: 44px !important;
padding: 10px 12px !important;
font-size: 13px !important;
justify-content: center !important;
}
/* Album cover/metadata stacks cleanly at ≤420px */
.dream-album-header {
padding: 14px 14px 12px !important;
}
.dream-album-cover {
width: 140px !important;
height: 140px !important;
margin: 0 auto 14px !important;
float: none !important;
border-radius: 12px !important;
}
.dream-album-name {
font-size: 22px !important;
line-height: 1.2 !important;
}
.dream-album-artist-line {
font-size: 12px !important;
flex-wrap: wrap !important;
gap: 4px !important;
}
.dream-album-meta {
text-align: center !important;
}
/* Album action buttons ≥44px touch targets — 2-column grid */
.dream-album-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
margin-top: 14px !important;
}
.dream-album-actions .dream-primary,
.dream-album-actions .dream-secondary {
min-height: 44px !important;
padding: 10px 12px !important;
font-size: 13px !important;
justify-content: center !important;
}
/* Album grid — 2 columns on narrow phone */
.dream-album-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.dream-album-release-card {
min-height: 0 !important;
}
/* Long-surface recovery: album tracklist scrollable + bottom back affordance */
.dream-album-tracklist {
padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important;
}
/* Artist releases + popular — compact spacing on phone */
.dream-artist-releases,
.dream-artist-popular {
padding-left: 10px !important;
padding-right: 10px !important;
}
/* Overflow guard — no horizontal bleed on either route */
.dream-artist-header,
.dream-album-header,
.dream-artist-releases,
.dream-album-tracklist,
.dream-album-from-artist {
overflow-x: hidden !important;
max-width: 100vw !important;
}
}
/* Artist/Album route — hide mini-player while on detail pages */
body[data-dream-route="artist"] .mini-now-playing,
body[data-dream-route="album"] .mini-now-playing {
display: none !important;
}
/* ── Queue panel bottom sheet ───────────────────────────── */
#dreamQueuePanel {
position: fixed; bottom: 0; left: 0; right: 0;
z-index: 1001;
background: rgba(10,12,20,0.92);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border-radius: 20px 20px 0 0;
max-height: 70vh; overflow-y: auto;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
box-shadow: 0 -4px 24px rgba(0,0,0,0.35);
display: flex; flex-direction: column;
}
#dreamQueuePanel.open { transform: translateY(0); }
.dream-qp-handle { width: 36px; height: 5px; background: rgba(255,255,255,0.2); border-radius: 3px; margin: 10px auto 6px; flex-shrink: 0; }
.dream-qp-header { display: flex; align-items: center; gap: 10px; padding: 8px 16px 12px; flex-shrink: 0; }
.dream-qp-title { font-size: 15px; font-weight: 700; color: #fff; flex: 1; }
.dream-qp-count { font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.45); margin-left: 8px; }
.dream-qp-clear { font-size: 12px; color: var(--dw-pink, #ff71ce); background: none; border: none; cursor: pointer; padding: 4px 8px; }
.dream-qp-close { font-size: 16px; color: rgba(255,255,255,0.4); background: none; border: none; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.dream-qp-now-playing { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(255,255,255,0.04); }
.dream-qp-now-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; background: var(--dw-green, #1ed760); color: #000; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.5px; }
.dream-qp-now-cover { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.dream-qp-now-name { font-size: 13px; font-weight: 600; color: #fff; }
.dream-qp-now-artist { font-size: 11px; color: rgba(255,255,255,0.5); }
.dream-qp-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 0 16px; }
.dream-qp-list { flex: 1; overflow-y: auto; padding: 8px 0 16px; }
.dream-qp-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; transition: background 0.15s; }
.dream-qp-row:active { background: rgba(255,255,255,0.04); }
.dream-qp-row-cover { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.dream-qp-row-info { flex: 1; min-width: 0; }
.dream-qp-row-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dream-qp-row-artist { font-size: 11px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dream-qp-row-play { width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,0.08); color: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; }
.dream-qp-row-play:active { background: var(--dw-green, #1ed760); color: #000; }
.dream-qp-row-drag { color: rgba(255,255,255,0.2); cursor: grab; font-size: 14px; width: 20px; flex-shrink: 0; text-align: center; user-select: none; }
.dream-qp-row-drag:active { cursor: grabbing; }
.dream-qp-row-play-next { height: 28px; border-radius: 14px; border: none; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.5); font-size: 10px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0 8px; letter-spacing: 0.3px; transition: background 0.15s, color 0.15s; }
.dream-qp-row-play-next:active { background: var(--dw-pink, #ff71ce); color: #fff; }
.dream-qp-row-play-next--active { background: rgba(255,113,206,0.15); color: var(--dw-pink, #ff71ce); }
.dream-qp-row-play-next--active:active { background: var(--dw-pink, #ff71ce); color: #fff; }
.dream-qp-row--drag-over { background: rgba(255,113,206,0.1) !important; border-top: 2px solid var(--dw-pink, #ff71ce); }
.dream-qp-row--dragging { opacity: 0.4; }
.dream-qp-row-remove { width: 32px; height: 32px; border: none; background: none; color: rgba(255,255,255,0.25); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dream-qp-row-remove:active { color: var(--dw-pink, #ff71ce); }
.dream-qp-empty { text-align: center; padding: 40px 20px; font-size: 13px; color: rgba(255,255,255,0.35); line-height: 1.6; }
.mini-np-queue { position: relative; width: 32px; height: 32px; background: none; border: none; color: rgba(255,255,255,0.5); font-size: 16px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-right: 6px; padding: 0; }
.mini-np-queue.has-queue { color: rgba(255,255,255,0.8); }
.mini-np-queue-badge { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--dw-pink, #ff71ce); color: #fff; font-size: 9px; font-weight: 700; line-height: 16px; text-align: center; padding: 0 4px; display: none; }
body.queue-open #dreamQueuePanel { pointer-events: all; }
body.queue-open .dream-bottom-tabs { z-index: 998 !important; }
body.queue-open #miniNowPlaying { z-index: 998 !important; }
/* ── Minimalist Player Mode (background video + player only) ──────────────── */
body.dream-player-minimal-mode .dream-bottom-tabs,
body.dream-player-minimal-mode #miniNowPlaying,
body.dream-player-minimal-mode #dreamAppContent > *:not(#dreamMinimalCinematic) {
display: none !important;
}
body.dream-player-minimal-mode #minimal-ui::before { opacity: 0 !important; }
body.dream-player-minimal-mode #dreamAppContent {
padding: 0 !important;
overflow: hidden !important;
}
.dream-minimal-cinematic {
position: fixed; inset: 0; z-index: 10;
display: flex; align-items: center; justify-content: center;
}
.dream-minimal-cinematic-close {
position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px;
z-index: 20; width: 36px; height: 36px; border-radius: 50%;
border: none; background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.55);
font-size: 16px; cursor: pointer; backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center;
}
.dream-minimal-now-playing {
position: relative; z-index: 11;
display: flex; flex-direction: column; align-items: center; gap: 12px;
padding: 32px 28px 28px; border-radius: 28px;
background: transparent !important; backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none;
max-width: 380px; width: calc(100vw - 40px);
}
.dream-minimal-cover-wrap { width: 220px; height: 220px; border-radius: 16px; overflow: hidden;
box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 2px 12px rgba(255,113,206,0.12); }
.dream-minimal-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.dream-minimal-info { text-align: center; }
.dream-minimal-track-name { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.2; }
.dream-minimal-track-artist { font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 4px; }
.dream-minimal-track-album { font-size: 12px; color: rgba(255,255,255,0.35); margin-top: 2px; }
.dream-minimal-mood-pill {
display: inline-block; padding: 3px 12px; border-radius: 10px;
background: rgba(255,113,206,0.18); color: var(--dw-pink, #ff71ce);
font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
}
.dream-minimal-progress {
width: 100%; height: 44px; background: transparent;
border-radius: 2px; overflow: visible;
display: flex; align-items: center;
/* Expanded tap zone: visual bar is 4px, but full 44px is clickable */
}
.dream-minimal-progress::before {
content: ''; position: absolute;
left: 0; right: 0;
height: 44px;
/* Expand hit area vertically, centered on the visual bar */
margin-top: -20px;
margin-bottom: -20px;
z-index: 1;
}
/* Visual bar (actual track progress background) */
.dream-minimal-progress {
position: relative;
background: rgba(255,255,255,0.08);
height: 4px;
border-radius: 2px;
}
.dream-minimal-progress-fill { height: 100%; width: 0%; background: var(--dw-green, #01f5a6); border-radius: 2px; transition: width 0.3s linear; position: relative; z-index: 2; }
/* Seek tooltip */
.dream-minimal-seek-tooltip {
display: none; position: absolute;
bottom: 52px; left: 50%; transform: translateX(-50%);
background: rgba(0,0,0,0.85); color: #fff;
font-size: 10px; font-family: 'VT323', monospace;
padding: 3px 6px; border-radius: 4px;
white-space: nowrap; pointer-events: none;
border: 1px solid rgba(255,255,255,0.15);
z-index: 100;
}
.dream-minimal-progress:hover .dream-minimal-seek-tooltip,
.dream-minimal-progress:active .dream-minimal-seek-tooltip { display: block; }
.dream-minimal-time {
width: 100%; display: flex; justify-content: space-between;
font-size: 10px; color: rgba(255,255,255,0.3); font-variant-numeric: tabular-nums;
}
.dream-minimal-controls { display: flex; align-items: center; gap: 28px; }
.dream-minimal-ctrl {
width: 40px; height: 40px; border-radius: 50%; border: none;
background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
font-size: 18px; cursor: pointer; display: flex; align-items: center;
justify-content: center; transition: background 0.15s, color 0.15s;
}
.dream-minimal-ctrl:active { background: rgba(255,255,255,0.14); color: #fff; }
.dream-minimal-ctrl--play {
width: 56px; height: 56px; background: var(--dw-green, #1ed760); color: #000;
font-size: 22px; box-shadow: 0 4px 20px rgba(30,215,96,0.35);
}
.dream-minimal-ctrl--play:active { background: #1bc052; }
.dream-minimal-actions { display: flex; align-items: center; gap: 16px; }
.dream-minimal-action {
background: none; border: none; color: rgba(255,255,255,0.3);
font-size: 15px; cursor: pointer; padding: 4px 8px; transition: color 0.15s;
}
.dream-minimal-action:active { color: rgba(255,255,255,0.7); }
.dream-minimal-footer { margin-top: 8px; }
.dream-minimal-back-link {
background: none; border: none; color: rgba(255,255,255,0.25);
font-size: 12px; cursor: pointer; transition: color 0.15s;
}
.dream-minimal-back-link:active { color: var(--dw-pink, #ff71ce); }
/* ── Playlist detail page ─────────────────────────────── */
/* DW-FEAT-075 FIX: .dream-playlist-detail is the scroll container for the playlist surface.
overflow-y:auto + height:100% establish a scroll context so
.dream-playlist-detail-recovery can use position:sticky to stay visible
at the bottom of the viewport when scrolling deep into a long playlist. */
.dream-playlist-detail {
padding: 16px;
overflow-x: visible !important;
overflow-y: auto !important;
height: 100% !important;
max-height: 100% !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
}
.dream-playlist-detail::-webkit-scrollbar { display: none !important; }
.dream-playlist-detail-header-inner { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; padding-left: max(0px, env(safe-area-inset-left)); box-sizing: border-box; }
.dream-playlist-detail-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
width: 140px; height: 140px; border-radius: 12px; overflow: hidden; flex-shrink: 0;
}
.dream-playlist-detail-mosaic { width: 100%; height: 100%; object-fit: cover; display: block; }
.dream-playlist-detail-title-area { flex: 1; min-width: 0; }
.dream-playlist-detail-title {
font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 4px; outline: none;
border-bottom: 1px dashed transparent; transition: border-color 0.15s;
}
.dream-playlist-detail-title:hover { border-bottom-color: rgba(255,255,255,0.12); }
.dream-playlist-detail-count { font-size: 12px; color: rgba(255,255,255,0.4); margin: 0; }
.dream-playlist-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dream-playlist-detail-actions .dream-primary { padding: 8px 16px; }
.dream-playlist-detail-actions .dream-secondary { padding: 8px 12px; }
.dream-playlist-detail-actions .dream-danger {
padding: 8px 12px; background: rgba(255,50,50,0.12); color: rgba(255,80,80,0.8);
border: 1px solid rgba(255,50,50,0.2); border-radius: 8px; cursor: pointer; font-size: 12px;
}
.dream-playlist-detail-list { display: flex; flex-direction: column; gap: 2px; }
.dream-playlist-detail-row {
display: grid; grid-template-columns: 40px 1fr 36px 32px 28px 28px; gap: 8px;
align-items: center; padding: 6px 4px; border-radius: 8px; transition: background 0.15s;
}
.dream-playlist-detail-row:hover { background: rgba(255,255,255,0.03); }
.dream-playlist-detail-cover { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.dream-playlist-detail-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dream-playlist-detail-artist { font-size: 11px; color: rgba(255,255,255,0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dream-playlist-detail-play {
width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,0.06);
color: #fff; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dream-playlist-detail-play:hover { background: var(--dw-green,#1ed760); color: #000; }
.dream-playlist-detail-remove {
width: 28px; height: 28px; border: none; background: none; color: rgba(255,255,255,0.2);
font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dream-playlist-detail-remove:hover { color: rgba(255,80,80,0.7); }
.dream-playlist-detail-move-up, .dream-playlist-detail-move-down {
width: 24px; height: 24px; border: none; background: none; color: rgba(255,255,255,0.15);
font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dream-playlist-detail-move-up:hover, .dream-playlist-detail-move-down:hover { color: rgba(255,255,255,0.4); }
.dream-playlist-detail-spacer { width: 24px; height: 24px; }
/* ── Mobile playlist detail reorder buttons (≥44px touch targets) ── */
@media (max-width: 640px) {
.dream-playlist-detail-row {
grid-template-columns: 44px minmax(0,1fr) 44px 44px 44px;
gap: 6px;
padding: 8px 4px;
}
.dream-playlist-detail-cover { width: 44px; height: 44px; flex-shrink: 0; }
.dream-playlist-detail-play { width: 44px; height: 44px; font-size: 14px; }
.dream-playlist-detail-remove { width: 44px; height: 44px; font-size: 14px; }
.dream-playlist-detail-move-up,
.dream-playlist-detail-move-down {
width: 44px; height: 44px; font-size: 16px;
background: rgba(255,255,255,0.06);
border-radius: 8px;
color: rgba(255,255,255,0.5);
}
.dream-playlist-detail-move-up:hover,
.dream-playlist-detail-move-down:hover { background: rgba(255,255,255,0.12); color: #fff; }
.dream-playlist-detail-spacer { width: 44px; height: 44px; }
}
/* ── Visibility badge in playlist detail ── */
.dream-visibility-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; min-height: 24px !important; }
.dream-visibility-badge--public { background: rgba(30,215,96,0.18); color: #1ed760; border: 1px solid rgba(30,215,96,0.3); }
.dream-visibility-badge--private { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.12); }
.dream-visibility-badge--unlisted { background: rgba(255,200,50,0.15); color: rgba(255,200,50,0.85); border: 1px solid rgba(255,200,50,0.25); }
.dream-visibility-badge--shared_private { background: rgba(138,100,255,0.18); color: rgba(200,180,255,0.95); border: 1px solid rgba(138,100,255,0.3); }
.dream-visibility-badge--draft { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.08); }
/* DW-FEAT-076: Mobile visibility badge touch targets — ≥44px height on phone */
@media (max-width: 520px) {
.dream-visibility-badge {
min-height: 28px !important;
padding: 4px 8px !important;
font-size: 9.5px !important;
}
}
@media (max-width: 420px) {
.dream-visibility-badge {
min-height: 30px !important;
padding: 5px 9px !important;
font-size: 9.5px !important;
}
/* Ensure badge doesn't get crushed by flex parent */
.dream-row-actions .dream-visibility-badge,
.dream-collection-track-actions .dream-visibility-badge {
align-self: center !important;
flex-shrink: 0 !important;
}
}
.dream-playlist-detail-description { font-size: 12px; color: rgba(255,255,255,0.38); margin: 4px 0; line-height: 1.4; }
.dream-playlist-detail-duration { font-size: 11px; color: rgba(255,255,255,0.3); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; min-width: 32px; }
/* ── Playlist detail recovery footer (long-surface bottom) ── */
/* DW-FEAT-075 FIX: sticky recovery button — mirrors DW-075 provenance bottom-recovery pattern.
Stays visible at the bottom of the scrollable playlist surface at all scroll positions. */
.dream-playlist-detail-recovery {
display: flex !important;
justify-content: center !important;
padding: 18px 0 calc(18px + env(safe-area-inset-bottom)) !important;
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 50 !important;
pointer-events: auto !important;
background: linear-gradient(to top, rgba(6,8,14,0.92) 0%, rgba(6,8,14,0.0) 100%) !important;
flex-shrink: 0 !important;
}
.dream-playlist-detail-back-btn {
min-height: 44px !important;
padding: 10px 24px !important;
width: min(100%, 320px) !important;
justify-content: center !important;
font-size: 13px !important;
background: rgba(6,8,14,0.9) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
border-radius: 999px !important;
color: rgba(255,255,255,0.75) !important;
cursor: pointer !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.24) !important;
}
/* ── Mobile playlist detail: stacked header, compact rows ── */
@media (max-width: 640px) {
.dream-playlist-detail { padding: 12px; box-sizing: border-box; padding-left: max(12px, env(safe-area-inset-left)); }
.dream-playlist-detail-header-inner {
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
}
.dream-playlist-detail-grid {
width: 100px !important;
height: 100px !important;
border-radius: 8px !important;
flex-shrink: 0 !important;
}
.dream-playlist-detail-title { font-size: 16px !important; }
.dream-playlist-detail-description { font-size: 11px !important; }
/* Duration column visible on mobile */
.dream-playlist-detail-row {
grid-template-columns: 44px minmax(0,1fr) 32px 44px 44px !important;
gap: 4px !important;
padding: 6px 2px !important;
}
.dream-playlist-detail-duration { font-size: 10px !important; min-width: 28px !important; }
.dream-playlist-detail-cover { width: 44px !important; height: 44px !important; flex-shrink: 0 !important; }
.dream-playlist-detail-name { font-size: 12px !important; }
.dream-playlist-detail-artist { font-size: 10px !important; }
.dream-playlist-detail-play { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; }
.dream-playlist-detail-remove { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; }
.dream-playlist-detail-move-up,
.dream-playlist-detail-move-down { display: none !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; }
.dream-playlist-detail-spacer { display: none !important; width: 44px !important; min-width: 44px !important; height: 44px !important; }
/* Action buttons stack nicely */
.dream-playlist-detail-actions { gap: 6px !important; }
.dream-playlist-detail-actions .dream-primary,
.dream-playlist-detail-actions .dream-secondary,
.dream-playlist-detail-actions .dream-danger { padding: 8px 10px !important; font-size: 11px !important; }
/* Recovery footer is always visible at bottom */
.dream-playlist-detail-recovery { padding: 14px 0 calc(14px + env(safe-area-inset-bottom)) !important; }
}
/* Extra-narrow: hide move buttons on very small screens to avoid crowding */
@media (max-width: 400px) {
.dream-playlist-detail-row {
grid-template-columns: 40px minmax(0,1fr) 32px 40px !important;
}
.dream-playlist-detail-move-up,
.dream-playlist-detail-move-down,
.dream-playlist-detail-spacer { display: none !important; }
}
/* ── Desktop left sidebar (≥1100px) ──────────────────────── */
@media (min-width: 1100px) {
body.dream-app-open #dreamAppMain {
flex-direction: row !important;
gap: 0 !important;
}
.dream-desktop-sidebar {
display: flex !important;
flex-direction: column !important;
width: 280px !important;
min-width: 280px !important;
padding: 14px 12px 14px !important;
gap: 10px !important;
border-right: 1px solid rgba(255,255,255,0.05) !important;
background: rgba(6,8,12,0.78) !important;
overflow-y: auto !important;
position: sticky !important;
top: 0 !important;
max-height: calc(100dvh - env(safe-area-inset-bottom) - 40px) !important;
padding-bottom: 40px !important;
}
/* Sidebar should not render at all on player route */
body.dream-app-open[data-dream-route="player"] .dream-desktop-sidebar {
display: none !important;
}
}
.dream-desktop-sidebar-section {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
overflow: visible !important;
}
.dream-desktop-sidebar-label {
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.84) !important;
padding: 6px 6px 2px !important;
white-space: nowrap !important;
min-width: 0 !important;
overflow: visible !important;
}
.dream-desktop-sidebar-row {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 5px 8px !important;
border-radius: 8px !important;
cursor: pointer !important;
color: rgba(255,255,255,0.82) !important;
font-size: 13px !important;
transition: background 0.12s, color 0.12s !important;
text-decoration: none !important;
border: none !important;
background: none !important;
width: 100% !important;
text-align: left !important;
overflow: visible !important;
min-width: 0 !important;
}
.dream-desktop-sidebar-row:hover {
background: rgba(255,255,255,0.04) !important;
color: rgba(255,255,255,0.85) !important;
}
.dream-desktop-sidebar-row.active {
background: rgba(255,255,255,0.06) !important;
color: var(--dw-pink, #ff71ce) !important;
}
.dream-desktop-sidebar-row-icon {
font-size: 16px !important;
width: 24px !important;
text-align: center !important;
flex-shrink: 0 !important;
}
.dream-sidebar-avatar-row {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
padding: 6px 10px 4px !important;
}
.dream-sidebar-avatar {
width: 36px !important;
height: 36px !important;
border-radius: 999px !important;
object-fit: cover !important;
border: 1.5px solid rgba(255,255,255,0.14) !important;
background: #1a1b2e !important;
flex-shrink: 0 !important;
}
.dream-desktop-sidebar-now-playing {
padding: 8px 10px !important;
border-radius: 12px !important;
background: rgba(255,255,255,0.07) !important;
border: 1px solid rgba(255,255,255,0.09) !important;
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
}
.dream-desktop-sidebar-np-topline {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
}
.dream-desktop-sidebar-np-label {
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.46) !important;
}
.dream-desktop-sidebar-np-play {
width: 24px !important;
height: 24px !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,0.08) !important;
background: rgba(255,255,255,0.04) !important;
color: rgba(255,255,255,0.86) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 11px !important;
line-height: 1 !important;
cursor: pointer !important;
flex-shrink: 0 !important;
}
.dream-desktop-sidebar-np-name {
font-size: 13px !important;
font-weight: 600 !important;
color: #fff !important;
white-space: normal !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.22 !important;
max-height: calc(1.22em * 2) !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
.dream-desktop-sidebar-np-artist {
font-size: 11px !important;
color: rgba(255,255,255,0.66) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-desktop-sidebar-np-progress-meta {
display: flex !important;
justify-content: space-between !important;
gap: 8px !important;
font-size: 10px !important;
color: rgba(255,255,255,0.34) !important;
}
.dream-desktop-sidebar-np-progress-bar {
height: 2px !important;
background: rgba(255,255,255,0.08) !important;
border-radius: 999px !important;
overflow: hidden !important;
margin-top: 0 !important;
}
.dream-desktop-sidebar-np-progress-fill {
height: 100% !important;
background: var(--dw-pink, #ff71ce) !important;
border-radius: 1px !important;
transition: width 0.8s linear !important;
}
.dream-desktop-sidebar-up-next {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
padding: 6px 10px !important;
background: rgba(255,255,255,0.025) !important;
border-radius: 6px !important;
border: 1px solid rgba(255,255,255,0.04) !important;
}
.dream-desktop-sidebar-up-next-label {
font-size: 8px !important;
font-weight: 600 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.2) !important;
}
.dream-desktop-sidebar-up-next-name {
font-size: 11px !important;
color: rgba(255,255,255,0.45) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.dream-desktop-sidebar-section--utilities {
gap: 6px !important;
}
.dream-desktop-sidebar-utility-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
}
.dream-desktop-sidebar-utility-btn {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
min-width: 0 !important;
padding: 7px 9px !important;
border-radius: 10px !important;
border: 1px solid rgba(255,255,255,0.06) !important;
background: rgba(255,255,255,0.03) !important;
color: rgba(255,255,255,0.8) !important;
font: 600 11px/1.2 'Inter', system-ui, sans-serif !important;
cursor: pointer !important;
text-align: left !important;
}
.dream-desktop-sidebar-utility-btn:hover {
background: rgba(255,255,255,0.05) !important;
color: rgba(255,255,255,0.9) !important;
}
.dream-desktop-sidebar-utility-icon {
flex-shrink: 0 !important;
width: 14px !important;
text-align: center !important;
color: rgba(255,255,255,0.58) !important;
font-size: 12px !important;
}
.dream-desktop-sidebar-utility-copy {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.dream-desktop-sidebar-utility-badge {
margin-left: auto !important;
flex-shrink: 0 !important;
min-width: 16px !important;
padding: 1px 5px !important;
border-radius: 999px !important;
background: rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.7) !important;
font-size: 10px !important;
text-align: center !important;
}
.dream-desktop-sidebar-row.dream-sidebar-active {
background: rgba(255,113,206,0.10) !important;
color: var(--dw-pink, #ff71ce) !important;
}
/* Sidebar content area — left padding when desktop sidebar is visible */
@media (min-width: 1100px) {
body.dream-app-open #dreamAppMain {
flex-direction: row !important;
gap: 0 !important;
}
body.dream-app-open #dreamAppMain {
display: flex !important;
}
body.dream-app-open .dream-app-content {
flex: 1 !important;
min-width: 0 !important;
}
/* Content keeps balanced gutters; width is inherited from the flex shell */
body.dream-app-open .dream-app-content {
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
}
/* Discover marquee / hero respects sidebar */
body.dream-app-open[data-dream-route="discover"] .dream-hero,
body.dream-app-open[data-dream-route="discover"] .dream-discover-route {
padding-left: 0 !important;
max-width: 100% !important;
}
}
/* Always hidden on mobile */
.dream-desktop-sidebar { display: none !important; }
/* ── Offline playback ─────────────────────────────────────────────────────── */
.dream-cached-badge {
display: inline-block;
font-size: 10px;
color: #1ed760;
margin-left: 4px;
vertical-align: middle;
}
.dream-cached-badge--partial {
color: #ff9500;
animation: dream-cache-spin 1s linear infinite;
}
@keyframes dream-cache-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.dream-section--library-offline .dream-section-head h3::before {
content: '↓ ';
color: #1ed760;
}
/* ── Lyrics panel ───────────────────────────────────────────────────────────── */
.dream-player-section--lyrics {
display: none; /* shown only when toggled */
}
.dream-player-section--lyrics.dream-lyrics-visible {
display: grid;
}
.dream-lyrics-body {
position: relative;
max-height: 236px;
overflow-y: auto;
padding: 10px 6px;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.15) transparent;
}
.dream-lyrics-body::-webkit-scrollbar {
width: 4px;
}
.dream-lyrics-body::-webkit-scrollbar-track {
background: transparent;
}
.dream-lyrics-body::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.15);
border-radius: 2px;
}
/* Gradient fades top and bottom */
.dream-lyrics-body::before,
.dream-lyrics-body::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 32px;
pointer-events: none;
z-index: 1;
}
.dream-lyrics-body::before {
top: 0;
background: linear-gradient(to bottom, rgba(10,10,18,1) 0%, rgba(10,10,18,0) 100%);
}
.dream-lyrics-body::after {
bottom: 0;
background: linear-gradient(to top, rgba(10,10,18,1) 0%, rgba(10,10,18,0) 100%);
}
.dream-lyrics-inner {
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 13px;
line-height: 1.72;
color: rgba(255,255,255,.58);
text-align: center;
white-space: pre-line;
padding: 8px 0;
}
/* LRC active line highlight */
.dream-lyrics-inner[data-lyrics-active] .dream-lyric-line[data-idx="0"],
.dream-lyrics-inner .dream-lyric-line {
display: block;
transition: color 400ms ease, opacity 400ms ease;
}
.dream-lyrics-inner .dream-lyric-line.active {
color: #fff;
font-weight: 700;
opacity: 1;
}
.dream-lyrics-inner .dream-lyric-line:not(.active) {
color: rgba(255,255,255,.35);
opacity: 0.7;
}
/* Lyrics button active state */
#dreamPlayerLyrics.active {
background: rgba(255,255,255,.12) !important;
color: #fff !important;
border-color: rgba(255,255,255,.3) !important;
}
/* ── Keyboard shortcuts modal ───────────────────────────────────────────────── */
.dream-shortcuts-overlay {
position: fixed !important;
inset: 0 !important;
background: rgba(0,0,0,.7) !important;
z-index: 99999 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
.dream-shortcuts-modal {
background: rgba(14,14,24,.92) !important;
border: 1px solid rgba(255,255,255,.1) !important;
border-radius: 16px !important;
padding: 24px !important;
width: min(480px, 92vw) !important;
max-height: 80vh !important;
overflow-y: auto !important;
box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05) inset !important;
backdrop-filter: blur(24px) saturate(160%) !important;
-webkit-backdrop-filter: blur(24px) saturate(160%) !important;
}
.dream-shortcuts-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 20px !important;
}
.dream-shortcuts-header h3 {
font-size: 18px !important;
font-weight: 700 !important;
color: #fff !important;
margin: 0 !important;
letter-spacing: -.01em !important;
}
.dream-shortcuts-close {
appearance: none !important;
border: 1px solid rgba(255,255,255,.15) !important;
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.7) !important;
width: 32px !important;
height: 32px !important;
border-radius: 8px !important;
font-size: 14px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 150ms ease, color 150ms ease !important;
}
.dream-shortcuts-close:hover {
background: rgba(255,255,255,.12) !important;
color: #fff !important;
}
.dream-shortcuts-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 6px 24px !important;
}
.dream-shortcut-row {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 6px 0 !important;
}
.dream-shortcut-key {
font-family: 'DM Mono', 'Courier New', monospace !important;
font-size: 12px !important;
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.14) !important;
border-bottom-width: 2px !important;
border-radius: 6px !important;
padding: 4px 8px !important;
color: #fff !important;
min-width: 40px !important;
text-align: center !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.dream-shortcut-desc {
font-size: 13px !important;
color: rgba(255,255,255,.6) !important;
}
/* Shortcuts trigger button — bottom-right desktop corner.
DW-WAVE61-CONTROL-HIT-TARGET-CLEARANCE: lift above mini-player gear hitbox on desktop. */
.dream-shortcuts-trigger {
position: fixed !important;
bottom: 132px !important;
right: 24px !important;
z-index: 9000 !important;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
border: 1px solid rgba(255,255,255,.12) !important;
background: rgba(14,14,24,.85) !important;
color: rgba(255,255,255,.55) !important;
font-size: 16px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
box-shadow: 0 4px 16px rgba(0,0,0,.4) !important;
transition: background 150ms ease, color 150ms ease, transform 150ms ease !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Show only on desktop */
@media (pointer: fine) {
.dream-shortcuts-trigger {
opacity: 1 !important;
pointer-events: auto !important;
}
}
.dream-shortcuts-trigger:hover {
background: rgba(255,255,255,.1) !important;
color: #fff !important;
transform: scale(1.06) !important;
}
.dream-shortcuts-trigger:active {
transform: scale(0.96) !important;
}
/* ── Comments panel ─────────────────────────────────────────────────────────── */
.dream-player-section--comments {
display: block !important;
}
.dream-player-section--comments-compact .dream-player-section-note {
margin-bottom: 4px !important;
}
.dream-player-section--comments-compact .dream-comment-form {
margin-bottom: 0 !important;
}
.dream-comment-empty-prompt {
margin-top: 2px !important;
color: rgba(255,255,255,.76) !important;
font: 600 11px/1.45 'DM Sans', system-ui, sans-serif !important;
}
.dream-comment-form {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin: 2px 0 8px !important;
}
.dream-comment-reply-banner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
padding: 8px 10px !important;
border-radius: 10px !important;
background: rgba(255,255,255,.05) !important;
border: 1px solid rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.7) !important;
font: 600 11px/1.3 'DM Sans', system-ui, sans-serif !important;
}
.dream-comment-reply-cancel,
.dream-comment-reply-action {
appearance: none !important;
border: 0 !important;
background: transparent !important;
color: rgba(255,255,255,.6) !important;
font: 700 11px/1 'DM Sans', system-ui, sans-serif !important;
cursor: pointer !important;
padding: 0 !important;
}
.dream-comment-reply-cancel:hover,
.dream-comment-reply-action:hover {
color: #fff !important;
}
.dream-comment-input {
width: 100% !important;
min-height: 64px !important;
padding: 10px 12px !important;
border: 1px solid rgba(255,255,255,.1) !important;
border-radius: 12px !important;
background: rgba(255,255,255,.05) !important;
color: #f7f8f8 !important;
font: 600 13px/1.5 'DM Sans', system-ui, sans-serif !important;
resize: vertical !important;
box-sizing: border-box !important;
transition: border-color 150ms ease !important;
}
.dream-comment-input:focus {
outline: none !important;
border-color: rgba(255,255,255,.25) !important;
}
.dream-comment-input::placeholder {
color: rgba(255,255,255,.32) !important;
}
.dream-comment-submit {
align-self: flex-end !important;
appearance: none !important;
border: 1px solid rgba(255,255,255,.15) !important;
border-radius: 999px !important;
background: rgba(255,255,255,.1) !important;
color: #f7f8f8 !important;
padding: 6px 18px !important;
font: 700 12px/1 'DM Sans', system-ui, sans-serif !important;
cursor: pointer !important;
transition: background 150ms ease, border-color 150ms ease !important;
}
.dream-comment-submit:hover {
background: rgba(255,255,255,.16) !important;
border-color: rgba(255,255,255,.28) !important;
}
.dream-comment-submit:disabled {
opacity: .5 !important;
pointer-events: none !important;
}
/* DW-FEAT-064: 44px touch targets for comment actions */
.dream-comment-submit {
min-height: 44px !important;
padding: 10px 20px !important;
font-size: 13px !important;
}
.dream-comment-reply-action,
.dream-comment-like-action {
min-height: 44px !important;
padding: 10px 8px !important;
}
.dream-comment-delete {
min-height: 44px !important;
padding: 10px 8px !important;
font-size: 16px !important;
}
/* DW-FEAT-064: Track detail surface comment section — scrollable with safe bottom padding */
.dream-track-detail-surface .dream-player-section--comments {
margin-top: 16px !important;
}
.dream-track-detail-surface .dream-comment-list {
max-height: 400px !important;
}
.dream-comment-list {
display: grid !important;
gap: 8px !important;
max-height: 340px !important;
overflow-y: auto !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(255,255,255,.12) transparent !important;
}
.dream-comment-list::-webkit-scrollbar {
width: 4px !important;
}
.dream-comment-list::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.12) !important;
border-radius: 2px !important;
}
.dream-comment-row {
position: relative !important;
display: grid !important;
gap: 4px !important;
padding: 10px 12px !important;
border-radius: 12px !important;
background: rgba(255,255,255,.035) !important;
border: 1px solid rgba(255,255,255,.06) !important;
}
.dream-comment-row--reply {
margin-left: 16px !important;
background: rgba(255,255,255,.024) !important;
}
.dream-comment-actions {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.dream-comment-like-action,
.dream-comment-like-count {
color: rgba(255,255,255,.68) !important;
font: 700 11px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-comment-like-action {
appearance: none !important;
border: 0 !important;
background: transparent !important;
cursor: pointer !important;
padding: 0 !important;
}
.dream-comment-like-action.is-liked {
color: #ff8fb1 !important;
}
.dream-comment-children {
display: grid !important;
gap: 8px !important;
margin-top: 4px !important;
}
.dream-comment-meta {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.dream-comment-author {
color: #f7f8f8 !important;
font: 700 12px/1.2 'DM Sans', system-ui, sans-serif !important;
}
.dream-comment-time {
color: rgba(255,255,255,.4) !important;
font: 600 10.5px/1 'DM Sans', system-ui, sans-serif !important;
}
.dream-comment-text {
margin: 0 !important;
color: rgba(255,255,255,.7) !important;
font: 400 13px/1.55 'DM Sans', system-ui, sans-serif !important;
word-break: break-word !important;
}
.dream-comment-delete {
position: absolute !important;
top: 8px !important;
right: 10px !important;
appearance: none !important;
border: none !important;
background: transparent !important;
color: rgba(255,255,255,.35) !important;
font-size: 18px !important;
line-height: 1 !important;
cursor: pointer !important;
padding: 2px 6px !important;
border-radius: 6px !important;
transition: color 150ms ease, background 150ms ease !important;
}
.dream-comment-delete:hover {
color: #ff5470 !important;
background: rgba(255,80,100,.12) !important;
}
.dream-comment-error {
color: #ff8099 !important;
}
/* DW-FEAT-078: Comment Reply Thread Polish — mobile reply threading + form stacking */
/* AC-3: Reply comments — visual indent with left border showing thread depth */
.dream-comment-row--reply {
margin-left: 16px !important;
border-left: 2px solid rgba(255, 113, 206, 0.45) !important;
padding-left: 12px !important;
background: rgba(255, 113, 206, 0.04) !important;
}
/* AC-6: Comment section — prevent horizontal overflow on narrow viewports */
.dream-player-section--comments,
.dream-comment-list,
.dream-comment-row,
.dream-comment-form,
.dream-comment-input {
overflow-x: hidden !important;
max-width: 100vw !important;
}
/* AC-4: Comment form — textarea full-width + submit button below on ≤420px phone */
@media (max-width: 420px) {
.dream-comment-form {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
align-items: stretch !important;
}
.dream-comment-input {
width: 100% !important;
min-height: 64px !important;
box-sizing: border-box !important;
}
.dream-comment-submit {
align-self: stretch !important;
min-height: 44px !important;
padding: 10px 20px !important;
font-size: 13px !important;
border-radius: 999px !important;
}
/* AC-3: Reply rows — tighter indent on phone */
.dream-comment-row--reply {
margin-left: 10px !important;
padding-left: 8px !important;
}
}
/* ── Activity Feed ───────────────────────────────────────────────────────── */
.dream-feed-stream { display:flex;flex-direction:column;gap:12px;max-width:600px; }
.dream-feed-card { display:flex;gap:12px;padding:14px;background:rgba(255,255,255,0.03);border-radius:10px;border:1px solid rgba(255,255,255,0.05); }
.dream-feed-avatar { width:36px;height:36px;border-radius:50%;background:rgba(255,113,206,0.15);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#ff71ce;flex-shrink:0; }
.dream-feed-body { flex:1;min-width:0; }
.dream-feed-header { display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px; }
.dream-feed-header strong { font-size:13px;color:#fff; }
.dream-feed-action { font-size:12px;color:rgba(255,255,255,0.5); }
.dream-feed-time { font-size:11px;color:rgba(255,255,255,0.25);margin-left:auto;white-space:nowrap; }
.dream-feed-detail { margin:4px 0 0;font-size:12px;color:rgba(255,255,255,0.4);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.dream-hero--feed { background:rgba(0,0,0,0.3);border-bottom:1px solid rgba(255,255,255,0.04); }
/* Artist page: Shuffle + Radio buttons */
.dream-artist-shuffle, .dream-artist-radio {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
border-radius: 6px;
font-size: .85rem;
cursor: pointer;
border: 1px solid rgba(255,255,255,.15);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.8);
transition: background .15s, color .15s;
}
.dream-artist-shuffle:hover, .dream-artist-radio:hover {
background: rgba(255,255,255,.12);
color: #fff;
}
.dream-artist-shuffle svg, .dream-artist-radio svg { opacity: .85; }
/* Now playing highlight in artist track rows */
.dream-track-row-play.now-playing { color: #00d9ff; }
.dream-track-row-play.now-playing svg { fill: #00d9ff; }
/* Album page: shuffle + add-to-queue buttons */
.dream-album-shuffle, .dream-album-queue-add {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
border-radius: 6px;
font-size: .85rem;
cursor: pointer;
border: 1px solid rgba(255,255,255,.15);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.8);
transition: background .15s, color .15s;
}
.dream-album-shuffle:hover, .dream-album-queue-add:hover {
background: rgba(255,255,255,.12);
color: #fff;
}
.dream-album-shuffle svg, .dream-album-queue-add svg { opacity: .85; }
/* ── Discover mood filter chips ──────────────────────── */
.dream-mood-filter-row {
display: flex;
gap: 8px;
padding: 16px 16px 10px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.dream-mood-filter-row::-webkit-scrollbar { display: none; }
.dream-mood-chip {
flex-shrink: 0;
padding: 5px 14px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.2);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.6);
font-size: .8rem;
font-family: inherit;
cursor: pointer;
transition: background .2s, color .2s, border-color .2s;
min-height: 44px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
}
.dream-mood-chip:hover { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
.dream-mood-chip.active {
background: rgba(124,77,255,.5);
border-color: rgba(124,77,255,.8);
color: #fff;
}
.dream-mood-shuffle-row {
padding: 0 16px 10px;
display: flex;
align-items: center;
}
.dream-mood-shuffle-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
border-radius: 24px;
border: 1px solid rgba(124,77,255,.7);
background: rgba(124,77,255,.25);
color: #e0d0ff;
font-size: .85rem;
font-family: inherit;
font-weight: 600;
cursor: pointer;
letter-spacing: .3px;
transition: background .2s, border-color .2s, color .2s;
min-height: 44px;
white-space: nowrap;
}
.dream-mood-shuffle-btn:hover,
.dream-mood-shuffle-btn:active {
background: rgba(124,77,255,.45);
border-color: rgba(124,77,255,.9);
color: #fff;
}
.dream-mood-shuffle-icon {
font-size: .75rem;
opacity: .9;
}
.dream-recent-play-all {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 14px;
border-radius: 20px;
background: rgba(124,77,255,.25);
border: 1px solid rgba(124,77,255,.6);
color: #e0d0ff;
font-size: .8rem;
font-family: inherit;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
min-height: 44px;
}
.dream-recent-play-all:hover,
.dream-recent-play-all:active {
background: rgba(124,77,255,.45);
border-color: rgba(124,77,255,.9);
color: #fff;
}
/* ── Mini-player volume ─────────────────────────────── */
.mini-np-volume {
background: none;
border: none;
cursor: pointer;
font-size: .9rem;
padding: 0 4px;
opacity: .7;
flex-shrink: 0;
line-height: 1;
}
.mini-np-volume:hover { opacity: 1; }
.mini-np-volume-slider {
width: 48px;
height: 3px;
accent-color: #a78bfa;
cursor: pointer;
flex-shrink: 0;
-webkit-appearance: none;
background: transparent;
border-radius: 2px;
padding: 0;
}
.mini-np-volume-slider::-webkit-slider-runnable-track {
height: 3px;
background: rgba(255,255,255,.2);
border-radius: 2px;
}
.mini-np-volume-slider::-moz-range-track {
height: 3px;
background: rgba(255,255,255,.2);
border-radius: 2px;
border: 0;
}
.mini-np-volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
.mini-np-volume-slider::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
cursor: pointer;
border: 0;
}
@media (max-width: 480px) {
.mini-np-volume-slider { width: 36px; }
}
/* Radio mode badge in nav bar */
.dream-radio-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 10px;
background: rgba(124,77,255,.3);
border: 1px solid rgba(124,77,255,.6);
color: #c4b5fd;
font-size: .7rem;
font-weight: 600;
letter-spacing: .03em;
animation: radioPulse 2s ease-in-out infinite;
}
.dream-radio-badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: #a78bfa;
animation: radioDot 1.5s ease-in-out infinite;
}
@keyframes radioPulse {
0%, 100% { opacity: 1; }
50% { opacity: .7; }
}
@keyframes radioDot {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.4); }
}
/* Mini-player: hide context if empty, better time styling */
.mini-np-meta { min-height: 14px; }
.mini-np-meta {
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 2px;
min-height: 14px;
}
/* DW-VIS-LIBRARY-PLAYER-BAR-CONGEST: space-between on meta inner flex forces info column
to expand to preserve distance to time, leaving only 10px gap to play button.
Change to flex-start so meta content packs to the left, giving info its natural
(smaller) intrinsic width before flex row distributes remaining space. */
@media (max-width: 520px) {
.mini-np-meta {
justify-content: flex-start;
}
/* DW-VIS-LIBRARY-PLAYER-BAR-CONGEST: cap info column so flex:1 doesn't
greedily expand it and jam time+play+volume against the right edge.
.mini-np-info is parent of .mini-np-meta, so we cap .mini-np-info directly.
At 384px viewport: title+artist need ~178px, time ~50px, play ~44px, vol ~44px,
plus ~20px gap = ~346px. With info at 180px, time starts at ~258 vs play at 264
(only 6px gap). Tighten to 166px → time starts at ~244, play at 264 = 20px gap. */
.mini-now-playing .mini-np-info {
flex: 0 0 auto !important;
max-width: 166px !important;
}
/* DW-VIS-LIBRARY-PLAYER-BAR-CONGEST: force time to right-align inside meta
row by pushing it with auto margin, creating consistent gap to play button. */
.mini-np-info > .mini-np-meta > .mini-np-time {
margin-left: auto !important;
min-width: 46px !important;
}
}
.mini-np-context {
font-size: 1.5rem;
color: rgba(255,255,255,.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 80px;
}
.mini-np-time {
font-size: .6rem;
color: rgba(255,255,255,.4);
white-space: nowrap;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
/* Mini-player: ensure info column doesn't squash progress */
.mini-np-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.mini-np-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.mini-np-artist {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Mini-player strip: flex row layout */
.mini-now-playing {
display: flex;
align-items: center;
gap: 8px;
height: 48px;
padding: 0 8px;
}
.mini-np-art {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 4px;
overflow: hidden;
}
.mini-np-art img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mini-np-play {
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.12) !important;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 13px;
opacity: .9;
transition: background 150ms, opacity 150ms;
}
.mini-np-play:hover { background: rgba(255,255,255,0.2) !important; opacity: 1; }
.mini-np-play:active { background: var(--dw-pink) !important; }
.mini-np-progress {
flex: 0 0 60px;
height: 3px;
background: rgba(255,255,255,.15);
border-radius: 2px;
overflow: hidden;
}
.mini-np-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--dw-pink, #ff71ce), var(--dw-green, #1ed760));
border-radius: 2px;
transition: width .3s linear;
box-shadow: 0 0 6px rgba(255,113,206,0.4);
}
/* ═══════════════════════════════════════════════════════════
DREAMWAVE TRANSPARENT MINI-PLAYER — FORCE OVERRIDE
Added by auto-patch: overrides ALL dark mini-player backgrounds
═══════════════════════════════════════════════════════════ */
html body body #dreamAppContent .mini-now-playing,
html body body body #dreamApp .mini-now-playing,
html body .mini-now-playing,
.dream-app-open .mini-now-playing,
body.dream-app-open .mini-now-playing,
#dreamAppContent > .mini-now-playing,
#dreamApp .mini-now-playing,
#miniNowPlaying,
.mini-now-playing {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-top: none !important;
box-shadow: none !important;
min-height: 56px !important;
padding: 6px 14px !important;
gap: 10px !important;
}
/* Also kill any blur on the minimal player overlay */
.dream-minimal-now-playing,
html body .dream-minimal-now-playing,
.dream-minimal-cinematic {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
}
/* ── Minimal player polish overrides ── */
.dream-minimal-cinematic {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* Sleek frosted glass close button */
.dream-minimal-cinematic-close {
position: fixed; top: max(16px, env(safe-area-inset-top)); right: 16px;
z-index: 20; width: 32px; height: 32px; border-radius: 50%;
border: 1px solid rgba(255,255,255,0.15) !important;
background: rgba(255,255,255,0.07) !important;
color: rgba(255,255,255,0.8) !important;
font-size: 13px !important; cursor: pointer;
backdrop-filter: blur(8px) saturate(1.6) !important;
-webkit-backdrop-filter: blur(8px) saturate(1.6) !important;
display: flex; align-items: center; justify-content: center;
transition: background 150ms, color 150ms, transform 150ms;
box-shadow: none !important;
}
.dream-minimal-cinematic-close:hover {
background: rgba(255,255,255,0.14) !important;
color: rgba(255,255,255,1) !important;
transform: scale(1.06);
}
.dream-minimal-cinematic-close:active {
background: rgba(179,136,255,0.28) !important;
transform: scale(0.94);
}
/* FIX 5 PHONE OVERRIDE: mini-player needs solid bg on phone — add AFTER the force-override block */
/* This must come after line 13293's `background: transparent` rule to take effect on phone */
@media (max-width: 520px) {
html body body #dreamAppContent .mini-now-playing,
html body body body #dreamApp .mini-now-playing,
html body .mini-now-playing,
.dream-app-open .mini-now-playing,
body.dream-app-open .mini-now-playing,
#dreamAppContent > .mini-now-playing,
#dreamApp .mini-now-playing,
#miniNowPlaying,
.mini-now-playing {
background: rgba(10,12,20,0.94) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-top: 1px solid rgba(255,255,255,0.06) !important;
box-shadow: 0 -4px 24px rgba(0,0,0,0.5) !important;
position: fixed !important;
bottom: 56px !important;
z-index: 999 !important;
}
}
/* Beautiful frosted glass now-playing card */
.dream-minimal-now-playing {
background: rgba(10,10,22,0.30) !important;
backdrop-filter: blur(24px) saturate(1.5) brightness(1.05) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
border: 1px solid rgba(255,255,255,0.09) !important;
box-shadow: 0 8px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,113,206,0.04) !important;
border-radius: 28px !important;
}
/* Pink→green gradient progress fill */
.dream-minimal-progress-fill {
background: linear-gradient(90deg, var(--dw-pink, #ff71ce), var(--dw-green, #01f5a6)) !important;
height: 3px !important;
border-radius: 2px !important;
box-shadow: 0 0 6px rgba(255,113,206,0.4);
}
/* Gradient play button */
.dream-minimal-ctrl--play {
background: linear-gradient(135deg, var(--dw-pink, #ff71ce), #b388ff) !important;
color: #080a12 !important;
width: 60px !important; height: 60px !important;
border-radius: 50% !important;
font-size: 22px !important;
box-shadow: 0 4px 24px rgba(255,113,206,0.5), 0 0 40px rgba(179,136,255,0.2) !important;
border: none !important;
display: flex; align-items: center; justify-content: center;
}
/* Frosted skip buttons */
.dream-minimal-ctrl {
background: rgba(255,255,255,0.07) !important;
border: 1px solid rgba(255,255,255,0.09) !important;
color: rgba(255,255,255,0.65) !important;
font-size: 20px !important;
padding: 10px !important; border-radius: 50% !important;
transition: background 150ms, color 150ms, transform 150ms;
display: flex; align-items: center; justify-content: center;
}
.dream-minimal-ctrl:hover {
background: rgba(255,255,255,0.13) !important;
color: rgba(255,255,255,1) !important;
}
.dream-minimal-ctrl:active {
background: rgba(179,136,255,0.22) !important;
transform: scale(0.92) !important;
}
/* Frosted action buttons */
.dream-minimal-action {
background: rgba(255,255,255,0.07) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.55) !important;
font-size: 15px !important;
padding: 8px !important; border-radius: 50% !important;
transition: background 150ms, color 150ms, transform 150ms;
display: flex; align-items: center; justify-content: center;
}
.dream-minimal-action:hover {
background: rgba(255,255,255,0.13) !important;
color: rgba(255,255,255,0.95) !important;
}
.dream-minimal-action:active {
background: rgba(179,136,255,0.22) !important;
transform: scale(0.92) !important;
}
/* Sleek footer back link */
.dream-minimal-footer { margin-top: 6px !important; }
.dream-minimal-back-link {
background: rgba(255,255,255,0.07) !important;
border: 1px solid rgba(255,255,255,0.09) !important;
color: rgba(255,255,255,0.5) !important;
font-size: 12px !important; font-weight: 600 !important;
letter-spacing: 0.3px !important;
padding: 6px 14px !important; border-radius: 20px !important;
cursor: pointer; transition: background 150ms, color 150ms, border-color 150ms;
display: inline-block;
}
.dream-minimal-back-link:hover {
background: rgba(255,255,255,0.12) !important;
color: rgba(255,255,255,0.85) !important;
border-color: rgba(255,255,255,0.14) !important;
}
/* Track info typography */
.dream-minimal-track-name {
font-size: 20px !important; font-weight: 700 !important;
color: rgba(255,255,255,0.95) !important;
text-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
letter-spacing: 0.2px !important;
}
.dream-minimal-track-artist {
font-size: 14px !important; color: rgba(255,255,255,0.5) !important;
font-weight: 400 !important;
}
.dream-minimal-track-album {
font-size: 12px !important; color: rgba(255,255,255,0.35) !important;
}
/* Mood pill */
.dream-minimal-mood-pill {
background: rgba(179,136,255,0.15) !important;
border: 1px solid rgba(179,136,255,0.25) !important;
color: rgba(179,136,255,0.9) !important;
font-size: 11px !important; font-weight: 600 !important;
padding: 3px 10px !important; border-radius: 20px !important;
letter-spacing: 0.5px !important;
}
/* Controls spacing */
.dream-minimal-controls { gap: 24px !important; margin: 16px 0 !important; }
.dream-minimal-actions { gap: 14px !important; margin-top: 12px !important; }
.dream-minimal-progress { width: 100% !important; }
/* ── 'Now playing' expanded card (miniNowPlayingExpanded) ─────────────── */
/* Hidden by default, shown via .open class added by toggleMiniNowPlayingExpanded() */
#miniNowPlayingExpanded {
display: none !important;
position: fixed !important;
inset: 0 !important;
z-index: 1200 !important;
background: rgba(6, 6, 10, 0.96) !important;
backdrop-filter: blur(20px) saturate(1.3) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
padding: 20px !important;
overflow: hidden !important;
}
#miniNowPlayingExpanded.open {
display: flex !important;
}
#miniNowPlayingExpanded .dream-mnpe-inner {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
width: 100% !important;
max-width: 320px !important;
}
#miniNowPlayingExpanded .dream-mnpe-drag-handle {
width: 36px !important;
height: 4px !important;
background: rgba(255,255,255,.25) !important;
border-radius: 2px !important;
margin-bottom: 4px !important;
}
#miniNowPlayingExpanded .dream-mnpe-close {
position: absolute !important;
top: 14px !important;
right: 14px !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
border: 1px solid rgba(255,255,255,.12) !important;
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.7) !important;
font-size: 14px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#miniNowPlayingExpanded .dream-mnpe-cover-wrap {
width: min(70vw, 240px) !important;
aspect-ratio: 1 !important;
border-radius: 18px !important;
overflow: hidden !important;
box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) !important;
}
#miniNowPlayingExpanded .dream-mnpe-cover {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
#miniNowPlayingExpanded .dream-mnpe-info {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 4px !important;
text-align: center !important;
}
#miniNowPlayingExpanded .dream-mnpe-title {
font-size: clamp(16px, 4.5vw, 22px) !important;
font-weight: 800 !important;
color: #fff !important;
line-height: 1.1 !important;
max-width: 20ch !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
#miniNowPlayingExpanded .dream-mnpe-artist {
font-size: 13px !important;
font-weight: 500 !important;
color: rgba(255,255,255,.6) !important;
}
#miniNowPlayingExpanded .dream-mnpe-progress {
width: 100% !important;
max-width: 280px !important;
height: 20px !important;
background: rgba(255,255,255,.1) !important;
border-radius: 10px !important;
overflow: hidden !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
}
#miniNowPlayingExpanded .dream-mnpe-progress-fill {
height: 100% !important;
background: #ff71c4 !important;
border-radius: 10px !important;
width: 0% !important;
transition: width .4s linear !important;
}
#miniNowPlayingExpanded .dream-mnpe-progress:hover {
background: rgba(255,255,255,.18) !important;
}
#miniNowPlayingExpanded .dream-mnpe-progress:active {
background: rgba(255,255,255,.22) !important;
}
#miniNowPlayingExpanded .dream-mnpe-time {
display: flex !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 280px !important;
font-size: 11px !important;
color: rgba(255,255,255,.4) !important;
font-variant-numeric: tabular-nums !important;
}
#miniNowPlayingExpanded .dream-mnpe-controls {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
margin-top: 4px !important;
}
#miniNowPlayingExpanded .dream-mnpe-prev,
#miniNowPlayingExpanded .dream-mnpe-next {
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
border: none !important;
background: rgba(255,255,255,.08) !important;
color: rgba(255,255,255,.8) !important;
font-size: 18px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#miniNowPlayingExpanded .dream-mnpe-play {
width: 56px !important;
height: 56px !important;
border-radius: 50% !important;
border: none !important;
background: #ff71c4 !important;
color: #fff !important;
font-size: 22px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 20px rgba(255,113,196,.4) !important;
}
#miniNowPlayingExpanded .dream-mnpe-actions {
display: flex !important;
gap: 12px !important;
margin-top: 2px !important;
}
#miniNowPlayingExpanded .dream-mnpe-like,
#miniNowPlayingExpanded .dream-mnpe-queue {
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
border: 1px solid rgba(255,255,255,.12) !important;
background: rgba(255,255,255,.06) !important;
color: rgba(255,255,255,.6) !important;
font-size: 16px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Mobile overrides for Now Playing card */
@media (max-width: 520px) {
#miniNowPlayingExpanded {
z-index: 2000 !important;
}
#miniNowPlayingExpanded .dream-mnpe-cover-wrap {
width: min(80vw, 220px) !important;
}
#miniNowPlayingExpanded .dream-mnpe-controls {
gap: 12px !important;
}
#miniNowPlayingExpanded .dream-mnpe-play {
width: 52px !important;
height: 52px !important;
}
}
/* ── Queue Panel extras ─────────────────────────────────────────────── */
/* Panel sits above mini-player, below bottom nav */
#dreamQueuePanel {
z-index: 1001 !important;
background: rgba(8, 8, 12, 0.97) !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* Ensure badge number is readable */
.mini-np-queue-badge {
font-size: 9px !important;
font-weight: 700 !important;
line-height: 16px !important;
text-align: center !important;
}
/* Queue open state — suppress mini-player on browse routes only */
body.queue-open[data-dream-route="discover"] #miniNowPlaying,
body.queue-open[data-dream-route="search"] #miniNowPlaying,
body.queue-open[data-dream-route="library"] #miniNowPlaying {
display: none !important;
}
/* Bottom sheet on narrow screens */
@media (max-width: 520px) {
#dreamQueuePanel {
max-height: 72vh !important;
}
.dream-qp-list {
max-height: calc(72vh - 160px) !important;
}
}
/* Mobile bottom nav fit + hit-area hardening: six tabs must fit cleanly on 320px phones. */
@media (max-width: 520px) {
body.dream-app-open .dream-bottom-tabs {
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
justify-content: stretch !important;
gap: 0 !important;
padding: 6px 6px max(6px, env(safe-area-inset-bottom)) !important;
overflow: visible !important;
max-width: 100vw !important;
box-sizing: border-box !important;
}
body.dream-app-open .dream-bottom-tabs .dream-tab-btn,
body.dream-app-open .dream-bottom-tabs .mobile-tab-btn {
min-width: 0 !important;
width: 100% !important;
padding: 6px 2px !important;
font-size: 9px !important;
letter-spacing: .01em !important;
border-radius: 9px !important;
overflow: hidden !important;
}
body.dream-app-open .dream-bottom-tabs .dream-tab-label {
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
body.dream-app-open .dream-bottom-tabs .dream-rail-chip,
body.dream-app-open .dream-bottom-tabs .dream-rail-queue-mode,
body.dream-app-open #dreamShortcutsBtn,
body.dream-app-open #minimalAppBtn,
body.dream-app-open #minimalModeToggle,
body.dream-app-open #minimalQueueBtn {
display: none !important;
pointer-events: none !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-secondary {
display: none !important;
}
}
/* Mobile chrome cleanup: keep the mini-player as one clear bar, not random floating controls. */
@media (max-width: 520px) {
/* Hide now-playing badge on mobile, but NOT notification badges ([data-unread]). */
body.dream-app-open .dream-tab-btn.is-playing .dream-nav-badge:not([data-unread]) {
display: none !important;
}
body.dream-app-open .dream-tab-btn.is-playing {
opacity: 1 !important;
}
body.dream-app-open .mini-now-playing {
left: 8px !important;
right: 8px !important;
bottom: calc(56px + env(safe-area-inset-bottom)) !important;
overflow: hidden !important;
min-height: 54px !important;
padding: 8px 10px !important;
border-radius: 18px !important;
background: rgba(7, 8, 12, .96) !important;
box-shadow: 0 14px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.08) !important;
gap: 9px !important;
}
body.dream-app-open .mini-np-info {
flex: 1 1 auto !important;
min-width: 120px !important;
}
body.dream-app-open .mini-np-play {
display: flex !important;
}
body.dream-app-open .mini-np-queue {
display: flex !important;
}
body.dream-app-open .mini-np-volume {
display: flex !important;
}
/* Hide UpNext, progress, volume slider, gear, queue, and volume on narrow phone */
body.dream-app-open .mini-np-up-next,
body.dream-app-open .mini-np-progress,
body.dream-app-open .mini-np-volume-slider,
body.dream-app-open .mini-np-gear,
body.dream-app-open .mini-np-queue,
body.dream-app-open .mini-np-volume {
display: none !important;
}
body.dream-app-open[data-dream-route="player"] .mini-now-playing {
display: none !important;
}
body.dream-app-open[data-dream-route="player"] .dream-track-detail-surface--player {
padding-top: 0 !important;
}
body.dream-app-open[data-dream-route="player"] .dream-track-detail-surface--player .dream-track-detail-head {
position: sticky !important;
top: 0 !important;
z-index: 20 !important;
margin: -2px -2px 12px !important;
padding: 10px !important;
border-radius: 18px !important;
background: rgba(8, 9, 14, .96) !important;
box-shadow: 0 12px 30px rgba(0,0,0,.32) !important;
}
body.dream-app-open[data-dream-route="player"] .dream-close-detail-action--player {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
min-height: 42px !important;
padding: 0 14px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.12) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.16) !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: .02em !important;
}
body.dream-app-open[data-dream-route="player"] .dream-track-detail-surface--player .dream-track-detail-copy {
padding-top: 48px !important;
}
}
/* v259: mobile player/library content-first polish */
@media (max-width: 520px) {
body.dream-app-open[data-dream-route="player"] .dream-player-transport-card {
gap: 8px !important;
padding: 10px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-art-wrap {
width: min(60vw, 150px) !important;
margin-top: 2px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-controls {
order: -3 !important;
gap: 12px !important;
margin: 0 auto 2px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-progress {
order: -2 !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-volume {
order: -1 !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-toggle-row {
display: none !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-quick-actions {
display: none !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
align-items: stretch !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-actions .dream-player-action {
width: 100% !important;
min-width: 0 !important;
min-height: 40px !important;
padding: 7px 9px !important;
font-size: 9.7px !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-up-next-card {
width: min(100%, 342px) !important;
margin-top: 64px !important;
padding: 10px 12px !important;
background: linear-gradient(160deg, rgba(9, 13, 20, .84), rgba(13, 16, 24, .68)) !important;
box-shadow: 0 14px 34px rgba(0,0,0,.28) !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-up-next-inner {
gap: 12px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-up-next-art {
width: 34px !important;
height: 34px !important;
border-radius: 8px !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-up-next-btn {
min-height: 44px !important;
padding: 6px 11px !important;
font-size: 9.5px !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
}
body.dream-app-open .dream-library-route > .dream-library-overview-grid:first-child {
margin-top: 0 !important;
}
body.dream-app-open .dream-hero--library {
padding: 12px !important;
gap: 8px !important;
}
body.dream-app-open .dream-hero--library h2 {
font-size: clamp(19px, 5vw, 23px) !important;
line-height: 1.04 !important;
}
body.dream-app-open .dream-library-summary-copy,
body.dream-app-open .dream-hero--library .dream-hero-badges,
body.dream-app-open .dream-hero--library .dream-hero-inline-links {
display: none !important;
}
body.dream-app-open .dream-hero--library .dream-library-status-row {
/* v15: show status row on phone */
}
body.dream-app-open .dream-library-toolbar {
padding: 10px !important;
gap: 8px !important;
}
body.dream-app-open .dream-library-toolbar-head {
display: none !important;
}
body.dream-app-open .dream-library-search-field input {
min-height: 38px !important;
font-size: 12px !important;
}
body.dream-app-open .dream-library-toolbar-utility-row {
display: flex !important;
flex-wrap: wrap !important;
overflow: visible !important;
gap: 8px !important;
align-items: center !important;
}
body.dream-app-open .dream-library-filter-row {
display: flex !important;
flex-wrap: wrap !important;
overflow-x: auto !important;
scrollbar-width: none !important;
gap: 5px !important;
padding-inline: 0 !important;
scroll-padding-inline: 0 !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
body.dream-app-open .dream-library-filter {
flex: 0 0 auto !important;
min-height: 30px !important;
padding: 6px 6px !important;
font-size: 9.5px !important;
white-space: nowrap !important;
}
body.dream-app-open .dream-library-toolbar-mode-cluster {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
}
/* v260: tiny-phone player fit — keep primary controls and actions in the first fold. */
@media (max-width: 360px) {
body.dream-app-open[data-dream-route="player"] .dream-player-volume {
order: -1 !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-art-wrap {
width: min(56vw, 144px) !important;
}
body.dream-app-open[data-dream-route="player"] .dream-player-action--compact {
padding: 6px 8px !important;
font-size: 10px !important;
}
}
/* ── Swarm QA polish: mobile nav, banners, chips, desktop queue ── */
@media (max-width: 520px) {
#dreamStatsTab {
display: none !important;
}
body.dream-app-open .dream-bottom-tabs {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
body.dream-app-open:has(#dreamwave-install-banner.visible) #dreamAppContent,
body.dream-app-open:has(#dreamwave-install-banner[style*="display: flex"]) #dreamAppContent {
padding-top: max(82px, env(safe-area-inset-top)) !important;
}
.dream-search-pill-row--start,
.dream-library-filter-row,
.dream-mood-filter-row,
.dream-search-scopes {
padding-inline: 10px 40px !important;
scroll-padding-inline: 10px 40px !important;
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 34px), rgba(0,0,0,0.18) 100%) !important;
mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 34px), rgba(0,0,0,0.18) 100%) !important;
}
/* DW-VIS-DISCOVER-PARTY-PILL-CLIP: fix structural overflow — row is a flex item inside a
flex container (column or block) with overflow-x:hidden, and flex-shrink:1 is letting
the browser shrink the row from its natural 406px content-width down to 356px parent width.
This pushes the 6th chip off-screen. Fix: prevent shrinking and use full width. */
.dream-mood-filter-row {
-webkit-mask-image: none !important;
mask-image: none !important;
flex-shrink: 0 !important;
width: 100% !important;
min-width: 0 !important;
}
}
@media (min-width: 900px) {
#dreamQueuePanel {
left: auto !important;
right: 24px !important;
bottom: 24px !important;
width: min(420px, calc(100vw - var(--dream-rail-width, 280px) - 56px)) !important;
max-height: min(70vh, 620px) !important;
border-radius: 22px !important;
border: 1px solid rgba(255,255,255,.1) !important;
transform: translateY(calc(100% + 32px)) !important;
}
#dreamQueuePanel.open {
transform: translateY(0) !important;
}
}
.dream-audio-settings-sheet {
background: rgba(8, 10, 18, .96) !important;
backdrop-filter: blur(18px) saturate(1.15) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
border: 1px solid rgba(255,255,255,.12) !important;
box-shadow: 0 24px 80px rgba(0,0,0,.52) !important;
}
/* ── Share QR Code Section ────────────────────────────────────────── */
.dream-share-qr-section {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 6px 4px;
/* QR library injects an ![]()
and