@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

:root{
  --bg:#07080b;--panel:rgba(15,17,22,.82);--panel-2:rgba(20,22,29,.9);
  --line:rgba(255,255,255,.1);--line-strong:rgba(255,255,255,.18);
  --text:#f4f4f6;--muted:#878994;--dim:#60626d;--pink:#e7afc7;
  --ease:cubic-bezier(.16,1,.3,1);--sidebar:250px;--player:118px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;background:radial-gradient(circle at 70% 15%,rgba(231,175,199,.08),transparent 28%),radial-gradient(circle at 10% 80%,rgba(100,145,255,.06),transparent 30%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;background:linear-gradient(rgba(255,255,255,.018),transparent 50%);mix-blend-mode:soft-light}
button,input{font:inherit}button{border:0;background:none;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
button:focus-visible,input:focus-visible{outline:1px solid var(--pink);outline-offset:2px}
::selection{background:rgba(231,175,199,.25);color:#fff}

.background-image{position:fixed;inset:-2%;z-index:-3;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:.34;transform:scale(1.025);will-change:transform}
.background-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,5,8,.38),rgba(4,5,8,.72) 78%,#07080b),radial-gradient(circle at 55% 35%,transparent 0,rgba(3,4,7,.24) 70%)}
.ambient{position:fixed;border-radius:50%;pointer-events:none;filter:blur(70px);opacity:.16;z-index:-1}
.ambient-a{width:34vw;height:34vw;left:-15vw;top:30vh;background:#7f5cff}.ambient-b{width:28vw;height:28vw;right:-12vw;top:55vh;background:#53a8ff}
.grain{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E")}

.glass{background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.025)),var(--panel);border:1px solid var(--line);box-shadow:inset 0 1px rgba(255,255,255,.07),0 22px 70px rgba(0,0,0,.22)}
@supports(backdrop-filter:blur(1px)){.topbar,.sidebar,.player,.modal,.first-run-card{backdrop-filter:blur(var(--glass-blur,16px)) saturate(115%);-webkit-backdrop-filter:blur(var(--glass-blur,16px)) saturate(115%)}}

.app-shell{min-height:100vh}.main{min-height:100vh;margin-left:var(--sidebar);padding:0 0 calc(var(--player) + 55px)}
.sidebar{position:fixed;left:16px;top:16px;bottom:16px;width:calc(var(--sidebar) - 30px);z-index:70;padding:14px;border-radius:20px;display:flex;flex-direction:column;gap:16px;overflow:hidden}
.brand{display:flex;align-items:center;gap:9px;padding:7px 5px 18px;font-weight:800;font-size:15px;letter-spacing:-.04em;text-align:left}.brand span{color:var(--pink)}
.sidebar .brand::after{content:"";width:6px;height:6px;margin-left:auto;border-radius:50%;background:var(--pink);box-shadow:0 0 16px rgba(231,175,199,.7)}
.nav{display:grid;gap:4px}.nav-item{width:100%;display:grid;grid-template-columns:24px 1fr;align-items:center;gap:8px;padding:11px 10px;border-radius:11px;color:var(--muted);font-size:10px;text-align:left;transition:.22s var(--ease)}.nav-item:hover{color:#fff;background:rgba(255,255,255,.04);transform:translateX(2px)}.nav-item.active{color:#fff;background:rgba(255,255,255,.075)}.nav-item>span{font-size:14px}.nav-item.subtle{margin-top:auto}
.sidebar-title{display:flex;justify-content:space-between;align-items:center;padding:10px 5px 5px;color:var(--dim);font:500 8px "DM Mono";letter-spacing:.13em}.icon-button{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;color:var(--muted);transition:.2s}.icon-button:hover{color:#fff;background:rgba(255,255,255,.06)}
.sidebar-playlists{display:grid;gap:3px;overflow:auto;min-height:0}.sidebar-playlist{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:9px;padding:6px;border-radius:10px;text-align:left;color:var(--muted);font-size:10px}.sidebar-playlist:hover{background:rgba(255,255,255,.045);color:#fff}.sidebar-playlist img,.sidebar-playlist .fallback-art{display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.13),transparent 38%),linear-gradient(145deg,#24262a,#08090b)}.fallback-art{display:grid;place-items:center;background:linear-gradient(135deg,#6650aa,#161821);font-weight:800;color:#fff}

.topbar{position:fixed;z-index:60;left:calc(var(--sidebar) + 16px);right:16px;top:16px;height:58px;padding:7px 8px;border-radius:16px;display:flex;align-items:center;gap:9px}
.home-top-button{height:42px;padding:0 11px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:11px;color:var(--muted);font:500 8px "DM Mono";letter-spacing:.08em}.home-top-button:hover{color:#fff;background:rgba(255,255,255,.05)}
.top-search{height:42px;flex:1;display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025)}.top-search:focus-within{border-color:rgba(231,175,199,.35);background:rgba(255,255,255,.045)}.top-search>span{color:#71737d;font-size:18px}.top-search input{width:100%;min-width:0;border:0;outline:0;background:none;color:#fff;font-size:11px}.top-search input::placeholder{color:#656773}.top-search kbd{color:#61636d;border:1px solid var(--line);border-radius:6px;padding:3px 5px;font:500 7px "DM Mono"}
.top-actions{display:flex;align-items:center;gap:5px}.round-button,.status-pill,.profile-chip{height:38px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025);color:var(--muted);transition:.2s}.round-button{width:38px}.round-button:hover,.profile-chip:hover,.status-pill:hover{color:#fff;background:rgba(255,255,255,.055)}
.status-pill{padding:0 9px;display:flex;align-items:center;gap:6px;font:500 7px "DM Mono";letter-spacing:.08em}.status-pill>span{width:5px;height:5px;border-radius:50%;background:#666}.status-pill.connected{color:#bfe8d2;border-color:rgba(111,224,173,.2)}.status-pill.connected>span{background:#6fe0ad;box-shadow:0 0 10px rgba(111,224,173,.6)}
.profile-chip{padding:3px 8px 3px 4px;display:flex;align-items:center;gap:6px;font:500 7px "DM Mono";letter-spacing:.06em}.profile-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#fff,#cda5b8);color:#090a0e;font:800 10px Manrope}

.view{display:none;animation:viewIn .38s var(--ease) both}.view.active{display:block}@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.hero{min-height:100vh;padding:150px 7vw 45px;display:flex;align-items:flex-end;position:relative;isolation:isolate}.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 40% 50%,rgba(255,255,255,.055),transparent 30%)}
.hero-copy{max-width:950px}.eyebrow{font:500 8px "DM Mono";letter-spacing:.16em;color:#6b6d77;text-transform:uppercase}.hero h1{margin:18px 0 24px;font-size:clamp(68px,9.6vw,150px);line-height:.82;letter-spacing:-.095em;font-weight:700}.hero h1 em{font:500 1.02em "Playfair Display";color:#efcad9}.hero p{max-width:560px;margin:0;color:#a7a9b2;font-size:13px;line-height:1.8}.hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.primary-button,.ghost-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:13px;padding:0 14px;border-radius:11px;border:1px solid var(--line);font:500 8px "DM Mono";letter-spacing:.1em;transition:.25s var(--ease)}.primary-button{background:#f3f3f5;color:#090a0e;border-color:#fff}.ghost-button{background:rgba(255,255,255,.035);color:#d0d1d8}.primary-button:hover,.ghost-button:hover{transform:translateY(-2px);box-shadow:0 15px 38px rgba(0,0,0,.22)}
.section{padding:90px 0 75px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 7vw 24px}.section-heading h2,.page-head h2{margin:16px 0 0;font-size:clamp(56px,7vw,110px);line-height:.84;letter-spacing:-.09em;font-weight:600}.section-heading h2 em,.page-head h2 em{font:500 1.02em "Playfair Display";color:#ecc5d6}.text-button{color:#858792;font:500 8px "DM Mono";letter-spacing:.08em}.text-button:hover{color:#fff}

.carousel-frame{position:relative}.playlist-carousel{position:relative;display:block;overflow:visible;padding:0;min-height:470px;height:610px;touch-action:pan-y;cursor:grab;perspective:1100px}.playlist-carousel:active{cursor:grabbing}
.playlist-card{position:relative;height:400px;padding:7px;scroll-snap-align:center;border:1px solid var(--line);border-radius:22px;background:#090a0e;color:#fff;text-align:left;overflow:hidden;transform-style:preserve-3d;transition:transform .22s ease,opacity .2s ease,border-color .22s ease,box-shadow .22s ease;will-change:transform}.playlist-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 28%,rgba(0,0,0,.65) 100%)}.playlist-card.is-center{border-color:rgba(231,175,199,.5);box-shadow:0 35px 90px rgba(0,0,0,.46)}
.playlist-art{position:absolute;inset:7px;border-radius:16px;overflow:hidden;background:#111}.playlist-art img{width:100%;height:100%;object-fit:cover;opacity:.9}.playlist-card.is-center .playlist-art img{opacity:1}.playlist-card-number{position:absolute;right:16px;top:16px;z-index:2;padding:5px 7px;border:1px solid rgba(255,255,255,.14);border-radius:7px;background:rgba(0,0,0,.35);font:500 8px "DM Mono"}.playlist-meta{position:absolute;z-index:2;left:20px;right:20px;bottom:20px;text-shadow:0 5px 22px #000}.playlist-meta small,.playlist-meta span{display:block;font:500 7px "DM Mono";letter-spacing:.12em;color:rgba(255,255,255,.58)}.playlist-meta strong{display:block;margin:7px 0;font-size:26px;letter-spacing:-.05em}.carousel-arrow{position:absolute;z-index:15;top:50%;transform:translateY(-50%);width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:rgba(8,9,13,.9);color:#b8bac3;box-shadow:0 15px 40px rgba(0,0,0,.25);transition:.22s}.carousel-arrow:hover{color:#fff;border-color:rgba(231,175,199,.35)}.carousel-prev{left:2.2vw}.carousel-next{right:2.2vw}

.discover-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 7vw}.discover-card{min-height:92px;padding:11px;display:grid;grid-template-columns:52px minmax(0,1fr) 18px;align-items:center;gap:11px;border-radius:16px;text-align:left;transition:.22s var(--ease)}.discover-card:hover{transform:translateY(-3px);border-color:rgba(231,175,199,.2)}.discover-art{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;font:800 17px Manrope}.art-one{background:linear-gradient(135deg,#8e80ff,#16141d)}.art-two{background:linear-gradient(135deg,#f26b96,#181116)}.art-three{background:linear-gradient(135deg,#65e2f3,#11191b);color:#08090a}.discover-card strong,.discover-card small{display:block}.discover-card strong{font-size:13px}.discover-card small{margin-top:4px;color:#737580;font-size:9px}.discover-card .arrow{color:#80828c}

.page-head{padding-top:140px;margin:0 7vw 28px;display:flex;align-items:end;justify-content:space-between;gap:20px}.page-head h2{font-size:clamp(55px,7vw,105px)}.search-status{max-width:330px;color:#7c7e87;font:500 8px "DM Mono";letter-spacing:.06em;line-height:1.6;text-align:right}.results-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;padding:0 7vw}.result-card{padding:8px;border:1px solid transparent;border-radius:16px;background:rgba(255,255,255,.015);transition:.22s}.result-card:hover{transform:translateY(-3px);border-color:var(--line)}.result-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:12px;background:#111}.result-thumb img{width:100%;height:100%;object-fit:cover}.play-overlay{position:absolute;right:9px;bottom:9px;width:42px;height:42px;border-radius:50%;background:#fff;color:#08090b;opacity:0;transform:translateY(5px);transition:.18s}.result-card:hover .play-overlay{opacity:1;transform:none}.result-info{padding:9px 3px 6px}.result-info strong,.result-info span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-info strong{font-size:11px}.result-info span{margin-top:4px;color:#777984;font-size:9px}.result-actions{display:flex;gap:5px}.tiny-button{flex:1;min-height:29px;border:1px solid var(--line);border-radius:9px;color:#888a94;background:rgba(255,255,255,.025);font:500 7px "DM Mono"}.tiny-button:hover{color:#fff;background:rgba(255,255,255,.06)}

.library-tabs{display:flex;gap:4px;margin:0 7vw 18px;padding:5px;border-radius:13px;overflow:auto;max-width:650px}.library-tab{padding:9px 11px;border-radius:9px;color:#7d7f89;white-space:nowrap;font:500 8px "DM Mono"}.library-tab.active{color:#fff;background:rgba(255,255,255,.07)}.library-tab span{display:inline-grid;place-items:center;min-width:16px;height:16px;margin-left:4px;padding:0 4px;border-radius:99px;background:rgba(255,255,255,.05);font-size:7px}
.library-list{display:grid;gap:4px;margin:0 7vw}.track-row{display:grid;grid-template-columns:48px minmax(0,1fr) 120px 70px auto;gap:11px;align-items:center;padding:6px;border:1px solid transparent;border-radius:12px;transition:.18s}.track-row:hover{background:rgba(255,255,255,.035);border-color:var(--line)}.track-thumb{width:48px;height:48px;border-radius:9px;overflow:hidden;background:#111}.track-thumb img{width:100%;height:100%;object-fit:cover}.track-main{min-width:0;text-align:left}.track-main strong,.track-main span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-main strong{font-size:11px}.track-main span{margin-top:3px;color:#747681;font-size:9px}.track-artist,.track-duration{color:#666873;font:500 7px "DM Mono"}.track-actions{display:flex;justify-content:flex-end}.track-action{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;color:#858792}.track-action:hover{color:#fff;background:rgba(255,255,255,.06)}
.empty-state{min-height:300px;margin:0 7vw;border-radius:20px;padding:35px;text-align:center;display:grid;place-items:center;align-content:center}.empty-icon{width:48px;height:48px;display:grid;place-items:center;margin-bottom:12px;border-radius:13px;background:rgba(255,255,255,.04)}.empty-state h3{margin:0 0 7px;font-size:14px}.empty-state p{max-width:430px;margin:0;color:#838590;font-size:11px;line-height:1.7}

.back-button{margin:140px 0 0 7vw;color:#858792;font:500 8px "DM Mono"}.playlist-page-hero{display:grid;grid-template-columns:270px 1fr;gap:24px;margin:22px 7vw 18px;padding:12px;border-radius:22px}.playlist-page-art{width:270px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:17px;background:#111}.playlist-page-art img{width:100%;height:100%;object-fit:cover}.playlist-page-copy{align-self:end;padding:12px}.playlist-page-copy h2{margin:14px 0 7px;font-size:clamp(46px,6vw,86px);line-height:.84;letter-spacing:-.08em}.playlist-page-copy p{color:#858792;font-size:10px}.playlist-controls{display:flex;gap:7px;margin-top:18px}

.player{position:fixed;left:calc(var(--sidebar) + 16px);right:16px;bottom:16px;z-index:65;min-height:96px;padding:9px;border-radius:18px;display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(250px,1.5fr) auto;gap:12px;align-items:center}
.full-player{position:fixed;inset:0;z-index:20000;display:flex;flex-direction:column;visibility:hidden;opacity:0;pointer-events:none;overflow:hidden;background:#050508;color:#fff;transform:translateY(18px) scale(.985);transform-origin:center;transition:opacity .32s ease,transform .4s cubic-bezier(.16,1,.3,1),visibility 0s linear .4s}
body.player-expanded{overflow:hidden}
body.player-expanded .full-player{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition:opacity .28s ease,transform .42s cubic-bezier(.16,1,.3,1),visibility 0s}
body.player-expanded .player{opacity:0;pointer-events:none;transform:translateY(18px)}
.full-player-bg{position:absolute;inset:-8%;background-position:center;background-size:cover;background-repeat:no-repeat;filter:blur(30px) saturate(1.18);transform:scale(1.12);opacity:.58;will-change:transform}
.full-player-shade{position:absolute;inset:0;background:
  radial-gradient(circle at 50% 34%,rgba(255,255,255,.08),transparent 22%),
  linear-gradient(180deg,rgba(3,4,7,.58),rgba(4,4,7,.18) 42%,rgba(4,4,7,.74) 76%,#040407 100%)}
.full-player-top{position:relative;z-index:2;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px;padding:24px 28px}
.full-player-icon{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:rgba(8,9,13,.34);color:#d7d8dd;font-size:20px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.2s var(--ease)}
.full-player-icon:hover{color:#fff;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22)}
.full-player-label{text-align:center;min-width:0}
.full-player-label span{display:block;color:rgba(255,255,255,.48);font:500 8px "DM Mono";letter-spacing:.18em}
.full-player-label strong{display:block;margin-top:5px;color:rgba(255,255,255,.78);font-size:10px;font-weight:600}
.full-player-center{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:0;padding:12px 24px 28px}
.full-player-art-wrap{width:min(46vw,520px,55vh);aspect-ratio:1/1;padding:0;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);box-shadow:0 38px 120px rgba(0,0,0,.5)}
.full-player-art{width:100%;height:100%;object-fit:cover}
.full-player-copy{width:min(720px,90vw);margin-top:23px;text-align:center}
.full-player-copy h2{margin:10px 0 0;font-size:clamp(30px,4vw,58px);line-height:.94;letter-spacing:-.065em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.full-player-copy p{margin:9px 0 0;color:rgba(255,255,255,.56);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.full-player-bottom{position:relative;z-index:3;width:min(1120px,calc(100vw - 52px));margin:0 auto 28px;padding:18px 20px 19px;border:1px solid rgba(255,255,255,.11);border-radius:20px;background:rgba(7,8,12,.44);box-shadow:0 28px 80px rgba(0,0,0,.36);backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%)}
.full-player-meta{display:flex;align-items:center;justify-content:space-between;gap:14px}
.full-player-like{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:50%;background:rgba(255,255,255,.035);color:#a8aab4;font-size:18px;transition:.2s}.full-player-like:hover{color:#fff;background:rgba(255,255,255,.08)}.full-player-like.active{color:var(--pink)}
.full-player-time{display:flex;gap:9px;color:rgba(255,255,255,.48);font:500 8px "DM Mono"}
.full-player-progress{margin-top:10px}
.full-player-progress input{display:block;height:18px}
.full-player-transport{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:8px}
.full-player-control,.full-player-play{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:50%;background:rgba(255,255,255,.035);color:#bfc0c7;font:500 9px "DM Mono";transition:.2s var(--ease)}
.full-player-control:hover{color:#fff;background:rgba(255,255,255,.08)}
.full-player-control.active{color:var(--pink);border-color:rgba(231,175,199,.28)}
.full-player-play{width:48px;height:48px;border:0;background:#fff;color:#08090c;font-size:10px}.full-player-play:hover{transform:scale(1.04)}
#yt-container{transition:opacity .2s ease}
body.player-expanded #yt-container.ready{width:1px;height:1px;right:1px;bottom:1px;opacity:0;pointer-events:none;border:0;box-shadow:none}

@media (max-width:620px){
  .full-player-top{padding:16px 14px}
  .full-player-center{padding:8px 16px 18px}
  .full-player-art-wrap{width:min(76vw,52vh)}
  .full-player-copy{margin-top:17px;width:92vw}
  .full-player-copy h2{font-size:clamp(25px,8vw,36px)}
  .full-player-copy p{font-size:10px}
  .full-player-bottom{width:calc(100vw - 20px);margin-bottom:10px;padding:14px 13px 13px;border-radius:17px}
  .full-player-transport{gap:7px}
  .full-player-control{width:37px;height:37px}
  .full-player-play{width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){
  .full-player-icon,.full-player-control,.full-player-play{transition:none!important}
}
.now-playing{display:flex;align-items:center;gap:9px;min-width:0}.now-art{width:50px;height:50px;flex:none;border-radius:11px;overflow:hidden;background:#12141a;cursor:pointer}.now-art img{width:100%;height:100%;object-fit:cover}.now-copy{min-width:0}.now-copy strong,.now-copy span{display:block;max-width:290px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-copy strong{font-size:11px}.now-copy span{margin-top:4px;color:#777984;font-size:9px}.heart-button{width:32px;height:32px;color:#a2a4ae}.player-controls{min-width:0}.transport{display:flex;align-items:center;justify-content:center;gap:5px}.control-button,.play-button,.expand-button{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025);color:#868893;font:500 8px "DM Mono"}.play-button{width:38px;height:38px;border-radius:50%;background:#fff;color:#090a0d;border:0}.control-button:hover,.expand-button:hover{color:#fff;background:rgba(255,255,255,.06)}.control-button.active{color:var(--pink)}.progress-row{display:grid;grid-template-columns:30px 1fr 30px;gap:6px;align-items:center;margin-top:6px}.progress-row span{color:#62646e;text-align:center;font:500 7px "DM Mono"}input[type=range]{width:100%;accent-color:#fff}.player-side{display:flex;align-items:center;gap:5px}.volume{width:72px}
#yt-container{display:none;position:fixed;right:25px;bottom:132px;z-index:64;width:310px;height:174px;border:1px solid var(--line);border-radius:14px;background:#000;overflow:hidden;box-shadow:0 25px 70px rgba(0,0,0,.45)}#yt-container.ready{display:block}#yt-player{width:100%;height:100%}.player-expanded #yt-container{width:min(46vw,620px);height:auto;aspect-ratio:16/9}
.overlay{display:none;position:fixed;inset:0;z-index:68;background:rgba(0,0,0,.55)}

.first-run{display:none;position:fixed;inset:0;z-index:200;place-items:center;padding:18px;background:rgba(2,3,6,.76);}.first-run.open{display:grid;animation:fade .2s ease}.first-run-card{position:relative;width:min(700px,100%);padding:40px;border-radius:26px}.first-run-brand{padding:0;margin:0 0 35px}.first-run-close{position:absolute;right:16px;top:16px}.first-run-card h2{margin:15px 0;font:500 clamp(42px,6vw,68px)/.9 "Playfair Display";letter-spacing:-.055em}.first-run-card h2 em,.modal-head h3 em{color:#efc9d8}.first-run-copy,.modal-copy{color:#91939d;font-size:11px;line-height:1.75}.profile-name-wrap{margin-top:24px}.profile-name-wrap label,.setting-block label{display:block;margin-bottom:7px;color:#81838d;font:500 8px "DM Mono";letter-spacing:.1em}.text-input{width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.035);color:#fff;outline:0}.text-input:focus{border-color:rgba(231,175,199,.35)}.profile-name-wrap small,.setting-block small{display:block;color:#676973;font-size:9px;line-height:1.5;margin-top:7px}.first-run-actions{display:flex;gap:8px;margin-top:18px}.first-run-later{margin-top:16px}.setting-block{margin-top:17px}.segmented{display:flex;gap:4px;padding:4px;background:rgba(255,255,255,.03);border-radius:10px}.segmented button{flex:1;padding:8px;border-radius:7px;color:#777984;font:500 8px "DM Mono"}.segmented button.active{color:#fff;background:rgba(255,255,255,.07)}.modal{width:min(540px,calc(100vw - 28px));padding:22px;border:1px solid var(--line-strong);border-radius:22px;background:var(--panel-2);color:#fff}.modal::backdrop{background:rgba(0,0,0,.62)}.modal-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.modal-head h3{margin:9px 0 0;font:500 36px/.9 "Playfair Display"}.modal-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:20px}.api-help{margin-top:14px;padding:11px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025)}.api-help strong{display:block;font-size:9px}.api-help span{display:block;margin-top:4px;color:#777984;font-size:9px;line-height:1.55}.danger-button{min-height:44px;padding:0 13px;border:1px solid rgba(255,90,120,.16);border-radius:11px;color:#db90a5;background:rgba(255,90,120,.035);font:500 8px "DM Mono"}.queue-content{display:grid;gap:5px;max-height:58vh;overflow:auto;margin-top:15px}.queue-item{display:grid;grid-template-columns:42px 1fr auto;gap:9px;align-items:center;padding:6px;border-radius:10px;text-align:left;background:rgba(255,255,255,.03)}.queue-item img{width:42px;height:42px;border-radius:8px;object-fit:cover}.queue-item strong,.queue-item span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-item strong{font-size:10px}.queue-item span{color:#70727b;font-size:8px;margin-top:3px}.toast{position:fixed;left:50%;bottom:132px;z-index:220;transform:translateX(-50%);padding:10px 12px;border-radius:11px;color:#dedfe4;font:500 8px "DM Mono";box-shadow:0 18px 50px rgba(0,0,0,.4)}

.bg-file-row{display:flex;gap:7px;align-items:center}.file-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.035);color:#c9cad1;font:500 8px "DM Mono";cursor:pointer}.file-button:hover{background:rgba(255,255,255,.07);color:#fff}.bg-clear-button{min-height:42px!important}

@keyframes fade{from{opacity:0}to{opacity:1}}
@media (max-width:1050px){:root{--sidebar:220px}.main{margin-left:var(--sidebar)}.topbar{left:calc(var(--sidebar) + 16px)}.player{left:calc(var(--sidebar) + 16px)}.results-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:850px){:root{--sidebar:0px}.sidebar{left:10px;top:10px;bottom:10px;width:290px;transform:translateX(-120%);transition:transform .3s var(--ease)}.sidebar.open{transform:none}.main{margin-left:0}.topbar{left:10px;right:10px;top:10px}.player{left:10px;right:10px;bottom:10px;grid-template-columns:1fr auto}.player-controls{grid-column:1/-1}.player-side{justify-self:end}.home-top-button b{display:none}.discover-grid{grid-template-columns:1fr}.results-grid{grid-template-columns:repeat(2,1fr)}.page-head{margin-left:24px;margin-right:24px}.section-heading{margin-left:24px;margin-right:24px}.playlist-carousel{padding-left:24px;padding-right:24px}.discover-grid{padding:0 24px}.library-list{margin:0 24px}.library-tabs{margin-left:24px;margin-right:24px}.empty-state{margin:0 24px}.carousel-prev{left:10px}.carousel-next{right:10px}.first-run-card{padding:28px 22px}}
@media (max-width:620px){.top-actions .status-pill,.top-actions #queueBtnTop{display:none}.top-search kbd{display:none}.hero{padding:120px 22px 38px;min-height:760px}.hero h1{font-size:clamp(56px,17vw,88px)}.section{padding-top:70px}.section-heading h2,.page-head h2{font-size:clamp(50px,13vw,76px)}.playlist-carousel{grid-auto-columns:240px;min-height:430px;padding-left:22px;padding-right:22px}.playlist-card{height:335px}.carousel-arrow{width:38px;height:38px}.results-grid{grid-template-columns:1fr}.track-row{grid-template-columns:48px minmax(0,1fr) auto}.track-artist,.track-duration{display:none}.now-copy strong,.now-copy span{max-width:170px}.volume{display:none}#yt-container{right:12px;bottom:165px;width:230px;height:129px}.player-expanded #yt-container{width:calc(100vw - 24px);height:auto}.first-run-actions{flex-direction:column}.first-run-actions>*{width:100%}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.view{animation:none!important}.playlist-card,.discover-card,.primary-button,.ghost-button{transition:none!important}}
body.reduced-motion *{animation:none!important;transition-duration:.001ms!important}
body.first-run-open{overflow:hidden}

/* b1api visual index — fog-style centered carousel */
.carousel-frame>.carousel-arrow{display:none}
.playlist-carousel{
position:relative;height:620px;min-height:620px;overflow:hidden;padding:0;perspective:1600px;
touch-action:pan-y;user-select:none;contain:layout paint;cursor:grab;
background:radial-gradient(ellipse at center,rgba(231,157,184,.07),transparent 37%),linear-gradient(180deg,rgba(4,4,7,.15),rgba(4,4,7,.34))
}
.playlist-carousel:active{cursor:grabbing}
.playlist-stage-track{position:absolute;inset:0;transform-style:preserve-3d}
.playlist-carousel .playlist-card{
position:absolute;left:50%;top:50%;width:310px;height:430px;margin:-215px 0 0 -155px;padding:7px;
scroll-snap-align:none;transform-origin:center;transform-style:preserve-3d;border:1px solid rgba(255,255,255,.14);
border-radius:24px;background:#08080b;box-shadow:0 34px 92px rgba(0,0,0,.56),inset 0 1px rgba(255,255,255,.16);
transition:border-color .28s ease,box-shadow .28s ease;will-change:transform,opacity;overflow:hidden
}
.playlist-carousel .playlist-card::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.1),transparent 26%,transparent 66%,rgba(239,164,191,.07))}
.playlist-carousel .playlist-card::after{content:"";position:absolute;inset:-1px;z-index:6;pointer-events:none;border-radius:25px;border:1px solid rgba(255,255,255,.08)}
.playlist-carousel .playlist-card.is-center{border-color:rgba(241,188,207,.66);box-shadow:0 50px 125px rgba(0,0,0,.72),0 0 48px rgba(226,147,178,.13),inset 0 1px rgba(255,255,255,.27)}
.playlist-carousel .playlist-art{position:absolute;inset:7px;border-radius:17px;overflow:hidden;background:#040405}
.playlist-carousel .playlist-art img{width:100%;height:100%;object-fit:cover;opacity:.9;filter:contrast(1.06) brightness(.83) saturate(1.02);transform:scale(1.02);transition:transform .7s cubic-bezier(.2,.72,.2,1),filter .35s ease,opacity .35s ease}
.playlist-carousel .playlist-card.is-center .playlist-art img{opacity:1;filter:contrast(1.08) brightness(.95) saturate(1.08);transform:scale(1)}
.playlist-card-sheen{position:absolute;inset:7px;z-index:5;border-radius:17px;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.03),transparent 35%,rgba(0,0,0,.75) 100%),linear-gradient(115deg,rgba(255,255,255,.07),transparent 21%)}
.playlist-carousel .playlist-meta{position:absolute;z-index:8;left:21px;right:21px;bottom:21px;display:flex;flex-direction:column;gap:6px;text-shadow:0 5px 25px #000}
.playlist-carousel .playlist-meta strong{font-size:28px;line-height:.92;letter-spacing:-.06em;font-weight:500}
.playlist-carousel .playlist-meta small,.playlist-carousel .playlist-meta span{font:500 8px "DM Mono";letter-spacing:.13em;color:rgba(255,255,255,.62)}
.playlist-carousel .playlist-card-number{position:absolute;z-index:8;top:17px;right:17px;padding:6px 8px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(0,0,0,.34);font:500 8px "DM Mono";color:#fff;letter-spacing:.05em}
.playlist-carousel.is-open .playlist-card{opacity:.06!important;filter:blur(7px) saturate(.5);pointer-events:none}
.playlist-carousel.is-open .carousel-arrow{opacity:0;pointer-events:none}
.playlist-open{position:absolute;z-index:30;inset:20px 6.5vw;display:grid;grid-template-columns:minmax(300px,.86fr) minmax(360px,1.14fr);gap:20px;padding:14px;border:1px solid rgba(255,255,255,.17);border-radius:28px;background:linear-gradient(145deg,rgba(17,17,21,.97),rgba(6,6,9,.95));box-shadow:0 45px 130px rgba(0,0,0,.78),inset 0 1px rgba(255,255,255,.09);animation:playlistOpenIn .45s cubic-bezier(.2,.72,.2,1) both;overflow:hidden}
@keyframes playlistOpenIn{from{opacity:0;transform:translateY(18px) scale(.975)}to{opacity:1;transform:none}}
.playlist-open-media{position:relative;min-height:0;overflow:hidden;border-radius:21px;background:#030304}.playlist-open-media img,.playlist-open-media .fallback-art,.playlist-open-media>div{width:100%;height:100%;object-fit:cover}.playlist-open-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(3,3,5,.76) 100%)}
.playlist-open-body{min-height:0;display:flex;flex-direction:column;justify-content:space-between;padding:22px 24px 18px 7px}
.playlist-open-scroll{min-height:0;overflow:auto;padding-right:8px}.playlist-open-scroll::-webkit-scrollbar{width:4px}.playlist-open-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}
.playlist-open-scroll>span{font:500 8px "DM Mono";letter-spacing:.13em;color:#70717a}.playlist-open-scroll h3{margin:20px 0 10px;font-size:clamp(44px,5.8vw,84px);line-height:.84;letter-spacing:-.075em;font-weight:500}
.playlist-open-accent{margin:0 0 12px;color:var(--pink);font-size:13px}.playlist-open-lead{max-width:610px;color:#cacbd0;font-size:14px;line-height:1.7;margin:0}.playlist-open-list{display:grid;gap:8px;margin-top:22px}
.playlist-open-track{display:grid;grid-template-columns:44px 1fr 24px;gap:10px;align-items:center;padding:6px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025);text-align:left}.playlist-open-track img{width:44px;height:44px;border-radius:9px;object-fit:cover}.playlist-open-track span{min-width:0}.playlist-open-track strong,.playlist-open-track small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-open-track strong{font-size:10px}.playlist-open-track small{margin-top:3px;color:#747681;font-size:8px}.playlist-open-track b{font:500 8px "DM Mono";color:#565861;text-align:right}
.playlist-open-empty{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#777984;font-size:10px;background:rgba(255,255,255,.02)}
.playlist-open-foot{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:18px;padding-top:13px;border-top:1px solid rgba(255,255,255,.08);font:500 8px "DM Mono";letter-spacing:.11em;color:#585960}.playlist-open-foot>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.playlist-open-action,.playlist-open-close{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);border-radius:999px;padding:9px 12px;color:#d9dadf;font:500 8px "DM Mono";letter-spacing:.08em;cursor:pointer}.playlist-open-action:hover,.playlist-open-close:hover{background:rgba(217,160,179,.08);border-color:rgba(239,196,209,.34);color:#fff}.playlist-open-action.ghost{background:transparent}
.youtube-host{right:32px;bottom:132px;width:min(390px,31vw);aspect-ratio:16/10;height:auto;padding:6px;display:none;position:fixed;z-index:72;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(9,10,14,.9));box-shadow:0 36px 95px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.08);overflow:hidden;backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%)}
.youtube-host.ready{display:block}.youtube-mini-head{position:absolute;z-index:3;left:6px;right:6px;top:6px;height:38px;padding:6px 8px 6px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:13px 13px 0 0;background:linear-gradient(180deg,rgba(5,6,10,.88),rgba(5,6,10,.16));pointer-events:none}.youtube-mini-head>div{min-width:0}.youtube-mini-head span,.youtube-mini-head strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.youtube-mini-head span{font:500 7px "DM Mono";letter-spacing:.14em;color:rgba(255,255,255,.48)}.youtube-mini-head strong{margin-top:2px;font-size:8px;color:rgba(255,255,255,.82)}.youtube-mini-expand{pointer-events:auto;width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:rgba(6,7,11,.5);color:#d0d1d6;font-size:11px}.youtube-mini-screen{width:100%;height:100%;border-radius:13px;overflow:hidden;background:#000}.youtube-mini-screen iframe{display:block;width:100%;height:100%;border:0}
body.player-expanded .youtube-host.ready{opacity:0;pointer-events:none;transform:scale(.94)}
@media(max-width:850px){.playlist-carousel{height:560px;min-height:560px}.playlist-open{inset:18px 5vw;grid-template-columns:1fr 1fr}.youtube-host{width:min(340px,46vw);right:18px}}
@media(max-width:620px){.playlist-carousel{height:510px;min-height:510px}.playlist-open{inset:12px 10px;grid-template-columns:1fr;grid-template-rows:minmax(148px,37%) minmax(0,63%);gap:9px;padding:9px;border-radius:21px}.playlist-open-media{border-radius:15px}.playlist-open-body{padding:8px 10px}.playlist-open-scroll h3{font-size:42px;margin:12px 0 8px}.playlist-open-lead{font-size:12px;line-height:1.55}.playlist-open-foot{margin-top:10px;padding-top:9px}.playlist-open-foot>div{gap:4px}.youtube-host{right:12px;bottom:164px;width:260px;aspect-ratio:16/10}.youtube-mini-head{height:34px}.youtube-mini-head span{font-size:6px}.youtube-mini-head strong{font-size:7px}}

/* Neutral / configurable theme */
:root{
  --theme-primary:#e7e7e7;--theme-secondary:#8f8f8f;--theme-accent:#c8c8c8;
  --theme-surface:#111111;--theme-background:#070707;--bg-image-opacity:1;--bg-image-blur:0px;--glass-blur:16px;
  --bg:var(--theme-background);--text:var(--theme-primary);--muted:var(--theme-secondary);
  --dim:color-mix(in srgb,var(--theme-secondary) 62%,#000);--pink:var(--theme-accent);
  --panel:color-mix(in srgb,var(--theme-surface) 84%,transparent);
  --panel-2:color-mix(in srgb,var(--theme-surface) 94%,#000);
  --line:color-mix(in srgb,var(--theme-primary) 13%,transparent);
  --line-strong:color-mix(in srgb,var(--theme-primary) 22%,transparent)
}
body{background:var(--theme-background);color:var(--theme-primary)}
body::before{background:radial-gradient(circle at 70% 18%,color-mix(in srgb,var(--theme-primary) 6%,transparent),transparent 29%),radial-gradient(circle at 16% 82%,color-mix(in srgb,var(--theme-secondary) 4%,transparent),transparent 31%)}
body::after{background:linear-gradient(color-mix(in srgb,var(--theme-primary) 2%,transparent),transparent 50%)}
.background-image{background-color:var(--theme-background);opacity:var(--bg-image-opacity);filter:blur(var(--bg-image-blur));transform:scale(1.03);transition:opacity .25s ease,filter .25s ease}
.background-image::after{background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.68) 78%,rgba(0,0,0,.92)),radial-gradient(circle at 55% 35%,transparent 0,rgba(0,0,0,.2) 70%)}
.ambient{display:none}
.glass{background:linear-gradient(135deg,color-mix(in srgb,var(--theme-primary) 5%,transparent),color-mix(in srgb,var(--theme-primary) 1.5%,transparent)),var(--panel)}
.brand span,.sidebar .brand::after,.control-button.active,.full-player-control.active{color:var(--theme-accent)}
.status-pill.connected{color:var(--theme-primary);border-color:var(--line)}
.status-pill.connected>span{background:var(--theme-accent);box-shadow:0 0 10px color-mix(in srgb,var(--theme-accent) 45%,transparent)}
.profile-avatar{background:linear-gradient(135deg,var(--theme-primary),var(--theme-secondary));color:var(--theme-background)}
.top-search:focus-within{border-color:color-mix(in srgb,var(--theme-accent) 38%,transparent)}
button:focus-visible,input:focus-visible{outline-color:var(--theme-accent)}
::selection{background:color-mix(in srgb,var(--theme-accent) 25%,transparent);color:var(--theme-primary)}
.home-minimal{min-height:100vh;padding:120px 4vw 80px}
.home-minimal-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.home-minimal-meta{font:500 8px "DM Mono";letter-spacing:.12em;color:var(--theme-secondary)}
.home-minimal .playlist-carousel{height:650px;min-height:650px}
.color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.color-field{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.025);cursor:pointer}
.color-field span{color:var(--theme-secondary);font:500 8px "DM Mono";letter-spacing:.08em}
.color-field input{width:36px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;cursor:pointer}
.setting-block label span{float:right;color:var(--theme-secondary);font:500 8px "DM Mono"}
.file-button,.bg-clear-button{background:color-mix(in srgb,var(--theme-primary) 4%,transparent);color:var(--theme-primary)}
.file-button:hover,.bg-clear-button:hover{background:color-mix(in srgb,var(--theme-primary) 8%,transparent);color:var(--theme-primary)}
.primary-button{background:var(--theme-primary);color:var(--theme-background);border-color:var(--theme-primary)}
.full-player-bg{filter:blur(22px) saturate(.2);opacity:.52}
.discover-grid{display:none}
@media(max-width:850px){.home-minimal{padding:96px 24px 60px}.home-minimal .playlist-carousel{height:560px;min-height:560px}}
@media(max-width:620px){.home-minimal{padding:88px 14px 45px}.home-minimal-head{padding-inline:5px}.home-minimal .playlist-carousel{height:510px;min-height:510px}}

/* Final polish: real background layer, focused playlist stage, system toast, custom covers */
.background-image{z-index:0;opacity:var(--bg-image-opacity);filter:blur(var(--bg-image-blur));transform:scale(1.045);pointer-events:none}
.app-shell{position:relative;z-index:1}
.grain{z-index:90}
.home-minimal{min-height:calc(100vh - var(--player));padding:106px 4vw 120px;display:flex;flex-direction:column}
.home-minimal-head{max-width:1240px;width:100%;margin:0 auto 12px;padding:0 8px 12px}
.home-minimal .carousel-frame{width:min(1240px,100%);margin:0 auto}
.home-minimal .playlist-carousel{height:610px;min-height:610px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.16));box-shadow:inset 0 1px rgba(255,255,255,.05),0 35px 100px rgba(0,0,0,.2)}
.playlist-carousel .playlist-card{width:286px;height:402px;margin:-201px 0 0 -143px}
.playlist-carousel .playlist-card.is-center{box-shadow:0 34px 95px rgba(0,0,0,.68),0 0 0 1px color-mix(in srgb,var(--theme-accent) 36%,transparent),inset 0 1px rgba(255,255,255,.22)}
.playlist-fallback-art{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.10),transparent 32%),linear-gradient(145deg,#24262a,#08090b)}

.playlist-page-art-wrap{display:flex;flex-direction:column;gap:10px}
.playlist-cover-actions{display:flex;gap:6px;flex-wrap:wrap}
.playlist-cover-actions .file-button,.playlist-cover-actions .ghost-button{min-height:36px;padding-inline:11px}
.toast{left:auto;right:22px;bottom:132px;transform:translateY(12px);min-width:230px;max-width:min(360px,calc(100vw - 32px));padding:12px 13px 13px;display:grid;grid-template-columns:22px 1fr;align-items:center;gap:9px;opacity:0;visibility:hidden;border:1px solid rgba(255,255,255,.13);border-radius:13px;background:rgba(17,18,22,.92);backdrop-filter:blur(16px) saturate(110%);-webkit-backdrop-filter:blur(16px) saturate(110%);box-shadow:0 22px 65px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.07);transition:opacity .18s ease,transform .22s var(--ease),visibility .18s ease}
.toast.show{opacity:1;visibility:visible;transform:translateY(0)}
.toast-icon{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--theme-accent) 18%,transparent);color:var(--theme-accent);font:600 10px Manrope}
.toast-text{min-width:0;color:var(--theme-primary);font:500 9px Manrope;line-height:1.35}
.toast-progress{grid-column:1/-1;height:2px;margin-top:2px;border-radius:99px;background:color-mix(in srgb,var(--theme-secondary) 14%,transparent);overflow:hidden;position:relative}
.toast-progress::after{content:"";position:absolute;inset:0;background:var(--theme-accent);transform-origin:left;animation:toastLife 2s linear both}
@keyframes toastLife{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(max-width:850px){
  .home-minimal{padding:92px 20px 100px}
  .home-minimal .playlist-carousel{height:550px;min-height:550px}
}
@media(max-width:620px){
  .home-minimal{padding:84px 10px 86px}
  .home-minimal .playlist-carousel{height:490px;min-height:490px;border-radius:21px}
  .home-minimal-head{padding-inline:5px}
  .playlist-carousel .playlist-card{width:236px;height:344px;margin:-172px 0 0 -118px}
  .toast{right:12px;bottom:176px;min-width:0;width:calc(100vw - 24px)}
}

/* Sidebar YouTube preview, open playlist layout, unclipped carousel, background-color switch */
.sidebar-playlists{flex:1;min-height:80px}
.sidebar .youtube-host{
  position:relative;inset:auto;right:auto;bottom:auto;z-index:71;
  width:100%;height:auto;aspect-ratio:16/9;flex:none;
  margin:2px 0 5px;padding:5px;border-radius:15px;
  display:none;overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(5,6,9,.94));
  border:1px solid var(--line);
  box-shadow:0 18px 42px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.06);
}
.sidebar .youtube-host.ready{display:block}
.sidebar .youtube-mini-head{left:5px;right:5px;top:5px;height:35px;padding:5px 7px 5px 9px;border-radius:10px 10px 0 0}
.sidebar .youtube-mini-screen{border-radius:10px}
.sidebar .youtube-mini-head span{font-size:6px}
.sidebar .youtube-mini-head strong{font-size:7px}
.sidebar .youtube-mini-expand{width:25px;height:25px;border-radius:8px;font-size:10px}

.home-minimal{padding-bottom:90px}
.home-minimal .carousel-frame{overflow:visible}
.home-minimal .playlist-carousel{
  border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;
  overflow:visible;min-height:610px;height:610px;
}
.home-minimal .playlist-carousel::before{
  content:"";position:absolute;left:50%;top:50%;width:min(64vw,720px);height:430px;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,rgba(255,255,255,.04),transparent 68%);pointer-events:none;z-index:0;
}
.main{overflow:visible}
body{overflow-x:clip}

.playlist-open{inset:14px 3.5vw;grid-template-columns:minmax(300px,.78fr) minmax(440px,1.22fr)}
.playlist-open-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.playlist-open-settings{width:42px;height:42px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.035);color:var(--theme-secondary);transition:.2s}
.playlist-open-settings:hover{color:var(--theme-primary);background:rgba(255,255,255,.07)}
.playlist-open-list{display:grid;gap:6px;margin-top:18px}
.playlist-open-track{display:grid;grid-template-columns:28px 46px minmax(0,1fr) 28px;gap:9px;align-items:center;width:100%;padding:6px;border:1px solid rgba(255,255,255,.075);border-radius:11px;background:rgba(255,255,255,.022);text-align:left}
.playlist-open-track:hover{background:rgba(255,255,255,.05);border-color:var(--line)}
.playlist-open-index{font:500 7px "DM Mono";color:var(--theme-secondary);text-align:center}
.playlist-open-track img{width:46px;height:46px;border-radius:9px;object-fit:cover}
.playlist-open-track-copy{min-width:0}
.playlist-open-track-copy strong,.playlist-open-track-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.playlist-open-track-copy strong{font-size:10px}
.playlist-open-track-copy small{margin-top:3px;color:var(--theme-secondary);font-size:8px}
.playlist-open-play{color:var(--theme-secondary);font:500 8px "DM Mono";text-align:center}
.playlist-settings-modal{max-width:470px}

.switch-field{display:grid!important;grid-template-columns:20px 30px 1fr;align-items:center;gap:9px;padding:10px 0;margin:0!important;cursor:pointer}
.switch-field input{position:absolute;opacity:0;pointer-events:none}
.switch-ui{position:relative;width:30px;height:18px;border:1px solid var(--line-strong);border-radius:99px;background:rgba(255,255,255,.05);transition:.2s}
.switch-ui::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--theme-secondary);transition:.2s}
.switch-field input:checked + .switch-ui{background:var(--theme-accent);border-color:var(--theme-accent)}
.switch-field input:checked + .switch-ui::after{left:14px;background:var(--theme-background)}
.setting-inline>small{display:block;margin-left:59px}

body.no-bg-color{background:transparent}
body.no-bg-color::before,body.no-bg-color::after{opacity:0}
body.no-bg-color .background-image::after{
  background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.08) 55%,rgba(0,0,0,.18));
}

@media(max-width:850px){
  .sidebar .youtube-host{width:100%}
  .home-minimal .playlist-carousel{height:560px;min-height:560px}
  .playlist-open{inset:10px 2vw;grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .sidebar .youtube-host{aspect-ratio:16/9}
  .home-minimal .playlist-carousel{height:500px;min-height:500px}
  .playlist-open{inset:7px 7px;grid-template-columns:1fr;grid-template-rows:minmax(150px,34%) minmax(0,66%);gap:8px}
  .playlist-open-track{grid-template-columns:25px 40px minmax(0,1fr) 24px}
  .playlist-open-track img{width:40px;height:40px}
}


/* Final background + sidebar refinement */
.background-image{
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  background-color:transparent!important;
}
.background-image::after{display:none!important}
body::before,body::after{display:none!important}
body.no-bg-color{background:transparent!important}
body.no-bg-color .background-image::after{display:none!important}
.sidebar{gap:10px}
.sidebar-title{flex:none;margin-top:2px}
.sidebar-playlists{
  flex:1 1 auto;
  min-height:96px;
  display:flex;
  flex-direction:column;
  gap:4px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:2px 2px 6px;
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
}
.sidebar-playlists::-webkit-scrollbar{width:4px}
.sidebar-playlists::-webkit-scrollbar-track{background:transparent}
.sidebar-playlists::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.sidebar-playlist{
  width:100%;
  min-height:44px;
  flex:0 0 auto;
  padding:5px 7px;
  grid-template-columns:34px minmax(0,1fr);
  gap:9px;
  border:1px solid transparent;
  background:transparent;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.sidebar-playlist:hover{transform:none;border-color:var(--line);background:color-mix(in srgb,var(--theme-primary) 4%,transparent)}
.sidebar-playlist:active{transform:scale(.985)}
.sidebar-playlist img,.sidebar-playlist .fallback-art{width:34px;height:34px;border-radius:9px}
.sidebar-playlist span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .youtube-host{flex:0 0 auto;margin-top:1px;margin-bottom:0}


/* Final carousel geometry / covers / adjustable glass */
:root{--glass-blur:16px}
.playlist-carousel{position:relative!important;display:block!important;overflow:visible!important;padding:0!important;min-height:610px!important;height:610px!important}
.playlist-stage-track{position:absolute;inset:0;overflow:visible;pointer-events:none}
.playlist-carousel .playlist-card{
  position:absolute;
  left:50%;
  top:50%;
  width:286px;
  height:402px;
  margin:-201px 0 0 -143px;
  pointer-events:auto;
  transform-style:preserve-3d;
  overflow:hidden;
  border-radius:22px;
  background:#090a0e;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.playlist-carousel .playlist-art{position:absolute;inset:7px;overflow:hidden;border-radius:16px;background:#111}
.playlist-carousel .playlist-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1!important}
.playlist-carousel .playlist-fallback-art{width:100%;height:100%}
.playlist-carousel .carousel-arrow{z-index:25}
@supports(backdrop-filter:blur(1px)){
  .toast{backdrop-filter:blur(var(--glass-blur,16px)) saturate(110%);-webkit-backdrop-filter:blur(var(--glass-blur,16px)) saturate(110%)}
}
input[type="range"][disabled]{opacity:.7;cursor:not-allowed}


/* === FOG-MATCHED CAROUSEL FINAL OVERRIDE === */
.playlist-carousel{
  position:relative!important;
  height:620px!important;
  min-height:620px!important;
  padding:0!important;
  overflow:hidden!important;
  touch-action:pan-y!important;
  user-select:none!important;
  cursor:grab!important;
  perspective:1600px!important;
}
.playlist-carousel:active{cursor:grabbing!important}
.playlist-stage-track{
  position:absolute!important;
  inset:0!important;
  perspective:1600px!important;
  transform-style:preserve-3d!important;
}
.playlist-carousel .playlist-card{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:310px!important;
  height:430px!important;
  margin:-215px 0 0 -155px!important;
  padding:7px!important;
  border-radius:24px!important;
  overflow:hidden!important;
  transform-style:preserve-3d!important;
  will-change:transform,opacity!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
.playlist-carousel .playlist-art{
  position:absolute!important;
  inset:7px!important;
  border-radius:17px!important;
  overflow:hidden!important;
  background:#040405!important;
}
.playlist-carousel .playlist-art img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}
.playlist-carousel .playlist-card.is-center .playlist-art img{
  opacity:1!important;
  transform:scale(1)!important;
}
.playlist-carousel .playlist-card:not(.is-center) .playlist-art img{
  opacity:.9!important;
}
.playlist-carousel .playlist-card-sheen{
  position:absolute!important;
  inset:7px!important;
  z-index:5!important;
  border-radius:17px!important;
  pointer-events:none!important;
}
.playlist-carousel::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:min(64vw,760px)!important;
  height:360px!important;
  transform:translate(-50%,-45%)!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--theme-accent) 11%,transparent),rgba(255,255,255,.025) 34%,transparent 73%)!important;
  filter:blur(30px)!important;
  pointer-events:none!important;
  z-index:0!important;
}
.playlist-carousel::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:14!important;
  background:linear-gradient(90deg,rgba(5,5,7,.78),transparent 17%,transparent 83%,rgba(5,5,7,.78))!important;
}
.playlist-stage-track{z-index:1!important}
.playlist-carousel .carousel-arrow{z-index:18!important}
.playlist-carousel.is-open .playlist-card{
  opacity:.06!important;
  filter:blur(7px) saturate(.5)!important;
  pointer-events:none!important;
}

/* Glass intensity follows the Settings slider */
:root{--glass-blur:16px}
.glass{
  -webkit-backdrop-filter:blur(var(--glass-blur,16px)) saturate(115%)!important;
  backdrop-filter:blur(var(--glass-blur,16px)) saturate(115%)!important;
}
.youtube-host{
  -webkit-backdrop-filter:blur(var(--glass-blur,16px)) saturate(120%)!important;
  backdrop-filter:blur(var(--glass-blur,16px)) saturate(120%)!important;
}
.full-player-icon,.full-player-bottom,.toast{
  -webkit-backdrop-filter:blur(var(--glass-blur,16px)) saturate(115%)!important;
  backdrop-filter:blur(var(--glass-blur,16px)) saturate(115%)!important;
}

@media(max-width:1000px){
  .playlist-carousel{height:560px!important;min-height:560px!important}
  .playlist-carousel .playlist-card{
    width:285px!important;
    height:395px!important;
    margin:-197.5px 0 0 -142.5px!important;
  }
}
@media(max-width:680px){
  .playlist-carousel{height:500px!important;min-height:500px!important}
  .playlist-carousel .playlist-card{
    width:242px!important;
    height:350px!important;
    margin:-175px 0 0 -121px!important;
  }
  .playlist-carousel::after{
    background:linear-gradient(90deg,rgba(5,5,7,.68),transparent 12%,transparent 88%,rgba(5,5,7,.68))!important;
  }
}


/* === FULL-WIDTH CAROUSEL STAGE === */
.home-minimal{
  width:100%;
  padding-left:0!important;
  padding-right:0!important;
}
.home-minimal-head{
  width:100%!important;
  max-width:none!important;
  padding-left:4vw!important;
  padding-right:4vw!important;
}
.home-minimal .carousel-frame{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.home-minimal .playlist-carousel{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
.home-minimal .playlist-carousel::before,
.home-minimal .playlist-carousel::after{
  border-radius:0!important;
}
@media(max-width:850px){
  .home-minimal{padding-left:0!important;padding-right:0!important}
  .home-minimal-head{padding-left:24px!important;padding-right:24px!important}
}
@media(max-width:620px){
  .home-minimal-head{padding-left:14px!important;padding-right:14px!important}
}


/* Remove dark side shadows from the carousel */
.playlist-carousel::after{
  display:none!important;
  background:none!important;
}


/* Search transforms into a results-only stage after the first query */
#searchView.search-has-results .search-panel{
  display:none!important;
}
#searchView.search-has-results .search-results-clean{
  padding-top:112px!important;
}

/* === CLEAN SEARCH + MOTION SYSTEM === */
.view.active{
  animation:viewReveal .42s var(--ease) both;
}
@keyframes viewReveal{
  from{opacity:0;transform:translateY(14px) scale(.994)}
  to{opacity:1;transform:none}
}
.search-results-clean{
  min-height:calc(100vh - var(--player) - 90px);
  padding:128px 5vw 70px!important;
}
.search-results-clean:empty{display:block}
.search-status{display:none!important}
.search-loading{
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.search-loading span{
  width:5px;height:5px;border-radius:50%;
  background:var(--theme-accent);
  animation:searchDot 1s ease-in-out infinite;
}
.search-loading span:nth-child(2){animation-delay:.12s}
.search-loading span:nth-child(3){animation-delay:.24s}
@keyframes searchDot{
  0%,100%{transform:translateY(0);opacity:.25}
  50%{transform:translateY(-7px);opacity:1}
}
.result-card{
  opacity:0;
  transform:translateY(24px) scale(.985);
  animation:resultReveal .52s var(--ease) forwards;
  animation-delay:calc(var(--item-index,0) * 35ms);
}
@keyframes resultReveal{
  to{opacity:1;transform:none}
}
.dialog{
  opacity:0;
  transform:translateY(14px) scale(.97);
}
dialog[open]{
  animation:dialogReveal .34s var(--ease) both;
}
dialog::backdrop{
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(7px);
  animation:backdropReveal .32s ease both;
}
@keyframes dialogReveal{
  from{opacity:0;transform:translateY(16px) scale(.965)}
  to{opacity:1;transform:none}
}
@keyframes backdropReveal{
  from{opacity:0}
  to{opacity:1}
}
.playlist-carousel .playlist-card{
  opacity:var(--carousel-opacity,1)!important;
  filter:blur(var(--carousel-blur,0px))!important;
  transition:transform .22s var(--ease),opacity .28s ease,filter .28s ease,border-color .28s ease,box-shadow .28s ease!important;
}
.playlist-carousel .playlist-card.is-center{
  filter:blur(0)!important;
  opacity:1!important;
}
.playlist-carousel .playlist-art img{
  opacity:1!important;
}
.background-image{
  opacity:var(--bg-image-opacity)!important;
  filter:blur(var(--bg-image-blur))!important;
  transform:scale(1.04)!important;
}
.background-image::after{display:none!important}
body::before,body::after{display:none!important}
@media(max-width:850px){
  .search-results-clean{padding:110px 24px 70px!important}
}
@media(max-width:620px){
  .search-results-clean{padding:96px 14px 70px!important}
}
@media(prefers-reduced-motion:reduce){
  .view.active,.result-card,dialog[open],dialog::backdrop{animation:none!important}
  .search-loading span{animation:none!important}
}


/* Carousel glass surface follows the appearance controls */
.playlist-carousel .playlist-card{
  background:color-mix(in srgb,var(--theme-surface) var(--carousel-fill-pct,72%),transparent)!important;
  -webkit-backdrop-filter:blur(var(--glass-blur,16px)) saturate(115%)!important;
  backdrop-filter:blur(var(--glass-blur,16px)) saturate(115%)!important;
}
.playlist-carousel .playlist-card.is-center{
  opacity:var(--carousel-opacity,1)!important;
  filter:blur(var(--carousel-blur,0px))!important;
}


/* === DESKTOP APPEARANCE PANEL === */
.appearance-modal{
  width:min(1120px,calc(100vw - 42px))!important;
  max-width:1120px!important;
  max-height:min(88vh,820px)!important;
  padding:26px!important;
  overflow:auto!important;
}
.appearance-head{margin-bottom:18px}
.appearance-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
}
.appearance-section{
  min-width:0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:color-mix(in srgb,var(--theme-surface) 52%,transparent);
}
.appearance-section-wide{grid-column:1/-1}
.appearance-section-head{
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding-bottom:13px;
  border-bottom:1px solid var(--line);
}
.appearance-section-head>span{
  color:var(--theme-accent);
  font:500 8px "DM Mono";
}
.appearance-section-head b{
  display:block;
  font:600 9px "DM Mono";
  letter-spacing:.12em;
  color:var(--theme-primary);
}
.appearance-section-head small{
  display:block;
  margin-top:4px;
  color:var(--theme-secondary);
  font-size:8px;
}
.appearance-section .setting-block{margin-top:15px}
.appearance-columns{
  display:grid;
  grid-template-columns:1.1fr 1.1fr .9fr .9fr;
  gap:10px;
}
.compact-block{margin-top:0!important}
.appearance-actions{
  position:sticky;
  bottom:0;
  margin:12px -26px -26px;
  padding:14px 26px 26px;
  background:linear-gradient(180deg,transparent,var(--panel-2) 32%);
}
.appearance-modal::-webkit-scrollbar{width:6px}
.appearance-modal::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}

/* Center search */
.search-panel{
  min-height:calc(100vh - var(--player));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:100px 24px 80px;
}
.search-panel>.eyebrow{color:var(--theme-secondary)}
.search-panel-shell{
  width:min(760px,90vw);
  height:76px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 46px;
  align-items:center;
  gap:10px;
  padding:0 10px 0 20px;
  border:1px solid var(--line-strong);
  border-radius:24px;
  background:color-mix(in srgb,var(--theme-surface) 42%,transparent);
  box-shadow:0 35px 90px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(var(--glass-blur,16px)) saturate(115%);
  backdrop-filter:blur(var(--glass-blur,16px)) saturate(115%);
  transition:transform .28s var(--ease),border-color .28s ease,background .28s ease;
}
.search-panel-shell:focus-within{
  transform:translateY(-2px) scale(1.008);
  border-color:color-mix(in srgb,var(--theme-accent) 38%,transparent);
}
.search-panel-shell>span{color:var(--theme-secondary);font-size:22px}
.search-panel-shell input{
  min-width:0;width:100%;height:100%;border:0;outline:0;background:transparent;color:var(--theme-primary);font-size:16px;
}
.search-panel-shell input::placeholder{color:color-mix(in srgb,var(--theme-secondary) 75%,transparent)}
.search-panel-shell button{
  width:46px;height:46px;border:1px solid var(--line);border-radius:14px;
  background:var(--theme-primary);color:var(--theme-background);
  transition:transform .2s var(--ease),opacity .2s ease;
}
.search-panel-shell button:hover{transform:translateY(-2px)}
.search-results-clean:not(:empty){padding-top:24px!important;min-height:auto}

/* Open playlist panel follows its own appearance controls */
.playlist-open{
  opacity:var(--playlist-panel-opacity,.96)!important;
  -webkit-backdrop-filter:blur(var(--playlist-panel-blur,16px)) saturate(115%)!important;
  backdrop-filter:blur(var(--playlist-panel-blur,16px)) saturate(115%)!important;
  animation:playlistPanelIn .46s var(--ease) both!important;
}
@keyframes playlistPanelIn{
  from{opacity:0;transform:translateY(20px) scale(.97)}
  to{opacity:1;transform:none}
}
.playlist-carousel.is-open .playlist-open{
  cursor:default;
}

/* Make Home fit the viewport more tightly */
.home-minimal{
  min-height:calc(100vh - var(--player) - 8px)!important;
  height:calc(100vh - var(--player) - 8px)!important;
  padding-top:92px!important;
  padding-bottom:0!important;
  overflow:hidden;
}
.home-minimal-head{
  margin-bottom:0!important;
  padding-bottom:8px!important;
}
.home-minimal .playlist-carousel{
  height:calc(100vh - var(--player) - 104px)!important;
  min-height:500px!important;
  max-height:620px!important;
}
body:not(.player-expanded) .home-minimal{
  overflow:hidden;
}

@media(max-width:900px){
  .appearance-grid{grid-template-columns:1fr}
  .appearance-section-wide{grid-column:auto}
  .appearance-columns{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .appearance-modal{width:calc(100vw - 20px)!important;padding:16px!important}
  .appearance-columns{grid-template-columns:1fr}
  .appearance-actions{margin:12px -16px -16px;padding:12px 16px 16px}
  .search-panel{padding:90px 14px 60px}
  .search-panel-shell{height:64px;width:calc(100vw - 28px);border-radius:19px;grid-template-columns:27px minmax(0,1fr) 42px;padding-left:15px}
  .search-panel-shell input{font-size:13px}
  .search-panel-shell button{width:40px;height:40px;border-radius:12px}
}


/* Open playlist panel: opacity/blur apply to background layer only */
.playlist-open{
  opacity:1!important;
  background:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  isolation:isolate;
}
.playlist-open::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(
    145deg,
    color-mix(in srgb,var(--theme-surface) 92%,transparent),
    color-mix(in srgb,var(--theme-background) 96%,transparent)
  );
  opacity:var(--playlist-panel-opacity,.96);
  -webkit-backdrop-filter:blur(var(--playlist-panel-blur,16px)) saturate(115%);
  backdrop-filter:blur(var(--playlist-panel-blur,16px)) saturate(115%);
}
.playlist-open-media,
.playlist-open-body{
  position:relative;
  z-index:1;
}
.playlist-open-media{background:transparent!important}
.playlist-open-body{background:transparent!important}
@keyframes playlistPanelIn{
  from{opacity:0;transform:translateY(20px) scale(.97)}
  to{opacity:1;transform:none}
}


/* === FINAL HOME IMMERSIVE STAGE === */
.main:has(#homeView.active){
  padding-bottom:0!important;
  overflow:hidden!important;
}
#homeView.active{
  height:calc(100dvh - var(--player) - 12px)!important;
  min-height:0!important;
  overflow:hidden!important;
}
.home-minimal{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:86px 0 0!important;
  margin:0!important;
  overflow:hidden!important;
}
.home-minimal-head{
  width:100%!important;
  max-width:none!important;
  height:24px!important;
  min-height:24px!important;
  margin:0!important;
  padding:0 22px 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}
.home-minimal .carousel-frame{
  width:100%!important;
  height:calc(100% - 24px)!important;
  min-height:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
.home-minimal .playlist-carousel{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.playlist-carousel .playlist-stage-track{
  width:100%!important;
  height:100%!important;
}
@media(max-width:620px){
  #homeView.active{height:calc(100dvh - var(--player) - 6px)!important}
  .home-minimal{padding-top:74px!important}
  .home-minimal-head{padding:0 14px!important;height:22px!important;min-height:22px!important}
  .home-minimal .carousel-frame{height:calc(100% - 22px)!important}
}


/* === VIEWPORT IMMERSION / FINAL LAYOUT === */

/* Home is a true viewport-level canvas, including under fixed UI chrome. */
#homeView.active{
  position:fixed!important;
  inset:0!important;
  z-index:1!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
#homeView.active .home-minimal{
  position:relative!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
}
#homeView.active .home-minimal-head{
  position:absolute!important;
  z-index:4!important;
  top:82px!important;
  left:0!important;
  right:0!important;
  width:auto!important;
  height:18px!important;
  min-height:18px!important;
  padding:0 24px!important;
  margin:0!important;
  pointer-events:none!important;
  border:0!important;
}
#homeView.active .carousel-frame{
  position:absolute!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
#homeView.active .playlist-carousel{
  position:absolute!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#homeView.active .playlist-stage-track{inset:0!important}

/* Search starts as the same compact viewport canvas as Home. */
#searchView:not(.search-has-results){
  position:fixed!important;
  inset:0!important;
  z-index:1!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
#searchView:not(.search-has-results) .search-panel{
  width:100vw!important;
  height:100dvh!important;
  min-height:0!important;
  padding:0 24px!important;
  justify-content:center!important;
}
#searchView.search-has-results{
  position:relative!important;
  inset:auto!important;
  z-index:auto!important;
  width:auto!important;
  min-height:calc(100vh - var(--player))!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
#searchView.search-has-results .search-results-clean{
  min-height:calc(100vh - var(--player))!important;
  padding:112px 5vw 150px!important;
}

/* Mini YouTube preview hugs the far-left edge of the existing sidebar panel. */
.youtube-host{
  left:22px!important;
  right:auto!important;
  width:calc(var(--sidebar) - 44px)!important;
  max-width:none!important;
}
@media(max-width:850px){
  .youtube-host{
    left:12px!important;
    right:auto!important;
    width:266px!important;
  }
}
@media(max-width:620px){
  .youtube-host{
    left:12px!important;
    right:auto!important;
    bottom:164px!important;
    width:230px!important;
  }
}

/* Keep the page itself from creating Home's old phantom bottom scroll. */
body:has(#homeView.active){
  overflow:hidden!important;
}


/* === COMPACT OPEN PLAYLIST PANEL === */
.playlist-open{
  inset:92px 7vw 132px calc(var(--sidebar) + 7vw)!important;
  z-index:40!important;
  width:auto!important;
  max-width:none!important;
  min-height:0!important;
  padding:12px!important;
  gap:14px!important;
  border-radius:22px!important;
  pointer-events:auto!important;
}
.playlist-open-media{
  border-radius:16px!important;
}
.playlist-open-body{
  padding:18px 18px 14px 4px!important;
}
.playlist-open-heading{
  gap:12px!important;
}
.playlist-open-heading h3{
  font-size:clamp(30px,3vw,48px)!important;
  line-height:.95!important;
}
.playlist-open-settings{
  width:38px!important;
  height:38px!important;
  border-radius:10px!important;
}
.playlist-open-list{
  margin-top:14px!important;
  gap:5px!important;
}
.playlist-open-track{
  grid-template-columns:24px 42px minmax(0,1fr) 24px!important;
  gap:8px!important;
  padding:5px!important;
  border-radius:9px!important;
}
.playlist-open-track img{
  width:42px!important;
  height:42px!important;
  border-radius:8px!important;
}
.playlist-open-foot{
  margin-top:8px!important;
  padding-top:8px!important;
}
.playlist-open-action,
.playlist-open-close{
  min-height:36px!important;
  padding:0 12px!important;
}
@media(max-width:1100px){
  .playlist-open{
    inset:84px 5vw 132px calc(var(--sidebar) + 4vw)!important;
  }
}
@media(max-width:850px){
  .playlist-open{
    inset:76px 24px 150px 24px!important;
    grid-template-columns:1fr 1fr!important;
  }
}
@media(max-width:620px){
  .playlist-open{
    inset:64px 12px 176px 12px!important;
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(120px,32%) minmax(0,68%)!important;
    gap:8px!important;
    padding:8px!important;
    border-radius:18px!important;
  }
  .playlist-open-body{
    padding:8px 9px!important;
  }
  .playlist-open-heading h3{
    font-size:32px!important;
  }
}


/* Keep Video Preview alive, but completely behind the sidebar edge. */
.youtube-host{
  left:0!important;
  right:auto!important;
  transform:translateX(calc(-100% - 16px))!important;
  z-index:69!important;
  pointer-events:none!important;
}
.youtube-host.ready{
  transform:translateX(calc(-100% - 16px))!important;
}
@media(max-width:850px){
  .youtube-host{
    left:0!important;
    transform:translateX(calc(-100% - 12px))!important;
  }
}
@media(max-width:620px){
  .youtube-host{
    left:0!important;
    bottom:164px!important;
    transform:translateX(calc(-100% - 10px))!important;
  }
}


/* === PERFORMANCE PASS === */

/* Hidden YouTube preview should not spend frames painting its iframe/backdrop. */
.youtube-host{
  visibility:hidden!important;
  content-visibility:hidden!important;
  contain:strict!important;
  pointer-events:none!important;
}

/* Limit expensive paint work to the carousel's own layer. */
#homeView.active,
#homeView.active .home-minimal,
#homeView.active .carousel-frame,
#homeView.active .playlist-carousel{
  contain:layout paint!important;
  isolation:isolate;
}
.playlist-carousel .playlist-card{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* Long result lists only paint cards when they approach the viewport. */
.search-results-clean .result-card{
  content-visibility:auto;
  contain-intrinsic-size:0 250px;
}


/* === SIDEBAR PLAYLIST SWITCH ANIMATION === */
.sidebar-playlist{
  will-change:transform,opacity,background-color;
}
.sidebar-playlist.is-selected{
  color:var(--theme-primary)!important;
  border-color:var(--line-strong)!important;
  background:color-mix(in srgb,var(--theme-primary) 6%,transparent)!important;
}
.sidebar-playlist.is-switching{
  animation:sidebarPlaylistSwitch .36s var(--ease) both;
}
@keyframes sidebarPlaylistSwitch{
  0%{transform:translateX(-8px) scale(.985);opacity:.45;filter:blur(1px)}
  55%{transform:translateX(3px) scale(1.012);opacity:1;filter:blur(0)}
  100%{transform:translateX(0) scale(1);opacity:1;filter:none}
}

/* Animate the playlist page even when it is already the active view. */
#playlistView.playlist-switching #playlistHero{
  animation:playlistHeroSwitch .44s var(--ease) both;
}
#playlistView.playlist-switching #playlistTracks{
  animation:playlistTracksSwitch .48s var(--ease) .04s both;
}
@keyframes playlistHeroSwitch{
  from{opacity:0;transform:translateY(14px) scale(.988);filter:blur(3px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes playlistTracksSwitch{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

/* Search reset should feel intentional when returning to the empty Search screen. */
#searchView:not(.search-has-results) .search-panel-shell{
  animation:searchResetIn .32s var(--ease) both;
}
@keyframes searchResetIn{
  from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .sidebar-playlist.is-switching,
  #playlistView.playlist-switching #playlistHero,
  #playlistView.playlist-switching #playlistTracks,
  #searchView:not(.search-has-results) .search-panel-shell{
    animation:none!important;
  }
}


/* === COMPACT MOBILE PLAYER === */
@media(max-width:620px){
  .player{
    left:7px!important;
    right:7px!important;
    bottom:7px!important;
    min-height:72px!important;
    padding:6px 7px!important;
    gap:4px!important;
    border-radius:14px!important;
  }
  .now-playing{
    gap:6px!important;
    min-width:0!important;
  }
  .now-art{
    width:36px!important;
    height:36px!important;
    border-radius:8px!important;
  }
  .now-copy strong{
    max-width:145px!important;
    font-size:9px!important;
  }
  .now-copy span{
    max-width:145px!important;
    margin-top:2px!important;
    font-size:7px!important;
  }
  .heart-button{
    width:26px!important;
    height:26px!important;
    font-size:13px!important;
  }
  .player-controls{
    grid-column:1/-1!important;
    min-width:0!important;
  }
  .transport{
    gap:3px!important;
    min-height:30px!important;
  }
  .control-button,
  .expand-button{
    width:27px!important;
    height:27px!important;
    border-radius:8px!important;
    font-size:7px!important;
  }
  .play-button{
    width:31px!important;
    height:31px!important;
    font-size:8px!important;
  }
  .progress-row{
    grid-template-columns:24px 1fr 24px!important;
    gap:4px!important;
    margin-top:2px!important;
  }
  .progress-row span{
    font-size:6px!important;
  }
  .player-side{
    gap:3px!important;
  }
  .player-side .control-button{
    width:27px!important;
    height:27px!important;
  }
  .volume{
    display:none!important;
  }
  .player-side .expand-button{
    width:27px!important;
    height:27px!important;
  }
}

/* Extra-small phones */
@media(max-width:390px){
  .player{
    min-height:68px!important;
    padding:5px 6px!important;
    left:5px!important;
    right:5px!important;
    bottom:5px!important;
  }
  .now-art{
    width:32px!important;
    height:32px!important;
  }
  .now-copy strong,.now-copy span{
    max-width:120px!important;
  }
  .control-button,.expand-button{
    width:25px!important;
    height:25px!important;
  }
  .play-button{
    width:29px!important;
    height:29px!important;
  }
  .player-side .control-button,
  .player-side .expand-button{
    width:25px!important;
    height:25px!important;
  }
}


/* === ULTRA COMPACT MOBILE PLAYER === */
@media(max-width:620px){
  .player{
    left:4px!important;
    right:4px!important;
    bottom:4px!important;
    min-height:58px!important;
    height:58px!important;
    padding:5px 7px 3px!important;
    gap:0!important;
    border-radius:12px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:1fr auto!important;
    align-items:center!important;
  }

  .now-playing{
    grid-column:1!important;
    grid-row:1!important;
    gap:5px!important;
    min-width:0!important;
  }
  .now-art{
    width:30px!important;
    height:30px!important;
    border-radius:7px!important;
  }
  .now-copy strong{
    max-width:135px!important;
    font-size:8px!important;
  }
  .now-copy span{
    max-width:135px!important;
    margin-top:1px!important;
    font-size:6.5px!important;
  }
  .heart-button{
    width:22px!important;
    height:22px!important;
    padding:0!important;
    font-size:12px!important;
  }

  /* Keep only the stop control from the right-side tools. */
  #queueBtn,
  #volumeBtn,
  #expandPlayer{
    display:none!important;
  }
  .player-side{
    grid-column:2!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    gap:2px!important;
  }
  .stop-button{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    border-radius:7px!important;
    font-size:7px!important;
    padding:0!important;
  }

  .player-controls{
    grid-column:1 / -1!important;
    grid-row:2!important;
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    align-self:end!important;
  }
  .transport{
    min-height:24px!important;
    height:24px!important;
    gap:2px!important;
    justify-content:center!important;
  }
  .control-button{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    border-radius:7px!important;
    font-size:6.5px!important;
    padding:0!important;
  }
  .play-button{
    width:27px!important;
    height:27px!important;
    min-width:27px!important;
    font-size:7px!important;
  }

  .progress-row{
    width:100%!important;
    grid-template-columns:20px minmax(0,1fr) 20px!important;
    gap:3px!important;
    margin:0!important;
    padding-top:1px!important;
  }
  .progress-row span{
    font-size:5.5px!important;
    line-height:1!important;
  }
  .progress-row input{
    height:10px!important;
    margin:0!important;
  }

  .volume{display:none!important}
}

/* Tiny phones: collapse even further. */
@media(max-width:390px){
  .player{
    left:3px!important;
    right:3px!important;
    bottom:3px!important;
    min-height:54px!important;
    height:54px!important;
    padding:4px 6px 2px!important;
  }
  .now-art{
    width:27px!important;
    height:27px!important;
  }
  .now-copy strong,.now-copy span{
    max-width:116px!important;
  }
  .heart-button{
    width:20px!important;
    height:20px!important;
    font-size:11px!important;
  }
  .stop-button,
  .control-button{
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
  }
  .play-button{
    width:25px!important;
    height:25px!important;
  }
  .transport{
    height:22px!important;
    min-height:22px!important;
  }
}


/* === MOBILE DRAWER + NO INPUT ZOOM === */
@media(max-width:850px){
  .sidebar{
    z-index:120!important;
    pointer-events:none!important;
    visibility:hidden!important;
    transform:translate3d(-112%,0,0)!important;
  }
  .sidebar.open{
    z-index:120!important;
    pointer-events:auto!important;
    visibility:visible!important;
    transform:translate3d(0,0,0)!important;
  }
  .overlay{
    z-index:110!important;
    touch-action:manipulation!important;
  }
  .overlay.active{
    display:block!important;
  }
  .top-search input,
  #searchInput,
  #searchPanelInput{
    font-size:16px!important;
    line-height:1.2!important;
    -webkit-text-size-adjust:100%!important;
  }
}
@media(max-width:620px){
  .top-search input,
  #searchInput,
  #searchPanelInput{
    font-size:16px!important;
    transform:none!important;
  }
}


/* === PLAYER ACTIONS === */
.now-playing{position:relative}
.playlist-add-button{
  width:32px;height:32px;display:grid;place-items:center;flex:none;
  border:1px solid var(--line);border-radius:9px;
  background:rgba(255,255,255,.025);color:var(--muted);
  font:500 16px Manrope;line-height:1;transition:.2s var(--ease)
}
.playlist-add-button:hover{
  color:#fff;background:rgba(255,255,255,.07);
  border-color:var(--line-strong);transform:translateY(-1px)
}
.playlist-add-button:disabled{opacity:.35;pointer-events:none}
.full-player-actions{display:flex;align-items:center;gap:7px}
.full-player-add{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.1);border-radius:50%;
  background:rgba(255,255,255,.035);color:#a8aab4;font-size:18px;
  transition:.2s var(--ease)
}
.full-player-add:hover{color:#fff;background:rgba(255,255,255,.08)}
.full-player-add:disabled{opacity:.35;pointer-events:none}

/* === LOCAL AUDIO / PLAYBACK SETTINGS === */
.playback-section .setting-block{margin-top:8px}
.playback-choice{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 13px;border:1px solid var(--line);border-radius:13px;
  background:rgba(255,255,255,.025)
}
.playback-choice-main{min-width:0}
.playback-choice-main strong{display:block;font-size:11px}
.playback-choice-main span{
  display:block;margin-top:3px;color:var(--muted);
  font-size:9px;line-height:1.5
}
#localAudioStatus{display:block;margin-top:7px;color:var(--dim);font-size:9px}

/* === MOBILE PLAYER REFINEMENT === */
@media(max-width:620px){
  .main{padding-bottom:105px!important}
  .player{
    left:8px!important;right:8px!important;bottom:8px!important;
    min-height:78px!important;height:78px!important;
    padding:7px 9px 5px!important;
    border-radius:17px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:43px 25px!important;
    gap:3px!important;
    box-shadow:inset 0 1px rgba(255,255,255,.08),0 18px 50px rgba(0,0,0,.34)!important
  }
  .now-playing{
    grid-column:1!important;grid-row:1!important;
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr) 30px 30px!important;
    align-items:center!important;
    gap:6px!important
  }
  .now-art{
    width:40px!important;height:40px!important;
    border-radius:10px!important
  }
  .now-copy strong{max-width:none!important;font-size:9.5px!important}
  .now-copy span{max-width:none!important;font-size:7.5px!important}
  .heart-button,.playlist-add-button{
    width:30px!important;height:30px!important;
    min-width:30px!important;
    border-radius:9px!important;
    font-size:14px!important;
    padding:0!important
  }
  .player-side{
    grid-column:2!important;grid-row:1!important;
    align-self:center!important;justify-self:end!important
  }
  .player-side #stopBtn{
    width:30px!important;height:30px!important;
    min-width:30px!important;border-radius:9px!important
  }
  #queueBtn,#volumeBtn,#expandPlayer{display:none!important}
  .player-controls{
    grid-column:1/-1!important;grid-row:2!important;
    width:100%!important;display:flex!important;
    flex-direction:row!important;align-items:center!important;gap:7px!important
  }
  .transport{
    flex:0 0 auto!important;
    min-height:25px!important;height:25px!important;
    gap:2px!important;justify-content:flex-start!important
  }
  .control-button{
    width:24px!important;height:24px!important;
    min-width:24px!important;border-radius:7px!important;
    font-size:6.5px!important
  }
  .play-button{
    width:27px!important;height:27px!important;
    min-width:27px!important;font-size:7px!important
  }
  .progress-row{
    flex:1 1 auto!important;min-width:0!important;
    grid-template-columns:21px minmax(0,1fr) 21px!important;
    gap:3px!important;margin:0!important
  }
  .progress-row span{font-size:5.5px!important}
  .progress-row input{height:9px!important;margin:0!important}
  .library-tabs{
    margin-left:14px!important;margin-right:14px!important;
    max-width:none!important;
    scrollbar-width:none
  }
  .library-tabs::-webkit-scrollbar{display:none}
  .library-tab{flex:0 0 auto!important}
  .results-grid{padding:0 14px 108px!important}
  .library-list{margin:0 14px 108px!important}
  .empty-state{margin-left:14px!important;margin-right:14px!important;margin-bottom:108px!important}
  .playlist-open{inset:64px 10px 104px!important}
  .playlist-open-body{min-height:0!important}
  .playlist-open-list{padding-bottom:4px!important}
  .playback-choice{align-items:flex-start;flex-direction:column!important}
  .playback-choice .file-button{width:100%!important}
  .full-player-top{padding:14px 14px!important}
  .full-player-center{padding:8px 16px 18px!important}
  .full-player-art-wrap{
    width:min(82vw,420px)!important;
    border-radius:18px!important
  }
  .full-player-copy{margin-top:16px!important;width:92vw!important}
  .full-player-copy h2{font-size:clamp(26px,8vw,42px)!important}
  .full-player-bottom{
    width:calc(100vw - 20px)!important;
    margin:0 auto 10px!important;
    padding:12px 12px 13px!important;
    border-radius:16px!important
  }
  .full-player-actions{gap:6px!important}
  .full-player-like,.full-player-add{
    width:36px!important;height:36px!important
  }
}
@media(max-width:390px){
  .player{
    left:6px!important;right:6px!important;bottom:6px!important;
    min-height:74px!important;height:74px!important;
    grid-template-rows:40px 25px!important
  }
  .now-playing{
    grid-template-columns:36px minmax(0,1fr) 28px 28px!important;
    gap:5px!important
  }
  .now-art{width:36px!important;height:36px!important}
  .heart-button,.playlist-add-button{
    width:28px!important;height:28px!important;min-width:28px!important
  }
  .player-side #stopBtn{
    width:28px!important;height:28px!important;min-width:28px!important
  }
  .transport .control-button{width:22px!important;height:22px!important;min-width:22px!important}
  .transport .play-button{width:25px!important;height:25px!important;min-width:25px!important}
}


/* === ADD-TO-PLAYLIST DIALOG === */
.add-playlist-dialog{
  width:min(430px,calc(100vw - 28px));
  max-height:min(70vh,620px);
}
.add-playlist-dialog .modal-head{
  margin-bottom:10px;
}
.add-playlist-dialog [style*="display:grid"]{
  max-height:48vh;
  overflow:auto;
  padding-right:2px;
}
.add-playlist-dialog .add-track-option{
  width:100%;
  min-height:52px;
  grid-template-columns:36px minmax(0,1fr);
  padding:7px;
  font-size:10px;
  border:1px solid transparent;
}
.add-playlist-dialog .add-track-option:hover{
  border-color:var(--line);
  background:rgba(255,255,255,.045);
}
.add-playlist-dialog .add-track-option img,
.add-playlist-dialog .add-track-option .fallback-art{
  width:36px;height:36px;border-radius:9px
}

@media(max-width:620px){
  .add-playlist-dialog{
    width:calc(100vw - 20px)!important;
    max-width:none!important;
    margin:auto!important;
    border-radius:20px!important;
    padding:13px!important;
  }
  .add-playlist-dialog .add-track-option{
    min-height:58px!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    padding:8px!important;
    border-radius:12px!important;
  }
  .add-playlist-dialog .add-track-option img,
  .add-playlist-dialog .add-track-option .fallback-art{
    width:42px!important;height:42px!important;border-radius:10px!important;
  }
}


/* On phones the bottom player exists only when a track is selected/playing. */
@media(max-width:620px){
  #playerBar:not(.has-track){
    display:none!important;
  }
}


/* === LOCAL AUDIO LIBRARY === */
.local-library-head{
  margin:0 7vw 14px;
  padding:14px 16px;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.local-library-head h3{
  margin:8px 0 4px;
  font-size:24px;
  letter-spacing:-.045em;
}
.local-library-head p{
  margin:0;
  color:var(--muted);
  font-size:10px;
  line-height:1.55;
}
.local-audio-list{margin-top:0}
.local-audio-row{
  grid-template-columns:48px minmax(0,1fr) 70px 70px auto;
}
.local-audio-thumb{
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,rgba(231,175,199,.18),rgba(255,255,255,.03));
  color:var(--pink);
  font-size:18px;
}
.local-audio-empty{margin-top:0}
.local-audio-row .track-main strong{
  font-size:11px;
}
.local-audio-row .track-actions{
  gap:4px;
}
.local-audio-row .track-action{
  flex:none;
}
@media(max-width:850px){
  .local-library-head{
    margin-left:24px;
    margin-right:24px;
  }
  .local-audio-row{
    grid-template-columns:48px minmax(0,1fr) auto;
  }
  .local-audio-row .track-artist,
  .local-audio-row .track-duration{
    display:none;
  }
}
@media(max-width:620px){
  .local-library-head{
    margin:0 14px 12px;
    padding:13px;
    flex-direction:column;
    align-items:stretch;
    border-radius:16px;
  }
  .local-library-head .primary-button{
    width:100%;
  }
  .local-library-head h3{
    font-size:21px;
  }
  .local-audio-row{
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:8px;
    padding:7px;
  }
  .local-audio-thumb{
    width:42px;
    height:42px;
    border-radius:10px;
  }
  .local-audio-row .track-actions{
    flex-direction:row;
  }
  .local-audio-row .track-action{
    width:31px;
    height:31px;
  }
  .local-audio-row .track-main strong{
    font-size:10px;
  }
  .local-audio-row .track-main span{
    font-size:8px;
  }
}


/* === MOBILE PERFORMANCE PASS === */
@media(max-width:850px){
  .topbar,
  .sidebar,
  .player,
  .modal,
  .first-run-card,
  .mobile-tab-bar{
    backdrop-filter:blur(clamp(8px,var(--glass-blur,16px),16px)) saturate(110%)!important;
    -webkit-backdrop-filter:blur(clamp(8px,var(--glass-blur,16px),16px)) saturate(110%)!important;
  }
  .playlist-carousel .playlist-card{
    box-shadow:none!important;
    transition:transform .16s ease,opacity .14s ease,border-color .16s ease!important;
  }
  .playlist-carousel .playlist-card.is-center{
    box-shadow:0 20px 48px rgba(0,0,0,.34)!important;
  }
  .playlist-carousel .playlist-art img{
    transition:none!important;
  }
  .full-player-bg{
    will-change:auto!important;
  }
}
@media(max-width:620px){
  .background-image{
    will-change:auto!important;
    transform:none!important;
  }
  .ambient{
    display:none!important;
  }
  .mobile-tab-bar{
    backdrop-filter:blur(clamp(8px,var(--glass-blur,16px),14px)) saturate(108%)!important;
    -webkit-backdrop-filter:blur(clamp(8px,var(--glass-blur,16px),14px)) saturate(108%)!important;
  }
  .playlist-carousel{
    perspective:none!important;
  }
  .playlist-carousel .playlist-card{
    transform-style:flat!important;
  }
}


/* === MOBILE CAROUSEL / FULL PLAYER POLISH === */
@media(max-width:620px){
  /* Keep the original layered 3D carousel; only make touch movement lighter/faster. */
  .playlist-carousel{
    touch-action:pan-y;
    overscroll-behavior-x:contain;
    perspective:1100px!important;
  }
  .playlist-carousel .playlist-stage-track{
    perspective:1100px!important;
  }
  .playlist-carousel .playlist-card{
    transform-style:preserve-3d!important;
    transition:transform .16s cubic-bezier(.16,1,.3,1),opacity .14s ease!important;
    will-change:transform,opacity;
  }

  /* Fullscreen player owns the whole phone viewport. */
  body.player-expanded .topbar,
  body.player-expanded .player,
  body.player-expanded .mobile-tab-bar,
  body.player-expanded .sidebar,
  body.player-expanded .overlay,
  body.player-expanded #overlay{
    display:none!important;
  }
  body.player-expanded .full-player{
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    border-radius:0!important;
  }
  .full-player-top{
    padding:calc(12px + env(safe-area-inset-top,0px)) 14px 10px!important;
  }
  .full-player-icon{
    width:46px!important;
    height:46px!important;
    font-size:22px!important;
    background:rgba(7,8,12,.46)!important;
    border-color:rgba(255,255,255,.16)!important;
  }
  .full-player-center{
    padding:8px 14px 14px!important;
  }
  .full-player-art-wrap{
    width:min(82vw,420px)!important;
    box-shadow:0 34px 100px rgba(0,0,0,.55)!important;
  }
  .full-player-copy h2{
    max-width:94vw!important;
  }
  .full-player-bottom{
    margin-bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
  }
}
@media(max-width:390px){
  .full-player-art-wrap{width:min(84vw,360px)!important}
  .full-player-copy h2{font-size:clamp(24px,7.8vw,34px)!important}
}


/* === MOBILE FULL PLAYER ENTRANCE === */
@media(max-width:620px){
  .full-player.mobile-player-enter{
    animation:mobileFullPlayerIn .42s cubic-bezier(.16,1,.3,1) both;
  }
  .full-player.mobile-player-enter .full-player-art-wrap{
    animation:mobileFullArtIn .5s .04s cubic-bezier(.16,1,.3,1) both;
  }
  .full-player.mobile-player-enter .full-player-copy{
    animation:mobileFullCopyIn .38s .12s cubic-bezier(.16,1,.3,1) both;
  }
  .full-player.mobile-player-enter .full-player-bottom{
    animation:mobileFullControlsIn .34s .16s ease both;
  }
  @keyframes mobileFullPlayerIn{
    from{opacity:0;transform:translate3d(0,18px,0) scale(1.015)}
    to{opacity:1;transform:none}
  }
  @keyframes mobileFullArtIn{
    from{opacity:0;transform:translate3d(0,12px,0) scale(.94)}
    to{opacity:1;transform:none}
  }
  @keyframes mobileFullCopyIn{
    from{opacity:0;transform:translate3d(0,8px,0)}
    to{opacity:1;transform:none}
  }
  @keyframes mobileFullControlsIn{
    from{opacity:0;transform:translate3d(0,12px,0)}
    to{opacity:1;transform:none}
  }
}