/* Shared mobile palette and liquid glass. See DESIGN-SYSTEM.md. */
:root{--glass-fill:color-mix(in srgb,var(--surface) 74%,transparent);--glass-edge:color-mix(in srgb,var(--text) 16%,transparent);--glass-highlight:color-mix(in srgb,var(--text) 10%,transparent);--space-page:clamp(20px,3vw,44px)}
.desktop-navigation,.desktop-settings{display:none}
body.desktop-app{--bg:#08090b;--surface:#15171b;--control:#24262c;--muted:#aeb4bf;--text:#f4f5f8;--border:#ffffff19;background:var(--bg)}
html[data-theme=light] body.desktop-app{--bg:#f6f7f9;--surface:#fff;--control:#eceef3;--muted:#626b78;--text:#202329;--border:#dfe3e9}
.dock,.desktop-navigation,.profile-menu,.chip,.explore-tabs,.shelf-arrow,.desktop-settings{border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-highlight),0 8px 24px #0000000c;backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4)}
.dock{background:var(--glass-fill)!important}.dock button.active,.desktop-navigation button.selected{background:var(--aura-spectrum)!important;color:#202333!important}
.profile-menu{background:color-mix(in srgb,var(--surface) 90%,transparent)!important}.account-settings-menu .menu-links,.account-settings-menu .menu-account{background:transparent!important}.account-settings-menu .menu-links button{color:var(--text)!important}.menu-browse-links{border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:8px}
.discovery-shortcuts{display:flex;gap:10px;margin:0 0 26px}.discovery-shortcuts .chip{display:flex;gap:8px;align-items:center}.discovery-shortcuts .icon{width:16px;height:16px}
.wallpaper-shelf,.category-browser{margin:0 0 34px}.wallpaper-shelf .section-head{margin:0 0 16px!important;gap:12px}.section-head h2{line-height:1.3}.shelf-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.shelf-actions .text-btn{font-size:13px;white-space:nowrap}.shelf-arrow{height:32px;width:32px;min-height:32px;background:var(--glass-fill);padding:7px;border-radius:50%;display:grid;place-items:center}.shelf-arrow .icon{width:16px;height:16px;transform:rotate(180deg)}.shelf-arrow.next .icon{transform:none}
.wallpaper-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0;scrollbar-width:none;padding-bottom:4px;overscroll-behavior-x:contain}.wallpaper-track::-webkit-scrollbar{display:none}.wallpaper-track>.wall{scroll-snap-align:start}
.category-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.category-tiles>button{position:relative;aspect-ratio:1.65;border-radius:22px;overflow:hidden;padding:0;background:var(--surface);text-align:left}.category-tiles img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.category-tiles span{position:absolute;inset:0;display:flex;align-items:flex-end;padding:20px;font-size:23px;font-weight:650;color:white;background:linear-gradient(transparent,#0009)}.category-tiles button:hover img{transform:scale(1.04)}
.explore-page .explore-banner{height:260px;position:relative;overflow:hidden;border-radius:26px;margin-bottom:24px}.explore-banner>img{width:100%;height:100%;object-fit:cover}.explore-banner>div{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#07151c88;color:white;text-align:center}.explore-banner h1{font-size:44px;margin:8px 0!important;letter-spacing:-1px}.explore-banner p{margin:0;font-size:15px}.eyebrow{letter-spacing:2px;font-size:10px;font-weight:600}.explore-controls{margin-bottom:24px}.explore-search{display:flex;align-items:center;gap:12px;max-width:540px;border:1px solid var(--glass-edge);border-radius:26px;padding:0 16px;background:var(--glass-fill);margin-bottom:18px}.explore-search .icon{width:20px;height:20px}.explore-search input{border:0!important;background:transparent!important;margin:0;outline:none;min-height:46px;width:100%;font-size:14px!important}.explore-page .category-browser{margin-top:36px}
.playlists-page>.section-head{align-items:center;margin-bottom:24px}.playlists-page h1,.playlist-detail h1{font-size:30px;margin:0 0 8px}.playlists-page .section-head p{color:var(--muted);font-size:14px;margin:0}.playlist-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.playlist-card>button{width:100%;aspect-ratio:1.7;border-radius:22px;position:relative;overflow:hidden;padding:0}.playlist-card img{width:100%;height:100%;object-fit:cover}.playlist-card>button>span{position:absolute;inset:0;display:flex;align-items:flex-end;padding:20px;background:linear-gradient(transparent,#0009);font-size:22px;font-weight:600;color:#fff}.playlist-card-actions{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;color:var(--muted)}
.pair-section{margin-top:36px;padding-top:28px;border-top:1px solid var(--border)}.pair-section .section-head{align-items:center;margin-bottom:18px}.pair-section h2{font-size:24px;margin:0 0 8px}.wallpaper-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:760px}.pair-card{position:relative;height:180px;padding:0;border:1px solid var(--glass-edge);overflow:hidden;border-radius:22px;text-align:left;background:var(--surface)}.pair-card>img{width:100%;height:100%;object-fit:cover}.pair-card>img.pair-placeholder{object-fit:contain;opacity:.65;padding:16px;box-sizing:border-box}.pair-card>span{position:absolute;inset:0;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;background:linear-gradient(transparent,#05070bcc);color:white}.pair-card small{font-size:12px}.pair-card>.icon{position:absolute;top:14px;right:14px;width:20px;height:20px;color:white}.pair-toggle{display:flex;align-items:center;gap:12px;font-size:12px}.pair-toggle input{width:34px;height:22px;min-height:0!important;accent-color:#c6d6f7}.pair-note{margin:20px 0 32px!important;line-height:1.6}
.playlist-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-height:44vh;overflow-y:auto;padding:4px}.playlist-picker label{position:relative;cursor:pointer;border:2px solid transparent;overflow:hidden;border-radius:14px;min-width:0;margin:0}.playlist-picker label:has(input:checked){border-color:#c7d7ff}.playlist-picker img{width:100%;height:100px;object-fit:cover;display:block}.playlist-picker span{font-size:11px;display:block;padding:8px;line-height:1.4}.playlist-picker input{position:absolute;top:8px;right:8px;width:18px!important;height:18px!important;min-height:0!important;margin:0;accent-color:#bde7ec}.playlist-editor input[name=name]{display:block;width:100%;margin-top:8px}.playlist-editor fieldset{border:0;padding:0;margin:22px 0}.playlist-editor legend{font-size:14px;margin-bottom:12px}.playlist-editor .primary{width:100%}.pair-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-height:65vh;overflow:auto}.pair-picker-grid button{padding:0;overflow:hidden;border-radius:14px;background:var(--surface);color:var(--text)}.pair-picker-grid img{height:120px;width:100%;object-fit:cover}.pair-picker-grid span{display:block;font-size:11px;padding:8px}
.settings-workspace{display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px;max-width:1180px;margin:0 auto;align-items:start}.settings-sidebar{position:sticky;top:110px;display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--glass-edge);background:var(--glass-fill);border-radius:24px}.settings-sidebar>img:first-child{width:42px;height:42px;border-radius:12px}.settings-sidebar h1{font-size:24px;margin:10px 0 18px}.settings-sidebar button{display:flex;gap:10px;align-items:center;min-height:44px;text-align:left;padding:10px;border-radius:12px;font-size:13px;background:none;color:var(--text)}.settings-sidebar button:hover{background:var(--control)}.settings-sidebar button .icon{width:17px;height:17px}.settings-sidebar .settings-art{width:140px;height:120px;object-fit:contain;margin:24px auto 0}.settings-detail .settings-hub{max-width:none;padding:0 0 48px!important}.settings-detail .settings-hub>.section-head{display:none}.settings-detail .settings-group{padding:24px!important;margin-bottom:18px!important;border:1px solid var(--glass-edge)!important;border-radius:22px;background:color-mix(in srgb,var(--surface) 86%,transparent);scroll-margin-top:108px}.settings-detail .settings-group h2{color:var(--text);font-size:18px;margin-bottom:14px}.settings-detail .setting-row{font-size:14px}.settings-detail .setting-row small{font-size:12px}.settings-detail .setting-link{font-size:14px}.settings-detail .settings-group:first-child{padding-top:24px!important}
.discover-hero,.illustrated-onboarding{touch-action:pan-y pinch-zoom}.wallpaper-track,.shelf-track,.filters,.desktop-feature-strip{overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.shelf-track>.collection,.filters>.chip{scroll-snap-align:start}
@media(min-width:1000px){body.wide-app>header{background:color-mix(in srgb,var(--bg) 78%,transparent)!important;height:84px!important;min-height:84px!important;padding:0 30px!important;backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6)}body.wide-app .brand{color:var(--text)!important;min-width:150px!important;font-size:23px!important}.wide-app .desktop-navigation{display:flex!important;background:var(--glass-fill);gap:2px}.wide-app .desktop-navigation button{padding:7px 13px;min-height:34px;font-size:12px;color:var(--text)}body.wide-app .header-actions{gap:8px}.wide-app .desktop-settings{display:grid!important}.wide-app .desktop-navigation button:hover:not(.selected){background:var(--control)}body.wide-app .mobile-search,body.wide-app .desktop-settings{color:var(--text)!important;background:var(--glass-fill)!important}.wide-app .shared-discover .wallpaper-track .wall-image{aspect-ratio:1.35!important}.wide-app .settings-workspace{padding-top:12px}.wide-app .wallpaper-track .wall-caption .wall-name{font-size:14px!important}}
@media(min-width:701px) and (max-width:999px){.desktop-navigation,.desktop-settings{display:none!important}.wallpaper-track{grid-auto-columns:calc((100% - 36px)/3);gap:18px}.category-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-workspace{grid-template-columns:180px minmax(0,1fr);gap:20px}.settings-sidebar{top:90px;padding:14px}.settings-sidebar button{font-size:12px}.settings-detail .settings-group{padding:20px!important}.playlist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.desktop-navigation,.desktop-settings{display:none!important}.shared-discover{padding-top:22px!important}.discovery-shortcuts{margin-bottom:24px}.discovery-shortcuts .chip{font-size:12px;min-height:40px;padding:8px 14px}.wallpaper-track{grid-auto-columns:calc((100% - 14px)/2.1);gap:14px}.wallpaper-shelf{margin-bottom:28px}.wallpaper-shelf .section-head h2{font-size:22px}.shelf-arrow{display:none}.shelf-actions .text-btn{font-size:12px;min-height:36px;padding:0}.category-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.category-tiles span{font-size:18px;padding:14px}.category-tiles>button{aspect-ratio:1.2;border-radius:20px}.explore-banner h1{font-size:34px}.explore-page .explore-banner{height:210px;border-radius:24px}.explore-controls{margin-bottom:18px}.explore-search{max-width:none}.explore-page .filters{margin-bottom:0}.settings-workspace{display:block}.settings-sidebar{display:none}.settings-detail .settings-hub>.section-head{display:flex}.settings-detail .settings-group{padding:18px!important;margin-bottom:14px!important;border-radius:20px}.settings-detail .settings-group h2{font-size:16px}.settings-detail .setting-row{gap:14px}.settings-detail .setting-row small{max-width:240px}.settings-detail .settings-hub{padding-top:0!important}.playlists-page>.section-head{align-items:flex-start;flex-direction:column;gap:16px}.playlists-page>.section-head .primary{font-size:13px;min-height:44px;padding:10px 16px}.playlists-page h1{font-size:27px}.playlist-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.playlist-card>button{aspect-ratio:1;border-radius:20px}.playlist-card>button>span{padding:14px;font-size:18px}.pair-section .section-head{align-items:flex-start;flex-direction:column;gap:12px}.pair-section h2{font-size:22px}.pair-section .section-head p{font-size:13px;line-height:1.5}.wallpaper-pair{gap:14px}.pair-card{height:170px}.pair-card>span{padding:14px}.pair-card strong{font-size:13px}.pair-card small{font-size:11px}.pair-picker-grid,.playlist-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.playlist-editor h2{font-size:24px}.playlists-page .profile-empty{min-height:280px}.menu-browse-links{display:grid;grid-template-columns:1fr 1fr}.account-settings-menu .menu-browse-links button{font-size:12px!important;padding:10px 8px!important;gap:8px!important}.account-settings-menu .menu-browse-links .icon{height:17px;width:17px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.category-tiles img{transition:none!important}}

.fullscreen-wall{touch-action:none}.discover-hero>img{animation:feature-arrive .25s ease-out}@keyframes feature-arrive{from{opacity:.65}to{opacity:1}}@media(prefers-reduced-motion:reduce){.discover-hero>img{animation:none}}

.pair-slot{min-width:0}.pair-slot .pair-card{width:100%}.pair-slot>.text-btn{font-size:12px;margin-top:4px}

.shelf-arrow .icon{transform:rotate(90deg)}.shelf-arrow.next .icon{transform:rotate(-90deg)}.explore-banner p{color:#fff!important}.explore-banner .eyebrow{color:#ffffffe6}

html[data-theme=light] header .brand{color:#202329!important;-webkit-text-fill-color:#202329!important;text-shadow:none!important}html[data-theme=light] header .brand .mark{-webkit-text-fill-color:initial!important}

@media(min-width:1000px){body.wide-app header .brand{position:static!important;inset:auto!important;transform:none!important;width:auto!important;display:flex!important;gap:8px;text-shadow:none!important}body.wide-app header .brand .mark{display:inline-grid!important}body.wide-app header .header-actions{width:auto!important;margin-left:auto!important;position:static!important}body.wide-app header #profile-menu-root{position:static!important;inset:auto!important}body.wide-app header .mobile-search,body.wide-app header .desktop-settings{position:static!important;inset:auto!important}body.wide-app header{color:var(--text)!important;text-shadow:none!important}}
body[data-view=onboarding]>header,body[data-view=account]>header,body[data-view=wallpaper]>header{display:none!important}body[data-view=profile] .desktop-navigation,body[data-view=onboarding] .desktop-navigation,body[data-view=account] .desktop-navigation,body[data-view=wallpaper] .desktop-navigation{display:none!important}

@media(min-width:1000px){.wide-app .playlists-page .illustrated-empty{min-height:220px!important;max-width:760px;display:grid!important;grid-template-columns:130px minmax(0,1fr);gap:12px 24px;text-align:left;justify-items:start;padding:28px!important}.wide-app .playlists-page .illustrated-empty>.empty-art{grid-row:span 2;width:130px;height:140px;margin:0}.wide-app .playlists-page .illustrated-empty>p{margin:0;align-self:end}.wide-app .playlists-page .illustrated-empty>button{align-self:start}.wide-app .playlists-page .empty.illustrated-empty{min-height:180px!important}}