/* Music Luna | LUNA identity. Familiar music-app layout with its own monochrome direction. */
:root{color-scheme:dark;--bg:#070708;--panel:#111113;--panel2:#19191c;--card:#1c1c1f;--line:#29292d;--text:#f8f8fa;--muted:#aaaab0;--subtle:#818188;--accent:#eae9ee;--accent2:#fff;--green:#c1cfca;--heading:'Manrope','DM Sans',system-ui,sans-serif;--body:'DM Sans',system-ui,sans-serif}
html{background:#070708;scroll-behavior:smooth}
body{background:#070708;color:#f6f6f7;min-height:100vh;overflow:hidden}
button{transition:background .18s ease,color .18s ease,transform .18s ease}
button:focus-visible,input:focus-visible{outline-color:#d6d6dc}
.icon{stroke-width:1.9}
.app-shell{height:calc(100dvh - 94px);min-height:400px;display:grid;grid-template-columns:268px minmax(0,1fr) 292px;gap:8px;padding:8px 8px 0;overflow:hidden}
.sidebar{position:relative;top:auto;height:100%;min-height:0;align-self:stretch;z-index:8;background:#111113;border:1px solid #202023;border-radius:12px;padding:22px 14px 15px;display:flex;flex-direction:column;overflow:hidden}
.brand{padding:6px 11px 16px;margin:0 0 16px;border-bottom:1px solid #232327;display:flex;align-items:center;justify-content:flex-start;gap:10px}
.brand .luna-logo{width:98px;min-width:98px;height:auto;object-fit:contain;filter:drop-shadow(0 1px 12px #fff1)}
.brand .music-luna-wordmark{color:#c6c6cb;font:800 9px/1 var(--heading);letter-spacing:2.5px;border-left:1px solid #555459;padding:4px 0 4px 12px;display:flex;align-items:center;gap:6px}
.music-luna-dot{width:5px;height:5px;background:#bbbcc1;border-radius:50%}
.side-label{padding:0 12px;margin-bottom:9px;color:#68686c;letter-spacing:2.2px;font-size:9px}
.side-nav{display:grid;gap:2px}
.nav-button{padding:10px 12px;border-radius:7px;font-weight:700;font-size:13px;color:#a4a4a9;gap:13px}
.nav-button .icon{height:19px;width:19px}
.nav-button.active{color:#fff;background:#2b2b30}
.nav-button.active .icon{color:#fff}
.nav-button:hover{color:#fff;background:#242428}
.nav-count{color:#dedde0;background:#37373b}
.sidebar-library{min-height:0;overflow-y:auto;flex:1;margin-top:20px;border-top:1px solid #2a2a2d;padding-top:14px;scrollbar-color:#3c3c40 transparent;scrollbar-width:thin}
.library-title{display:flex;align-items:center;justify-content:space-between;padding:0 5px 10px 9px;gap:8px}
.library-title>span{display:flex;align-items:center;gap:10px;font-weight:800;font-size:14px}
.library-title .icon{height:19px;width:19px;color:#c4c4c8}
.library-title button{color:#e5e4e7;padding:7px}
.library-filters{display:flex;gap:6px;padding:0 6px 10px}
.library-filter{border:0;border-radius:50px;color:#d0d0d1;background:#2a2a2c;padding:8px 12px;font-weight:700;font-size:11px}
.library-filter.active{background:#ededf0;color:#141417}
.library-liked,.library-item{border:0;background:transparent;padding:7px 6px;border-radius:7px;color:#f5f5f7;text-align:left;width:100%;display:flex;align-items:center;gap:10px;min-width:0}
.library-liked:hover,.library-item:hover,.library-item.active{background:#27272b}
.liked-art,.library-art{width:45px;height:45px;flex:0 0 45px;display:grid;place-items:center;border-radius:6px;overflow:hidden;background:linear-gradient(130deg,#a0a0a9,#41414b);color:white}
.liked-art{background:linear-gradient(135deg,#dedde5,#706a87);color:#22232b}
.liked-art .icon{fill:currentColor;stroke:none;width:21px;height:21px}
.library-art img{width:100%;height:100%;object-fit:cover}
.library-art .icon{height:19px;width:19px}
.library-liked>span:last-child,.library-item-label{min-width:0;display:flex;flex-direction:column;gap:4px}
.library-liked strong,.library-item-label strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.library-liked small,.library-item-label small{color:#9b9ba2;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.library-hint{font-size:11px;color:#87878e;padding:9px 12px;line-height:1.5}
.library-playlists-only .library-liked{display:none}
.side-bottom{margin-top:11px}
.side-tip{padding:13px 14px;background:linear-gradient(135deg,#252527,#171719);border:1px solid #333337;border-radius:10px}
.side-tip-symbol{height:27px;width:27px;border-radius:7px;background:#37373b;margin-bottom:8px;color:#ededf2}
.side-tip-symbol .icon{height:16px;width:16px}
.side-tip strong{font-size:12px;font-weight:800}
.side-tip p{font-size:10px;line-height:1.5;margin:5px 0 8px;color:#b1b0b7}
.side-tip button{color:#f0f0f3;font-size:10px}
.side-settings{font-size:11px;padding:8px 9px;margin-top:9px;color:#aaaaaf}
.main-area{min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;background:linear-gradient(180deg,#28272d 0%,#17171a 280px,#151518 440px);border:1px solid #252529;border-radius:12px 12px 0 0;max-width:none;margin:0;padding:0 clamp(19px,2.5vw,39px);scrollbar-width:thin;scrollbar-color:#414146 transparent}
.topbar{position:sticky;z-index:12;top:0;display:flex;gap:18px;align-items:center;height:73px;background:#19191ce6;backdrop-filter:blur(25px);margin:0 calc(clamp(19px,2.5vw,39px) * -1);padding:0 clamp(19px,2.5vw,39px);border-bottom:1px solid #ffffff0d}
.topbar-left{flex:0 0 auto}
.topbar-left .eyebrow{display:none}
.topbar-right{flex:0 0 auto;margin-left:auto;gap:6px}
.topbar-mark{font-size:9px;white-space:nowrap;color:#b8b8bc;letter-spacing:.8px}
.pulse-dot{background:#d0d0d2;box-shadow:0 0 0 3px #fff1}
.topbar .search-section{flex:1;max-width:520px;min-width:160px;padding:0;margin:0}
#search-form{height:43px;border-radius:40px;background:#2c2c30;border-color:#38383d;padding:3px 4px 3px 14px}
#search-form:focus-within{border-color:#dad9df;box-shadow:0 0 0 3px #ffffff12}
.search-form-icon{color:#bbbbc1!important;height:20px!important;width:20px!important}
#query{font-size:12px;padding:0 10px}
#query::placeholder{color:#b5b5bb}
.search-submit{height:33px;border-radius:30px;background:#e9e9ec;color:#19191b;font-size:11px;padding:0 12px}
.search-submit:hover,.primary-cta:hover{background:#fff;color:#101012;transform:scale(1.025)}
.search-submit .icon{display:none}
.queue-toggle{display:grid}
.icon-button{color:#c1c1c6;border-radius:50%}
.icon-button:hover{background:#333338}
.now-reopen{display:none}
.now-panel-collapsed .now-reopen{display:grid}
#main-content{padding-top:14px;max-width:1600px;margin:0 auto}
.home-tabs{display:flex;align-items:center;gap:7px;margin:0 0 18px}
.home-tab{font-size:12px;font-weight:700;padding:8px 16px;border:0;border-radius:30px;background:#34343a;color:#e0e0e4}
.home-tab.active{background:#f6f5f8;color:#121216}
.home-tab:hover:not(.active){background:#44434a}
.welcome-row{display:flex;justify-content:space-between;gap:20px;align-items:end;margin:18px 0 16px}
.welcome-row .section-kicker{letter-spacing:2px;font-size:9px;color:#c1bfc8;margin-bottom:10px}
.welcome-row h1{font:800 clamp(29px,2.9vw,43px)/1.12 var(--heading);letter-spacing:-1.7px;margin:0 0 9px}
.welcome-row h1 span{color:#c6c5cc}
.welcome-row p:not(.section-kicker){color:#b5b4bb;font-size:12px;margin:0}
.welcome-action{background:#343439;border:1px solid #55545d;border-radius:30px;padding:10px 16px;color:#fff;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;white-space:nowrap}
.welcome-action:hover{background:#4c4b50}
.welcome-action .icon{width:16px;height:16px}
.home-quick.content-section{margin-top:0}
.quick-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.quick-tile{display:flex;align-items:center;min-width:0;position:relative;gap:11px;height:61px;padding:0 12px 0 0;border:0;border-radius:7px;overflow:hidden;text-align:left;background:#38383d;color:#fff}
.quick-tile:hover{background:#4a494f}
.quick-art{height:61px;width:61px;flex:0 0 61px;display:grid;place-items:center;overflow:hidden;box-shadow:2px 0 14px #0002}
.quick-art img{width:100%;height:100%;object-fit:cover}
.quick-art .icon{width:25px;height:25px;opacity:.9}
.quick-title{font-size:11px;font-weight:800;min-width:0;max-height:38px;overflow:hidden;line-height:1.4}
.quick-play{position:absolute;right:8px;bottom:8px;width:28px!important;height:28px!important;border-radius:50%;background:#f9f9fa;color:#111;fill:#111!important;stroke:none!important;padding:8px;opacity:0;transform:translateY(4px);transition:all .2s}
.quick-tile:hover .quick-play,.quick-tile:focus-visible .quick-play{opacity:1;transform:translateY(0)}
.content-section{margin-top:35px}
.section-heading{margin-bottom:13px}
.section-kicker{font-size:9px;color:#a9a8b1;letter-spacing:1.6px}
.section-heading h2,.view-header h1{font-family:var(--heading);font-weight:800;font-size:23px;letter-spacing:-.8px}
.heading-star{color:#c8c4d7}
.text-link{color:#c9c9cc;font-size:11px}
.mix-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.luna-mix-card{text-align:left;position:relative;min-width:0;border:1px solid #2c2c30;border-radius:10px;background:#212125;padding:10px 10px 13px;display:flex;flex-direction:column;align-items:stretch}
.luna-mix-card:hover{background:#2d2d31;transform:translateY(-2px)}
.luna-mix-cover{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:6px;background:#31313b}
.luna-mix-cover::before{content:'';position:absolute;width:78%;height:78%;border-radius:50%;border:1px solid #ffffff52;transform:translate(21%,30%);box-shadow:0 0 0 14px #fff0,0 0 0 28px #ffffff13,0 0 0 52px #ffffff0c;z-index:1}
.luna-mix-cover>img{height:100%;width:100%;object-fit:cover;filter:brightness(.6) saturate(.7);position:absolute;inset:0}
.luna-mix-logo,.luna-mix-number,.luna-mix-glyph{z-index:2;position:absolute}
.luna-mix-logo{left:12px;top:12px;font:800 9px var(--heading);letter-spacing:3px}
.luna-mix-number{right:11px;bottom:5px;font:800 clamp(52px,6.3vw,95px)/1 var(--heading);letter-spacing:-8px;color:#fff8}
.luna-mix-glyph{left:12px;bottom:12px;display:grid;place-items:center;opacity:.65}
.luna-mix-glyph .icon{height:32px;width:32px}
.luna-mix-play{position:absolute;right:10px;bottom:10px;width:40px;height:40px;display:grid;place-items:center;background:#f0f0f2;color:#141416;border-radius:50%;z-index:3;opacity:0;transform:translateY(5px)}
.luna-mix-play .icon{fill:#151517;stroke:none;width:18px;height:18px}
.luna-mix-card:hover .luna-mix-play,.luna-mix-card:focus-visible .luna-mix-play{opacity:1;transform:none}
.luna-mix-card>strong{font-weight:800;margin-top:12px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.luna-mix-card>small{font-size:10px;color:#b0afb7;line-height:1.35;margin-top:5px;min-height:26px}
.luna-mix-tag{font-size:9px;color:#919198;letter-spacing:1.6px;font-weight:800;margin-top:10px}
.luna-mix-graphite,.genre-art-graphite{background:linear-gradient(128deg,#292a32,#696775 120%)}
.luna-mix-ice,.genre-art-ice{background:linear-gradient(128deg,#36505f,#91b8bd)}
.luna-mix-violet,.genre-art-violet{background:linear-gradient(128deg,#493c62,#998cb2)}
.luna-mix-copper,.genre-art-copper{background:linear-gradient(128deg,#654f46,#d1a187)}
.luna-mix-forest,.genre-art-forest{background:linear-gradient(128deg,#294541,#77a497)}
.luna-mix-blue,.genre-art-blue{background:linear-gradient(128deg,#243955,#778ea7)}
.luna-mix-warm,.genre-art-warm{background:linear-gradient(128deg,#614f51,#bb8b93)}
.luna-mix-chrome,.genre-art-chrome{background:linear-gradient(128deg,#3b3e42,#b7bec2)}
.luna-mix-earth,.genre-art-earth{background:linear-gradient(128deg,#4c453a,#a3987b)}
.luna-mix-wine,.genre-art-wine{background:linear-gradient(128deg,#552f3b,#9b6171)}
.luna-mix-midnight,.genre-art-midnight{background:linear-gradient(128deg,#212b3a,#55657d)}
.luna-mix-slate,.genre-art-slate{background:linear-gradient(128deg,#46464c,#84848a)}
.horizontal-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.music-card{background:#212125;border:1px solid #2c2c30;border-radius:10px;padding:10px}
.music-card:hover{background:#2d2d31}
.music-card-cover{border-radius:6px;background:#33343a}
.music-card-play{background:#f6f6f8;color:#151515}
.music-card .music-card-play .icon{fill:#151515}
.music-card strong{font-size:12px;margin-top:11px}
.music-card small{color:#b5b4bc;font-size:10px}
.radio-card .music-card-cover{background:linear-gradient(130deg,#555260,#222126)}
.genres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.genre-card{position:relative;overflow:hidden;border:1px solid #ffffff1c;text-align:left;border-radius:10px;min-height:123px;padding:17px;background:#333;color:white;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}
.genre-card:hover{filter:brightness(1.2);transform:translateY(-2px)}
.genre-card .genre-title{font:800 clamp(13px,1.3vw,17px)/1.25 var(--heading);z-index:2;max-width:100%;overflow-wrap:anywhere}
.genre-card small{font-size:10px;color:#ffffffbf;margin-top:7px;z-index:2}
.genre-symbol{position:absolute;bottom:-18px;right:-8px;transform:rotate(-24deg);height:98px;width:98px;display:grid;place-items:center;border-radius:50%;background:#ffffff17;border:1px solid #ffffff14;color:#ffffff8a}
.genre-symbol .icon{width:65px;height:65px}
.genre-more{margin-top:12px;display:flex;justify-content:flex-end}
.genre-more .secondary-button{font-size:11px}
.category-group{margin-top:22px}
.category-heading h3{font-size:15px}
.home-filter-hidden{display:none!important}
.view-header{padding:20px 0 25px}
.view-header h1{font-size:30px;letter-spacing:-1.25px}
.view-header p:last-child{color:#b6b5bd}
.track-list{margin-top:10px}
.track-row{display:grid;grid-template-columns:26px 51px minmax(0,1fr) 46px 34px 34px 34px;gap:8px;align-items:center;padding:9px 12px;border-radius:7px}
.track-row:hover,.track-row.is-current{background:#ffffff12}
.track-number{color:#878791;font-size:12px}
.track-cover{border-radius:5px;width:51px;height:51px}
.row-main .row-title{color:#f5f5f7;font-size:12px;font-weight:700}
.row-main .row-artist{color:#a3a3ac;font-size:11px}
.track-row.is-current .row-title{color:#cfcbdc}
.row-action{width:34px;height:34px;border-radius:50%;color:#acacb5}
.row-action:hover{background:#3f3f46;color:white}
.row-action.is-favorite{color:#f7f7fb}
.track-main-play.fallback-art{background:#333338;color:#e2e2e5}
.search-empty,.empty-state{border:1px solid #313136;background:#1b1b20;border-radius:12px}
.results-toolbar{color:#aaaab2;font-size:11px}
.secondary-button{border-color:#555459;background:#28282d;color:#f5f4f7;border-radius:30px}
.secondary-button:hover{background:#3c3b42}
.site-footer{color:#77777f;font-size:10px;margin:45px 0 45px;line-height:1.5}
.now-playing-panel{background:#111113;border:1px solid #202023;border-radius:12px 12px 0 0;padding:19px 16px 18px;height:100%;overflow-y:auto;min-width:0;scrollbar-width:thin;scrollbar-color:#343439 transparent;display:flex;flex-direction:column}
.now-panel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.now-panel-top strong{font-weight:800;font-size:13px}
.now-panel-top .icon{width:17px;height:17px}
.now-art{aspect-ratio:1;width:100%;border-radius:9px;background:radial-gradient(circle at 75% 20%,#404047,#212125 72%);display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.now-art>img{height:100%;width:100%;object-fit:cover}
.now-art-placeholder{display:flex;align-items:center;justify-content:center;gap:14px;flex-direction:column;width:100%;height:100%;background:radial-gradient(circle,#303038,#17171a)}
.now-art-placeholder img{width:58%;height:auto}
.now-art-placeholder span{font-size:10px;color:#b5b5ba;letter-spacing:3px;font-weight:800}
.now-text{margin-top:16px}
.now-text h2{font:800 clamp(17px,1.5vw,22px)/1.25 var(--heading);margin:0 0 6px;letter-spacing:-.5px;overflow-wrap:anywhere}
.now-text p{font-size:12px;color:#ababaf;margin:0;line-height:1.5}
.now-actions{display:flex;align-items:center;gap:8px;margin:15px 0 20px}
.now-action{padding:9px 11px;border:1px solid #48474d;background:#27272b;border-radius:30px;color:#fff;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700}
.now-action:hover{background:#44434a}
.now-action .icon{width:17px;height:17px}
.now-action.is-favorite .icon{fill:white}
.now-reco{background:#222226;border:1px solid #303036;border-radius:10px;padding:15px 12px}
.now-reco .section-kicker{margin-bottom:13px;font-size:9px}
.now-next{display:flex;align-items:center;gap:9px;font-size:11px;color:#c5c4cb;line-height:1.45}
.now-next>img{width:43px;height:43px;flex:0 0 43px;border-radius:5px;object-fit:cover}
.now-next>.icon{width:27px;height:27px;color:#e1e0e8}
.now-next-label{min-width:0;display:flex;flex-direction:column;gap:4px}
.now-next-label strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:195px}
.now-next-label small{color:#9999a2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.now-bottom{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.3px;color:#a2a2a9;margin-top:auto;padding-top:20px}
.now-bottom .icon{height:18px;width:18px}
.now-bottom strong{color:#fff;letter-spacing:1.5px}
.now-panel-collapsed .app-shell{grid-template-columns:268px minmax(0,1fr)}
.now-panel-collapsed .now-playing-panel{display:none}
.queue-panel{background:#1b1b1e;border-left:1px solid #44444a;box-shadow:-20px 0 75px #0007}
.queue-now-cover{background:#303036}
.queue-auto{background:#202023;border-color:#36363a}
.queue-recommend{background:#29292e;color:#bcbcc2}
.queue-item:hover{background:#303034}
.queue-toggle.active,.player-queue-toggle.active{color:#fff}
.player-bar{z-index:20;position:fixed;bottom:0;left:0;right:0;min-height:94px;display:grid;grid-template-columns:minmax(200px,1fr) minmax(300px,1.4fr) minmax(230px,1fr);gap:16px;align-items:center;background:#09090a;border-top:1px solid #303033;padding:13px 24px}
.player-song{min-width:0}
.player-cover-placeholder{border-radius:5px;height:52px;width:52px}
.player-song-info strong{color:#f6f6f7;font-size:12px}
.player-song-info span{font-size:11px;color:#a2a2a9}
.player-center{gap:7px}
.player-controls{gap:18px}
.player-controls .icon{width:20px;height:20px}
.big-play{background:#f3f3f5;color:#151519;width:35px;height:35px}
.big-play:hover{background:#fff}
.big-play .icon{fill:#121212}
.secondary-control.active{color:#fff}
.player-progress{font-size:10px;color:#93939a}
.player-progress input{accent-color:#eeeeef}
.volume-control input{accent-color:#dcdce0}
.player-message{color:#a8a8b0}
.mobile-nav,.mobile-progress{display:none}
.toast{background:#29292d;border-color:#56555f;color:white}
.settings-dialog{background:#1b1b20;border-color:#484850}
.settings-dialog input{background:#111115;border-color:#55545c}
.settings-dialog .dialog-head h2{font-family:var(--heading)}
.settings-backup{margin-top:25px;border-top:1px solid #45454b;padding-top:19px}
.settings-backup>strong{font-size:12px}
.settings-backup p{color:#aaaab3;font-size:11px;line-height:1.6;margin:8px 0 13px}
.settings-backup-buttons{display:flex;flex-wrap:wrap;gap:9px}
.settings-backup-buttons .secondary-button{display:flex;align-items:center;gap:7px;padding:9px 13px;font-size:11px;cursor:pointer}
.settings-backup-buttons .icon{width:16px;height:16px}
.playlist-dialog{max-width:min(94vw,450px)}
.dialog-buttons{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.dialog-buttons .primary-cta{height:41px}
.playlist-picker{display:grid;gap:5px;max-height:270px;overflow:auto;margin:20px 0 12px}
.picker-item{display:flex;align-items:center;gap:12px;width:100%;border:0;background:#29292e;padding:8px;border-radius:7px;text-align:left}
.picker-item:hover{background:#42424a}
.picker-item>span:nth-child(2){flex:1}
.picker-item>.icon{width:16px}
.picker-empty{font-size:12px;color:#aaaab1}
#add-dialog-create{display:flex;align-items:center;gap:8px}
#add-dialog-create .icon{width:17px;height:17px}
.playlist-hero{display:flex;gap:25px;align-items:end;margin:20px 0 30px}
.playlist-art{width:190px;height:190px;flex:0 0 190px;border-radius:9px;background:linear-gradient(140deg,#77717b,#29292d);display:grid;place-items:center;box-shadow:0 11px 38px #0008;overflow:hidden}
.playlist-art .icon{width:60px;height:60px}
.playlist-art img{width:100%;height:100%;object-fit:cover}
.playlist-hero h1{font:800 clamp(27px,3vw,42px)/1.1 var(--heading);letter-spacing:-1.4px;margin:0 0 13px;overflow-wrap:anywhere}
.playlist-hero p{font-size:12px;color:#b2b1ba}
.playlist-info{font-weight:700}
.playlist-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.playlist-actions .primary-cta{height:42px}
.playlist-actions .secondary-button{height:42px;display:flex;align-items:center;gap:7px;padding:0 12px;font-size:11px}
.playlist-actions .icon{width:16px;height:16px}
.discover-intro{min-height:225px;padding:28px 30px;background:linear-gradient(110deg,#27262d,#3c3a46 70%,#23232a);border:1px solid #50505a;border-radius:13px;overflow:hidden;display:flex;align-items:center;position:relative}
.discover-intro>div:first-child{z-index:2;max-width:400px}
.discover-intro h2{font:800 clamp(22px,2.5vw,32px)/1.15 var(--heading);margin:8px 0}
.discover-intro p{font-size:12px;color:#d1ced6;line-height:1.55;max-width:320px;margin-bottom:18px}
.discover-orbit{font-size:25px;color:white}
.discover-visual{position:absolute;right:0;top:0;height:100%;width:38%;display:grid;place-items:center;pointer-events:none;opacity:.75}
.moon-disc{width:190px;height:190px;border:1px solid #fff4;border-radius:50%;background:radial-gradient(circle at 33% 31%,#fff9,#9999a740 42%,#19191c 75%);box-shadow:0 0 0 23px #ffffff0a,0 0 0 57px #ffffff09;transform:rotate(-22deg)}
.discover-status{font-size:12px;color:#b1b0b9;line-height:1.6;margin:5px 0 13px}
.genres-expanded{grid-template-columns:repeat(4,minmax(0,1fr))}
.video-fallback{border-color:#66666a;background:#19191e}
.video-fallback-head strong,.video-fallback-bottom a{color:#e5e5e7}
.video-fallback-head button{background:#414145}
@media(max-width:1450px){.app-shell{grid-template-columns:234px minmax(0,1fr) 256px}.now-panel-collapsed .app-shell{grid-template-columns:234px minmax(0,1fr)}.sidebar{padding:18px 10px 12px}.brand .luna-logo{width:88px;min-width:88px}.brand{gap:8px}.quick-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.genres,.genres-expanded{grid-template-columns:repeat(3,minmax(0,1fr))}.topbar-mark{display:none}.player-message{display:none}}
@media(max-width:1200px){.app-shell,.now-panel-collapsed .app-shell{grid-template-columns:230px minmax(0,1fr)}.now-playing-panel{display:none}.now-reopen{display:none!important}.mix-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.main-area{padding-left:25px;padding-right:25px}.topbar{margin:0 -25px;padding:0 25px}.player-bar{grid-template-columns:minmax(170px,1fr) minmax(300px,1.3fr) minmax(140px,.8fr)}.player-right{gap:9px}.volume-control input{width:63px}}
@media(max-width:950px){.mix-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.luna-mix-card:nth-child(4){display:none}.horizontal-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.genres,.genres-expanded{grid-template-columns:repeat(3,minmax(0,1fr))}.player-bar{grid-template-columns:minmax(150px,1fr) minmax(250px,1.5fr) auto}.player-right .volume-control{display:none}.track-row{grid-template-columns:20px 46px minmax(0,1fr) 39px 30px 30px 30px;gap:5px;padding:8px 7px}.track-cover{width:46px;height:46px}}
@media(max-width:760px){body{overflow:auto}.app-shell,.now-panel-collapsed .app-shell{display:block;height:auto;min-height:calc(100dvh - 140px);padding:0;overflow:visible}.sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;width:min(310px,86vw);border-radius:0 14px 14px 0;transform:translateX(-105%);transition:transform .25s;z-index:28;padding:20px 13px;box-shadow:20px 0 50px #000a}.sidebar.open{transform:translateX(0)}.sidebar-library{min-height:100px}.side-tip{padding:13px}.main-area{overflow:visible;min-height:100vh;max-width:100%;border:0;border-radius:0;padding:0 16px;background:linear-gradient(180deg,#252429,#151518 340px)}.topbar{position:sticky;top:0;z-index:13;height:63px;background:#17171be8;margin:0 -16px;padding:0 12px;gap:8px}.topbar-left{flex:none}.mobile-menu{display:grid!important;width:35px;height:35px}.topbar .search-section{flex:1;min-width:0;max-width:none}.topbar-right{margin-left:0;gap:0}.topbar .queue-toggle{display:grid}.topbar .search-form-icon{width:18px!important;height:18px!important}#search-form{height:39px;padding:2px 4px 2px 10px;border-radius:24px}#query{font-size:12px;padding:0 6px}#query::placeholder{font-size:11px}.search-submit{height:31px;width:32px;border-radius:50%;padding:0;font-size:0}.search-submit .icon{display:block;width:16px;height:16px}.topbar-mark,.eyebrow{display:none}.queue-toggle .icon{height:19px;width:19px}#main-content{padding-top:16px}.home-tabs{margin-bottom:16px}.home-tab{font-size:11px;padding:7px 13px}.welcome-row{margin:13px 0 20px;align-items:flex-start}.welcome-row h1{font-size:clamp(25px,7vw,33px)}.welcome-row h1 span{display:block}.welcome-row p:not(.section-kicker){font-size:11px}.welcome-row .section-kicker{font-size:8px;letter-spacing:1px}.welcome-action{padding:10px;gap:5px;font-size:0;margin-top:11px}.welcome-action .icon{width:17px;height:17px}.quick-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.quick-tile{height:54px;gap:7px}.quick-art{width:54px;height:54px;flex:0 0 54px}.quick-title{font-size:10px;padding-right:5px;max-height:38px}.quick-play{display:none}.content-section{margin-top:29px}.section-heading h2{font-size:21px}.section-kicker{font-size:8px}.mix-grid{display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}.mix-grid::-webkit-scrollbar{display:none}.luna-mix-card,.luna-mix-card:nth-child(4){display:flex;flex:0 0 154px;scroll-snap-align:start;padding:9px}.luna-mix-cover{height:135px;aspect-ratio:auto}.luna-mix-number{font-size:75px}.luna-mix-play{opacity:1;transform:none;width:32px;height:32px}.luna-mix-card>strong{font-size:12px}.luna-mix-card>small{font-size:10px}.horizontal-cards{display:flex;gap:10px}.music-card{flex:0 0 146px;padding:8px}.music-card-play{background:#fff;opacity:1;transform:none}.genres,.genres-expanded{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.genre-card{min-height:113px;padding:14px}.genre-card .genre-title{font-size:15px}.site-footer{margin-bottom:176px;padding-bottom:15px}.view-header{padding:8px 0 20px}.view-header h1{font-size:26px}.track-row{grid-template-columns:18px 43px minmax(0,1fr) 29px 29px 29px;gap:5px;padding:7px 1px}.track-number{font-size:10px}.track-cover{width:43px;height:43px}.track-main-play{width:43px;height:43px}.row-duration{display:none}.row-main .row-title{font-size:11px}.row-main .row-artist{font-size:10px}.row-action{height:29px;width:29px}.row-action .icon{width:16px;height:16px}.row-action-playlist .icon{width:14px;height:14px}.results-toolbar{gap:5px}.queue-panel{z-index:34;top:auto;bottom:0;height:min(91dvh,850px);border-left:0;border-radius:22px 22px 0 0;transform:translateY(104%)}.queue-panel.open{transform:translateY(0)}.player-bar{grid-template-columns:minmax(0,1fr) auto;bottom:calc(61px + env(safe-area-inset-bottom));min-height:64px;padding:7px 12px;gap:8px;border-radius:11px 11px 0 0;background:#26262a;border:1px solid #44434b;border-bottom:0;z-index:21}.player-cover-placeholder{width:43px;height:43px}.player-song-info strong{font-size:11px}.player-song-info span{font-size:10px}.player-center{width:auto}.player-center .player-controls{gap:4px}.player-controls .secondary-control:not(#next-button){display:none}.player-center .player-progress{display:none}.player-right{display:none}.big-play{width:34px;height:34px}.player-controls .icon{width:17px;height:17px}.mobile-nav{display:grid;grid-template-columns:repeat(4,1fr);background:#0e0e10;border-top:1px solid #303034;height:calc(61px + env(safe-area-inset-bottom));z-index:21}.mobile-nav-item{font-size:10px;color:#92929a}.mobile-nav-item.active{color:#fff}.mobile-progress{display:block;bottom:calc(125px + env(safe-area-inset-bottom));z-index:22;background:#6a6870}.mobile-progress div{background:#fff}.overlay{z-index:26}.toast{bottom:150px}.discover-intro{padding:22px 18px;min-height:225px}.discover-intro h2{font-size:25px}.discover-intro p{font-size:11px;max-width:230px}.discover-visual{right:-48px;opacity:.45}.moon-disc{width:150px;height:150px}.playlist-hero{gap:14px;align-items:center;margin:14px 0 25px}.playlist-art{width:104px;height:104px;flex-basis:104px}.playlist-art .icon{width:33px;height:33px}.playlist-hero h1{font-size:25px;margin-bottom:7px}.playlist-hero p{font-size:10px}.playlist-actions{gap:5px}.playlist-actions .secondary-button,.playlist-actions .primary-cta{height:32px;padding:0 9px;font-size:10px}.playlist-actions .icon{width:13px;height:13px}.video-fallback{z-index:35;bottom:calc(135px + env(safe-area-inset-bottom))}}
@media(max-width:390px){.main-area{padding:0 12px}.topbar{margin:0 -12px;padding:0 6px}.topbar .queue-toggle{padding:6px}.quick-art{width:45px;height:50px;flex-basis:45px}.quick-tile{height:50px}.quick-title{font-size:9px}.track-row{grid-template-columns:15px 38px minmax(0,1fr) 27px 27px 27px;gap:3px}.track-cover,.track-main-play{height:38px;width:38px}.row-action{width:27px;height:27px}.row-action .icon{width:14px;height:14px}.welcome-row h1{font-size:25px}}
@media(prefers-reduced-motion:reduce){.luna-mix-card,.genre-card,.quick-play{transition:none}}
/* Final brand consistency */
.primary-cta{background:#f2f2f3;color:#151518}
.primary-cta .icon{color:#151518}
.player-cover-placeholder{background:linear-gradient(135deg,#4e4d56,#222229);color:#e7e6ed}
#cover-placeholder{color:#e7e6ed}