:root{
  --bg:#090a0c;
  --text:#f6f7f8;
  --muted:rgba(246,247,248,.62);
  --faint:rgba(246,247,248,.38);
  --glass:rgba(20,22,26,.48);
  --glass-strong:rgba(22,24,29,.68);
  --glass-line:rgba(255,255,255,.12);
  --accent:#c2d0ff;
  --accent-strong:#8fa9ff;
  --good:#6dffca;
  --shadow:0 22px 70px rgba(0,0,0,.36);
  --radius-xl:30px;
  --radius-lg:24px;
  --radius-md:19px;
  --safe-bottom:max(18px, env(safe-area-inset-bottom));
  --ambient-image:none;
  font-synthesis:none;
}

*{box-sizing:border-box}
html{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:
  radial-gradient(circle at 20% 5%,rgba(93,99,137,.16),transparent 34%),
  radial-gradient(circle at 85% 30%,rgba(104,62,108,.12),transparent 34%),
  var(--bg);overflow-x:hidden}
button,input{font:inherit}
button{color:inherit}
img{display:block;max-width:100%}
button:focus-visible,input:focus-visible{outline:2px solid rgba(194,208,255,.9);outline-offset:3px}

.ambient{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  linear-gradient(180deg,rgba(3,4,6,.28),rgba(7,8,10,.86)),
  var(--ambient-image),
  #090a0c;background-size:cover;background-position:center;transition:background-image .9s ease,filter .8s ease}
.ambient::after{content:"";position:absolute;inset:-12%;background:
  radial-gradient(circle at 38% 16%,rgba(255,186,105,.15),transparent 22%),
  radial-gradient(circle at 75% 62%,rgba(129,166,255,.14),transparent 25%);
  filter:blur(46px);opacity:.9;pointer-events:none}
.ambient-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.16;animation:float 11s ease-in-out infinite}
.ambient-orb-a{width:280px;height:280px;left:-110px;top:18%;background:#7c8ee7}
.ambient-orb-b{width:320px;height:320px;right:-130px;top:48%;background:#d47e93;animation-delay:-4s}
.ambient-noise{position:absolute;inset:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}

.app-shell{min-height:100vh;width:min(100%,920px);margin:0 auto;padding:18px 18px calc(128px + var(--safe-bottom))}
.topbar{display:flex;align-items:center;gap:10px;position:sticky;top:12px;z-index:20}
.topbar-spacer{flex:1}
.brand-avatar{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:31px;font-weight:800;letter-spacing:-.07em}
.brand-avatar span{position:absolute;width:9px;height:9px;border-radius:50%;right:8px;top:5px;background:#7eacf9;box-shadow:0 0 18px rgba(126,172,249,.6)}
.icon-button,.round-icon,.glass-button{border:1px solid transparent;cursor:pointer}
.icon-button{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:22px}
.glass-button{background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.045));backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);box-shadow:inset 0 1px 1px rgba(255,255,255,.12),0 14px 32px rgba(0,0,0,.18)}
.glass-button:hover{border-color:rgba(255,255,255,.14);transform:translateY(-1px)}
.glass-panel{background:
  linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.035) 48%,rgba(255,255,255,.055)),
  var(--glass);
  border:1px solid var(--glass-line);
  backdrop-filter:blur(30px) saturate(125%);
  -webkit-backdrop-filter:blur(30px) saturate(125%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.085),var(--shadow)}
.view-hidden{display:none!important}

.filter-row{display:flex;gap:10px;overflow:auto;padding:12px 0 6px;scrollbar-width:none}
.filter-row::-webkit-scrollbar{display:none}
.filter-chip{flex:0 0 auto;padding:12px 24px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.12);color:rgba(255,255,255,.88);font-size:16px;cursor:pointer;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);transition:transform .22s ease,background .22s ease,box-shadow .22s ease}
.filter-chip.active{background:linear-gradient(135deg,rgba(105,255,186,.96),rgba(75,216,159,.9));color:#06110c;box-shadow:0 9px 28px rgba(67,244,173,.18)}
.filter-chip:active{transform:scale(.96)}
.filter-chip.disabled{opacity:.55;cursor:not-allowed}

.hero-copy{padding:27px 0 20px}
.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:11px;color:var(--faint);font-weight:700}
.hero-copy h1,.view-heading h2{margin:5px 0 0;font-size:clamp(30px,7vw,42px);letter-spacing:-.05em}
.hero-copy p{margin:8px 0 0;color:var(--muted);font-size:14px}
.wave{font-size:.55em;margin-left:8px;color:var(--good);vertical-align:middle;text-shadow:0 0 20px rgba(109,255,202,.42)}

.hero-feature{min-height:195px;border-radius:var(--radius-xl);position:relative;overflow:hidden;padding:28px;display:flex;align-items:flex-end}
.hero-feature::before{content:"";position:absolute;inset:0;background:
  linear-gradient(135deg,rgba(32,40,82,.52),rgba(149,75,82,.18)),
  radial-gradient(circle at 88% 20%,rgba(109,255,202,.2),transparent 26%);
}
.hero-feature::after{content:"";position:absolute;inset:8% 22% -42% 8%;border-radius:45%;background:rgba(145,160,255,.18);filter:blur(42px);transform:rotate(-14deg)}
.hero-copy-inner{position:relative;z-index:1;max-width:70%}
.hero-kicker{display:inline-flex;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.1);font-size:10px;letter-spacing:.12em}
.hero-feature h2{font-size:clamp(27px,6vw,38px);margin:12px 0 6px;letter-spacing:-.055em}
.hero-feature p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.hero-play{position:absolute;right:24px;bottom:24px;width:58px;height:58px;border:0;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(18px);font-size:19px;cursor:pointer;z-index:2;box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 12px 34px rgba(0,0,0,.3)}

.home-sections{display:grid;gap:34px;padding-top:34px}
.section-block{min-width:0}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:14px}
.section-heading h3{margin:0;font-size:20px;letter-spacing:-.035em}
.section-heading button{background:none;border:0;color:var(--muted);font-size:12px;cursor:pointer}
.section-heading button:hover{color:var(--text)}
.carousel{display:flex;gap:14px;overflow-x:auto;padding:3px 2px 7px;scroll-snap-type:x mandatory;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.card{flex:0 0 min(190px,58vw);width:min(190px,58vw);min-width:0;max-width:min(190px,58vw);scroll-snap-align:start;cursor:pointer}
.art-card{display:block;position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:21px;background:#1a1b1f;border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 36px rgba(0,0,0,.25)}
.art-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .4s ease}
.card:hover img{transform:scale(1.045);filter:saturate(1.06)}
.play-badge{position:absolute;right:12px;bottom:12px;width:42px;height:42px;border:1px solid rgba(255,255,255,.15);border-radius:50%;display:grid;place-items:center;background:rgba(15,16,20,.35);backdrop-filter:blur(18px);box-shadow:0 8px 20px rgba(0,0,0,.28)}
.card-type{display:block;margin-top:11px;font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.12em}
.card-title{display:block;margin-top:5px;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-subtitle{display:block;margin-top:3px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.small-card{flex-basis:min(260px,72vw);display:flex;align-items:center;gap:12px;padding:10px;border-radius:22px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(24px);box-shadow:inset 0 1px 1px rgba(255,255,255,.06)}
.small-card img{width:72px;height:72px;border-radius:15px;object-fit:cover}
.small-card .small-meta{min-width:0;flex:1}
.small-card .card-title{font-size:14px}
.small-card .card-subtitle{font-size:11px}
.empty-state{padding:32px;border-radius:24px;border:1px dashed rgba(255,255,255,.11);background:rgba(255,255,255,.035);color:var(--muted);text-align:center}
.genre-card{padding:18px;border-radius:22px;min-height:125px;position:relative;overflow:hidden;background:linear-gradient(145deg,var(--g1),var(--g2));border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 34px rgba(0,0,0,.22)}
.genre-card strong{position:relative;font-size:18px;letter-spacing:-.03em}
.genre-card span{position:absolute;left:18px;bottom:16px;font-size:11px;color:rgba(255,255,255,.7)}
.genre-card::after{content:"→";position:absolute;right:15px;bottom:12px;font-size:24px;color:rgba(255,255,255,.9)}

.view-heading{display:flex;align-items:center;gap:13px;padding:24px 0 17px}
.back-button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:31px;line-height:1}
.view-heading h2{font-size:30px}
.search-box{display:flex;align-items:center;gap:9px;border-radius:20px;padding:0 14px;height:56px}
.search-icon{font-size:22px;color:var(--muted)}
.search-box input{flex:1;min-width:0;background:transparent;border:0;color:var(--text);font-size:16px;outline:0}
.search-box input::placeholder{color:rgba(255,255,255,.42)}
.clear-search{width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.09);cursor:pointer}
.search-filters{padding-top:14px}
.search-section{padding:26px 0 0}
.search-section h3{margin:0 0 13px;font-size:17px}
.search-list{display:grid;gap:8px}
.search-row{display:flex;align-items:center;gap:12px;padding:9px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid transparent;cursor:pointer}
.search-row:hover{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.07)}
.search-row img,.search-avatar{width:54px;height:54px;border-radius:14px;object-fit:cover;background:#202126}
.search-row .meta{flex:1;min-width:0}
.search-row .name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-row .desc{font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-row .type-pill{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);padding-right:6px}

.library-grid{display:grid;gap:11px}
.library-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);cursor:pointer}
.library-row img{width:58px;height:58px;border-radius:15px;object-fit:cover}
.library-row .meta{flex:1;min-width:0}
.library-row .name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.library-row .desc{font-size:12px;color:var(--muted);margin-top:3px}
.create-grid{display:grid;gap:14px;padding-top:8px}
.create-card{min-height:150px;border-radius:26px;text-align:left;padding:23px;position:relative;overflow:hidden;cursor:pointer}
.create-card strong{font-size:32px;display:block;margin-bottom:18px}
.create-card span{font-size:18px;font-weight:800;display:block}
.create-card small{display:block;margin-top:5px;color:var(--muted);font-size:12px;line-height:1.4}

.bottom-nav{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:calc(8px + var(--safe-bottom));width:min(calc(100% - 24px),620px);display:flex;justify-content:space-around;align-items:center;gap:6px;padding:8px 9px;border-radius:27px}
.nav-item{flex:1;border:0;background:transparent;min-height:56px;border-radius:20px;display:grid;place-items:center;gap:1px;color:rgba(255,255,255,.52);cursor:pointer;transition:transform .2s ease,color .2s ease,background .2s ease}
.nav-item span{font-size:23px;line-height:1}
.nav-item small{font-size:10px}
.nav-item.active{color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 1px rgba(255,255,255,.08)}
.nav-item.active span{color:var(--good);text-shadow:0 0 20px rgba(109,255,202,.38)}

.mini-player{position:fixed;z-index:26;left:50%;transform:translateX(-50%);bottom:calc(78px + var(--safe-bottom));width:min(calc(100% - 24px),620px);min-height:78px;border-radius:25px;display:flex;align-items:center;gap:7px;padding:8px 10px;cursor:default;overflow:hidden;isolation:isolate;background:linear-gradient(120deg,rgba(255,255,255,.145),rgba(255,255,255,.04) 44%,rgba(109,255,202,.045)),rgba(16,18,23,.78);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(34px) saturate(155%);-webkit-backdrop-filter:blur(34px) saturate(155%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(255,255,255,.035),0 18px 52px rgba(0,0,0,.42);transition:border-color .28s ease,box-shadow .28s ease,background .28s ease,opacity .24s ease}
.mini-player::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 4% 0%,rgba(109,255,202,.13),transparent 42%),linear-gradient(180deg,rgba(255,255,255,.055),transparent 56%);opacity:.9}
.mini-player::after{content:"";position:absolute;z-index:2;left:16px;right:16px;bottom:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.17),rgba(109,255,202,.22),transparent)}
.mini-player.is-playing{border-color:rgba(190,255,236,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.19),0 18px 52px rgba(0,0,0,.42),0 0 26px rgba(109,255,202,.045)}
.mini-open{display:flex;align-items:center;gap:11px;flex:1 1 auto;min-width:0;align-self:stretch;padding:0;border:0;color:inherit;text-align:left;background:transparent;cursor:pointer}
.mini-open:focus-visible{outline:2px solid rgba(194,208,255,.9);outline-offset:2px;border-radius:17px}
.mini-art-frame{position:relative;display:block;width:57px;height:57px;flex:0 0 57px;padding:2px;border:1px solid rgba(255,255,255,.2);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.27),rgba(255,255,255,.035));box-shadow:0 7px 20px rgba(0,0,0,.32),inset 0 1px 1px rgba(255,255,255,.17);overflow:hidden;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.mini-art-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent 34%,transparent 68%,rgba(0,0,0,.14))}
.mini-art-frame img{width:100%;height:100%;border-radius:14px;object-fit:cover;box-shadow:none;transition:filter .3s ease,transform .42s cubic-bezier(.2,.8,.2,1)}
.mini-player.is-playing .mini-art-frame{border-color:rgba(190,255,236,.28);box-shadow:0 7px 22px rgba(0,0,0,.32),0 0 15px rgba(109,255,202,.06),inset 0 1px 1px rgba(255,255,255,.2)}
.mini-meta{display:grid;gap:0;flex:1;min-width:0;padding:1px 0}
.mini-title,.mini-artist{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mini-title{font-size:13px;font-weight:760;letter-spacing:-.015em;line-height:1.35}
.mini-artist{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.25}
.mini-progress{display:block;position:relative;height:3px;border-radius:999px;background:rgba(255,255,255,.13);margin-top:8px;overflow:hidden;box-shadow:inset 0 1px rgba(0,0,0,.1)}
.mini-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#68eebd,#d1dcff);border-radius:999px;box-shadow:0 0 9px rgba(109,255,202,.3);transition:width .24s linear}
.player-icon{position:relative;flex:0 0 39px;width:39px;height:39px;display:grid;place-items:center;border:1px solid transparent;border-radius:50%;background:transparent;color:rgba(255,255,255,.86);font-size:18px;cursor:pointer;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
.player-icon:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.08);color:#fff}
.player-icon:active{transform:scale(.92)}
.player-icon:focus-visible{outline:2px solid rgba(194,208,255,.9);outline-offset:2px}
.mini-queue{font-size:19px}
.mini-queue span{transform:translateY(-1px)}
.mini-play{flex-basis:43px;width:43px;height:43px;border:1px solid rgba(255,255,255,.2);color:#0b1b15;background:linear-gradient(145deg,rgba(207,255,239,.98),rgba(109,255,202,.88));box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 5px 16px rgba(0,0,0,.23),0 0 20px rgba(109,255,202,.08);font-size:16px;font-weight:800}
.mini-play:hover{background:linear-gradient(145deg,#e0fff4,#8effd4);border-color:rgba(255,255,255,.45);color:#07160f;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 18px rgba(0,0,0,.25),0 0 18px rgba(109,255,202,.14)}
.mini-player.track-switch .mini-art-frame{animation:mini-art-arrive .44s cubic-bezier(.2,.75,.25,1)}
.mini-player.track-switch .mini-title,.mini-player.track-switch .mini-artist{animation:mini-copy-arrive .32s ease}
@keyframes mini-art-arrive{0%{opacity:.62;transform:scale(.91) rotate(-3deg)}65%{opacity:1;transform:scale(1.035) rotate(.5deg)}100%{transform:scale(1) rotate(0)}}
@keyframes mini-copy-arrive{0%{opacity:.45;transform:translateY(3px)}100%{opacity:1;transform:translateY(0)}}
@media(max-width:420px){.mini-player{width:calc(100% - 18px);min-height:74px;padding:7px 8px;gap:4px;border-radius:23px}.mini-open{gap:8px}.mini-art-frame{width:51px;height:51px;flex-basis:51px;border-radius:16px}.mini-art-frame img{border-radius:12px}.mini-title{font-size:12px}.mini-artist{font-size:10px}.player-icon{flex-basis:35px;width:35px;height:35px}.mini-play{flex-basis:40px;width:40px;height:40px}}

.full-player{position:fixed;inset:0;z-index:100;background:#08090c;overflow-y:auto;overscroll-behavior-y:none;-webkit-overflow-scrolling:touch}
.full-player-backdrop{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,5,7,.2),rgba(5,6,8,.84)),var(--ambient-image);background-position:center;background-size:cover;filter:saturate(.9)}
.full-player-backdrop::after{content:"";position:absolute;inset:0;background:rgba(5,6,8,.36);backdrop-filter:blur(34px);-webkit-backdrop-filter:blur(34px)}
.full-player-inner{position:relative;z-index:1;min-height:100%;padding:18px 18px calc(22px + var(--safe-bottom));display:flex;flex-direction:column;align-items:center}
.full-topbar{width:min(100%,700px);display:flex;align-items:center;justify-content:space-between;gap:10px}
.round-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:18px}
.full-art-wrap{width:min(84vw,520px);aspect-ratio:1/1;margin:clamp(28px,7vh,64px) 0 24px;border-radius:34px;overflow:hidden;box-shadow:0 34px 100px rgba(0,0,0,.48);border:1px solid rgba(255,255,255,.16)}
.full-art-wrap img{width:100%;height:100%;object-fit:cover}
.full-track-info{width:min(100%,700px);display:flex;align-items:center;gap:14px;justify-content:space-between}
.full-track-info h2{font-size:clamp(23px,6vw,34px);letter-spacing:-.045em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.full-track-info p{margin:5px 0 0;color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seek-area{width:min(100%,700px);margin-top:23px}
.seek-area input{width:100%;accent-color:#f1f3ff}
.time-row{display:flex;justify-content:space-between;color:var(--faint);font-size:11px;margin-top:5px}
.transport{width:min(100%,700px);display:flex;align-items:center;justify-content:space-between;padding:22px 20px}
.transport-button{border:0;background:transparent;color:#fff;width:48px;height:48px;border-radius:50%;font-size:24px;cursor:pointer}
.transport-button.primary{width:70px;height:70px;background:rgba(255,255,255,.2);backdrop-filter:blur(18px);box-shadow:inset 0 1px 1px rgba(255,255,255,.16),0 14px 36px rgba(0,0,0,.3);font-size:22px}
.player-tabs{width:min(100%,700px);display:flex;gap:4px;padding:4px;border-radius:22px}
.player-tab{flex:1;border:0;background:transparent;color:var(--muted);padding:12px;border-radius:18px;cursor:pointer}
.player-tab.active{background:rgba(255,255,255,.11);color:#fff}
.player-content{width:min(100%,700px);margin-top:11px;border-radius:24px;padding:18px;max-height:34vh;overflow:auto}
.lyrics-panel p{margin:0;color:rgba(255,255,255,.82);line-height:2;font-size:16px}
.muted{color:var(--muted)!important}
.queue-list{display:grid;gap:7px}
.queue-row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:15px;background:rgba(255,255,255,.035)}
.queue-row img{width:44px;height:44px;border-radius:12px;object-fit:cover}
.queue-row .meta{min-width:0;flex:1}
.queue-row strong{font-size:12px}
.queue-row small{display:block;color:var(--muted);margin-top:2px}
.related-grid{display:flex;gap:11px;overflow:auto;scrollbar-width:none}
.related-grid::-webkit-scrollbar{display:none}
.related-item{flex:0 0 120px;cursor:pointer}
.related-item img{width:120px;aspect-ratio:1;border-radius:16px;object-fit:cover}
.related-item strong{display:block;font-size:12px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.related-item small{display:block;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.toast{position:fixed;z-index:200;left:50%;bottom:calc(147px + var(--safe-bottom));transform:translate(-50%,12px);opacity:0;pointer-events:none;padding:11px 15px;border-radius:999px;background:rgba(13,15,18,.82);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(20px);color:#fff;font-size:12px;transition:opacity .2s ease,transform .2s ease;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}

.loading-sheen{background:linear-gradient(110deg,rgba(255,255,255,.03) 25%,rgba(255,255,255,.1) 37%,rgba(255,255,255,.03) 63%);background-size:400% 100%;animation:sheen 1.2s infinite}
@keyframes sheen{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(12px,-16px,0)}}

@media(min-width:800px){
  .app-shell{padding-inline:28px}
  .home-sections{gap:42px}
  .card{flex-basis:205px}
  .small-card{flex-basis:310px}
  .create-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:620px){
  .app-shell{padding-inline:14px}
  .topbar{top:8px}
  .hero-feature{min-height:180px}
  .full-art-wrap{width:min(88vw,460px);margin-top:32px}
  .transport{padding-inline:8px}
}




/* MakPlay custom pull-to-refresh indicator (native browser refresh is disabled). */
.makplay-pull-refresh {
  position: fixed; z-index: 999; top: 8px; left: 50%;
  display: flex; align-items: center; gap: 9px;
  max-width: calc(100vw - 32px); padding: 10px 15px;
  border: 1px solid rgba(109,255,202,.24); border-radius: 999px;
  color: var(--text); background: rgba(12,17,17,.94);
  box-shadow: 0 8px 30px rgba(0,0,0,.28);
  font-size: 12px; font-weight: 600; opacity: 0; pointer-events: none;
  transform: translate(-50%,-150%) scale(.96);
  transition: opacity .14s ease, transform .18s ease, top .08s linear;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.makplay-pull-refresh.is-visible { transform: translate(-50%,0) scale(1); }
.makplay-pull-refresh-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; color: var(--good); font-size: 22px; line-height: 1;
  transform: rotate(0deg); transition: transform .12s ease;
}
.makplay-pull-refresh.is-ready .makplay-pull-refresh-icon { transform: rotate(150deg); }
.makplay-pull-refresh.is-loading .makplay-pull-refresh-icon { animation: makplay-pull-spin .7s linear infinite; }
@keyframes makplay-pull-spin { to { transform: rotate(360deg); } }



/* Home entity cards use a shared, balanced Liquid Glass action dock. */
.home-entity-card {
  position: relative; display: block; padding: 0; border: 0;
  border-radius: 23px; color: var(--text); background: transparent;
  text-align: left; cursor: default;
}
.home-entity-art-wrap {
  position: relative; width: 100%; overflow: hidden;
  border: 1px solid rgba(255,255,255,.11); border-radius: 22px;
  background: linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.02));
  box-shadow: 0 16px 35px rgba(0,0,0,.27), inset 0 1px rgba(255,255,255,.16);
}
.home-entity-open {
  display: block; width: 100%; min-width: 0; padding: 0;
  border: 0; color: inherit; background: transparent; text-align: inherit; cursor: pointer;
}
.home-entity-open-art { position: relative; overflow: hidden; border-radius: 21px; }
.home-entity-art { border: 0; border-radius: 21px; box-shadow: none; background: rgba(255,255,255,.025); }
.home-entity-art img { display: block; }
.home-entity-placeholder {
  display: grid; width: 100%; aspect-ratio: 1; place-items: center;
  color: rgba(255,255,255,.8); font-size: 2.5rem; font-weight: 700;
  background: linear-gradient(145deg,rgba(109,255,202,.16),rgba(255,255,255,.035));
}
.home-entity-action-cluster {
  position: absolute; right: 9px; bottom: 9px; z-index: 4;
  display: flex; align-items: center; gap: 7px; padding: 4px;
  border: 1px solid rgba(255,255,255,.19); border-radius: 999px;
  background: linear-gradient(135deg,rgba(255,255,255,.19),rgba(255,255,255,.045));
  box-shadow: 0 8px 24px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.32);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
}
.home-entity-play,.home-entity-menu {
  display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px;
  padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
  cursor: pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.home-entity-play {
  color: #06130e;
  background: linear-gradient(145deg,rgba(172,255,225,.98),rgba(76,236,181,.92));
  box-shadow: 0 3px 12px rgba(45,235,173,.25),inset 0 1px rgba(255,255,255,.8);
}
.home-entity-play span { margin-left: 2px; font-size: 13px; }
.home-entity-menu {
  color: var(--text);
  background: linear-gradient(145deg,rgba(35,38,45,.64),rgba(14,16,21,.54));
  font-size: 13px; letter-spacing: 1px;
  -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
}
.home-entity-play:hover,.home-entity-menu:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.28);
}
.home-entity-play:active,.home-entity-menu:active { transform: scale(.94); }
.home-entity-play:disabled { opacity: .72; cursor: wait; }
.home-entity-play.is-loading > span {
  width: 13px; height: 13px; margin: 0; overflow: hidden; color: transparent;
  border: 2px solid rgba(6,19,14,.25); border-top-color: #06130e; border-radius: 50%;
  animation: home-entity-play-spin .65s linear infinite;
}
@keyframes home-entity-play-spin { to { transform: rotate(360deg); } }
.home-entity-copy {
  display: block; width: 100%; min-width: 0; padding: 0; border: 0;
  color: inherit; background: transparent; text-align: left; cursor: pointer;
}
.home-entity-copy .card-type { margin-top: 11px; }
.home-entity-copy .card-title,.home-entity-copy .card-subtitle { display: block; }
.home-entity-copy:active .card-title { color: var(--good); }
.home-entity-open-art:focus-visible,.home-entity-copy:focus-visible,
.home-entity-play:focus-visible,.home-entity-menu:focus-visible {
  outline: 2px solid rgba(109,255,202,.9); outline-offset: 3px;
}
.home-entity-actions-overlay .item-actions-panel {
  background: linear-gradient(145deg,rgba(45,49,56,.94),rgba(14,17,22,.97));
}
.home-entity-actions-overlay .item-actions-panel::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 115px;
  pointer-events: none; border-radius: inherit;
  background: linear-gradient(135deg,rgba(255,255,255,.09),transparent 65%);
}
.home-entity-actions-overlay .item-actions-now,
.home-entity-actions-overlay .item-actions-list { position: relative; z-index: 1; }
.home-entity-actions-overlay .item-action-row { border: 1px solid transparent; }
.home-entity-actions-overlay .item-action-row:active {
  border-color: rgba(109,255,202,.16); background: rgba(109,255,202,.075);
}

/* Home reliability: keep API status visible without disturbing the glass layout. */
.home-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 108px;
  padding: 24px;
}
.home-status-title {
  color: var(--text);
  font-weight: 650;
}
.home-status-message {
  max-width: 34ch;
  font-size: .92rem;
  line-height: 1.5;
}
.home-retry-button {
  margin-top: 3px;
  padding: 9px 17px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255,255,255,.08);
  font: inherit;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.home-retry-button:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.3);
}
.home-retry-button:active { transform: scale(.97); }
#refreshHome.is-loading { animation: makplay-refresh-spin 1.1s linear infinite; }
@keyframes makplay-refresh-spin { to { transform: rotate(360deg); } }



/* Library — soft collection panels, compact artwork, and subtle motion. */
.library-page {
  display: grid;
  gap: 27px;
  padding-bottom: 8px;
  animation: library-page-in .38s ease both;
}
.library-intro {
  padding: 2px 2px 0;
}
.library-intro > p {
  max-width: 34ch;
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.library-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}
.library-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.045);
  font-size: 11px;
}
.library-stats strong {
  color: var(--text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.library-collections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.library-collection {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 13px;
  overflow: hidden;
  border-radius: 25px;
  animation: library-row-in .46s cubic-bezier(.2,.75,.2,1) both;
}
.library-collection:nth-child(2) { animation-delay: .07s; }
.library-collection::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -65px;
  top: -75px;
  border-radius: 50%;
  background: rgba(255,255,255,.065);
  filter: blur(2px);
  pointer-events: none;
}
.liked-collection {
  background: linear-gradient(120deg, rgba(105,99,190,.24), rgba(35,39,60,.32)), var(--glass);
}
.recent-collection {
  background: linear-gradient(120deg, rgba(57,150,130,.19), rgba(34,39,48,.28)), var(--glass);
}
.library-mosaic {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2px;
  width: 82px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 17px;
  background: rgba(255,255,255,.08);
  box-shadow: 0 8px 22px rgba(0,0,0,.2);
}
.library-mosaic img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
}
.library-mosaic img:only-child {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}
.library-mosaic-empty {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.78);
  font-size: 32px;
  background: linear-gradient(145deg, rgba(151,133,240,.55), rgba(47,77,99,.75));
}
.recent-mosaic .library-mosaic-empty {
  background: linear-gradient(145deg, rgba(74,190,158,.5), rgba(36,64,83,.8));
}
.library-collection-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.library-collection-kicker {
  display: block;
  overflow: hidden;
  color: var(--faint);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .11em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.library-collection-copy h3 {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -.035em;
}
.library-collection-copy p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.library-collection-play {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.11);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.1);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.library-collection-play:hover { background: rgba(255,255,255,.2); }
.library-collection-play:active { transform: scale(.94); }
.library-section { min-width: 0; }
.library-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}
.library-section-heading h3 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -.035em;
}
.library-section-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.library-section-heading > button {
  flex: 0 0 auto;
  padding: 7px 0 7px 8px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}
.library-section-heading > button span { margin-left: 3px; }
.library-section-heading > button:hover { color: var(--text); }
.library-section .library-grid { gap: 8px; }
.library-row {
  min-width: 0;
  animation: library-row-in .36s ease both;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.library-row:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.11);
}
.library-row:active { transform: scale(.99); }
.library-row img { flex: 0 0 54px; width: 54px; height: 54px; }
.library-row .library-row-play {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  border-radius: 50%;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.075);
  font-size: 12px;
}
.library-empty {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 21px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 23px;
  text-align: left;
  background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  animation: library-row-in .42s ease both;
}
.library-empty-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 3px;
  border-radius: 14px;
  color: var(--good);
  background: rgba(109,255,202,.09);
  font-size: 23px;
}
.library-empty > strong { color: var(--text); font-size: 14px; }
.library-empty > p {
  max-width: 34ch;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.library-empty > button {
  margin-top: 5px;
  padding: 7px 0;
  border: 0;
  color: var(--good);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
@keyframes library-page-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes library-row-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (min-width: 620px) {
  .library-collections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-collection {
    grid-template-columns: 68px minmax(0, 1fr) 34px;
    gap: 10px;
    padding: 11px;
  }
  .library-mosaic { width: 68px; border-radius: 15px; }
  .library-collection-copy h3 { font-size: 14px; }
  .library-collection-kicker { font-size: 7px; }
  .library-collection-play { width: 34px; height: 34px; }
}
@media (max-width: 370px) {
  .library-collection { grid-template-columns: 70px minmax(0, 1fr) 34px; gap: 10px; padding: 11px; }
  .library-mosaic { width: 70px; }
  .library-collection-copy h3 { font-size: 15px; }
  .library-stats { gap: 6px; }
  .library-stats span { padding-inline: 8px; }
}



/* Playlists — native-feeling sheets and tactile collection controls. */
body.modal-open { overflow: hidden; }
.playlist-modal {
  position: fixed;
  z-index: 180;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
}
.playlist-modal-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(2,3,7,.64);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  animation: playlist-scrim-in .2s ease both;
}
.playlist-sheet {
  position: relative;
  z-index: 1;
  width: min(100%, 480px);
  margin: 0 auto;
  padding: 13px 22px calc(22px + env(safe-area-inset-bottom));
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(35,39,51,.96), rgba(15,17,23,.97));
  animation: playlist-sheet-in .32s cubic-bezier(.2,.85,.25,1) both;
}
.playlist-sheet-handle {
  width: 38px;
  height: 4px;
  margin: 0 auto 22px;
  border-radius: 99px;
  background: rgba(255,255,255,.25);
}
.playlist-sheet h2 {
  margin: 8px 0 7px;
  font-size: 25px;
  letter-spacing: -.045em;
}
.playlist-sheet > p {
  margin: 0 0 23px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.playlist-field-label {
  display: block;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.playlist-field {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-bottom: 18px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 15px;
  outline: none;
  color: var(--text);
  background: rgba(255,255,255,.065);
}
.playlist-field:focus { border-color: rgba(194,208,255,.6); }
.playlist-field::placeholder { color: var(--faint); }
.playlist-field option { color: #fff; background: #20222a; }
.playlist-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}
.playlist-modal-actions button {
  flex: 1;
  min-height: 46px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.playlist-cancel {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.playlist-save {
  border: 1px solid rgba(109,255,202,.38);
  color: #07130e;
  background: linear-gradient(120deg, #91ffda, #6dffca);
}
.playlist-modal-actions button:active { transform: scale(.98); }
.playlist-library-section { min-width: 0; }
.playlist-list { display: grid; gap: 12px; }
.playlist-card {
  min-width: 0;
  overflow: hidden;
  border-radius: 23px;
  background: linear-gradient(130deg, rgba(255,255,255,.075), rgba(255,255,255,.025)), var(--glass);
  animation: playlist-card-in .36s ease both;
}
.playlist-card-main {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px;
  border: 0;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.playlist-art {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  grid-template-rows: repeat(2, minmax(0,1fr));
  gap: 2px;
  flex: 0 0 66px;
  width: 66px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 15px;
  background: linear-gradient(140deg, rgba(139,123,226,.6), rgba(49,74,98,.8));
  box-shadow: 0 7px 18px rgba(0,0,0,.2);
}
.playlist-art img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; }
.playlist-art img:only-child { grid-column: 1 / -1; grid-row: 1 / -1; }
.playlist-art span { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; place-items: center; color: rgba(255,255,255,.85); font-size: 27px; }
.playlist-card-meta { display: grid; gap: 5px; min-width: 0; flex: 1; }
.playlist-card-meta strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.playlist-card-meta small { color: var(--muted); font-size: 11px; }
.playlist-card-arrow { color: var(--faint); font-size: 25px; transition: transform .2s ease; }
.playlist-card-main:hover .playlist-card-arrow { transform: translateX(3px); }
.playlist-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 13px 13px;
}
.playlist-card-actions button {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.045);
  font-size: 10px;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.playlist-card-actions button:first-child { color: var(--text); background: rgba(255,255,255,.095); }
.playlist-card-actions button:hover { color: var(--text); background: rgba(255,255,255,.11); }
.playlist-card-actions button:active { transform: scale(.97); }
.playlist-track-list {
  display: grid;
  gap: 3px;
  padding: 2px 10px 10px;
  animation: playlist-card-in .24s ease both;
}
.playlist-track {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px;
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.playlist-track-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  padding: 2px;
  border: 0;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.playlist-track-main img { width: 43px; height: 43px; flex: 0 0 43px; border-radius: 11px; object-fit: cover; }
.playlist-track-main > span { display: grid; gap: 4px; min-width: 0; }
.playlist-track-main strong, .playlist-track-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-track-main strong { font-size: 12px; }
.playlist-track-main small { color: var(--muted); font-size: 10px; }
.playlist-track-remove {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: rgba(255,255,255,.055);
  font-size: 20px;
  cursor: pointer;
}
.playlist-track-empty { margin: 0; padding: 13px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.playlist-empty {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.02));
}
.playlist-empty-icon {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 14px;
  color: var(--good);
  background: rgba(109,255,202,.09);
  font-size: 24px;
}
.playlist-empty strong { font-size: 14px; }
.playlist-empty p { margin: 0; max-width: 34ch; color: var(--muted); font-size: 12px; line-height: 1.55; }
.playlist-empty > button {
  margin-top: 5px;
  padding: 8px 0;
  border: 0;
  color: var(--good);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.search-row-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.search-row-wrap .search-row { flex: 1; min-width: 0; }
.search-add-playlist {
  display: grid;
  place-items: center;
  flex: 0 0 37px;
  width: 37px;
  height: 37px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: var(--good);
  background: rgba(255,255,255,.055);
  font-size: 22px;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.search-add-playlist:hover { background: rgba(109,255,202,.12); }
.search-add-playlist:active { transform: scale(.94); }
@keyframes playlist-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes playlist-sheet-in { from { opacity: 0; transform: translateY(26px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes playlist-card-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 700px) {
  .playlist-modal { align-items: center; }
  .playlist-sheet { border-radius: 28px; padding-bottom: 24px; }
}



/* Search history and queue controls: quiet glass, clear touch targets. */
.search-history{margin-top:22px;padding:18px;border:1px solid var(--glass-line);border-radius:22px;background:var(--glass);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);animation:library-enter .32s ease both}
.search-history-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.search-history-heading strong{font-size:14px}
.search-history-heading button,.queue-clear{border:0;background:transparent;color:var(--muted);font-size:12px;cursor:pointer;padding:8px}
.search-history-chips{display:flex;flex-wrap:wrap;gap:8px}
.search-history-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--glass-line);background:rgba(255,255,255,.055);color:var(--text);border-radius:999px;padding:9px 12px;cursor:pointer;transition:background .18s ease,transform .18s ease}
.search-history-chip:active{transform:scale(.97)}
.queue-toolbar{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 12px}
.queue-toolbar>div{display:grid;gap:3px}
.queue-toolbar strong{font-size:15px}
.queue-toolbar small{color:var(--muted);font-size:12px}
.queue-clear{border:1px solid var(--glass-line);border-radius:999px}
.queue-clear:disabled{opacity:.35;cursor:default}
.queue-list{display:grid;gap:7px;padding:0 8px 12px}
.queue-row{display:flex;align-items:center;gap:10px;min-width:0;padding:8px;border-radius:17px;background:rgba(255,255,255,.035);border:1px solid transparent;animation:library-enter .24s ease both}
.queue-row.is-current{border-color:rgba(194,208,255,.28);background:rgba(194,208,255,.075)}
.queue-play{position:relative;width:48px;height:48px;flex:0 0 48px;padding:0;border:0;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.06);cursor:pointer}
.queue-play img{width:100%;height:100%;object-fit:cover}
.queue-playing-mark{display:none;position:absolute;inset:0;place-items:center;background:rgba(8,9,12,.48);font-size:20px}
.queue-row.is-current .queue-playing-mark{display:grid}
.queue-row .meta{flex:1;min-width:0;display:grid;gap:4px}
.queue-row .meta strong,.queue-row .meta small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.queue-row .meta strong{font-size:13px}
.queue-row .meta small{font-size:11px;color:var(--muted)}
.queue-actions{display:flex;align-items:center;gap:2px}
.queue-actions button{width:30px;height:32px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:16px;cursor:pointer}
.queue-actions button:active{background:rgba(255,255,255,.1)}
.queue-actions button:disabled{opacity:.25;cursor:default}
.queue-empty{display:grid;justify-items:center;text-align:center;gap:8px;padding:30px 18px 38px;color:var(--muted)}
.queue-empty>span{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:rgba(255,255,255,.06);font-size:25px;color:var(--accent)}
.queue-empty strong{color:var(--text)}
.queue-empty p{max-width:230px;margin:0;font-size:12px;line-height:1.5}
@media(max-width:430px){.queue-actions{gap:0}.queue-actions button{width:27px}.queue-row{gap:8px;padding:7px}.queue-play{width:43px;height:43px;flex-basis:43px}}



/* Playback controls share one calm, accessible active state. */
.transport-button{transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
.transport-button:active{transform:scale(.92)}
.transport-button.is-active{color:var(--good);background:rgba(109,255,202,.09);box-shadow:inset 0 0 0 1px rgba(109,255,202,.2)}
.full-art-wrap img{transition:opacity .22s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.transport-button:focus-visible,.queue-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}


/* Mobile search layout: keep results and action controls inside the viewport,
   including browsers that report a desktop-sized layout viewport. */
@media (max-width: 620px) {
  .app-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
    padding-inline: 14px;
  }
  .search-view,
  .search-view > *,
  #searchResults,
  .search-section,
  .search-list,
  .search-row-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .search-row-wrap {
    gap: 7px;
  }
  .search-row-wrap .search-row {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    gap: 9px;
    padding: 8px;
  }
  .search-row img,
  .search-avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 12px;
  }
  .search-row .meta {
    min-width: 0;
    overflow: hidden;
  }
  .search-row .name,
  .search-row .desc {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .search-row .type-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    max-width: 64px;
    padding: 4px 6px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: none;
    white-space: nowrap;
  }
  .search-add-playlist {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
  }
}

/* Library mobile polish: constrain metadata to the card and preserve clear
   breathing room around the fixed player/navigation. */
.library-page,
.library-section,
.library-grid,
.library-row,
.library-row .meta {
  min-width: 0;
  max-width: 100%;
}
.library-row {
  width: 100%;
  text-align: left;
}
.library-row .meta {
  overflow: hidden;
}
.library-row .name,
.library-row .desc {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.library-row .desc {
  line-height: 1.4;
}
.library-section-heading > div {
  min-width: 0;
}
.library-section-heading h3,
.library-section-heading p {
  overflow-wrap: anywhere;
}
.library-section-heading > button {
  white-space: nowrap;
}
@media (max-width: 620px) {
  .library-page {
    gap: 22px;
    padding-bottom: calc(150px + var(--safe-bottom));
  }
  .library-intro > p {
    max-width: 32ch;
    font-size: 14px;
  }
  .library-collections {
    gap: 10px;
  }
  .library-collection {
    grid-template-columns: 70px minmax(0, 1fr) 34px;
    gap: 11px;
    padding: 11px;
    border-radius: 22px;
  }
  .library-mosaic {
    width: 70px;
    border-radius: 14px;
  }
  .library-collection-copy h3 {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .library-collection-copy p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .library-collection-play {
    width: 34px;
    height: 34px;
  }
  .library-section-heading {
    align-items: center;
    gap: 8px;
  }
  .library-section-heading h3 {
    font-size: 18px;
  }
  .library-section .library-grid {
    gap: 8px;
  }
  .library-row {
    gap: 10px;
    padding: 9px;
    border-radius: 18px;
  }
  .library-row img {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 13px;
  }
  .library-row .name {
    font-size: 14px;
    line-height: 1.35;
  }
  .library-row .desc {
    font-size: 11px;
  }
  .library-row .library-row-play {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }
  .library-empty {
    padding: 18px;
  }
  /* The fixed player and bottom navigation cover the last list rows otherwise. */
  #libraryContent {
    padding-bottom: 24px;
  }
}



/* Recent search items: per-item removal plus a separate clear-all action. */
.search-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.search-history-heading button {
  flex: 0 0 auto;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--muted);
  background: rgba(255,255,255,.045);
  font: inherit;
  font-size: 12px;
}
.search-history .search-row-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.search-history .search-row-wrap .search-row {
  flex: 1 1 0;
  min-width: 0;
}
.search-history-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}
.search-history-remove:active,
.search-history-heading button:active {
  background: rgba(255,255,255,.12);
}


/* Search entity detail surface */
.search-entity-detail {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  background: rgba(255,255,255,.055);
}
.search-detail-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.search-detail-art {
  width: min(100%, 260px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 16px 44px rgba(0,0,0,.28);
}
.search-detail-copy h2 {
  margin: 10px 0 6px;
  overflow-wrap: anywhere;
}
.search-detail-copy p,
.search-detail-note {
  color: var(--muted);
  line-height: 1.5;
}
.search-detail-copy small {
  color: var(--muted);
}
.search-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.search-detail-actions button {
  min-height: 42px;
  padding: 10px 15px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.search-detail-actions .search-detail-primary {
  background: var(--accent);
  color: #08251c;
  border-color: transparent;
}
.search-detail-note {
  margin: 0;
  font-size: 12px;
}
@media (max-width: 620px) {
  .search-entity-detail { padding: 14px; gap: 13px; }
  .search-detail-art { width: min(72vw, 230px); margin-inline: auto; }
  .search-detail-copy h2 { font-size: 23px; }
}

/* Synchronized lyrics — readable focus line, with a calm fallback for plain text. */
.lyrics-lines {
  display: grid;
  gap: 12px;
  padding: 18px 4px 28px;
  text-align: center;
}
.lyrics-line {
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 3.8vw, 19px);
  font-weight: 600;
  line-height: 1.65;
  overflow-wrap: anywhere;
  transition: color .22s ease, opacity .22s ease, transform .22s ease;
}
.lyrics-line.is-active {
  color: var(--text);
  opacity: 1;
  transform: scale(1.025);
  text-shadow: 0 0 22px rgba(194,208,255,.15);
}
.lyrics-lines.has-active-line .lyrics-line:not(.is-active) { opacity: .58; }
.lyrics-loading { animation: lyrics-pulse 1.25s ease-in-out infinite alternate; }
@keyframes lyrics-pulse { from { opacity: .48; } to { opacity: 1; } }



/* Contextual action sheet: custom Makplay language, not a copied menu. */
.item-actions-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; isolation: isolate; }
.item-actions-scrim { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(3,4,8,.68); backdrop-filter: blur(7px); animation: item-scrim-in .18s ease both; }
.item-actions-panel { position: relative; z-index: 1; width: min(100%, 620px); max-height: min(86dvh, 820px); overflow: auto; padding: 10px 14px calc(16px + env(safe-area-inset-bottom)); border: 1px solid rgba(255,255,255,.12); border-bottom: 0; border-radius: 28px 28px 0 0; background: linear-gradient(145deg, rgba(39,41,49,.98), rgba(18,19,24,.99)); box-shadow: 0 -18px 60px rgba(0,0,0,.38); backdrop-filter: blur(34px); -webkit-backdrop-filter: blur(34px); animation: item-sheet-in .24s cubic-bezier(.2,.8,.2,1) both; }
.item-actions-handle { width: 42px; height: 4px; margin: 2px auto 14px; border-radius: 99px; background: rgba(255,255,255,.32); }
.item-actions-now { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 4px 4px 15px; border-bottom: 1px solid rgba(255,255,255,.1); }
.item-actions-now img { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 14px; object-fit: cover; }
.item-actions-play { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid rgba(109,255,202,.25); border-radius: 50%; color: #07130e; background: linear-gradient(135deg,#91ffda,#6dffca); }
.item-actions-track-copy { display: grid; gap: 4px; min-width: 0; flex: 1; }
.item-actions-track-copy .eyebrow { color: var(--good); font-size: 9px; letter-spacing: .13em; }
.item-actions-track-copy strong,.item-actions-track-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-actions-track-copy strong { font-size: 15px; }
.item-actions-track-copy small { color: var(--muted); font-size: 12px; }
.item-actions-list { display: grid; padding-top: 7px; }
.item-action-row { display: flex; align-items: center; gap: 13px; min-width: 0; width: 100%; padding: 12px 4px; border: 0; border-radius: 13px; text-align: left; color: var(--text); background: transparent; cursor: pointer; }
.item-action-row:active { background: rgba(255,255,255,.07); }
.item-action-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; color: var(--good); background: rgba(255,255,255,.045); font-size: 19px; }
.item-action-row > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; flex: 1; }
.item-action-row strong { font-size: 13px; font-weight: 600; }
.item-action-row small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.item-action-arrow { color: var(--faint); font-size: 21px; }
body.item-actions-open { overflow: hidden; }
.search-item-menu { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; color: var(--text); background: rgba(255,255,255,.055); font-size: 16px; letter-spacing: 1px; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.search-item-menu:hover { background: rgba(109,255,202,.1); }
.search-item-menu:active { transform: scale(.94); }
@keyframes item-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes item-sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:620px) {
  .search-item-menu { flex-basis: 36px; width: 36px; height: 36px; }
  .item-actions-panel { padding-inline: 16px; }
  .item-action-row { padding-block: 11px; }
}



/* Reusable track actions across Home, Library, playlists and related picks. */
.home-track-wrap { position: relative; flex: 0 0 min(190px,58vw); width: min(190px,58vw); min-width: 0; scroll-snap-align: start; }
.home-track-wrap > .card { width: 100%; max-width: 100%; }
.home-track-wrap-small { flex-basis: min(260px,72vw); width: min(260px,72vw); }
.home-track-wrap-small > .small-card { width: 100%; padding-right: 48px; }
.track-context-menu { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; color: var(--text); background: rgba(25,26,32,.78); font-size: 14px; letter-spacing: 1px; cursor: pointer; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: background .18s ease, transform .18s ease; }
.track-context-menu:active { transform: scale(.94); background: rgba(109,255,202,.12); }
.home-track-wrap > .track-context-menu { position: absolute; z-index: 3; top: 8px; right: 8px; }
.home-track-wrap-small > .track-context-menu { top: 8px; right: 8px; transform: none; }
.home-track-wrap-small > .track-context-menu:active { transform: scale(.94); }
.library-row-wrap { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; }
.library-row-wrap > .library-row { flex: 1 1 0; width: 0; min-width: 0; }
.library-context-menu { flex: 0 0 34px; }
.playlist-track-menu { flex: 0 0 30px; width: 30px; height: 30px; }
.related-item-wrap { position: relative; min-width: 0; }
.related-item-wrap .related-item { width: 100%; }
.related-context-menu { position: absolute; top: 7px; right: 7px; width: 32px; height: 32px; }
.item-actions-entity-mark { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; color: var(--good); background: rgba(255,255,255,.06); font-size: 20px; }
@media(max-width:620px) {
  .home-track-wrap { flex-basis: min(190px,58vw); width: min(190px,58vw); }
  .home-track-wrap-small { flex-basis: min(260px,72vw); width: min(260px,72vw); }
  .library-row-wrap { gap: 5px; }
}



/* Tuned-out Search results remain tappable; the badge explains the quiet exclusion. */
.search-row-wrap-tuned-out {
  padding: 4px;
  border: 1px solid rgba(109,255,202,.16);
  border-radius: 22px;
  background: linear-gradient(115deg, rgba(109,255,202,.055), rgba(194,208,255,.025) 55%, rgba(255,255,255,.018));
}
.search-row-wrap-tuned-out .search-row { background: rgba(16,20,21,.26); }
.search-row-wrap-tuned-out .search-row-tuned-out .name { color: rgba(245,248,247,.9); }
.tuned-out-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; min-width: 0; }
.tuned-out-badge { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 3px 7px; border: 1px solid rgba(109,255,202,.22); border-radius: 999px; color: #9ff6d9; background: rgba(109,255,202,.085); font-size: 9px; line-height: 1.35; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.tuned-out-note > span:last-child { color: var(--muted); font-size: 10px; line-height: 1.35; }
.search-row-wrap-tuned-out .type-pill { border-color: rgba(109,255,202,.19); color: #b5dfd1; }
.unhide-prompt-overlay { position: fixed; inset: 0; z-index: 140; display: flex; align-items: flex-end; justify-content: center; }
.unhide-prompt-scrim { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(3,4,8,.7); backdrop-filter: blur(9px); animation: item-scrim-in .18s ease both; }
.unhide-prompt-card { position: relative; z-index: 1; width: min(100%, 520px); margin: 0 0 env(safe-area-inset-bottom); padding: 26px 22px calc(22px + env(safe-area-inset-bottom)); border: 1px solid rgba(109,255,202,.2); border-bottom: 0; border-radius: 30px 30px 0 0; background: radial-gradient(ellipse at top, rgba(109,255,202,.14), transparent 52%), linear-gradient(145deg, rgba(39,41,49,.99), rgba(16,18,22,.99)); box-shadow: 0 -20px 64px rgba(0,0,0,.42); backdrop-filter: blur(34px); -webkit-backdrop-filter: blur(34px); animation: item-sheet-in .24s cubic-bezier(.2,.8,.2,1) both; }
.unhide-prompt-glow { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border: 1px solid rgba(109,255,202,.22); border-radius: 17px; color: #9ff6d9; background: rgba(109,255,202,.09); font-size: 25px; box-shadow: 0 0 26px rgba(109,255,202,.07); }
.unhide-prompt-kicker { color: #9ff6d9; font-size: 10px; font-weight: 750; letter-spacing: .15em; }
.unhide-prompt-card h3 { margin: 9px 0 8px; font-size: clamp(20px,5vw,24px); line-height: 1.2; letter-spacing: -.025em; }
.unhide-prompt-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.unhide-prompt-card p strong { color: var(--text); }
.unhide-prompt-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 9px; margin-top: 21px; }
.unhide-prompt-actions button { min-height: 46px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; color: var(--text); background: rgba(255,255,255,.045); font-size: 12px; font-weight: 650; }
.unhide-prompt-actions .unhide-prompt-restore { border-color: transparent; color: #062018; background: linear-gradient(125deg,#b5ffe9,#73f4ca); box-shadow: 0 9px 20px rgba(109,255,202,.12); }



/* Full playlist detail: a softly layered, animated glass surface. */
.library-view.playlist-detail-active > .view-heading { display: none; }
.playlist-detail { display: grid; gap: 22px; padding: 2px 0 30px; animation: playlist-detail-enter .36s cubic-bezier(.2,.75,.25,1) both; }
.playlist-detail-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.playlist-detail-nav .eyebrow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; letter-spacing: .16em; }
.playlist-detail-back,.playlist-detail-more { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 12px; border: 1px solid var(--glass-border); border-radius: 999px; color: var(--text); background: rgba(255,255,255,.055); cursor: pointer; }
.playlist-detail-back { flex: 0 0 auto; }
.playlist-detail-back span { font-size: 12px; }
.playlist-detail-more { width: 38px; flex: 0 0 38px; font-size: 15px; letter-spacing: 1px; }
.playlist-detail-hero { display: grid; grid-template-columns: minmax(132px, 42%) minmax(0,1fr); align-items: end; gap: clamp(15px,3vw,26px); padding: clamp(14px,3vw,22px); border: 1px solid rgba(255,255,255,.1); border-radius: 28px; background: radial-gradient(ellipse at 15% 0, rgba(109,255,202,.13), transparent 45%), linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.02)); box-shadow: 0 18px 50px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.05); }
.playlist-detail-art { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 2px; width: 100%; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 21px; background: linear-gradient(135deg,rgba(109,255,202,.28),rgba(108,130,224,.24)); box-shadow: 0 15px 38px rgba(0,0,0,.28); }
.playlist-detail-art img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; animation: playlist-art-in .42s ease both; }
.playlist-detail-art img:only-child { grid-column: 1/-1; grid-row: 1/-1; }
.playlist-detail-art span { grid-column: 1/-1; grid-row: 1/-1; display: grid; place-items: center; color: rgba(255,255,255,.88); font-size: clamp(30px,8vw,56px); text-shadow: 0 10px 30px rgba(0,0,0,.2); }
.playlist-detail-copy { min-width: 0; padding-bottom: 3px; }
.playlist-detail-kicker { color: var(--good); font-size: 9px; font-weight: 750; letter-spacing: .15em; }
.playlist-detail-copy h2 { margin: 9px 0; font-size: clamp(25px,5.5vw,43px); line-height: 1.02; letter-spacing: -.045em; overflow-wrap: anywhere; }
.playlist-detail-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.playlist-detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 15px; color: var(--muted); font-size: 10px; }
.playlist-detail-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--good); }
.playlist-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.playlist-detail-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 43px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: var(--text); background: rgba(255,255,255,.055); cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.playlist-detail-actions button:active { transform: scale(.97); }
.playlist-detail-actions button:disabled { opacity: .38; cursor: default; transform: none; }
.playlist-detail-actions .playlist-detail-play { border-color: transparent; color: #062018; background: linear-gradient(125deg,#b5ffe9,#73f4ca); box-shadow: 0 8px 22px rgba(109,255,202,.13); font-weight: 800; }
.playlist-detail-actions .playlist-detail-shuffle { border-color: rgba(109,255,202,.25); color: #a5f5dc; }
.playlist-detail-actions .playlist-detail-delete { margin-left: auto; color: var(--muted); font-size: 11px; }
.playlist-detail-list-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 7px 2px 0; }
.playlist-detail-list-heading .eyebrow { color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.playlist-detail-list-heading h3 { margin: 5px 0 0; font-size: clamp(19px,4vw,24px); letter-spacing: -.025em; }
.playlist-detail-list-heading > span { display: grid; place-items: center; min-width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; color: var(--muted); background: rgba(255,255,255,.035); font-size: 11px; }
.playlist-detail-tracklist { display: grid; gap: 5px; }
.playlist-detail-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px; border: 1px solid transparent; border-radius: 17px; background: rgba(255,255,255,.025); animation: playlist-row-in .28s ease both; }
.playlist-detail-row.is-current { border-color: rgba(109,255,202,.2); background: linear-gradient(100deg,rgba(109,255,202,.08),rgba(255,255,255,.025)); }
.playlist-detail-index { display: grid; place-items: center; width: 22px; flex: 0 0 22px; color: var(--faint); font-size: 10px; font-variant-numeric: tabular-nums; }
.playlist-detail-row.is-current .playlist-detail-index { color: var(--good); }
.playlist-detail-track { display: flex; align-items: center; gap: 11px; flex: 1 1 0; min-width: 0; padding: 0; border: 0; text-align: left; color: var(--text); background: transparent; cursor: pointer; }
.playlist-detail-track img { width: 50px; height: 50px; flex: 0 0 50px; border-radius: 13px; object-fit: cover; box-shadow: 0 5px 16px rgba(0,0,0,.17); }
.playlist-detail-track-copy { display: grid; gap: 4px; min-width: 0; }
.playlist-detail-track-copy strong,.playlist-detail-track-copy small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-detail-track-copy strong { font-size: 13px; font-weight: 650; }
.playlist-detail-track-copy small { color: var(--muted); font-size: 11px; }
.playlist-detail-menu { flex: 0 0 32px; width: 32px; height: 32px; }
.playlist-detail-remove { width: 29px; height: 29px; flex: 0 0 29px; }
.playlist-detail-empty { display: grid; justify-items: center; gap: 10px; padding: 33px 21px; border: 1px dashed rgba(255,255,255,.13); border-radius: 24px; text-align: center; background: rgba(255,255,255,.025); }
.playlist-detail-empty > span { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(109,255,202,.17); border-radius: 18px; color: var(--good); background: rgba(109,255,202,.07); font-size: 28px; }
.playlist-detail-empty strong { font-size: 14px; }
.playlist-detail-empty p { max-width: 33ch; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.playlist-detail-empty button { padding: 10px 14px; border: 0; border-radius: 999px; color: #062018; background: linear-gradient(125deg,#b5ffe9,#73f4ca); font-weight: 750; }
@keyframes playlist-detail-enter { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes playlist-art-in { from { opacity: .5; transform: scale(.975); } to { opacity: 1; transform: scale(1); } }
@keyframes playlist-row-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:620px) {
  .playlist-detail { gap: 18px; padding-bottom: 24px; }
  .playlist-detail-hero { grid-template-columns: minmax(105px,38%) minmax(0,1fr); gap: 13px; padding: 13px; border-radius: 24px; }
  .playlist-detail-art { border-radius: 17px; }
  .playlist-detail-copy h2 { font-size: clamp(22px,6.2vw,30px); }
  .playlist-detail-copy p { font-size: 11px; }
  .playlist-detail-meta { gap: 5px; margin-top: 10px; font-size: 9px; }
  .playlist-detail-actions { gap: 7px; }
  .playlist-detail-actions button { min-height: 40px; padding: 9px 11px; font-size: 11px; }
  .playlist-detail-actions .playlist-detail-delete { margin-left: 0; }
  .playlist-detail-row { gap: 5px; padding: 6px 5px; }
  .playlist-detail-index { width: 18px; flex-basis: 18px; }
  .playlist-detail-track { gap: 9px; }
  .playlist-detail-track img { width: 44px; height: 44px; flex-basis: 44px; border-radius: 11px; }
  .playlist-detail-track-copy strong { font-size: 12px; }
  .playlist-detail-track-copy small { font-size: 10px; }
  .playlist-detail-menu { width: 28px; height: 28px; flex-basis: 28px; }
  .playlist-detail-remove { width: 26px; height: 26px; flex-basis: 26px; }
}



/* Player queue 2.0 — a pinned Now Playing surface and gesture-first Up Next list. */
.queue-now-playing { margin: 4px 8px 18px; padding: 12px; border: 1px solid rgba(109,255,202,.2); border-radius: 22px; background: radial-gradient(ellipse at 0 0,rgba(109,255,202,.1),transparent 58%),linear-gradient(120deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); box-shadow: inset 0 1px 0 rgba(255,255,255,.045); }
.queue-now-heading { display:flex; align-items:center; gap:7px; margin:0 3px 10px; color:#9ff6d9; font-size:9px; font-weight:800; letter-spacing:.15em; }
.queue-live-dot { width:6px; height:6px; border-radius:50%; background:#82f0ca; box-shadow:0 0 12px rgba(109,255,202,.55); }
.queue-now-state { margin-left:auto; color:var(--muted); font-size:10px; font-weight:600; letter-spacing:0; }
.queue-row-current { padding:5px; border:0; background:rgba(255,255,255,.035); }
.queue-current-menu { width:34px; height:34px; flex:0 0 34px; }
.queue-list { gap:6px; padding-inline:8px; }
.queue-row { position:relative; transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .12s ease; user-select:none; }
.queue-row .queue-play { flex:0 0 44px; width:44px; height:44px; }
.queue-drag-handle { display:grid; place-items:center; width:36px; height:44px; flex:0 0 36px; padding:0; border:1px solid rgba(255,255,255,.075); border-radius:12px; color:var(--muted); background:rgba(255,255,255,.035); font-size:22px; line-height:1; cursor:grab; touch-action:none; -webkit-tap-highlight-color:transparent; }
.queue-drag-handle:active { cursor:grabbing; color:#9ff6d9; background:rgba(109,255,202,.11); }
.queue-row.is-dragging { z-index:5; background:rgba(109,255,202,.12); border-color:rgba(109,255,202,.38); box-shadow:0 17px 34px rgba(0,0,0,.34); transition:none; pointer-events:none; }
.queue-row.is-dragging .queue-drag-handle { color:#9ff6d9; }
.queue-row.drop-before::before,.queue-row.drop-after::after { content:""; position:absolute; left:8px; right:8px; height:2px; border-radius:99px; background:#8ef4d0; box-shadow:0 0 12px rgba(109,255,202,.42); pointer-events:none; }
.queue-row.drop-before::before { top:-4px; }
.queue-row.drop-after::after { bottom:-4px; }
body.queue-pointer-dragging { cursor:grabbing; user-select:none; -webkit-user-select:none; }
body.queue-pointer-dragging #queuePanel { overflow:visible; }
.queue-toolbar .queue-clear { min-height:36px; padding:7px 12px; color:var(--muted); background:rgba(255,255,255,.045); }
.queue-actions button { min-width:32px; min-height:36px; touch-action:manipulation; }
.queue-actions button:focus-visible,.queue-drag-handle:focus-visible { outline:2px solid rgba(109,255,202,.7); outline-offset:2px; }
@media(max-width:430px) {
  .queue-now-playing { margin-inline:5px; padding:9px; }
  .queue-row { gap:6px; }
  .queue-drag-handle { width:32px; flex-basis:32px; }
  .queue-row .queue-play { width:40px; height:40px; flex-basis:40px; }
  .queue-actions button { width:28px; min-width:28px; min-height:34px; }
  .queue-current-menu { width:31px; height:31px; flex-basis:31px; }
}


/* Playlist detail drag-and-drop: tactile Liquid Glass controls and clear drop targets. */
.playlist-detail-reorder-hint{display:flex;align-items:center;gap:9px;margin:-8px 2px -7px;color:var(--faint);font-size:11px;letter-spacing:.015em}
.playlist-detail-reorder-hint>span{color:var(--muted)}
.playlist-detail-drag{display:grid;place-items:center;width:31px;height:38px;flex:0 0 31px;border:1px solid rgba(255,255,255,.09);border-radius:12px;color:rgba(231,239,255,.78);background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035));box-shadow:inset 0 1px rgba(255,255,255,.1);font-size:18px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:background .2s,border-color .2s,box-shadow .2s}
.playlist-detail-drag:active{cursor:grabbing;background:rgba(109,255,202,.13);border-color:rgba(109,255,202,.34)}
.playlist-detail-row{position:relative;transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}
.playlist-detail-row.is-dragging{z-index:4;position:relative;background:linear-gradient(110deg,rgba(109,255,202,.17),rgba(157,175,255,.12));border-color:rgba(190,255,236,.36);box-shadow:0 18px 38px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.2);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);opacity:.96;pointer-events:none}
.playlist-detail-row.drop-before{border-top-color:rgba(109,255,202,.8);box-shadow:inset 0 3px rgba(109,255,202,.5)}
.playlist-detail-row.drop-after{border-bottom-color:rgba(109,255,202,.8);box-shadow:inset 0 -3px rgba(109,255,202,.5)}
body.playlist-pointer-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
@media(max-width:420px){.playlist-detail-drag{width:28px;flex-basis:28px;height:35px}.playlist-detail-row{gap:6px;padding:6px}.playlist-detail-index{width:17px;flex-basis:17px}.playlist-detail-track{gap:8px}.playlist-detail-track img{width:44px;height:44px;flex-basis:44px}}



/* Search-discovered playlist detail: editorial hero, touch-first rows and quiet infinite-scroll loading. */
.remote-playlist-detail{display:grid;gap:18px;padding:16px;border-radius:30px;overflow:hidden;position:relative}
.remote-playlist-detail::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 70% 0%,rgba(109,255,202,.075),transparent 33%),linear-gradient(155deg,rgba(255,255,255,.035),transparent 42%)}
.remote-playlist-nav,.remote-playlist-hero,.remote-playlist-actions,.remote-playlist-list-heading,.remote-playlist-tracklist{position:relative;z-index:1}
.remote-playlist-nav{display:flex;align-items:center;justify-content:space-between;gap:10px}
.remote-playlist-mark{display:inline-flex;align-items:center;gap:6px;color:var(--faint);font-size:9px;font-weight:800;letter-spacing:.13em;white-space:nowrap}
.remote-playlist-mark span{width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 13px rgba(109,255,202,.55)}
.remote-playlist-hero{display:grid;grid-template-columns:minmax(124px,42%) minmax(0,1fr);align-items:center;gap:17px;padding:5px 2px 0}
.remote-playlist-cover-wrap{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:23px;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.02));box-shadow:0 20px 44px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.17)}
.remote-playlist-mosaic{display:grid;width:100%;height:100%;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.08)}
.remote-playlist-cover{width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;display:block;transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.remote-playlist-cover:only-child{grid-column:1/-1;grid-row:1/-1}
.remote-playlist-cover-wrap:hover .remote-playlist-cover{filter:saturate(1.08)}
.remote-playlist-cover-wrap:hover .remote-playlist-cover:only-child{transform:scale(1.035)}
.remote-cover-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.19),transparent 30%,transparent 70%,rgba(0,0,0,.2))}
.remote-playlist-copy{min-width:0}
.remote-playlist-kicker{font-size:9px;font-weight:800;letter-spacing:.13em;color:var(--good)}
.remote-playlist-copy h2{margin:8px 0 0;font-size:clamp(24px,6.3vw,38px);line-height:1.02;letter-spacing:-.055em;overflow-wrap:anywhere}
.remote-playlist-owner{margin:11px 0 0;font-size:12px;font-weight:700;color:rgba(255,255,255,.9)}
.remote-playlist-description{margin:8px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);font-size:11px;line-height:1.55}
.remote-playlist-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px;color:var(--faint);font-size:10px}
.remote-meta-dot{width:3px;height:3px;border-radius:50%;background:var(--good)}
.remote-playlist-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px;border:1px solid rgba(255,255,255,.09);border-radius:23px;background:linear-gradient(125deg,rgba(255,255,255,.08),rgba(255,255,255,.025));backdrop-filter:blur(26px) saturate(140%);-webkit-backdrop-filter:blur(26px) saturate(140%);box-shadow:inset 0 1px rgba(255,255,255,.08)}
.remote-playlist-actions button{min-height:42px;padding:0 15px;border:1px solid rgba(255,255,255,.1);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--text);background:rgba(255,255,255,.065);font-size:12px;font-weight:700;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
.remote-playlist-actions button:active{transform:scale(.965)}
.remote-playlist-actions button:disabled{opacity:.45;cursor:wait}
.remote-playlist-actions .remote-playlist-primary{color:#072016;background:linear-gradient(135deg,#b8ffe7,#6dffca);border-color:rgba(230,255,247,.52);box-shadow:inset 0 1px rgba(255,255,255,.7),0 7px 23px rgba(109,255,202,.15)}
.remote-playlist-actions .remote-playlist-primary>span{font-size:13px}
.remote-playlist-actions .remote-playlist-save{margin-left:auto;background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.035))}
.remote-playlist-actions .remote-playlist-save.is-saved{color:var(--good);border-color:rgba(109,255,202,.23);background:rgba(109,255,202,.09)}
.remote-playlist-list-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:3px 1px 0}
.remote-playlist-list-heading h3{margin:5px 0 0;font-size:22px;letter-spacing:-.04em}
.remote-playlist-list-heading p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.45}
.remote-loaded-pill{flex:0 0 auto;padding:7px 10px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.055);color:var(--faint);font-size:10px;white-space:nowrap}
.remote-loaded-pill strong{color:var(--text)}
.remote-playlist-tracklist{display:grid;gap:6px;min-width:0}
.remote-playlist-rows{display:grid;gap:5px}
.remote-playlist-track{min-width:0;display:flex;align-items:center;gap:7px;padding:6px 7px;border:1px solid rgba(255,255,255,.055);border-radius:18px;background:linear-gradient(110deg,rgba(255,255,255,.055),rgba(255,255,255,.018));backdrop-filter:blur(19px) saturate(125%);-webkit-backdrop-filter:blur(19px) saturate(125%);box-shadow:inset 0 1px rgba(255,255,255,.045);transition:background .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;animation:remote-track-arrive .34s ease both}
.remote-playlist-track:hover{transform:translateY(-1px);background:linear-gradient(110deg,rgba(255,255,255,.085),rgba(109,255,202,.03));border-color:rgba(255,255,255,.11)}
.remote-playlist-track.is-current{border-color:rgba(109,255,202,.22);background:linear-gradient(110deg,rgba(109,255,202,.10),rgba(255,255,255,.025))}
.remote-play-row{display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding:0;border:0;text-align:left;color:var(--text);background:transparent;cursor:pointer}
.remote-track-index{display:grid;place-items:center;width:18px;flex:0 0 18px;color:var(--faint);font-size:10px;font-variant-numeric:tabular-nums}
.remote-playlist-track.is-current .remote-track-index{color:var(--good)}
.remote-track-art{position:relative;display:block;width:48px;height:48px;flex:0 0 48px;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:13px;background:rgba(255,255,255,.08);box-shadow:0 5px 13px rgba(0,0,0,.22)}
.remote-track-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease,filter .3s ease}
.remote-play-row:hover .remote-track-art img{transform:scale(1.05);filter:saturate(1.12)}
.remote-track-playmark{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:rgba(4,9,9,.35);opacity:0;transition:opacity .18s ease;font-size:15px;text-shadow:0 1px 5px rgba(0,0,0,.5)}
.remote-play-row:hover .remote-track-playmark,.remote-play-row:focus-visible .remote-track-playmark{opacity:1}
.remote-track-copy{display:grid;gap:4px;min-width:0;flex:1}
.remote-track-copy strong,.remote-track-copy small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.remote-track-copy strong{font-size:13px;font-weight:680;letter-spacing:-.012em}
.remote-track-copy small{font-size:11px;color:var(--muted)}
.remote-track-menu{flex:0 0 33px;width:33px;height:34px}
.remote-playlist-empty-loading,.remote-playlist-sentinel,.playlist-detail-page-sentinel{display:flex;justify-content:center;align-items:center;gap:9px;min-height:42px;padding:12px;border-radius:16px;color:var(--muted);font-size:11px;text-align:center}
.remote-playlist-empty-loading[hidden]{display:none}
.remote-playlist-sentinel.is-loading,.remote-playlist-sentinel.has-error,.playlist-detail-page-sentinel{border:1px solid rgba(255,255,255,.065);background:rgba(255,255,255,.025)}
.remote-page-spinner{width:15px;height:15px;flex:0 0 15px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--good);border-radius:50%;animation:remote-page-spin .8s linear infinite;box-shadow:0 0 12px rgba(109,255,202,.12)}
.remote-page-hint,.remote-page-end{color:var(--faint)}
.remote-page-error{color:#ffb8b8}
.remote-playlist-sentinel button,.playlist-detail-page-sentinel button{padding:7px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:var(--text);background:rgba(255,255,255,.07);font:inherit;cursor:pointer}
.playlist-detail-page-sentinel{margin-top:5px}
.playlist-detail-playmark{display:grid;place-items:center;flex:0 0 27px;width:27px;height:27px;margin-left:auto;border:1px solid rgba(255,255,255,.08);border-radius:50%;color:rgba(255,255,255,.65);background:rgba(255,255,255,.04);font-size:9px;transition:color .2s,background .2s,transform .2s}
.playlist-detail-track:hover .playlist-detail-playmark{color:#092018;background:var(--good);transform:scale(1.04)}
@keyframes remote-page-spin{to{transform:rotate(360deg)}}
@keyframes remote-track-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:620px){.remote-playlist-detail{padding:13px;gap:16px;border-radius:25px}.remote-playlist-hero{grid-template-columns:minmax(110px,39%) minmax(0,1fr);gap:13px}.remote-playlist-cover-wrap{border-radius:19px}.remote-playlist-copy h2{font-size:clamp(23px,6vw,32px)}.remote-playlist-actions{gap:6px;padding:8px;border-radius:20px}.remote-playlist-actions button{min-height:40px;padding:0 12px;font-size:11px}.remote-playlist-actions .remote-playlist-save{margin-left:0}.remote-track-art{width:44px;height:44px;flex-basis:44px}.remote-playlist-list-heading h3{font-size:20px}}
@media(max-width:380px){.remote-playlist-hero{grid-template-columns:94px minmax(0,1fr);gap:11px}.remote-playlist-cover-wrap{border-radius:16px}.remote-playlist-copy h2{font-size:22px}.remote-playlist-actions button{flex:1 1 auto}.remote-playlist-actions .remote-playlist-save{flex:1 1 100%}.remote-track-index{width:14px;flex-basis:14px}}


/* A tiny gelly pulse confirms the queue has quietly extended in the background. */
.mini-player.queue-extended{animation:queue-extended-pop .48s cubic-bezier(.2,.82,.28,1)}
@keyframes queue-extended-pop{0%{transform:translateX(-50%) scale(1);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 52px rgba(0,0,0,.42)}42%{transform:translateX(-50%) scale(1.012);box-shadow:inset 0 1px 0 rgba(255,255,255,.23),0 20px 55px rgba(0,0,0,.4),0 0 28px rgba(109,255,202,.12)}100%{transform:translateX(-50%) scale(1);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 52px rgba(0,0,0,.42)}}


/* Mobile WebView guardrails: prevent native/default button paint from covering the Liquid Glass mini-player. */
#miniPlayer{isolation:isolate;contain:paint;border-radius:25px;background:linear-gradient(120deg,rgba(255,255,255,.14),rgba(255,255,255,.035) 44%,rgba(109,255,202,.035)),rgba(16,18,23,.82);overflow:hidden}
#miniPlayer>.mini-open{-webkit-appearance:none;appearance:none;display:flex!important;flex-flow:row nowrap!important;align-items:center!important;justify-content:flex-start!important;position:relative;z-index:1;flex:1 1 auto;width:0;min-width:0;max-width:100%;height:auto;min-height:0;margin:0;padding:0;border:0!important;border-radius:17px;color:inherit;background:transparent!important;box-shadow:none!important;text-align:left;white-space:normal;overflow:hidden}
#miniPlayer>.mini-open::before,#miniPlayer>.mini-open::after{content:none!important;display:none!important}
#miniPlayer>.mini-open:hover,#miniPlayer>.mini-open:active,#miniPlayer>.mini-open:focus{background:transparent!important;box-shadow:none!important}
#miniPlayer .mini-art-frame{flex:0 0 57px;align-self:center;min-width:0}
#miniPlayer .mini-meta{display:grid!important;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:stretch;flex:1 1 auto;width:0;min-width:0;max-width:100%;text-align:left;background:transparent!important;box-shadow:none!important;overflow:hidden}
#miniPlayer .mini-title,#miniPlayer .mini-artist{width:100%;max-width:100%;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#miniPlayer>.player-icon{position:relative;z-index:3;flex-shrink:0;appearance:none;-webkit-appearance:none}
@media(max-width:420px){#miniPlayer .mini-art-frame{flex-basis:51px}}


/* Immersive entity detail: retain the global profile bar, give the opened item the full content canvas. */
#searchView.detail-immersive{padding-top:2px;animation:detail-view-arrive .42s cubic-bezier(.2,.82,.28,1) both}
#searchView.detail-immersive>.view-heading,
#searchView.detail-immersive>.search-box,
#searchView.detail-immersive>.search-filters{display:none!important}
#searchView.detail-immersive #searchResults{margin-top:0;min-height:calc(100dvh - 178px);animation:detail-content-arrive .38s cubic-bezier(.2,.82,.28,1) both}
#searchView.detail-immersive .remote-playlist-detail{min-height:calc(100dvh - 188px);padding:clamp(14px,3.5vw,24px);gap:clamp(15px,3.5vw,22px);border-radius:28px}
#searchView.detail-immersive .remote-playlist-nav,
#searchView.detail-immersive .search-detail-nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-3px -3px 0;padding:5px 4px 12px;border:1px solid rgba(255,255,255,.035);border-radius:22px;background:linear-gradient(180deg,rgba(77,83,95,.18),rgba(58,64,75,.09) 60%,rgba(38,42,50,0));box-shadow:inset 0 1px rgba(255,255,255,.04);backdrop-filter:blur(10px) saturate(125%);-webkit-backdrop-filter:blur(10px) saturate(125%)}
#searchView.detail-immersive .remote-playlist-hero{grid-template-columns:minmax(130px,36%) minmax(0,1fr);gap:clamp(14px,3.5vw,22px)}
#searchView.detail-immersive .remote-playlist-copy h2{font-size:clamp(26px,6.8vw,42px)}
#searchView.detail-immersive .remote-playlist-tracklist{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
@keyframes detail-view-arrive{from{opacity:.7;transform:translateY(9px) scale(.992)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes detail-content-arrive{from{opacity:.65;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:480px){#searchView.detail-immersive .remote-playlist-hero{grid-template-columns:minmax(112px,39%) minmax(0,1fr)}#searchView.detail-immersive .remote-playlist-detail{border-radius:25px}}



/* Shared immersive entity treatment for albums and artists. */
.search-detail-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;z-index:4;padding:2px 0 8px;background:linear-gradient(180deg,rgba(22,24,29,.88),rgba(22,24,29,.5),transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.search-entity-detail{position:relative;isolation:isolate;min-height:calc(100dvh - 188px);overflow:hidden;animation:detail-content-arrive .38s cubic-bezier(.2,.82,.28,1) both;background:radial-gradient(ellipse at 76% 0%,rgba(109,255,202,.075),transparent 36%),linear-gradient(155deg,rgba(255,255,255,.045),transparent 48%),rgba(255,255,255,.035)}
.search-entity-detail::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 15% 28%,rgba(194,208,255,.055),transparent 45%)}
.search-detail-art{width:min(72vw,290px);border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 54px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.18);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease}
.search-detail-copy h2{font-size:clamp(28px,7vw,42px);letter-spacing:-.055em;line-height:1.03}
.search-detail-actions{padding:10px;border:1px solid rgba(255,255,255,.085);border-radius:22px;background:linear-gradient(125deg,rgba(255,255,255,.075),rgba(255,255,255,.02));backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%)}
.search-detail-actions button{transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.search-detail-actions button:active{transform:scale(.965)}
.search-detail-actions .search-detail-primary{background:linear-gradient(135deg,#b8ffe7,#6dffca);box-shadow:inset 0 1px rgba(255,255,255,.7),0 7px 23px rgba(109,255,202,.15)}
@media(max-width:620px){.search-entity-detail{padding:13px;border-radius:25px;gap:15px}.search-detail-art{width:min(64vw,245px);margin-inline:auto}.search-detail-copy h2{font-size:clamp(25px,6.5vw,34px)}}



/* Immersive album and artist pages: one coherent Liquid Glass canvas. */
.catalog-entity-detail{display:grid;gap:clamp(15px,3.5vw,22px);min-height:calc(100dvh - 188px);padding:clamp(14px,3.5vw,24px);border-radius:28px;overflow:hidden;position:relative;animation:detail-view-arrive .42s cubic-bezier(.2,.82,.28,1) both}
.catalog-entity-detail::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 78% 0%,rgba(109,255,202,.07),transparent 34%),linear-gradient(150deg,rgba(255,255,255,.035),transparent 43%)}
.catalog-entity-detail>.search-detail-nav,.catalog-entity-hero,.catalog-entity-actions,.catalog-entity-detail>.remote-playlist-list-heading,.catalog-entity-detail>.remote-playlist-tracklist{position:relative;z-index:1}
.catalog-entity-hero{display:grid;grid-template-columns:minmax(124px,36%) minmax(0,1fr);align-items:center;gap:clamp(14px,3.5vw,22px);padding:4px 2px 0}
.catalog-entity-art-wrap{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid rgba(255,255,255,.17);border-radius:23px;background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.025));box-shadow:0 20px 44px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.17)}
.catalog-entity-art{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.catalog-entity-art-wrap:hover .catalog-entity-art{transform:scale(1.035);filter:saturate(1.08)}
.catalog-entity-copy{min-width:0}
.catalog-entity-copy h2{margin:8px 0 0;font-size:clamp(26px,6.8vw,42px);line-height:1.03;letter-spacing:-.055em;overflow-wrap:anywhere}
.catalog-entity-subtitle{margin:11px 0 0;color:rgba(255,255,255,.86);font-size:13px;font-weight:650;line-height:1.4;overflow-wrap:anywhere}
.catalog-entity-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:10px;border:1px solid rgba(255,255,255,.065);border-radius:22px;background:linear-gradient(125deg,rgba(255,255,255,.07),rgba(255,255,255,.018));box-shadow:inset 0 1px rgba(255,255,255,.06);backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%)}
.catalog-entity-actions button{min-height:42px;padding:0 16px;border:1px solid rgba(255,255,255,.1);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--text);background:rgba(255,255,255,.055);font-size:12px;font-weight:750;cursor:pointer;transition:transform .22s cubic-bezier(.2,.8,.2,1),background .22s ease,border-color .22s ease,box-shadow .22s ease}
.catalog-entity-actions button:active{transform:scale(.96)}
.catalog-entity-actions button:disabled{opacity:.42;cursor:wait}
.catalog-entity-actions [data-catalog-play-all]{color:#062016;background:linear-gradient(135deg,#c1ffec,#6dffca);border-color:rgba(230,255,247,.55);box-shadow:inset 0 1px rgba(255,255,255,.72),0 8px 24px rgba(109,255,202,.12)}
.catalog-entity-detail .remote-playlist-list-heading{margin-top:1px}
.catalog-entity-detail .remote-playlist-tracklist{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
.catalog-entity-track{animation:remote-track-arrive .32s ease both}
.catalog-entity-track .remote-play-row:focus-visible{outline:2px solid rgba(109,255,202,.8);outline-offset:2px;border-radius:14px}
.catalog-entity-empty{padding:18px;border:1px solid rgba(255,255,255,.06);border-radius:18px;background:rgba(255,255,255,.025);color:var(--muted);font-size:12px;text-align:center}
.catalog-entity-empty[hidden]{display:none}
#searchView.detail-immersive .remote-playlist-nav,
#searchView.detail-immersive .search-detail-nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-3px -3px 0;padding:5px 4px 12px;border:1px solid rgba(255,255,255,.025);border-radius:22px;background:linear-gradient(180deg,rgba(83,90,103,.14),rgba(61,67,78,.065) 56%,rgba(38,42,50,0));box-shadow:inset 0 1px rgba(255,255,255,.025);backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%)}
#searchView.detail-immersive .remote-playlist-nav .search-detail-back,
#searchView.detail-immersive .search-detail-nav .search-detail-back{background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.025));border-color:rgba(255,255,255,.07);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
@media(max-width:620px){.catalog-entity-detail{padding:13px;gap:16px;border-radius:25px}.catalog-entity-hero{grid-template-columns:minmax(110px,39%) minmax(0,1fr);gap:13px}.catalog-entity-art-wrap{border-radius:19px}.catalog-entity-copy h2{font-size:clamp(23px,6vw,32px)}.catalog-entity-actions{gap:6px;padding:8px;border-radius:20px}.catalog-entity-actions button{min-height:40px;padding:0 12px;font-size:11px}}
@media(max-width:380px){.catalog-entity-hero{grid-template-columns:94px minmax(0,1fr);gap:11px}.catalog-entity-art-wrap{border-radius:16px}.catalog-entity-copy h2{font-size:22px}.catalog-entity-actions button{flex:1 1 auto}}



/* Shared stacked Liquid Glass entity hero: artwork first, then the category kicker, title and one caption. */
#searchView.detail-immersive .remote-playlist-hero,
#searchView.detail-immersive .catalog-entity-hero,
#searchView.detail-immersive .remote-playlist-hero-stacked,
#searchView.detail-immersive .catalog-entity-hero-stacked{
  display:grid;grid-template-columns:minmax(0,1fr);align-items:start;justify-items:stretch;gap:18px;padding:4px 0 0
}
#searchView.detail-immersive .remote-playlist-cover-wrap,
#searchView.detail-immersive .catalog-entity-art-wrap{
  width:min(72vw,360px);max-width:100%;aspect-ratio:1;justify-self:center;margin:0 auto;border-radius:27px;
  box-shadow:0 24px 60px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.2),0 0 36px rgba(109,255,202,.045)
}
#searchView.detail-immersive .remote-playlist-copy,
#searchView.detail-immersive .catalog-entity-copy{width:100%;min-width:0;text-align:left;padding:0 2px}
#searchView.detail-immersive .remote-playlist-copy h2,
#searchView.detail-immersive .catalog-entity-copy h2{
  margin:8px 0 0;font-size:clamp(29px,7.4vw,44px);line-height:1.04;letter-spacing:-.055em;overflow-wrap:anywhere
}
#searchView.detail-immersive .remote-playlist-description{
  margin:9px 0 0;color:rgba(246,247,248,.64);font-size:13px;line-height:1.45;font-weight:450;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
#searchView.detail-immersive .remote-playlist-owner{display:none}
#searchView.detail-immersive .remote-playlist-meta{margin-top:12px;font-size:11px;gap:8px}
#searchView.detail-immersive .catalog-entity-subtitle{margin:9px 0 0;color:rgba(246,247,248,.66);font-size:15px;font-weight:500;line-height:1.45}
#searchView.detail-immersive .catalog-entity-copy .remote-playlist-kicker,
#searchView.detail-immersive .remote-playlist-copy .remote-playlist-kicker{display:inline-flex;margin-top:0;font-size:11px;letter-spacing:.15em}
#searchView.detail-immersive .catalog-entity-actions,
#searchView.detail-immersive .remote-playlist-actions{position:relative;gap:9px;border-radius:24px}
#searchView.detail-immersive .remote-playlist-list-heading,
#searchView.detail-immersive .catalog-entity-detail>.remote-playlist-list-heading{margin-top:0}
#searchView.detail-immersive .remote-playlist-detail,
#searchView.detail-immersive .catalog-entity-detail{
  isolation:isolate;background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.025) 43%,rgba(109,255,202,.035)),rgba(17,19,23,.73);
  border-color:rgba(255,255,255,.115);box-shadow:inset 0 1px rgba(255,255,255,.11),0 24px 70px rgba(0,0,0,.32);
}
#searchView.detail-immersive .remote-playlist-detail::before,
#searchView.detail-immersive .catalog-entity-detail::before{
  z-index:0;inset:-14%;pointer-events:none;background:
   radial-gradient(ellipse at 76% 9%,rgba(109,255,202,.14),transparent 34%),
   radial-gradient(ellipse at 13% 35%,rgba(150,171,255,.105),transparent 39%),
   radial-gradient(ellipse at 60% 82%,rgba(222,133,193,.07),transparent 38%),
   linear-gradient(135deg,rgba(255,255,255,.045),transparent 54%);
  background-size:180% 180%;animation:makplay-liquid-flow 18s ease-in-out infinite alternate
}
#searchView.detail-immersive .remote-playlist-detail::after,
#searchView.detail-immersive .catalog-entity-detail::after{
  content:"";position:absolute;z-index:0;inset:-20%;border-radius:45%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(109,255,202,.055),transparent 54%);
  filter:blur(38px);opacity:.8;animation:makplay-liquid-orbit 24s ease-in-out infinite alternate
}
#searchView.detail-immersive .remote-playlist-nav,
#searchView.detail-immersive .catalog-entity-detail>.search-detail-nav,
#searchView.detail-immersive .catalog-entity-hero,
#searchView.detail-immersive .catalog-entity-actions,
#searchView.detail-immersive .catalog-entity-detail>.remote-playlist-list-heading,
#searchView.detail-immersive .catalog-entity-detail>.remote-playlist-tracklist,
#searchView.detail-immersive .remote-playlist-hero,
#searchView.detail-immersive .remote-playlist-actions,
#searchView.detail-immersive .remote-playlist-list-heading,
#searchView.detail-immersive .remote-playlist-tracklist{position:relative;z-index:1}
@keyframes makplay-liquid-flow{
  0%{background-position:0% 45%;transform:translate3d(-1%,0,0) scale(1)}
  50%{background-position:100% 55%;transform:translate3d(1%,1%,0) scale(1.025)}
  100%{background-position:12% 100%;transform:translate3d(0,-1%,0) scale(1.01)}
}
@keyframes makplay-liquid-orbit{
  0%{transform:translate3d(-2%,-1%,0) rotate(-6deg) scale(.94)}
  100%{transform:translate3d(2%,2%,0) rotate(7deg) scale(1.08)}
}
@media(max-width:480px){
  #searchView.detail-immersive .remote-playlist-cover-wrap,
  #searchView.detail-immersive .catalog-entity-art-wrap{width:min(78vw,360px);border-radius:24px}
  #searchView.detail-immersive .remote-playlist-hero,
  #searchView.detail-immersive .catalog-entity-hero{gap:16px}
  #searchView.detail-immersive .remote-playlist-copy h2,
  #searchView.detail-immersive .catalog-entity-copy h2{font-size:clamp(28px,7.5vw,37px)}
}



/* Unified flowing glass treatment for playlist, album and artist detail screens. */
#searchView.detail-immersive .remote-playlist-detail,
#searchView.detail-immersive .catalog-entity-detail{
  position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(ellipse at 92% 5%,rgba(107,255,207,.12),transparent 38%),
    radial-gradient(ellipse at 8% 28%,rgba(133,158,255,.075),transparent 42%),
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 44%,rgba(103,255,204,.035)),
    rgba(17,19,24,.84);
  border:1px solid rgba(255,255,255,.095);
  box-shadow:inset 0 1px rgba(255,255,255,.15),inset 0 -1px rgba(255,255,255,.025),0 22px 64px rgba(0,0,0,.28);
}
#searchView.detail-immersive .remote-playlist-detail::before,
#searchView.detail-immersive .catalog-entity-detail::before{
  content:"";position:absolute;z-index:-1;inset:-30% -45%;pointer-events:none;
  background:conic-gradient(from 190deg at 50% 50%,transparent 0deg,rgba(91,255,200,.075) 72deg,transparent 145deg,rgba(134,153,255,.06) 230deg,transparent 320deg);
  filter:blur(34px);animation:catalog-glass-flow 18s ease-in-out infinite alternate;
}
#searchView.detail-immersive .catalog-entity-hero-stacked{display:flex;flex-direction:column;align-items:stretch;gap:22px}
#searchView.detail-immersive .catalog-entity-art-wrap{width:min(100%,min(72vw,430px));aspect-ratio:1;margin:4px auto 0;overflow:hidden;border-radius:28px;background:rgba(255,255,255,.035);box-shadow:0 18px 44px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.18)}
#searchView.detail-immersive .catalog-entity-art{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
#searchView.detail-immersive .catalog-entity-copy{display:flex;flex-direction:column;gap:9px;min-width:0}
#searchView.detail-immersive .catalog-entity-copy .remote-playlist-kicker{color:#70f5c8;letter-spacing:.15em;font-size:12px;font-weight:700}
#searchView.detail-immersive .catalog-entity-copy h2{margin:0;font-size:clamp(28px,7vw,40px);line-height:1.08;letter-spacing:-.045em;font-weight:720;text-wrap:balance}
#searchView.detail-immersive .catalog-entity-subtitle{margin:0;color:rgba(245,247,251,.68);font-size:clamp(15px,4vw,18px);line-height:1.42}
#searchView.detail-immersive .catalog-entity-description{margin:2px 0 0;color:rgba(236,240,247,.48);font-size:13px;line-height:1.5}
#searchView.detail-immersive .catalog-entity-actions{display:flex;flex-wrap:wrap;gap:10px;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:linear-gradient(120deg,rgba(255,255,255,.075),rgba(255,255,255,.018));box-shadow:inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
#searchView.detail-immersive .catalog-artist-releases{display:flex;flex-direction:column;gap:12px}
#searchView.detail-immersive .catalog-artist-release-strip{display:flex;gap:12px;overflow-x:auto;padding:2px 1px 10px;scroll-snap-type:x proximity}
#searchView.detail-immersive .catalog-artist-release{flex:0 0 112px;display:flex;flex-direction:column;gap:6px;text-align:left;color:inherit;border:1px solid rgba(255,255,255,.1);border-radius:17px;padding:8px;background:rgba(255,255,255,.045);scroll-snap-align:start}
#searchView.detail-immersive .catalog-artist-release img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:11px}
#searchView.detail-immersive .catalog-artist-release span{font-size:12px;line-height:1.3}
#searchView.detail-immersive .catalog-artist-release small{color:rgba(255,255,255,.5);font-size:11px}
@keyframes catalog-glass-flow{0%{transform:translate3d(-4%,0,0) rotate(-7deg) scale(1)}100%{transform:translate3d(4%,2%,0) rotate(7deg) scale(1.08)}}



/* One shared artwork-first visual language for playlists, albums and artists. */
#searchView.detail-immersive .remote-playlist-detail,
#searchView.detail-immersive .catalog-entity-detail{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025) 36%,rgba(106,255,207,.045) 72%,rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 70px rgba(0,0,0,.2);backdrop-filter:blur(28px) saturate(145%);-webkit-backdrop-filter:blur(28px) saturate(145%)}
#searchView.detail-immersive .remote-playlist-detail::before,
#searchView.detail-immersive .catalog-entity-detail::before{content:"";position:absolute;z-index:-1;inset:-22% -12% auto;height:58%;pointer-events:none;background:radial-gradient(ellipse at 22% 32%,rgba(130,255,218,.15),transparent 58%),radial-gradient(ellipse at 82% 10%,rgba(143,177,255,.13),transparent 52%);filter:blur(26px);animation:catalog-glass-flow 13s ease-in-out infinite alternate}
#searchView.detail-immersive .remote-playlist-hero.catalog-entity-hero-stacked,
#searchView.detail-immersive .catalog-entity-hero-stacked{display:flex;flex-direction:column;align-items:stretch;gap:18px}
#searchView.detail-immersive .remote-playlist-cover-wrap,
#searchView.detail-immersive .catalog-entity-art-wrap{align-self:center;width:min(74vw,330px);max-width:100%;aspect-ratio:1;border-radius:25px;overflow:hidden;box-shadow:0 22px 52px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.22)}
#searchView.detail-immersive .catalog-entity-art-wrap{position:relative}
#searchView.detail-immersive .catalog-entity-art{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
#searchView.detail-immersive .remote-playlist-copy,
#searchView.detail-immersive .catalog-entity-copy{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
#searchView.detail-immersive .remote-playlist-copy h2,
#searchView.detail-immersive .catalog-entity-copy h2{margin:0;font-size:clamp(27px,7vw,38px);line-height:1.08;letter-spacing:-.035em;overflow-wrap:anywhere}
#searchView.detail-immersive .remote-playlist-kicker{color:#79f5cd;font-size:12px;font-weight:650;letter-spacing:.13em}
#searchView.detail-immersive .remote-playlist-description,
#searchView.detail-immersive .catalog-entity-description{margin:2px 0 0;color:rgba(244,248,250,.68);font-size:14px;line-height:1.5}
#searchView.detail-immersive .catalog-entity-subtitle,
#searchView.detail-immersive .remote-playlist-owner{margin:2px 0 0;color:rgba(244,248,250,.72);font-size:15px;line-height:1.45}
#searchView.detail-immersive .catalog-entity-detail .remote-playlist-meta{margin-top:7px}
#searchView.detail-immersive .catalog-entity-actions{margin-top:4px}
@media(max-width:480px){#searchView.detail-immersive .remote-playlist-cover-wrap,#searchView.detail-immersive .catalog-entity-art-wrap{width:min(72vw,300px)}}



/* Final mobile detail-layout guard: keep artwork and metadata in the same
   centered column across playlist, album, and artist detail pages. */
#searchView.detail-immersive .remote-playlist-hero-stacked,
#searchView.detail-immersive .catalog-entity-hero-stacked{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  gap:18px!important;
  padding:4px 0 0!important;
  margin:0!important;
  transform:none!important;
}
#searchView.detail-immersive .remote-playlist-cover-wrap,
#searchView.detail-immersive .catalog-entity-art-wrap{
  position:relative!important;
  inset:auto!important;
  float:none!important;
  display:block!important;
  flex:0 0 auto!important;
  align-self:center!important;
  justify-self:auto!important;
  width:min(74vw,330px)!important;
  max-width:100%!important;
  aspect-ratio:1!important;
  height:auto!important;
  margin:0 auto!important;
  transform:none!important;
}
#searchView.detail-immersive .remote-playlist-copy,
#searchView.detail-immersive .catalog-entity-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  align-self:stretch!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0 2px!important;
  text-align:left!important;
  transform:none!important;
}
#searchView.detail-immersive .remote-playlist-copy h2,
#searchView.detail-immersive .catalog-entity-copy h2,
#searchView.detail-immersive .remote-playlist-description,
#searchView.detail-immersive .catalog-entity-subtitle,
#searchView.detail-immersive .remote-playlist-meta{
  max-width:100%;
  min-width:0;
  overflow-wrap:anywhere;
}
#searchView.detail-immersive .remote-playlist-detail,
#searchView.detail-immersive .catalog-entity-detail,
#searchView.detail-immersive #searchResults{
  min-width:0;
  max-width:100%;
  overflow-x:clip;
}
@media(max-width:480px){
  #searchView.detail-immersive .remote-playlist-cover-wrap,
  #searchView.detail-immersive .catalog-entity-art-wrap{
    width:min(74vw,330px)!important;
    margin-inline:auto!important;
  }
}

 
/* Official Makplay logo mark for the app header. */
.brand-avatar{padding:0;overflow:hidden;border-radius:50%;font-size:0;letter-spacing:normal}
.brand-avatar .brand-logo{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.brand-avatar span{display:none}


/* Regression guard: keep mobile entity artwork centered and prevent flex/grid
   children from expanding the detail card beyond the viewport. */
#searchView.detail-immersive .remote-playlist-detail,
#searchView.detail-immersive .catalog-entity-detail,
#searchView.detail-immersive .remote-playlist-hero-stacked,
#searchView.detail-immersive .catalog-entity-hero-stacked,
#searchView.detail-immersive .remote-playlist-copy,
#searchView.detail-immersive .catalog-entity-copy {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
#searchView.detail-immersive .remote-playlist-cover-wrap,
#searchView.detail-immersive .catalog-entity-art-wrap {
  inset: auto !important;
  float: none !important;
  flex-shrink: 0;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  justify-self: center !important;
  align-self: center !important;
  margin-inline: auto !important;
  transform: none !important;
}
#searchView.detail-immersive .remote-playlist-mosaic,
#searchView.detail-immersive .catalog-entity-art {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}
#searchView.detail-immersive .remote-playlist-hero-stacked,
#searchView.detail-immersive .catalog-entity-hero-stacked {
  overflow: visible;
}
#searchView.detail-immersive .remote-playlist-detail,
#searchView.detail-immersive .catalog-entity-detail {
  overflow-x: clip;
}


/* Mobile scroll containment: loading more release cards must grow the content
   vertically without widening the page or stretching the fixed ambient layer. */
html,
body {
  overscroll-behavior-y: none;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
.ambient {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  pointer-events: none;
  contain: strict;
}
.app-shell,
.home-view,
.home-sections,
.section-block,
.section-heading,
#homeSections,
#searchView,
#searchResults {
  min-width: 0;
  max-width: 100%;
}
.home-sections {
  grid-template-columns: minmax(0, 1fr);
}
.section-block {
  width: 100%;
  overflow: clip;
}
.carousel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  contain: inline-size;
}
.card {
  flex-shrink: 0;
}
@media (max-width: 620px) {
  .app-shell {
    width: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }
  #searchView.detail-immersive .remote-playlist-detail,
  #searchView.detail-immersive .catalog-entity-detail {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-inline: 0;
  }
  #searchView.detail-immersive .remote-playlist-hero-stacked,
  #searchView.detail-immersive .catalog-entity-hero-stacked {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  #searchView.detail-immersive .remote-playlist-cover-wrap,
  #searchView.detail-immersive .catalog-entity-art-wrap {
    left: auto !important;
    right: auto !important;
    width: min(74vw, 330px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }
}


/* Intrinsic-width regression fix for album and artist detail pages.
   The release carousel has many fixed-width cards; without an explicit zero-min
   grid track, its max-content width can widen the detail grid and center the
   hero artwork outside the visible viewport. */
#searchView.detail-immersive .catalog-entity-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
#searchView.detail-immersive .catalog-entity-detail > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
#searchView.detail-immersive .catalog-entity-detail .catalog-entity-hero-stacked,
#searchView.detail-immersive .catalog-entity-detail .catalog-entity-actions,
#searchView.detail-immersive .catalog-entity-detail .catalog-artist-releases,
#searchView.detail-immersive .catalog-entity-detail > .remote-playlist-list-heading,
#searchView.detail-immersive .catalog-entity-detail > .remote-playlist-tracklist {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
#searchView.detail-immersive .catalog-entity-detail .catalog-artist-releases {
  overflow: hidden;
}
#searchView.detail-immersive .catalog-entity-detail .catalog-artist-release-strip {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
#searchView.detail-immersive .catalog-entity-detail .catalog-entity-art-wrap {
  flex: 0 0 auto;
  align-self: center;
  margin-inline: auto;
}


/* Free horizontal swiping for discography recommendations. JavaScript gently
   centers the nearest visible card after 800 ms of scroll inactivity. */
#searchView.detail-immersive .catalog-entity-detail .catalog-artist-release-strip {
  scroll-snap-type: none;
  scroll-behavior: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
#searchView.detail-immersive .catalog-entity-detail .catalog-artist-release {
  scroll-snap-align: none;
}

/* Restore the lightweight profile placeholder; account customization can come later. */
.brand-avatar {
  padding: 0;
  overflow: visible;
  border-radius: 50%;
  font-size: 31px;
  font-weight: 800;
  letter-spacing: -.07em;
  color: var(--text);
}
.brand-avatar .brand-logo { display: none; }
.brand-avatar .brand-initial {
  position: static;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  line-height: 1;
  color: var(--text);
}
.brand-avatar .brand-status-dot {
  display: block;
  position: absolute;
  width: 9px;
  height: 9px;
  right: 8px;
  top: 5px;
  border: 1px solid rgba(12, 14, 18, .9);
  border-radius: 50%;
  background: #7eacf9;
  box-shadow: 0 0 18px rgba(126,172,249,.6);
}



/* Recent query shortcuts: compact, tappable rows distinct from opened items. */
.recent-searches {
  margin-top: 14px; padding: 16px; border: 1px solid var(--glass-line);
  border-radius: 22px; background: rgba(18,20,24,.58);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  animation: library-enter .28s ease both;
}
.recent-search-list { display: grid; gap: 7px; }
.recent-search-row { display: flex; align-items: center; min-width: 0; gap: 8px; }
.recent-search-query {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
  padding: 11px 12px; border: 1px solid transparent; border-radius: 14px;
  background: rgba(255,255,255,.035); color: var(--text); text-align: left;
  cursor: pointer; transition: background .18s ease, border-color .18s ease;
}
.recent-search-query:active { background: rgba(255,255,255,.09); }
.recent-search-icon { flex: 0 0 22px; display: grid; place-items: center; color: var(--muted); font-size: 25px; line-height: 1; }
.recent-search-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.recent-search-remove { flex: 0 0 36px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.045); color: var(--muted); font-size: 20px; cursor: pointer; }
.search-history-empty { padding: 12px 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }



/* Full-player related cards: size the wrapper, not only its inner button.
   This keeps each artwork card wide enough for its title and context menu. */
.related-grid > .related-item-wrap {
  flex: 0 0 clamp(112px, 28vw, 148px);
  width: clamp(112px, 28vw, 148px);
  min-width: 0;
  box-sizing: border-box;
}
.related-grid > .related-item-wrap > .related-item {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: left;
}
.related-grid > .related-item-wrap > .related-item img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  box-sizing: border-box;
}
.related-grid > .related-item-wrap > .related-item strong,
.related-grid > .related-item-wrap > .related-item small {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.related-grid > .related-item-wrap > .related-context-menu {
  z-index: 2;
}
@media (max-width: 380px) {
  .related-grid { gap: 9px; }
  .related-grid > .related-item-wrap {
    flex-basis: min(36vw, 132px);
    width: min(36vw, 132px);
  }
}


/* Compact playback origin: hidden in a tight mini-player, always visible in full view. */
.mini-source {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  color: rgba(191, 255, 233, .78);
  font-size: 9px;
  line-height: 1.15;
  letter-spacing: .005em;
}
.mini-progress { margin-top: 5px; }
.full-player-heading {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
}
.full-source {
  display: block;
  max-width: min(56vw, 420px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(191, 255, 233, .86);
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: .01em;
}
@media (max-width: 420px) {
  .mini-source { display: none; }
}


/* Related tab: grouped track, artist, and album discovery. */
.related-panel { display: flex; flex-direction: column; gap: 22px; }
.related-section { min-width: 0; }
.related-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 11px; }
.related-section-heading h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.related-section-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.related-section-heading > span { flex: 0 0 auto; color: var(--faint); font-size: 11px; }
.related-entity-card { flex: 0 0 clamp(112px, 28vw, 148px); width: clamp(112px, 28vw, 148px); min-width: 0; padding: 0; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.related-entity-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 15px; background: rgba(255,255,255,.055); }
.related-entity-card strong { display: block; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 650; }
.related-entity-card small { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.related-entity-card:active { transform: scale(.98); }
.related-loading { display: flex; align-items: center; gap: 9px; min-height: 72px; }
.related-retry { padding: 9px 14px; border-radius: 999px; border-color: var(--glass-line); background: var(--glass); cursor: pointer; }
@media (max-width: 380px) {
  .related-panel { gap: 18px; }
  .related-entity-card { flex-basis: min(36vw, 132px); width: min(36vw, 132px); }
}


/* Home release rail: keep the load sentinel narrow so it doesn't create a large blank gap. */
.new-releases-carousel .release-load-status{flex:0 0 34px;min-width:34px;display:flex;align-items:center;justify-content:center;color:var(--muted,#aaa);font-size:12px;scroll-snap-align:end}
.new-releases-carousel .release-load-status[data-release-load-trigger]{min-height:40px}


/* Reusable full-screen Home section browser. The open-state hook and panel
   transform are intentionally isolated so richer route-like transitions can
   be layered on later without changing the collection rendering logic. */
body.home-explore-open {
  overflow: hidden;
}
.home-explore-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: rgba(5, 6, 9, .96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.home-explore-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.home-explore-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 0%, rgba(109,255,202,.08), transparent 34%),
              rgba(5, 6, 9, .94);
  backdrop-filter: blur(28px) saturate(125%);
  -webkit-backdrop-filter: blur(28px) saturate(125%);
}
.home-explore-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 1180px);
  height: 100%;
  min-height: 0;
  outline: none;
  background: linear-gradient(165deg, rgba(25,28,32,.97), rgba(8,9,11,.99) 42%);
  border-inline: 1px solid rgba(255,255,255,.035);
  transform: translateY(14px);
  transition: transform .24s cubic-bezier(.2,.75,.25,1);
  will-change: transform;
}
.home-explore-overlay.is-open .home-explore-panel {
  transform: translateY(0);
}
.home-explore-header {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: max(13px, env(safe-area-inset-top)) clamp(14px, 3.5vw, 34px) 17px;
  border-bottom: 1px solid rgba(255,255,255,.075);
  background: rgba(13,15,18,.68);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.home-explore-back,
.home-explore-play-all {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: var(--text, #fff);
  cursor: pointer;
}
.home-explore-back {
  font-size: 31px;
  line-height: 1;
}
.home-explore-play-all {
  font-size: 16px;
  background: linear-gradient(140deg, rgba(109,255,202,.23), rgba(109,255,202,.08));
  border-color: rgba(109,255,202,.25);
}
.home-explore-play-all[hidden] {
  display: none !important;
}
.home-explore-heading-copy {
  min-width: 0;
  flex: 1;
}
.home-explore-heading-copy .eyebrow {
  display: block;
  margin-bottom: 2px;
  font-size: 9px;
}
.home-explore-heading-copy h2 {
  margin: 0;
  font-size: clamp(20px, 4vw, 30px);
  letter-spacing: -.04em;
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.home-explore-heading-copy p {
  margin: 5px 0 0;
  color: var(--muted, #a5a5ad);
  font-size: 12px;
}
.home-explore-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 19px clamp(14px, 3.5vw, 34px) calc(24px + env(safe-area-inset-bottom));
}
.home-explore-track-grid,
.home-explore-entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  align-items: start;
  gap: clamp(13px, 2.4vw, 22px);
}
.home-explore-track,
.home-explore-entity {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: var(--text, #f5f5f7);
  text-align: left;
  cursor: pointer;
}
.home-explore-track-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: 0 11px 25px rgba(0,0,0,.24);
}
.home-explore-track-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .24s ease, filter .24s ease;
}
.home-explore-track-art > span:last-child {
  position: absolute;
  right: 9px;
  bottom: 9px;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(10,12,15,.66);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.24);
}
.home-explore-track-title {
  display: -webkit-box;
  margin-top: 10px;
  overflow: hidden;
  color: var(--text, #f5f5f7);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.home-explore-track-artist {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted, #a5a5ad);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-explore-track:active,
.home-explore-entity:active {
  transform: scale(.985);
}
.home-explore-track:hover .home-explore-track-art img,
.home-explore-entity:hover .home-explore-track-art img {
  transform: scale(1.035);
  filter: saturate(1.05);
}
.home-explore-entity-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 34px;
  font-weight: 800;
}
.home-explore-genre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.home-explore-genre {
  position: relative;
  display: flex;
  min-height: 150px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: linear-gradient(140deg, var(--g1), var(--g2));
  color: white;
  text-align: left;
  cursor: pointer;
}
.home-explore-genre strong {
  font-size: clamp(19px, 3vw, 27px);
  letter-spacing: -.035em;
}
.home-explore-genre span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: rgba(255,255,255,.76);
  font-size: 12px;
}
.home-explore-genre b {
  color: #fff;
  font-size: 20px;
}
.home-explore-load-status,
.home-explore-empty {
  padding: 24px 10px;
  color: var(--muted, #a5a5ad);
  font-size: 13px;
  text-align: center;
}
@media (max-width: 520px) {
  .home-explore-track-grid,
  .home-explore-entity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 13px;
    row-gap: 22px;
  }
  .home-explore-genre-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-explore-genre {
    min-height: 122px;
    padding: 16px;
    border-radius: 18px;
  }
  .home-explore-track-art {
    border-radius: 15px;
  }
}



/* Selected/current song feedback across Search and Recent items. */
.search-row.is-current-track {
  border-color: rgba(109,255,202,.62) !important;
  background: linear-gradient(110deg,rgba(109,255,202,.16),rgba(109,255,202,.055)) !important;
  box-shadow: inset 3px 0 0 rgba(109,255,202,.95), 0 0 18px rgba(109,255,202,.08);
  animation: search-track-selected .28s ease both;
}
.search-row.is-current-track .name, .search-row.is-current-track .type-pill { color: #75ffd0; }
@keyframes search-track-selected { from { transform: scale(.985); } to { transform: scale(1); } }



/* Contextual actions for Home collections and the collection-wide playlist picker. */
.home-explore-actions-button {
  font-size: 17px !important;
  letter-spacing: 2px;
  padding-bottom: 8px !important;
  color: var(--text, #fff) !important;
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.home-collection-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 650;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.home-collection-sheet-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.home-collection-sheet-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(3,4,8,.7);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.home-collection-sheet-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 620px);
  max-height: min(86dvh, 820px);
  overflow: auto;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
  border: 1px solid rgba(255,255,255,.13);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  outline: none;
  background: linear-gradient(145deg, rgba(39,41,49,.985), rgba(13,15,20,.99));
  box-shadow: 0 -18px 60px rgba(0,0,0,.42);
  backdrop-filter: blur(34px) saturate(145%);
  -webkit-backdrop-filter: blur(34px) saturate(145%);
  transform: translateY(22px);
  transition: transform .24s cubic-bezier(.2,.8,.2,1);
}
.home-collection-sheet-overlay.is-open .home-collection-sheet-panel {
  transform: translateY(0);
}
.home-collection-sheet-handle {
  width: 42px;
  height: 4px;
  margin: 2px auto 15px;
  border-radius: 99px;
  background: rgba(255,255,255,.3);
}
.home-collection-sheet-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 3px 14px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.home-collection-sheet-heading .eyebrow {
  color: var(--good, #6dffca);
  font-size: 9px;
  letter-spacing: .13em;
}
.home-collection-sheet-heading h2 {
  margin: 4px 0 3px;
  font-size: 21px;
  letter-spacing: -.04em;
}
.home-collection-sheet-heading p {
  margin: 0;
  color: var(--muted, #a5a5ad);
  font-size: 11px;
  line-height: 1.5;
}
.home-collection-sheet-close {
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: var(--text, #fff);
  background: rgba(255,255,255,.055);
  font-size: 23px;
  cursor: pointer;
}
.home-collection-action-list {
  display: grid;
  padding-top: 6px;
}
.home-collection-action-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-width: 0;
  padding: 12px 4px;
  border: 0;
  border-radius: 15px;
  color: var(--text, #fff);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.home-collection-action-row:active {
  background: rgba(109,255,202,.09);
  transform: scale(.992);
}
.home-collection-action-icon {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  color: var(--good, #6dffca);
  background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  font-size: 19px;
}
.home-collection-action-copy {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.home-collection-action-copy strong {
  font-size: 13px;
  font-weight: 650;
}
.home-collection-action-copy small {
  color: var(--muted, #a5a5ad);
  font-size: 11px;
  line-height: 1.35;
}
.home-collection-action-arrow {
  color: var(--faint, #777a83);
  font-size: 22px;
}
.home-collection-new-playlist {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 8px;
  border: 1px solid rgba(109,255,202,.18);
  border-radius: 17px;
  color: var(--text, #fff);
  background: linear-gradient(120deg,rgba(109,255,202,.1),rgba(255,255,255,.025));
  text-align: left;
  cursor: pointer;
}
.home-collection-new-playlist > span:first-child {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border-radius: 13px;
  color: #07130e;
  background: linear-gradient(135deg,#91ffda,#6dffca);
  font-size: 26px;
}
.home-collection-new-playlist > span:nth-child(2) {
  display: grid;
  flex: 1;
  gap: 4px;
  min-width: 0;
}
.home-collection-new-playlist strong { font-size: 13px; }
.home-collection-new-playlist small { color: var(--muted, #a5a5ad); font-size: 11px; }
.home-collection-new-playlist b { color: var(--faint, #777a83); font-size: 22px; }
.home-collection-playlist-list {
  display: grid;
  gap: 3px;
  margin-top: 12px;
}
.home-collection-playlist-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-width: 0;
  padding: 9px 5px;
  border: 0;
  border-radius: 14px;
  color: var(--text, #fff);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.home-collection-playlist-row:active { background: rgba(255,255,255,.07); }
.home-collection-playlist-art {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  color: var(--good, #6dffca);
  background: rgba(255,255,255,.055);
  font-size: 21px;
}
.home-collection-playlist-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-collection-playlist-copy {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.home-collection-playlist-copy strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-collection-playlist-copy small {
  color: var(--muted, #a5a5ad);
  font-size: 11px;
}
.home-collection-playlist-arrow {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(109,255,202,.16);
  border-radius: 50%;
  color: var(--good, #6dffca);
  background: rgba(109,255,202,.065);
  font-size: 16px;
}
.home-collection-sheet-empty {
  padding: 20px 5px 10px;
  color: var(--muted, #a5a5ad);
  font-size: 12px;
  line-height: 1.5;
}
body.home-collection-sheet-open { overflow: hidden; }



/* Search input focus: visible only while the field is actively being used. */
.search-box {
  border: 1px solid transparent;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.search-box.is-focused {
  border-color: rgba(255,255,255,.92);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 22px rgba(255,255,255,.035);
}
.search-box:not(.is-focused) {
  border-color: rgba(255,255,255,.075);
}


/* While the empty search field is active, show recent searches only. Keep
   recent items mounted so dismissing the keyboard restores them instantly. */
#searchResults.search-input-active .search-history {
  display: none !important;
}

/* Recent search mode is driven by input focus, not keyboard visibility. */
#searchResults.search-input-active .search-history { display: none !important; }
#searchResults:not(.search-input-active) .recent-searches { display: none !important; }
.show-recent-items {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  background: linear-gradient(135deg,rgba(105,255,186,.96),rgba(75,216,159,.9));
  border-color: rgba(105,255,186,.55);
  color: #06110c;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 9px 28px rgba(67,244,173,.14);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.show-recent-items:hover { box-shadow: 0 10px 30px rgba(67,244,173,.24); }
.show-recent-items:active { transform: scale(.99); }
.recent-searches .search-history-heading button:disabled { opacity: .4; cursor: default; }


/* Use one deliberate clear control; suppress the browser's tiny native search X. */
.search-box input[type="search"]::-webkit-search-cancel-button,
.search-box input[type="search"]::-webkit-search-decoration,
.search-box input[type="search"]::-webkit-search-results-button,
.search-box input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.search-box .clear-search {
  display: none;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
}
.search-box .clear-search.is-visible { display: inline-flex; }

/* Home rail actions stay above the playback affordance, never on top of it. */
.home-track-wrap-small > .small-card { padding-right: 54px; }
.home-track-wrap-small > .track-context-menu { top: 8px; right: 8px; transform: none; }
.home-track-wrap-small > .track-context-menu:active { transform: scale(.94); }
.recently-listened-card .play-badge { display: grid; place-items: center; }

/* Align Home song-card menus beside their play affordance as one action group. */
.home-track-wrap > .track-context-menu {
  position: absolute; z-index: 3; top: auto; right: 60px; bottom: 66px;
}
.home-track-wrap-small > .track-context-menu {
  top: auto; right: 52px; bottom: 16px; transform: none;
}
.home-track-wrap-small > .track-context-menu:active { transform: scale(.94); }
@media (max-width: 620px) {
  .home-entity-card { flex-basis: min(190px,58vw); width: min(190px,58vw); }
  .home-entity-action-cluster { right: 7px; bottom: 7px; gap: 6px; padding: 3px; }
  .home-entity-play,.home-entity-menu { width: 34px; height: 34px; flex-basis: 34px; }
  .home-track-wrap > .track-context-menu { bottom: 66px; right: 58px; }
}


/* Full-screen Home Explore reuses the same entity card/action dock as the Home rails. */
.home-explore-entity-grid > .home-entity-card {
  width: 100%;
  max-width: none;
  min-width: 0;
  flex: initial;
}
.home-explore-entity-card .home-entity-art-wrap { border-radius: 17px; }
.home-explore-entity-card .home-entity-open-art,
.home-explore-entity-card .home-entity-art { border-radius: 16px; }
.home-explore-entity-card .home-entity-copy .card-title {
  display: -webkit-box;
  margin-top: 10px;
  white-space: normal;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.home-explore-entity-card .home-entity-copy .card-subtitle {
  margin-top: 4px;
  font-size: 11px;
}
.home-explore-entity-card .home-entity-copy:active .card-title { color: var(--good); }
.home-explore-entity-card .home-entity-action-cluster {
  right: 8px;
  bottom: 8px;
}
.home-explore-entity-card .home-entity-play,
.home-explore-entity-card .home-entity-menu {
  width: 33px;
  height: 33px;
  flex-basis: 33px;
}


/* Unified Home song controls: same Liquid Glass dock as entity cards. */
.home-track-wrap {
  position: relative; display: flex; flex: 0 0 min(190px,58vw); flex-direction: column;
  width: min(190px,58vw); min-width: 0; max-width: min(190px,58vw); scroll-snap-align: start;
}
.home-song-art-wrap {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  border: 1px solid rgba(255,255,255,.11); border-radius: 22px;
  background: linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  box-shadow: 0 16px 35px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.16);
}
.home-song-art-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.home-song-art-open img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .38s cubic-bezier(.2,.8,.2,1),filter .3s ease; }
.home-song-art-open:hover img { transform: scale(1.035); filter: saturate(1.05); }
.home-track-copy { display: block; width: 100%; min-width: 0; padding: 0; border: 0; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.home-track-copy .card-type { display: block; margin-top: 11px; }
.home-track-copy .card-title,.home-track-copy .card-subtitle { display: block; }
.home-track-copy:active .card-title { color: var(--good); }
.home-track-action-cluster { right: 8px; bottom: 8px; }
.home-track-action-cluster .home-track-play,.home-track-action-cluster .home-track-menu { flex: 0 0 36px; }
.home-track-menu { font-size: 13px; letter-spacing: 1px; }
.home-track-menu span { line-height: 1; }
.home-track-wrap-small { flex-basis: min(300px,78vw); width: min(300px,78vw); max-width: min(300px,78vw); flex-direction: row; align-items: stretch; }
.home-track-wrap-small > .small-card { position: relative; width: 100%; min-width: 0; padding: 10px 92px 10px 10px; gap: 10px; }
.home-track-wrap-small > .small-card img { width: 72px; height: 72px; flex: 0 0 72px; }
.home-track-wrap-small > .small-card .small-meta { min-width: 0; flex: 1 1 auto; }
.home-track-action-cluster-small { top: 50%; right: 8px; bottom: auto; gap: 5px; padding: 3px; transform: translateY(-50%); }
.home-track-action-cluster-small .home-track-play,.home-track-action-cluster-small .home-track-menu { width: 32px; height: 32px; flex-basis: 32px; }
.home-track-action-cluster-small .home-track-play span { font-size: 12px; }
.home-track-action-cluster-small .home-track-menu { font-size: 12px; }
.home-track-wrap-small > .small-card:focus-visible,.home-song-art-open:focus-visible,.home-track-copy:focus-visible { outline: 2px solid rgba(109,255,202,.9); outline-offset: 3px; }
.home-track-play:focus-visible,.home-track-menu:focus-visible { outline: 2px solid rgba(109,255,202,.9); outline-offset: 2px; }
/* View all uses this same dock while preserving its responsive grid. */
.home-explore-track-grid > .home-explore-track-wrap { width: 100%; max-width: none; min-width: 0; flex: initial; scroll-snap-align: none; }
.home-explore-track-wrap .home-song-art-wrap { border-radius: 17px; }
.home-explore-track-wrap .home-song-art-open { border-radius: 16px; }
.home-explore-track-wrap .home-track-copy .card-title { display: -webkit-box; margin-top: 10px; white-space: normal; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.home-explore-track-wrap .home-track-copy .card-subtitle { margin-top: 4px; font-size: 11px; }
@media (max-width: 620px) {
  .home-track-wrap { flex-basis: min(190px,58vw); width: min(190px,58vw); }
  .home-track-wrap-small { flex-basis: min(300px,78vw); width: min(300px,78vw); max-width: min(300px,78vw); }
  .home-track-action-cluster:not(.home-track-action-cluster-small) { right: 7px; bottom: 7px; gap: 6px; padding: 3px; }
  .home-track-action-cluster:not(.home-track-action-cluster-small) .home-track-play,.home-track-action-cluster:not(.home-track-action-cluster-small) .home-track-menu { width: 34px; height: 34px; flex-basis: 34px; }
}



/* Up next: stack glass actions vertically inside the card's right gutter.
   This keeps the title and artist readable and prevents the dock spilling
   beyond the compact queue card on narrow screens. */
.home-track-action-cluster-small {
  top: 50%;
  right: 12px;
  bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 42px;
  padding: 5px;
  border-radius: 24px;
  transform: translateY(-50%);
}
.home-track-wrap-small > .small-card {
  padding-right: 66px;
}
.home-track-action-cluster-small .home-track-play,
.home-track-action-cluster-small .home-track-menu {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}
@media (max-width: 620px) {
  .home-track-action-cluster-small {
    right: 10px;
    width: 40px;
    padding: 4px;
    gap: 5px;
  }
  .home-track-wrap-small > .small-card {
    padding-right: 62px;
  }
}


/* Keep Up next controls fully inside each card and let metadata use the
   remaining width/height instead of forcing one-line ellipses. */
.home-track-wrap-small {
  position: relative;
  overflow: hidden;
  border-radius: 25px;
}
.home-track-wrap-small > .small-card {
  box-sizing: border-box;
  min-height: 132px;
  padding: 12px 62px 12px 12px;
  align-items: flex-start;
}
.home-track-wrap-small > .small-card .small-meta {
  align-self: center;
  width: 100%;
  min-width: 0;
  white-space: normal;
  overflow: hidden;
}
.home-track-wrap-small > .small-card .small-meta .card-title {
  display: -webkit-box;
  white-space: normal;
  overflow: hidden;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.home-track-wrap-small > .small-card .small-meta .card-subtitle {
  display: -webkit-box;
  margin-top: 4px;
  white-space: normal;
  overflow: hidden;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.home-track-action-cluster-small {
  right: 10px;
  z-index: 2;
}
@media (max-width: 620px) {
  .home-track-wrap-small > .small-card {
    min-height: 132px;
    padding-right: 58px;
  }
  .home-track-wrap-small > .small-card .small-meta .card-title,
  .home-track-wrap-small > .small-card .small-meta .card-subtitle {
    -webkit-line-clamp: 2;
  }
}


/* Ensure the glass action buttons receive taps above the artwork/card hit areas. */
.home-track-action-cluster,
.home-track-action-cluster-small {
  position: absolute;
  z-index: 20;
  isolation: isolate;
  pointer-events: auto;
}
.home-track-action-cluster button {
  position: relative;
  z-index: 21;
  pointer-events: auto;
  touch-action: manipulation;
}
.home-song-art-open,
.home-track-copy,
.home-track-wrap-small > .small-card {
  position: relative;
  z-index: 1;
}


/* Final compact Up next card layout.
   Make the card itself the grid so its action dock participates in layout
   instead of floating outside the right edge. */
body .home-track-wrap.home-track-wrap-small {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 38px;
  align-items: center;
  column-gap: 10px;
  row-gap: 0;
  box-sizing: border-box;
  position: relative;
  flex: 0 0 min(300px, 78vw);
  width: min(300px, 78vw);
  max-width: min(300px, 78vw);
  min-width: 0;
  min-height: 100px;
  padding: 9px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035) 55%, rgba(255,255,255,.055));
  box-shadow: inset 0 1px rgba(255,255,255,.10), 0 10px 28px rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}
body .home-track-wrap.home-track-wrap-small > .small-card.home-track-small-card {
  display: grid;
  grid-column: 1 / 3;
  grid-row: 1;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex: initial;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: var(--text);
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-align: left;
}
body .home-track-wrap.home-track-wrap-small > .small-card.home-track-small-card img {
  display: block;
  grid-column: 1;
  width: 64px;
  height: 64px;
  min-width: 0;
  flex: initial;
  aspect-ratio: 1;
  border-radius: 15px;
  object-fit: cover;
}
body .home-track-wrap.home-track-wrap-small > .small-card.home-track-small-card .small-meta {
  grid-column: 2;
  align-self: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  text-align: left;
  white-space: normal;
  overflow: hidden;
}
body .home-track-wrap.home-track-wrap-small > .small-card.home-track-small-card .small-meta .card-title {
  display: -webkit-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.28;
  white-space: normal;
  overflow-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
body .home-track-wrap.home-track-wrap-small > .small-card.home-track-small-card .small-meta .card-subtitle {
  display: -webkit-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  font-size: 11px;
  line-height: 1.25;
  color: var(--muted);
  white-space: normal;
  overflow-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
body .home-track-wrap.home-track-wrap-small > .home-track-action-cluster-small {
  position: relative;
  grid-column: 3;
  grid-row: 1;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 38px;
  min-width: 38px;
  margin: 0;
  padding: 4px;
  box-sizing: border-box;
  transform: none;
  z-index: 3;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(145deg, rgba(255,255,255,.19), rgba(255,255,255,.055));
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 5px 15px rgba(0,0,0,.24);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}
body .home-track-wrap.home-track-wrap-small > .home-track-action-cluster-small .home-track-play,
body .home-track-wrap.home-track-wrap-small > .home-track-action-cluster-small .home-track-menu {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  flex: 0 0 28px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
}
body .home-track-wrap.home-track-wrap-small > .home-track-action-cluster-small .home-track-play span {
  font-size: 11px;
  margin-left: 1px;
}
body .home-track-wrap.home-track-wrap-small > .home-track-action-cluster-small .home-track-menu {
  font-size: 11px;
  letter-spacing: .5px;
}
@media (max-width: 620px) {
  body .home-track-wrap.home-track-wrap-small {
    flex-basis: min(300px, 78vw);
    width: min(300px, 78vw);
    max-width: min(300px, 78vw);
    grid-template-columns: 60px minmax(0, 1fr) 36px;
    column-gap: 8px;
    padding: 8px;
  }
  body .home-track-wrap.home-track-wrap-small > .small-card.home-track-small-card {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 8px;
  }
  body .home-track-wrap.home-track-wrap-small > .small-card.home-track-small-card img {
    width: 60px;
    height: 60px;
    border-radius: 13px;
  }
  body .home-track-wrap.home-track-wrap-small > .home-track-action-cluster-small {
    width: 36px;
    min-width: 36px;
    padding: 3px;
    gap: 4px;
  }
  body .home-track-wrap.home-track-wrap-small > .home-track-action-cluster-small .home-track-play,
  body .home-track-wrap.home-track-wrap-small > .home-track-action-cluster-small .home-track-menu {
    width: 27px;
    height: 27px;
    min-width: 27px;
    min-height: 27px;
    flex-basis: 27px;
  }
}


/* Full-player like action: reserve a separate column and align it with the title.
   This keeps the heart from sitting between the title and artist like it is nudging
   the text away, especially when long artist names are ellipsized on mobile. */
.full-player .full-track-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: start;
  column-gap: 18px;
}
.full-player .full-track-info > div {
  grid-column: 1;
  min-width: 0;
  width: 100%;
}
.full-player .full-track-info h2 {
  width: 100%;
  line-height: 1.2;
  padding-right: 2px;
  box-sizing: border-box;
}
.full-player .full-track-info p {
  width: 100%;
  max-width: 100%;
  margin-top: 6px;
}
.full-player .full-track-info #likeCurrent {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  flex: none;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  margin: 0;
}
@media (max-width: 620px) {
  .full-player .full-track-info {
    grid-template-columns: minmax(0, 1fr) 44px;
    column-gap: 14px;
  }
  .full-player .full-track-info #likeCurrent {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
  }
}


/* Independent smooth title/artist marquees for both players.
   The viewport masks both edges; each line only scrolls when its own text overflows. */
.player-marquee-viewport {
  display: block;
  position: relative;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  isolation: isolate;
  mask-image: none;
  -webkit-mask-image: none;
}
.player-marquee-track {
  display: inline-flex;
  align-items: baseline;
  gap: 36px;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  vertical-align: top;
  transform: translate3d(0,0,0);
  animation: none;
}
.player-marquee-copy {
  display: block;
  flex: 0 0 auto;
  width: max-content;
  max-width: none !important;
  margin: 0;
  padding: 0;
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  line-height: inherit;
}
/* Keep the leading text fully crisp during the initial pause, then softly fade
   the edges only while the marquee is travelling. Registered alpha keeps the fade smooth. */
@property --marquee-edge-alpha {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
.player-marquee-viewport.is-overflowing {
  text-overflow: clip !important;
  --marquee-edge-alpha: 1;
  mask-image: linear-gradient(90deg,
    rgba(0,0,0,var(--marquee-edge-alpha, 1)) 0%,
    #000 6%, #000 94%,
    rgba(0,0,0,var(--marquee-edge-alpha, 1)) 100%);
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0,0,0,var(--marquee-edge-alpha, 1)) 0%,
    #000 6%, #000 94%,
    rgba(0,0,0,var(--marquee-edge-alpha, 1)) 100%);
}
.player-marquee-viewport.is-overflowing {
  animation: player-marquee-edge-fade var(--marquee-duration, 10s) linear .45s infinite;
}
.player-marquee-viewport.is-overflowing > .player-marquee-track {
  animation: player-text-marquee var(--marquee-duration, 10s) linear .45s infinite;
}
@keyframes player-marquee-edge-fade {
  0%, 7% { --marquee-edge-alpha: 1; }
  12%, 88% { --marquee-edge-alpha: 0; }
  93%, 100% { --marquee-edge-alpha: 1; }
}
.player-marquee-viewport.is-overflowing > .player-marquee-track {
  will-change: transform;
}
@keyframes player-text-marquee {
  0%, 7% { transform: translate3d(0,0,0); }
  93%, 100% { transform: translate3d(calc(0px - var(--marquee-distance, 0px)),0,0); }
}
#miniPlayer .mini-title.player-marquee-viewport,
#miniPlayer .mini-artist.player-marquee-viewport {
  overflow: hidden !important;
}
.full-player .full-track-info h2.player-marquee-viewport,
.full-player .full-track-info p.player-marquee-viewport {
  overflow: hidden !important;
}