@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Nunito:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  color-scheme:dark;
  --bg:#0c0c1c;--bg-2:#12132b;--panel:#15162f;--panel-raised:#1b1c3b;--panel-hover:#24254a;
  --line:#2a2b50;--line-bright:#3a3b69;--text:#f5f4ff;--muted:#b0b2d0;--dim:#8387ad;
  --pink:#ff74c8;--pink-hot:#ff4db4;--violet:#b293ff;--cyan:#72dfff;--blue:#708fff;
  --mint:#75f1d0;--yellow:#ffd777;--radius:18px;
  font-family:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 13% 0%,#32205b55,transparent 29%),radial-gradient(ellipse at 94% 24%,#1e426344,transparent 29%),radial-gradient(ellipse at 50% 100%,#26133d30,transparent 50%),var(--bg);color:var(--text);font-size:15px;line-height:1.55}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.42;cursor:not-allowed}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:absolute;top:-55px;left:12px;z-index:100;background:var(--cyan);color:#0d1122;border-radius:9px;padding:11px 15px;font-weight:900}
.skip-link:focus{top:10px}

.topbar{height:82px;position:sticky;top:0;z-index:40;display:grid;grid-template-columns:260px minmax(220px,660px) 1fr;align-items:center;gap:26px;padding:0 30px;background:#0c0c1cec;backdrop-filter:blur(20px);border-bottom:1px solid #292947;box-shadow:0 6px 30px #05051055}
.brand{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none}
.brand-mark{position:relative;width:43px;height:43px;flex:none;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#ff65bd,#a478ff 56%,#59d9f2);box-shadow:0 0 26px #c167f944;transform:rotate(-4deg)}
.brand-mark i{font:900 31px 'Nunito',sans-serif;color:#fff;font-style:normal;text-shadow:0 2px 6px #3b1a7b88;transform:rotate(4deg)}
.brand-mark b{position:absolute;right:-5px;top:-7px;font-size:15px;color:var(--yellow);text-shadow:0 2px 5px #000}
.brand-copy{display:grid;gap:1px;line-height:1.2}
.brand-copy strong{font:900 23px 'Nunito',sans-serif;letter-spacing:-.8px;color:#fff}
.brand-copy strong span{font-size:14px;color:var(--pink);margin-left:4px;vertical-align:3px}
.brand-copy small{font:8px 'DM Mono',monospace;letter-spacing:1.2px;color:#8f92b7;margin-top:4px;white-space:nowrap}
.global-search{height:47px;display:flex;align-items:center;gap:11px;min-width:0;padding:0 14px;border:1px solid #37385e;border-radius:14px;background:#171831;box-shadow:inset 0 1px #ffffff08;transition:border-color .16s,box-shadow .16s}
.global-search:focus-within{border-color:#a48aff;box-shadow:0 0 0 4px #a28cff1c}
.search-icon{color:var(--cyan);font-size:25px;line-height:1}
.global-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:14px}
.global-search input::placeholder{color:#8589b0}
.global-search kbd{flex:none;border:1px solid #3a3b5b;border-radius:6px;padding:3px 6px;background:#101126;color:#888db2;font:9px 'DM Mono',monospace;white-space:nowrap}
.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:15px;min-width:0}
.favorite-shortcut{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#c9c8e1;font-size:12px;font-weight:900;white-space:nowrap}
.favorite-shortcut span{color:var(--pink);font-size:22px}
.favorite-shortcut:hover{color:#fff}
.top-live{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid #2e5c65;border-radius:8px;background:#0e242d;color:#8ef0e6;font:8px 'DM Mono',monospace;letter-spacing:.5px;white-space:nowrap}
.top-live i,.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px #75f1d01b}
.mobile-toolbar{display:none}

.app-layout{max-width:1940px;margin:0 auto;padding:27px 30px 65px;display:grid;grid-template-columns:254px minmax(0,1fr) 366px;gap:24px;align-items:start}
.sidebar,.player-column{position:sticky;top:105px;min-width:0}
.sidebar{border:1px solid #292a4e;border-radius:18px;background:linear-gradient(165deg,#15162e,#101124);padding:17px 15px 15px;box-shadow:0 20px 50px #03030b33}
.sidebar-topline{display:flex;align-items:center;gap:11px;padding:3px 2px 17px}
.sidebar-orb{width:41px;height:41px;flex:none;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#3b306b,#1b5068);border:1px solid #786bb855;color:#c3b0ff;font-size:20px;box-shadow:inset 0 0 18px #ac8aff20}
.sidebar-topline>span:last-child{display:grid;gap:3px}
.sidebar-topline strong{font-size:13px;font-weight:900;color:#fbf8ff}
.sidebar-topline small{font-size:11px;color:#979bbf}
.main-nav{display:grid;gap:6px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:11px 11px;border:1px solid transparent;border-radius:11px;text-align:left;background:transparent;color:#b1b4d2;font-size:13px;font-weight:800;transition:background .16s,border-color .16s,color .16s}
.nav-item:hover{background:#242443;color:#fff}
.nav-item.active{background:linear-gradient(105deg,#342450,#202b50 72%,#172e46);border-color:#555082;color:#fff;box-shadow:inset 3px 0 var(--pink),0 6px 18px #07071135}
.nav-symbol{width:24px;text-align:center;color:#a4a7d1;font-size:18px}
.nav-item.active .nav-symbol{color:var(--pink)}
.nav-count{margin-left:auto;font:10px 'DM Mono',monospace;color:#9095bb}
.nav-pill{margin-left:auto;padding:3px 6px;border:1px solid #8d672d;border-radius:5px;background:#34271b;color:#ffe29b;font:8px 'DM Mono',monospace}
.sidebar-rule{display:flex;align-items:center;gap:8px;margin:21px 1px 14px;color:#8e92b6;font:9px 'DM Mono',monospace;letter-spacing:1px}
.sidebar-rule i{height:1px;flex:1;background:linear-gradient(90deg,#383956,transparent)}
.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.filter-section h2,.playlist-section h2{margin:0;font-size:14px;font-weight:900;letter-spacing:-.15px}
.muted-count{color:#9196bb;font:10px 'DM Mono',monospace}
.artist-search{display:flex;align-items:center;gap:8px;margin:12px 0 5px;padding:9px 10px;border:1px solid #343557;border-radius:10px;background:#101126}
.artist-search>span{font-size:20px;color:#a58cff}
.artist-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:12px}
.artist-search input::placeholder{color:#72779f}
.filter-hint{font-size:10px;color:#8b90b4;line-height:1.55;margin:7px 0}
.artist-filters{max-height:38vh;overflow:auto;padding-right:3px;scrollbar-width:thin;scrollbar-color:#44466e transparent}
.artist-check{display:flex;align-items:center;gap:8px;padding:7px 5px;border-radius:8px;color:#b4b8d7;font-size:12px;font-weight:700;cursor:pointer;transition:background .12s,color .12s}
.artist-check:hover{background:#20213e;color:white}
.artist-check input{width:14px;height:14px;flex:none;accent-color:var(--pink);margin:0}
.artist-check span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.artist-check small{margin-left:auto;color:#888db1;font:9px 'DM Mono',monospace}
.artist-avatar{width:25px;height:25px;flex:none;object-fit:cover;object-position:top center;border-radius:8px;background:#252343;border:1px solid #ffffff18}
.filter-empty{font-size:11px;color:#8b90b4;line-height:1.6}
.text-button{border:0;background:transparent;color:#a3a5c9;font-size:11px;font-weight:900;padding:6px 0}
.text-button:hover{color:var(--pink)}
.show-all{margin-top:5px}
.clear-filters{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:12px;padding:9px;border:1px dashed #424264;border-radius:9px;background:#15162b;color:#aeb2d1;font-size:11px;font-weight:900}
.clear-filters span{font-size:15px;color:var(--cyan)}
.clear-filters:hover{border-color:#8575c7;background:#1f1d3b;color:#fff}
.playlist-section{margin-top:19px;padding-top:15px;border-top:1px solid #2b2c4b}
.add-playlist{width:29px;height:29px;border:1px solid #5f4d81;border-radius:9px;background:linear-gradient(135deg,#33284f,#242244);color:#d4a7ff;font-size:21px;line-height:1}
.add-playlist:hover{border-color:var(--pink);color:#fff}
.playlist-list{display:grid;gap:4px;margin-top:10px}
.playlist-row{display:flex;align-items:center;gap:8px;width:100%;padding:8px 7px;border:0;border-radius:8px;background:transparent;color:#aeb2d1;text-align:left;font-size:12px;font-weight:800}
.playlist-row:hover,.playlist-row.active{background:#232343;color:#fff}
.playlist-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.playlist-row small{margin-left:auto;color:#8c91b5;font:9px 'DM Mono',monospace}
.sidebar-footer{margin-top:19px;padding-top:13px;border-top:1px solid #2b2c4b}
.catalogue-status{display:flex;align-items:center;gap:8px;color:#b1c9cd;font-size:10px;font-weight:900}
.sidebar-footer p{margin:9px 0 0;color:#777da3;font-size:9px;line-height:1.6}

.catalogue-column{min-width:0}
.hero-card{isolation:isolate;position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(265px,.98fr);min-height:425px;overflow:hidden;border:1px solid #514878;border-radius:24px;background:linear-gradient(112deg,#211d48 0%,#25244f 35%,#252752 61%,#152f4b 100%);box-shadow:0 25px 60px #03030a5c}
.hero-card:before{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(105deg,#101126bb 0%,#17153255 46%,transparent 100%)}
.hero-card:after{content:'';position:absolute;z-index:-1;width:70%;height:130%;right:-16%;top:-45%;border-radius:50%;background:radial-gradient(ellipse,#8173ff33,transparent 68%);pointer-events:none}
.hero-grid{position:absolute;z-index:-1;inset:0;opacity:.16;background-image:linear-gradient(#c0bbff16 1px,transparent 1px),linear-gradient(90deg,#c0bbff16 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(90deg,transparent,#000 55%,#000)}
.hero-glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(2px);pointer-events:none}
.hero-glow-one{width:190px;height:190px;left:15%;top:-90px;background:#ff61bf2b;box-shadow:0 0 100px #ff61bf20}
.hero-glow-two{width:290px;height:290px;right:8%;bottom:-180px;background:#50d9ff2e;box-shadow:0 0 110px #50d9ff18}
.hero-copy{position:relative;z-index:4;align-self:center;padding:31px 0 33px 31px;max-width:520px}
.hero-eyebrow{display:flex;align-items:center;gap:8px;color:#c4bdeb;font:9px 'DM Mono',monospace;letter-spacing:.85px}
.hero-eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px #72dfff20,0 0 16px #72dfff65}
.hero-card h1{margin:20px 0 14px;font:900 clamp(38px,3.2vw,52px)/.99 'Nunito',sans-serif;letter-spacing:-2.2px;color:#fff}
.hero-card h1 span{color:#75e6ff;text-shadow:0 4px 34px #69d8ff3b}
.hero-card h1 em{font-style:normal;color:#ffa4df;text-shadow:0 4px 28px #ff74c833}
.hero-copy p{max-width:405px;margin:0;color:#c4c6e2;font-size:14px;font-weight:600;line-height:1.8}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:11px;margin-top:22px}
.hero-primary{display:flex;align-items:center;gap:18px;padding:12px 15px;border:1px solid #ff9add;border-radius:12px;background:linear-gradient(108deg,#fa6cbf,#ac79f5);box-shadow:0 8px 26px #d15fbf29;color:white;font-size:13px;font-weight:900;transition:transform .15s,filter .15s}
.hero-primary i{font-size:18px;font-style:normal}
.hero-primary:hover{transform:translateY(-2px);filter:saturate(1.18)}
.hero-secondary{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid #6c6b9a;border-radius:12px;background:#141530ad;color:#e1ddff;font-size:12px;font-weight:900}
.hero-secondary:hover{border-color:var(--cyan);background:#1d2344;color:#fff}
.secondary-play{color:var(--cyan)}
.hero-stats{display:flex;align-items:center;gap:14px;margin-top:26px}
.hero-stats div{display:grid;gap:3px;min-width:0}
.hero-stats strong{font:900 19px 'Space Grotesk',sans-serif;color:#fff}
.hero-stats span{font:8px 'DM Mono',monospace;letter-spacing:.4px;color:#9ea2ca;white-space:nowrap}
.hero-stats>i{width:1px;height:27px;background:#8785bc55}
.hero-stage{position:relative;min-height:390px;overflow:hidden;align-self:stretch}
.stage-ring{position:absolute;aspect-ratio:1;left:52%;top:46%;border-radius:50%;transform:translate(-50%,-50%);border:1px solid #a3baff35}
.ring-a{width:90%;box-shadow:0 0 0 12px #a79fff09,0 0 0 38px #a79fff07}
.ring-b{width:65%;border-style:dashed;border-color:#c2b9ff5c}
.ring-c{width:42%;background:radial-gradient(circle,#82e8ff20,transparent 65%);box-shadow:0 0 75px #87caff23}
.stage-talent{position:absolute;z-index:2;bottom:4px;height:88%;max-height:400px;width:auto;max-width:60%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 10px 18px #02020b64)}
.stage-fubuki{height:75%;left:-5%;z-index:1;opacity:.92}
.stage-miko{height:82%;left:14%;z-index:2}
.stage-suisei{height:99%;left:34%;z-index:4}
.stage-marine{height:86%;right:-6%;z-index:3}
.stage-chip{position:absolute;z-index:6;right:12px;top:24px;display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid #8bc7f74d;border-radius:8px;background:#151b3dd9;color:#bfeeff;font:8px 'DM Mono',monospace;letter-spacing:.3px;box-shadow:0 7px 22px #05051133}
.stage-chip i{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px #75f1d0aa}
.stage-spark{position:absolute;z-index:5;display:grid;place-items:center;border-radius:50%;filter:drop-shadow(0 0 10px #ffffff22)}
.sparkle-a{top:22%;right:17%;font-size:24px;color:var(--yellow)}
.sparkle-b{top:44%;left:11%;font-size:24px;color:var(--pink)}
.sparkle-c{right:8%;bottom:17%;width:35px;height:35px;background:#72dfff1f;border:1px solid #72dfff66;color:var(--cyan);font-size:19px}
.stage-caption{position:absolute;z-index:7;right:13px;bottom:17px;display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid #9a9ddc40;border-radius:12px;background:#15162ee8;box-shadow:0 8px 28px #07071266;backdrop-filter:blur(10px)}
.caption-note{width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:10px;background:linear-gradient(140deg,#ff7dc6,#a889ff);color:#fff;font-size:18px}
.stage-caption>span:last-child{display:grid;gap:2px}
.stage-caption strong{font-size:11px;color:#fff}
.stage-caption small{font-size:9px;color:#adafd4}
.hero-footer{position:absolute;z-index:8;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:9px;padding:7px;border-top:1px solid #a5a6d22a;background:#1011277a;color:#a4a8ce;font-size:10px;font-weight:800}
.hero-footer span{color:var(--pink)}

.talent-section{margin:28px 0 0}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:13px}
.section-kicker{font:9px 'DM Mono',monospace;letter-spacing:1.1px;color:#8c91ba}
.section-heading h2,.library-top h2{margin:5px 0 3px;color:#f7f5ff;font:900 23px 'Nunito',sans-serif;letter-spacing:-.55px}
.section-heading h2 span{color:var(--pink)}
.section-heading p{margin:0;color:#a2a5c8;font-size:12px}
.talent-section-note{flex:none;margin-bottom:4px;color:#898db5;font:8px 'DM Mono',monospace;letter-spacing:.5px}
.talent-section-note b{color:var(--pink);font-size:14px;margin-left:3px}
.talent-strip{display:flex;gap:10px;overflow-x:auto;padding:2px 3px 12px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#45466e transparent}.talent-strip::-webkit-scrollbar{height:6px}.talent-strip::-webkit-scrollbar-thumb{background:#45466e;border-radius:9px}
.talent-card{--talent:#4b4b80;flex:0 0 112px;scroll-snap-align:start;position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;overflow:hidden;padding:10px 6px 11px;border:1px solid #323355;border-radius:14px;background:linear-gradient(155deg,#1b1c3a,#15162a 78%);color:var(--text);transition:transform .17s,border-color .17s,box-shadow .17s,background .17s}
.talent-card:before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,var(--talent),transparent);opacity:.8}
.talent-card:hover,.talent-card.selected{transform:translateY(-3px);border-color:var(--talent);background:linear-gradient(155deg,#282648,#191a32);box-shadow:0 11px 26px #0505104f,0 0 0 1px #ffffff07}
.talent-image{position:relative;isolation:isolate;width:76px;height:83px;display:flex;justify-content:center;align-items:flex-end;overflow:hidden;border-radius:13px 13px 7px 7px;background:radial-gradient(ellipse at 50% 25%,var(--talent),#1a1b37 75%);border:1px solid #ffffff12}
.talent-image:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 65%,#111126cc);z-index:2;pointer-events:none}
.talent-image img{position:relative;z-index:1;height:114%;max-width:140%;width:auto;object-fit:contain;object-position:bottom;filter:drop-shadow(0 3px 8px #0007);transition:transform .17s}
.talent-card:hover .talent-image img,.talent-card.selected .talent-image img{transform:scale(1.07)}
.talent-image i{position:absolute;inset:auto 0 15px;z-index:0;font-size:22px;font-style:normal;color:#a6a3d4;text-align:center}
.talent-card strong{max-width:100%;font-size:12px;font-weight:900;color:#f4f2ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.talent-card small{font:8px 'DM Mono',monospace;letter-spacing:.25px;color:#9498bf;white-space:nowrap}
.talent-suisei{--talent:#3b5993}.talent-miko{--talent:#7c3b6e}.talent-marine{--talent:#8d4a36}.talent-calliope{--talent:#704367}.talent-fubuki{--talent:#327b99}.talent-pekora{--talent:#3d6d9e}.talent-korone{--talent:#8c5c32}.talent-okayu{--talent:#75498f}.talent-mio{--talent:#774337}.talent-flare{--talent:#a46d36}.talent-azki{--talent:#69476d}.talent-kiara{--talent:#a84c36}.talent-sora{--talent:#464a8e}.talent-ayame{--talent:#86415d}.talent-towa{--talent:#74438c}
.art-note{margin:9px 2px 0;color:#73789f;font-size:9px;line-height:1.6}

.quick-discovery{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:21px 0 29px}
.discovery-card{display:flex;align-items:center;gap:12px;min-width:0;padding:14px;border:1px solid #303153;border-radius:14px;background:linear-gradient(110deg,#1a1b37,#17172c);color:var(--text);text-align:left;transition:transform .15s,border-color .15s,box-shadow .15s}
.discovery-card:hover{transform:translateY(-2px);border-color:#625b9b;box-shadow:0 12px 25px #03030c50}
.discovery-symbol{width:43px;height:43px;flex:none;display:grid;place-items:center;border-radius:13px;background:#24394f;color:var(--cyan);font-size:22px}
.discovery-random .discovery-symbol{background:#382943;color:#ffd777}
.discovery-card>span:nth-child(2){display:grid;gap:4px;min-width:0}
.discovery-card strong{font-size:13px;font-weight:900}
.discovery-card small{font-size:11px;color:#9da2c7;line-height:1.4}
.discovery-card>i{margin-left:auto;color:#8d91b9;font-size:18px;font-style:normal;flex:none}

.library-section{min-width:0}
.library-top{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:15px}
.library-top h2{display:flex;align-items:center;gap:10px;font-size:25px}
.result-count{display:inline-flex;align-items:center;justify-content:center;min-width:28px;padding:3px 8px;border:1px solid #48416f;border-radius:8px;background:#282246;color:#d3baff;font:10px 'DM Mono',monospace}
.library-top p{margin:0;color:#9da2c6;font-size:12px}
.library-controls{display:flex;align-items:flex-end;gap:9px;flex:none}
.sort-control{display:grid;gap:6px}
.sort-control>span{color:#a2a5c6;font-size:10px;font-weight:900}
.sort-control select,.playlist-select-row select{width:100%;max-width:190px;min-width:0;padding:10px 11px;border:1px solid #3c3d63;border-radius:10px;background:#171831;color:#e4e1f8;font-size:11px;font-weight:800}
.sort-control select:focus,.playlist-select-row select:focus{outline:2px solid var(--violet);outline-offset:2px}
.play-all-button{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid #6bd7ed;border-radius:10px;background:linear-gradient(120deg,#3b9ec0,#7766d8);box-shadow:0 6px 19px #4b9dcb26;color:#fff;font-size:11px;font-weight:900;white-space:nowrap}
.play-all-button span{font-size:12px}
.play-all-button:hover{filter:brightness(1.12);transform:translateY(-1px)}
.notice{padding:12px 14px;margin:12px 0;border:1px solid #78623a;border-radius:11px;background:#2b251b;color:#ffe0a1;font-size:12px;line-height:1.65}
.song-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.song-card{min-width:0;overflow:hidden;border:1px solid #2d2e52;border-radius:15px;background:linear-gradient(155deg,#191a35,#131429);box-shadow:0 7px 20px #03030b2b;transition:transform .17s,border-color .17s,box-shadow .17s}
.song-card:hover{transform:translateY(-3px);border-color:#64578f;box-shadow:0 15px 28px #03030b62}
.song-art{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#242249,#18354d 55%,#4b2854)}
.song-art:before{content:'♫';position:absolute;inset:0;display:grid;place-items:center;color:#9b8bcf;font-size:40px;opacity:.5}
.song-art img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s,filter .25s}
.song-card:hover .song-art img{transform:scale(1.045);filter:saturate(1.08)}
.song-art:after{content:'';position:absolute;z-index:1;inset:43% 0 0;background:linear-gradient(transparent,#0809147a);pointer-events:none}
.quick-play{position:absolute;z-index:3;right:10px;bottom:10px;width:41px;height:41px;display:grid;place-items:center;border:1px solid #ffffff77;border-radius:50%;background:#f9eaff;color:#5d4388;box-shadow:0 5px 18px #0007;opacity:0;transform:translateY(4px);transition:opacity .16s,transform .16s}
.quick-play:hover{background:#fff;color:#da45a7}
.song-card:hover .quick-play,.quick-play:focus-visible{opacity:1;transform:none}
.song-card-body{padding:13px 13px 11px}
.song-title{min-height:41px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;color:#f4f2ff;font-size:14px;line-height:1.45;font-weight:900}
.song-artist{margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#a9aed1;font-size:12px;font-weight:700}
.song-card-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:12px;color:#848bb4;font:10px 'DM Mono',monospace}
.song-card-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.song-card-actions{display:flex;gap:5px;margin-top:11px;padding-top:9px;border-top:1px solid #2c2d4c}
.mini-action{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;padding:8px 5px;border:1px solid transparent;border-radius:8px;background:transparent;color:#b3b6d5;font-size:10px;font-weight:900;white-space:nowrap}
.mini-action:hover{border-color:#49416b;background:#24213f;color:#fff}
.mini-action.is-favorite{color:#ff91d0;background:#321e3b}
.load-more-wrap{text-align:center;padding:23px}
.soft-action{display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;border:1px solid #414267;border-radius:10px;background:#191a35;color:#d5d5f0;font-size:12px;font-weight:900}
.soft-action:hover{border-color:var(--violet);background:#262446;color:#fff}
.empty-state{padding:55px 15px;border:1px dashed #38395d;border-radius:16px;background:#14152a;text-align:center;color:#a4a8ca}
.empty-note{font-size:36px;color:var(--pink)}
.empty-state h3{margin:12px 0 4px;color:#fff;font-size:18px}
.empty-state p{margin:0 0 15px;font-size:12px}
.page-footer{display:flex;justify-content:space-between;gap:15px;margin-top:30px;padding-top:16px;border-top:1px solid #252645;color:#7f84ab;font-size:10px;line-height:1.8}
.page-footer b{color:#bbb8dd}
.player-column{display:grid;gap:14px}
.player-card,.queue-card{overflow:hidden;border:1px solid #303154;border-radius:18px;background:linear-gradient(160deg,#191a36,#111225);box-shadow:0 22px 50px #02020947}
.player-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:17px 16px 14px}
.player-kicker{display:flex;align-items:center;gap:7px;color:#8e94bb;font:8px 'DM Mono',monospace;letter-spacing:.75px}
.player-kicker>i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px #75f1d018}
.player-kicker .queue-light{background:var(--pink);box-shadow:0 0 0 4px #ff74c818}
.player-head h2,.queue-heading h2{margin:5px 0 0;color:#f4f2ff;font:900 18px 'Nunito',sans-serif}
.player-head h2 span{color:var(--pink)}
.panel-collapse{width:30px;height:30px;display:grid;place-items:center;border:1px solid #353657;border-radius:9px;background:#1f203f;color:#aeb2d3;font-size:18px}
.panel-collapse:hover{border-color:var(--pink);color:#fff}
.video-frame-wrap{position:relative;width:100%;aspect-ratio:16/9;min-height:190px;overflow:hidden;border-block:1px solid #303154;background:#080913}
.youtube-player,.youtube-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;background:radial-gradient(circle at 50% 42%,#3b2d64,#1a2545 50%,#0e1728 100%);color:#a5aad1}
.placeholder-record{position:relative;width:62px;height:62px;display:grid;place-items:center;border:1px solid #b1a4f277;border-radius:50%;background:repeating-radial-gradient(circle,#231d45 0 4px,#3b3264 5px 6px);color:#ff8ed0;font-size:26px;box-shadow:0 0 35px #8d7cff24}
.placeholder-record i{position:absolute;top:-4px;right:-7px;color:var(--yellow);font-size:18px;font-style:normal}
.player-placeholder strong{color:#f7f3ff;font-size:13px;font-weight:900}
.player-placeholder small{color:#a0a6cf;font-size:11px}
.youtube-fallback{display:block;padding:9px 13px;border-top:1px solid #303154;background:#181932;color:#bbaaff;font-size:11px;font-weight:900;text-decoration:none}
.youtube-fallback:hover{color:#fff}
.now-playing-meta{padding:14px 15px 15px}
.playing-title-row{display:flex;align-items:center;gap:10px;min-width:0}
.playing-art{position:relative;width:48px;height:42px;flex:none;display:grid;place-items:center;overflow:hidden;border:1px solid #49436e;border-radius:10px;background:linear-gradient(145deg,#3f2a5c,#1b4b5e);color:#f5a7dd}
.playing-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.playing-art span{font-size:22px}
.playing-text{display:grid;gap:3px;flex:1;min-width:0}
.playing-text strong,.playing-text span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.playing-text strong{color:#f8f5ff;font-size:13px;font-weight:900}
.playing-text span{color:#a4a9cf;font-size:11px}
.player-heart{width:34px;height:34px;display:grid;place-items:center;flex:none;border:0;border-radius:9px;background:transparent;color:#9ba0c6;font-size:24px}
.player-heart:hover,.player-heart.is-favorite{color:var(--pink);background:#301c3a}
.player-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin:16px 0 9px}
.control-button{width:31px;height:31px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:#a6abd0;font-size:16px}
.control-button:hover:not(:disabled),.control-button.active{background:#2a254a;color:var(--cyan)}
.play-toggle{width:43px;height:43px;display:grid;place-items:center;border:1px solid #ffa6db;border-radius:50%;background:linear-gradient(135deg,#ff7cc7,#9c87ff);box-shadow:0 6px 19px #e76bbb31;color:#fff;font-size:17px}
.play-toggle:hover:not(:disabled){transform:scale(1.05);filter:brightness(1.1)}
.player-status-row{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#8288b2;font-size:10px}
.player-status-row a{color:#b7a6ff;font-weight:900;text-decoration:none;white-space:nowrap}
.player-status-row a:hover{color:#fff}
.queue-card{padding:15px 14px 13px}
.queue-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.queue-heading h2{font-size:17px}
.clear-queue{border:0;background:transparent;color:#8f95b9;font-size:10px;font-weight:900}
.clear-queue:hover{color:var(--pink)}
.queue-list{max-height:280px;overflow:auto;scrollbar-width:thin;scrollbar-color:#4a4b72 transparent}
.queue-empty{display:flex;align-items:center;justify-content:center;gap:12px;min-height:102px;color:#979dc4}
.queue-empty>span{font-size:31px;color:#b092ff}
.queue-empty p{margin:0;font-size:11px;line-height:1.8}
.queue-empty small{font-size:10px;color:#8187ad}
.queue-track{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 5px;border-radius:9px}
.queue-track:hover{background:#20213f}
.queue-track.current{background:#29203e}
.queue-track-art{width:46px;height:34px;flex:none;object-fit:cover;border:1px solid #ffffff18;border-radius:7px;background:#232446}
.queue-track-info{display:grid;gap:3px;flex:1;min-width:0}
.queue-track-info strong,.queue-track-info span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.queue-track-info strong{color:#eeedff;font-size:11px;font-weight:900}
.queue-track-info span{color:#999fc5;font-size:10px}
.queue-track.current .queue-track-info strong{color:#ffa0d9}
.queue-track-actions{display:flex;flex:none}
.queue-track-play,.queue-track-remove{width:27px;height:27px;display:grid;place-items:center;border:0;border-radius:7px;background:transparent;color:#989ec2;font-size:13px}
.queue-track-play:hover,.queue-track-remove:hover{background:#383056;color:#fff}
.queue-actions{margin-top:11px;padding-top:12px;border-top:1px solid #2e2f50}
.playlist-select-label{display:block;margin-bottom:6px;color:#a2a7c8;font-size:10px;font-weight:900}
.playlist-select-row{display:flex;gap:7px}
.playlist-select-row select{max-width:none;padding:9px 8px;font-size:10px}
.save-button{padding:9px 11px;border:1px solid #63558e;border-radius:9px;background:#30264b;color:#e5d8ff;font-size:10px;font-weight:900}
.save-button:hover{background:#453365;color:#fff}
.playlist-play{display:block;margin-top:9px;padding:5px 0;border:0;background:transparent;color:#a7a0e7;font-size:10px;font-weight:900}
.playlist-play:hover{color:#fff}
.player-footnote{margin:0;padding:0 4px;color:#777da5;font-size:10px;line-height:1.7}

.playlist-dialog{width:min(410px,calc(100vw - 30px));padding:0;border:1px solid #4b426e;border-radius:20px;background:#191a36;color:var(--text);box-shadow:0 28px 90px #000b}
.playlist-dialog::backdrop{background:#050510cc;backdrop-filter:blur(5px)}
.playlist-dialog form{padding:25px}
.dialog-mark{width:47px;height:47px;display:grid;place-items:center;border:1px solid #9d82e766;border-radius:15px;background:linear-gradient(145deg,#38285b,#20475b);color:#ffa0dd;font-size:25px}
.playlist-dialog h2{margin:15px 0 6px;font-size:22px;font-weight:900}
.playlist-dialog p{margin:0 0 20px;color:#a4a8ca;font-size:13px;line-height:1.7}
.playlist-dialog label{display:block;margin-bottom:7px;color:#d5d3ee;font-size:12px;font-weight:900}
.playlist-dialog input{width:100%;padding:12px 13px;border:1px solid #414263;border-radius:10px;background:#101126;color:#fff;font-size:13px}
.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}
.dialog-cancel,.dialog-create{padding:10px 14px;border-radius:9px;font-size:12px;font-weight:900}
.dialog-cancel{border:1px solid #414263;background:#20213b;color:#c5c7e4}
.dialog-create{border:1px solid #ff9cda;background:linear-gradient(105deg,#ff75c9,#a18aff);color:#fff}
body.compact-player .player-card .video-frame-wrap,body.compact-player .player-card .now-playing-meta{display:none}
body.compact-player .player-head{padding-bottom:17px}

@media(min-width:1700px){.app-layout{grid-template-columns:265px minmax(0,1fr) 390px;gap:28px;padding-inline:38px}.hero-card{min-height:450px}.hero-copy{padding-left:36px}.stage-talent{max-height:425px}.song-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.talent-strip{gap:12px}.talent-image{width:83px;height:91px}}
@media(max-width:1510px){.topbar{grid-template-columns:238px minmax(200px,1fr) auto;gap:18px;padding-inline:22px}.app-layout{grid-template-columns:226px minmax(0,1fr) 328px;gap:17px;padding-inline:20px}.hero-card{min-height:405px;grid-template-columns:minmax(0,1.02fr) minmax(230px,.98fr)}.hero-copy{padding-left:24px}.hero-card h1{font-size:42px}.stage-talent{max-width:65%}.stage-fubuki{left:-10%}.stage-suisei{left:30%}.stage-marine{right:-13%}.talent-strip{gap:8px}.talent-image{width:67px;height:74px}.talent-card strong{font-size:11px}.song-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.player-controls{gap:10px}}
@media(max-width:1220px){.app-layout{grid-template-columns:210px minmax(0,1fr);gap:18px}.player-column{grid-column:2;position:static;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr);align-items:start}.hero-card{min-height:385px;grid-template-columns:minmax(0,1fr) minmax(205px,.85fr)}.hero-copy{padding:23px 0 28px 23px}.hero-card h1{font-size:37px}.hero-copy p{font-size:13px}.hero-stats{gap:9px}.hero-stats strong{font-size:16px}.hero-stats span{font-size:7px}.hero-stage{min-height:360px}.stage-talent{max-height:355px}.stage-fubuki{left:-15%}.stage-miko{left:9%}.stage-suisei{left:29%}.stage-marine{right:-19%}.talent-strip{grid-template-columns:repeat(6,minmax(0,1fr))}.talent-card{padding-inline:3px}.song-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:970px){.topbar{height:74px;grid-template-columns:auto minmax(160px,1fr) auto;gap:12px;padding-inline:15px}.brand-mark{width:38px;height:38px}.brand-copy strong{font-size:21px}.brand-copy small{font-size:7px}.top-live{display:none}.app-layout{grid-template-columns:195px minmax(0,1fr);gap:14px;padding:15px 14px 48px}.hero-card{min-height:355px;grid-template-columns:minmax(0,1.05fr) minmax(180px,.8fr)}.hero-copy{padding:21px 0 28px 19px}.hero-card h1{font-size:33px}.hero-copy p{font-size:12px}.hero-stats{gap:6px}.hero-stats span{font-size:6px;letter-spacing:0}.hero-stats strong{font-size:15px}.hero-stage{min-height:335px}.stage-talent{max-width:72%;max-height:320px}.stage-fubuki{left:-22%}.stage-miko{left:4%}.stage-suisei{left:25%}.stage-marine{right:-23%}.stage-chip{right:6px;top:13px;font-size:6px}.stage-caption{right:7px;bottom:15px;padding:7px}.stage-caption strong{font-size:9px}.stage-caption small{font-size:8px}.talent-strip{gap:7px}.talent-image{width:53px;height:61px}.talent-card strong{font-size:9px}.talent-card small{font-size:6px}.library-top{align-items:flex-start;flex-direction:column}.library-controls{width:100%;justify-content:space-between}.player-column{grid-template-columns:1fr}.song-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar{top:89px}}
@media(max-width:680px){.topbar{height:auto;min-height:66px;grid-template-columns:1fr auto;gap:10px;padding:10px 12px}.brand{gap:9px}.brand-mark{width:36px;height:36px;border-radius:12px}.brand-mark i{font-size:26px}.brand-copy strong{font-size:20px}.brand-copy small{font-size:6px;letter-spacing:.8px}.top-actions{grid-column:2;grid-row:1;gap:2px}.favorite-shortcut{padding:7px}.favorite-shortcut span{font-size:23px}.favorite-shortcut b{display:none}.global-search{grid-column:1/-1;grid-row:2;width:100%;height:43px;padding-inline:11px}.global-search input{font-size:13px}.global-search kbd{display:none}.mobile-toolbar{position:sticky;top:109px;z-index:30;display:flex;gap:8px;padding:9px 12px;border-bottom:1px solid #292a49;background:#101025ef;backdrop-filter:blur(14px)}.mobile-tool{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;padding:9px 8px;border:1px solid #35365a;border-radius:10px;background:#191a34;color:#d5d4ef;font-size:12px;font-weight:900}.mobile-tool span{font-size:17px;color:var(--cyan)}.app-layout{display:flex;flex-direction:column;gap:17px;padding:12px 10px 34px}.sidebar{display:none;position:static;width:100%;padding:14px;order:0}.body-filters-open .sidebar,body.filters-open .sidebar{display:block}.catalogue-column{order:1;width:100%}.player-column{order:2;width:100%;position:static;display:grid;grid-template-columns:1fr}.hero-card{display:flex;flex-direction:column;min-height:unset;border-radius:20px}.hero-copy{padding:24px 19px 15px}.hero-eyebrow{font-size:8px;letter-spacing:.55px}.hero-card h1{font-size:39px;margin:17px 0 11px;letter-spacing:-1.5px}.hero-copy p{font-size:13px;line-height:1.75}.hero-actions{margin-top:16px;gap:8px}.hero-primary{padding:11px 12px;font-size:12px;gap:11px}.hero-secondary{padding:10px;font-size:11px}.hero-stats{margin-top:20px;gap:9px}.hero-stats strong{font-size:16px}.hero-stats span{font-size:5.8px;white-space:normal;line-height:1.4}.hero-stats>i{height:22px}.hero-stage{order:2;width:100%;min-height:255px;margin-top:-1px}.stage-ring.ring-a{width:78%}.stage-ring.ring-b{width:59%}.stage-ring.ring-c{width:39%}.stage-talent{height:94%;max-height:285px;max-width:45%;bottom:0}.stage-fubuki{height:76%;left:0}.stage-miko{height:86%;left:15%}.stage-suisei{height:102%;left:32%}.stage-marine{height:88%;right:0}.stage-chip{top:10px;right:9px;font-size:6px;padding:6px 7px}.sparkle-a{right:15%;top:25%;font-size:18px}.sparkle-b{left:8%;top:40%;font-size:20px}.sparkle-c{right:7%;bottom:21%;width:28px;height:28px}.stage-caption{right:10px;bottom:16px;padding:7px 9px}.caption-note{width:27px;height:27px;font-size:15px}.stage-caption strong{font-size:9px}.stage-caption small{font-size:7px}.hero-footer{font-size:8px;padding:7px}
.talent-section{margin-top:19px}.section-heading{align-items:flex-start;margin-bottom:9px}.section-heading h2{font-size:21px}.section-heading p{font-size:11px}.talent-section-note{display:none}.talent-strip{display:flex;overflow-x:auto;gap:9px;padding:4px 2px 12px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#46476b transparent}.talent-card{flex:0 0 94px;scroll-snap-align:start;padding:9px 4px 10px;border-radius:12px}.talent-image{width:63px;height:71px;border-radius:11px}.talent-card strong{font-size:10px}.talent-card small{font-size:6px}.art-note{font-size:8px}
.quick-discovery{gap:8px;margin:15px 0 23px}.discovery-card{gap:8px;padding:10px 8px;border-radius:11px}.discovery-symbol{width:32px;height:32px;border-radius:9px;font-size:18px}.discovery-card strong{font-size:11px}.discovery-card small{font-size:9px;white-space:normal}.discovery-card>i{font-size:14px}
.library-top{gap:12px;margin-bottom:13px}.library-top h2{font-size:23px;line-height:1.3;flex-wrap:wrap}.library-top p{font-size:11px}.library-controls{align-items:flex-end;gap:7px}.sort-control>span{font-size:10px}.sort-control select{max-width:175px;padding:10px 8px;font-size:10px}.play-all-button{padding:10px;font-size:11px}.song-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.song-card{border-radius:12px}.song-card-body{padding:9px}.song-title{font-size:12px;min-height:36px;line-height:1.4}.song-artist{font-size:10px}.song-card-meta{font-size:8px;margin-top:8px}.song-card-actions{gap:2px;margin-top:8px;padding-top:7px}.mini-action{gap:3px;padding:7px 2px;font-size:8px}.quick-play{opacity:1;transform:none;width:33px;height:33px;right:7px;bottom:7px}.page-footer{flex-direction:column;gap:6px;font-size:9px}.player-head{padding:14px}.player-head h2{font-size:17px}.video-frame-wrap{min-height:195px}.now-playing-meta{padding:12px}.player-controls{gap:14px}.queue-card{padding:13px}.queue-list{max-height:320px}.queue-track-art{width:48px;height:35px}.queue-track-info strong{font-size:12px}.queue-track-info span{font-size:10px}.player-footnote{padding:0 4px;font-size:9px}.artist-filters{max-height:250px}.main-nav{grid-template-columns:1fr 1fr}.nav-item{font-size:12px}.nav-item:last-child{grid-column:1/-1}.playlist-dialog form{padding:21px}}
@media(max-width:390px){.hero-card h1{font-size:35px}.hero-copy{padding-inline:16px}.hero-actions{align-items:stretch}.hero-primary{flex:1;justify-content:space-between}.hero-secondary{justify-content:center}.hero-stats{gap:6px}.hero-stats strong{font-size:14px}.hero-stats span{font-size:5.2px}.stage-talent{max-width:47%}.stage-fubuki{left:-3%}.stage-miko{left:13%}.stage-suisei{left:30%}.stage-marine{right:-4%}.stage-caption{right:6px}.talent-card{flex-basis:88px}.talent-image{width:58px;height:66px}.discovery-card{gap:5px}.discovery-card small{font-size:8px}.sort-control select{max-width:146px}.song-grid{gap:6px}.song-card-body{padding:8px}.song-title{font-size:11px}.mini-action{font-size:7px}.player-controls{gap:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* HoloTracks compact redesign — 2026-10-11.
   This layer intentionally overrides the original spacious concept: the music
   catalogue should be visible quickly, and the character artwork should feel
   composed into the scene rather than sitting in oversized cards. */
:root{
  --bg:#0b0c18;--bg-2:#121326;--panel:#14152b;--panel-raised:#1a1b34;
  --line:#2a2b49;--text:#f7f5ff;--muted:#b0b2d0;--dim:#8589ad;
  --pink:#ff79c9;--violet:#b49aff;--cyan:#7ce4f5;
}
html{scroll-padding-top:82px}
body{
  overflow-x:hidden;
  background:
    radial-gradient(ellipse at 78% 0%,#3a205b28,transparent 28%),
    radial-gradient(ellipse at 8% 22%,#1c597025,transparent 25%),
    #0b0c18;
}
button,select,input{font-family:inherit}
button{appearance:none;-webkit-appearance:none}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.topbar{
  height:70px;
  grid-template-columns:245px minmax(240px,680px) minmax(180px,1fr);
  gap:clamp(12px,1.6vw,24px);
  padding-inline:clamp(16px,2.2vw,38px);
}
.brand-mark{width:39px;height:39px;border-radius:13px}
.brand-copy strong{font-size:22px}
.global-search{height:43px;border-radius:13px}
.app-layout{
  max-width:2000px;
  grid-template-columns:255px minmax(0,1fr) 360px;
  gap:20px;
  padding:16px clamp(18px,2vw,34px) 42px;
}
.sidebar,.player-column{top:84px}
.sidebar{padding:15px 13px;border-color:#292a49;background:linear-gradient(160deg,#15162b,#10111f)}
.sidebar-topline{padding-bottom:12px}
.nav-item{padding:9px 10px}
.sidebar-rule{margin:16px 1px 11px}
.artist-search{margin-top:9px}
.artist-filters{max-height:34vh}
.playlist-section{margin-top:14px;padding-top:12px}
.sidebar-footer{margin-top:14px;padding-top:10px}

.hero-card{
  min-height:244px;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  border-radius:21px;
  border-color:#4b426c;
  background:linear-gradient(112deg,#201b40 0%,#25234c 44%,#172b44 100%);
  box-shadow:0 18px 42px #02030a55;
}
.hero-copy{padding:20px 0 22px 26px;max-width:465px}
.hero-eyebrow{font-size:8px;letter-spacing:.7px}
.hero-card h1{font-size:clamp(30px,2.35vw,40px);line-height:1.02;letter-spacing:-1.5px;margin:12px 0 9px}
.hero-copy p{max-width:365px;font-size:12px;line-height:1.6}
.hero-actions{gap:8px;margin-top:14px}
.hero-primary{padding:9px 12px;gap:12px;border-radius:10px;font-size:11px}
.hero-secondary{padding:9px 11px;border-radius:10px;font-size:11px}
.hero-stats{gap:11px;margin-top:15px}
.hero-stats strong{font-size:16px}
.hero-stats span{font-size:7px;letter-spacing:.15px}
.hero-stats>i{height:22px}
.hero-stage{min-height:0;height:100%;min-width:0;overflow:hidden;isolation:isolate}
.hero-stage:before{
  content:"";position:absolute;z-index:5;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#211d4570 0%,transparent 32%,transparent 76%,#172b4466 100%);
}
.stage-ring{left:54%;top:48%;opacity:.6}
.ring-a{width:82%;box-shadow:0 0 0 10px #a79fff08,0 0 0 28px #a79fff05}
.ring-b{width:58%}
.ring-c{width:35%}
.stage-talent{
  bottom:24px;
  height:calc(100% - 28px);
  max-height:220px;
  max-width:43%;
  object-fit:contain;
  object-position:bottom;
  filter:drop-shadow(0 7px 14px #03040c55);
  -webkit-mask-image:linear-gradient(to bottom,#000 79%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 79%,transparent 100%);
}
.stage-fubuki{height:75%;left:-4%;opacity:.84}
.stage-miko{height:82%;left:13%;opacity:.91}
.stage-suisei{height:97%;left:32%}
.stage-marine{height:83%;right:-3%;opacity:.88}
.stage-chip{top:13px;right:10px;padding:6px 8px;font-size:7px}
.stage-spark{opacity:.8}
.stage-caption{right:10px;bottom:27px;padding:7px 9px;border-radius:10px}
.caption-note{width:28px;height:28px;border-radius:8px;font-size:15px}
.stage-caption strong{font-size:9px}
.stage-caption small{font-size:8px}
.hero-footer{padding:4px;font-size:8px}

.talent-section{margin:12px 0 5px}
.section-heading{align-items:center;margin-bottom:5px}
.section-kicker{font-size:8px;letter-spacing:.9px}
.section-heading h2{margin:1px 0 0;font-size:17px;letter-spacing:-.3px}
.section-heading p{display:none}
.talent-section-note{display:none}
.talent-strip{
  display:flex;gap:5px;overflow-x:auto;
  padding:0 1px 5px;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:#424361 transparent;
}
.talent-strip::-webkit-scrollbar{height:4px}
.talent-strip::-webkit-scrollbar-thumb{background:#424361;border-radius:8px}
.talent-card{
  flex:0 0 65px;
  gap:1px;padding:2px 2px 4px;
  border:1px solid transparent;border-radius:11px;
  background:transparent;box-shadow:none;
}
.talent-card:before{height:2px;opacity:.35}
.talent-card:hover,.talent-card.selected{
  transform:translateY(-1px);border-color:#554875;
  background:linear-gradient(180deg,#25213d80,transparent);
  box-shadow:none;
}
.talent-image{
  width:51px;height:53px;border:0;border-radius:12px;
  background:radial-gradient(ellipse at 50% 38%,var(--talent),#16172c 74%);
}
.talent-image:after{background:linear-gradient(transparent 58%,#111126bb)}
.talent-image img{
  position:absolute;left:50%;bottom:0;
  height:108%;max-height:59px;max-width:120%;width:auto;
  object-fit:contain;object-position:bottom;
  transform:translateX(-50%);
  filter:drop-shadow(0 4px 6px #0005);
}
.talent-card:hover .talent-image img,.talent-card.selected .talent-image img{transform:translateX(-50%) scale(1.04)}
.talent-image i{bottom:9px;font-size:17px}
.talent-card strong{font-size:10px;font-weight:800}
.talent-card small{display:none}
.art-note{display:none}

.quick-discovery{display:flex;gap:8px;margin:7px 0 17px}
.discovery-card{
  flex:0 1 245px;gap:8px;min-height:43px;padding:6px 9px;
  border-radius:11px;background:linear-gradient(110deg,#191a33,#151629);
}
.discovery-card:hover{transform:translateY(-1px);box-shadow:0 6px 16px #03030c40}
.discovery-symbol{width:28px;height:28px;border-radius:8px;font-size:16px}
.discovery-card>span:nth-child(2){gap:1px}
.discovery-card strong{font-size:10px}
.discovery-card small{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.discovery-card>i{font-size:13px}

.library-top{align-items:center;gap:12px;margin-bottom:11px}
.library-top h2{font-size:22px;letter-spacing:-.45px;margin:3px 0 3px}
.library-top p{font-size:11px}
.library-controls{align-items:center;gap:7px}
.sort-control{gap:4px}
.sort-control>span{font-size:9px}
.sort-control select,.playlist-select-row select{
  max-width:175px;padding:9px 10px;border:1px solid #3c3d60;
  border-radius:10px;background:#17182d;color:#eeeaff;font-size:10px;
}
.play-all-button{padding:9px 11px;border-radius:10px;font-size:10px;box-shadow:0 5px 14px #4b9dcb20}
.notice{margin:9px 0;padding:9px 12px;font-size:11px}
.song-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.song-card{border-radius:13px;background:linear-gradient(155deg,#191a32,#121321);box-shadow:0 5px 15px #03030b25}
.song-card:hover{transform:translateY(-2px)}
.song-art{aspect-ratio:16/9}
.song-art img{object-fit:cover}
.song-card-body{padding:10px 11px 9px}
.song-title{font-size:12px;min-height:35px;line-height:1.4}
.song-artist{font-size:10px;margin-top:3px}
.song-card-meta{font-size:8px;margin-top:8px}
.song-card-actions{gap:2px;margin-top:8px;padding-top:7px}
.mini-action{padding:6px 3px;font-size:9px;border-radius:7px}
.quick-play{width:35px;height:35px;right:8px;bottom:8px}
.load-more-wrap{padding:18px}
.page-footer{margin-top:22px;padding-top:12px;font-size:9px}

.player-card,.queue-card{border-color:#2d2e50;border-radius:16px;box-shadow:0 16px 35px #02020938}
.player-head{padding:14px 14px 12px}
.player-kicker{font-size:7px}
.player-head h2,.queue-heading h2{font-size:16px}
.panel-collapse{width:28px;height:28px;border-radius:8px}
.video-frame-wrap{min-height:0;aspect-ratio:16/9}
.now-playing-meta{padding:11px 12px 12px}
.playing-art{width:42px;height:38px;border-radius:9px}
.playing-text strong{font-size:12px}
.playing-text span{font-size:10px}
.player-controls{gap:11px;margin:12px 0 8px}
.control-button{width:30px;height:30px;border-radius:9px}
.play-toggle{width:39px;height:39px}
.player-status-row{font-size:9px}
.queue-card{padding:13px 12px 11px}
.queue-heading{margin-bottom:6px}
.queue-heading h2{font-size:15px}
.queue-list{max-height:250px}
.queue-empty{min-height:76px}
.queue-actions{margin-top:8px;padding-top:9px}
.playlist-select-label{font-size:9px}
.playlist-select-row select{padding:8px 7px}
.save-button{padding:8px 10px}
.player-footnote{font-size:9px}

@media(min-width:1700px){
  .app-layout{grid-template-columns:255px minmax(0,1fr) 360px;gap:20px;padding-inline:30px}
  .hero-card{min-height:244px}
  .stage-talent{max-height:220px}
  .song-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .talent-image{width:51px;height:53px}
}
@media(max-width:1699px) and (min-width:1221px){
  .app-layout{grid-template-columns:230px minmax(0,1fr) 330px;gap:16px;padding-inline:18px}
  .hero-card{min-height:225px}
  .hero-copy{padding-left:21px}
  .hero-card h1{font-size:clamp(28px,2.5vw,36px)}
  .stage-talent{max-height:204px}
  .song-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
}
@media(max-width:1220px) and (min-width:971px){
  .app-layout{grid-template-columns:205px minmax(0,1fr);gap:16px;padding-inline:15px}
  .player-column{grid-column:2;position:static;display:grid;grid-template-columns:minmax(0,1.03fr) minmax(250px,.97fr);align-items:start}
  .hero-card{min-height:215px;grid-template-columns:minmax(0,1fr) minmax(0,.82fr)}
  .hero-copy{padding:18px 0 19px 19px}
  .hero-card h1{font-size:29px}
  .hero-copy p{font-size:11px;max-width:310px}
  .hero-stats{gap:7px}
  .hero-stats strong{font-size:14px}
  .hero-stats span{font-size:6px}
  .stage-talent{max-height:194px}
  .song-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:970px) and (min-width:681px){
  .topbar{height:66px;grid-template-columns:auto minmax(120px,1fr) auto;gap:10px;padding-inline:12px}
  .brand-mark{width:35px;height:35px}
  .brand-copy strong{font-size:19px}
  .brand-copy small{font-size:6px}
  .app-layout{grid-template-columns:180px minmax(0,1fr);gap:12px;padding:12px}
  .hero-card{min-height:225px;grid-template-columns:minmax(0,1fr) minmax(0,.75fr)}
  .hero-copy{padding:16px 0 19px 15px}
  .hero-card h1{font-size:26px;letter-spacing:-1px}
  .hero-copy p{font-size:10px}
  .hero-stats{gap:5px;margin-top:10px}
  .hero-stats strong{font-size:12px}
  .hero-stats span{font-size:5px}
  .stage-talent{max-height:200px;max-width:49%}
  .talent-card{flex-basis:58px}
  .talent-image{width:45px;height:48px}
  .song-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .player-column{grid-template-columns:1fr}
}
@media(max-width:680px){
  .topbar{height:auto;min-height:65px;grid-template-columns:1fr auto;gap:9px;padding:9px 12px}
  .brand{gap:8px}
  .brand-mark{width:35px;height:35px}
  .brand-copy strong{font-size:19px}
  .brand-copy small{font-size:6px;letter-spacing:.65px}
  .top-actions{grid-column:2;grid-row:1;gap:2px}
  .favorite-shortcut{padding:6px}
  .global-search{grid-column:1/-1;grid-row:2;width:100%;height:41px;padding-inline:10px}
  .global-search input{font-size:12px}
  .mobile-toolbar{top:105px;gap:7px;padding:7px 10px}
  .mobile-tool{padding:8px 6px;font-size:11px;border-radius:9px}
  .app-layout{display:flex;flex-direction:column;gap:13px;padding:10px 9px 28px}
  .sidebar{display:none;position:static;width:100%;padding:13px}
  body.filters-open .sidebar{display:block}
  .catalogue-column{order:1;width:100%}
  .player-column{order:2;width:100%;position:static;display:grid;grid-template-columns:1fr}
  .hero-card{display:block;position:relative;min-height:244px;border-radius:17px;overflow:hidden}
  .hero-copy{position:relative;z-index:4;width:100%;max-width:75%;padding:18px 0 25px 16px}
  .hero-eyebrow{font-size:6px;letter-spacing:.25px;max-width:100%}
  .hero-card h1{font-size:30px;line-height:1.01;margin:11px 0 7px;letter-spacing:-1.2px}
  .hero-copy p{font-size:10px;line-height:1.5;max-width:100%}
  .hero-actions{gap:6px;margin-top:12px;flex-wrap:wrap}
  .hero-primary{padding:8px 9px;font-size:10px;gap:8px}
  .hero-secondary{padding:8px 9px;font-size:9px;gap:6px}
  .hero-stats{position:relative;z-index:4;max-width:72%;gap:6px;margin-top:12px}
  .hero-stats strong{font-size:12px}
  .hero-stats span{font-size:5px;white-space:normal;line-height:1.3}
  .hero-stats>i{height:18px}
  .hero-stage{position:absolute;z-index:1;top:0;right:0;bottom:0;left:25%;width:auto;height:auto;min-height:0;opacity:.8}
  .hero-stage:before{background:linear-gradient(90deg,#211d45 0%,#211d4566 25%,transparent 76%,#172b4433 100%)}
  .stage-talent{bottom:23px;height:calc(100% - 28px);max-height:none;max-width:48%;opacity:.76}
  .stage-fubuki,.stage-miko{display:none}
  .stage-suisei{left:12%;height:98%;max-width:52%}
  .stage-marine{right:-2%;height:84%;max-width:45%}
  .stage-ring{left:60%;top:43%}
  .stage-chip,.stage-caption{display:none}
  .hero-footer{font-size:7px;padding:4px}
  .talent-section{margin-top:12px}
  .section-heading{margin-bottom:5px}
  .section-heading h2{font-size:15px}
  .talent-strip{gap:4px;padding-bottom:3px}
  .talent-card{flex-basis:56px;padding:1px 1px 3px}
  .talent-image{width:43px;height:46px;border-radius:10px}
  .talent-image img{max-height:52px}
  .talent-card strong{font-size:8px}
  .quick-discovery{gap:6px;margin:6px 0 13px}
  .discovery-card{flex-basis:50%;gap:5px;padding:6px;border-radius:9px}
  .discovery-symbol{width:25px;height:25px;font-size:14px}
  .discovery-card strong{font-size:9px}
  .discovery-card small{font-size:7px}
  .discovery-card>i{display:none}
  .library-top{align-items:stretch;flex-direction:column;gap:8px;margin-bottom:9px}
  .library-top h2{font-size:20px;line-height:1.25}
  .library-top p{font-size:10px}
  .library-controls{width:100%;justify-content:space-between;gap:6px}
  .sort-control{flex:1;min-width:0}
  .sort-control select{width:100%;max-width:none;padding:9px 7px;font-size:9px}
  .play-all-button{padding:9px 10px;font-size:9px}
  .song-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .song-card{border-radius:10px}
  .song-card-body{padding:8px}
  .song-title{font-size:11px;min-height:31px}
  .song-artist{font-size:9px}
  .song-card-meta{font-size:7px;margin-top:7px}
  .mini-action{font-size:7px;padding:6px 1px;gap:2px}
  .quick-play{opacity:1;transform:none;width:31px;height:31px;right:6px;bottom:6px}
  .page-footer{font-size:8px;margin-top:17px}
  .player-head{padding:13px}
  .player-head h2{font-size:16px}
  .now-playing-meta{padding:11px}
  .player-controls{gap:12px}
  .queue-card{padding:12px}
  .playlist-dialog form{padding:19px}
}
@media(max-width:390px){
  .hero-card{min-height:252px}
  .hero-copy{max-width:79%;padding-left:13px}
  .hero-card h1{font-size:27px}
  .hero-copy p{font-size:9px}
  .hero-stats{gap:4px;max-width:76%}
  .hero-stats span{font-size:4.6px}
  .hero-primary{font-size:9px}
  .hero-secondary{font-size:8px}
  .talent-card{flex-basis:51px}
  .talent-image{width:40px;height:43px}
  .discovery-card{gap:4px}
  .discovery-card small{font-size:6px}
  .song-grid{gap:6px}
  .song-title{font-size:10px}
}


/* Randomised official talent roster + reachable mobile player + clearer sorting */
.stage-talent{
  z-index:2;bottom:22px;height:calc(100% - 28px);max-height:220px;
  width:auto;max-width:38%;object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 8px 16px #03030b65);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 83%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 83%,transparent 100%);
  transition:opacity .2s ease,transform .25s ease;
}
.stage-left{left:0;max-width:35%;height:calc(100% - 34px);opacity:.78;z-index:2}
.stage-center{left:30%;max-width:40%;height:calc(100% - 22px);z-index:4}
.stage-right{right:0;max-width:35%;height:calc(100% - 31px);opacity:.9;z-index:3}
.hero-stage{overflow:hidden}
.talent-strip{gap:7px}
.talent-card{flex:0 0 76px;gap:3px;padding:3px 3px 5px;background:transparent;border-color:transparent;box-shadow:none}
.talent-card:hover,.talent-card.selected{transform:translateY(-2px);border-color:#554875;background:linear-gradient(180deg,#25213d80,transparent);box-shadow:none}
.talent-image{width:66px;height:70px;border-radius:13px;background:radial-gradient(ellipse at 50% 32%,var(--talent),#141529 80%);overflow:hidden}
.talent-image img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  object-fit:cover;object-position:center top;transform:none;filter:drop-shadow(0 4px 7px #0005);
}
.talent-image:after{background:linear-gradient(transparent 68%,#111126cf)}
.talent-card:hover .talent-image img,.talent-card.selected .talent-image img{transform:scale(1.045)}
.talent-image i{inset:auto 0 9px;font-size:15px;text-shadow:0 1px 6px #101020;opacity:.8}
.talent-card strong{max-width:100%;font-size:10px;font-weight:850;letter-spacing:-.15px}
.sort-direction{
  flex:none;width:39px;height:39px;display:grid;place-items:center;
  border:1px solid #4a426f;border-radius:10px;background:#1d1b36;
  color:#e9dcff;font-size:21px;font-weight:900;line-height:1;
  transition:background .15s,border-color .15s,transform .15s;
}
.sort-direction:hover{border-color:var(--pink);background:#332342;color:white;transform:translateY(-1px)}
.sort-direction[data-direction="asc"]{color:var(--cyan)}
.mobile-mini-player{display:none}
.mobile-mini-player[hidden]{display:none!important}

@media(min-width:1221px){
  .talent-card{flex-basis:70px}
  .talent-image{width:61px;height:67px}
}
@media(max-width:970px) and (min-width:681px){
  .stage-left{left:-2%;max-width:38%}
  .stage-center{left:29%;max-width:42%}
  .stage-right{right:-2%;max-width:37%}
  .talent-card{flex-basis:65px}
  .talent-image{width:56px;height:61px}
  .library-controls{gap:6px}
  .sort-direction{width:36px;height:38px}
}
@media(max-width:680px){
  body{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  body.has-mobile-player{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  body.mobile-player-open{overflow:hidden}
  body.mobile-player-open::before{
    content:"";position:fixed;inset:0;z-index:69;background:#03030bc9;
    backdrop-filter:blur(3px);
  }
  .hero-stage{left:22%;right:0;top:0;bottom:0;opacity:.85}
  .stage-talent{bottom:20px;height:calc(100% - 25px);max-height:none}
  .stage-left{left:-2%;max-width:39%;height:calc(100% - 31px);opacity:.7}
  .stage-center{left:28%;max-width:44%;height:calc(100% - 21px)}
  .stage-right{right:-3%;max-width:38%;height:calc(100% - 29px);opacity:.84}
  .talent-strip{gap:4px}
  .talent-card{flex-basis:65px;padding:2px 1px 4px}
  .talent-image{width:57px;height:61px;border-radius:12px}
  .talent-card strong{font-size:9px}
  .talent-image i{font-size:13px;bottom:7px}
  .library-controls{display:grid;grid-template-columns:minmax(0,1fr) 38px auto;align-items:end;gap:6px}
  .sort-control{min-width:0}
  .sort-control select{width:100%;max-width:none}
  .sort-direction{width:38px;height:37px}
  .play-all-button{height:37px;padding:8px 9px;justify-content:center}
  .mobile-mini-player:not([hidden]){
    position:fixed;z-index:80;left:9px;right:9px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    min-height:66px;display:grid;
    grid-template-columns:45px minmax(0,1fr) 40px 34px;
    align-items:center;gap:7px;padding:8px 9px;
    border:1px solid #655184;border-radius:17px;
    background:linear-gradient(115deg,#19172df5,#171e32f5);
    box-shadow:0 12px 35px #0009,0 0 0 1px #ffffff08;
    backdrop-filter:blur(20px);
  }
  .mobile-mini-thumb{width:45px;height:45px;object-fit:cover;border-radius:11px;background:#292342;border:1px solid #ffffff20}
  .mobile-mini-info{
    min-width:0;display:grid;gap:3px;padding:3px 2px;
    border:0;background:transparent;color:#f8f5ff;text-align:left;
  }
  .mobile-mini-info strong,.mobile-mini-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-mini-info strong{font-size:11px;font-weight:900;line-height:1.3}
  .mobile-mini-info small{font-size:9px;color:#a7a5c8;line-height:1.3}
  .mobile-mini-control{
    width:34px;height:36px;display:grid;place-items:center;
    border:0;border-radius:10px;background:transparent;color:#e4dafb;
    font-size:18px;font-weight:900;
  }
  .mobile-mini-play{width:39px;height:39px;border:1px solid #ffabe1;border-radius:50%;background:linear-gradient(135deg,#ff7cc7,#a18aff);color:#fff;font-size:17px;box-shadow:0 5px 15px #dc64bd35}
  .mobile-mini-control:hover:not(:disabled){background:#342b50}
  .mobile-mini-play:hover:not(:disabled){background:linear-gradient(135deg,#ff92d2,#ae9bff)}
  .player-column.mobile-open{
    position:fixed;z-index:75;left:8px;right:8px;top:9vh;bottom:calc(83px + env(safe-area-inset-bottom));
    width:auto;max-height:calc(100dvh - 15vh - 95px);overflow:auto;
    display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:10px;
    padding:8px;border:1px solid #61507e;border-radius:19px;
    background:#111222f7;box-shadow:0 24px 70px #000b;backdrop-filter:blur(18px);
  }
  .player-column.mobile-open .player-card,.player-column.mobile-open .queue-card{box-shadow:none}
  .player-column.mobile-open .video-frame-wrap{min-height:0;aspect-ratio:16/9}
  .player-column.mobile-open .queue-list{max-height:190px}
}
@media(max-width:390px){
  .mobile-mini-player:not([hidden]){grid-template-columns:40px minmax(0,1fr) 37px 30px;gap:5px;padding:7px}
  .mobile-mini-thumb{width:40px;height:42px}
  .mobile-mini-info strong{font-size:10px}
  .mobile-mini-info small{font-size:8px}
  .mobile-mini-play{width:36px;height:36px}
  .mobile-mini-control{width:30px;font-size:16px}
  .library-controls{grid-template-columns:minmax(0,1fr) 34px auto;gap:5px}
  .sort-direction{width:34px}
}


/* Requested final polish: full-body banner art, matching sort controls, collapsible rail */
.sidebar-topline{position:relative;padding-right:31px}
.sidebar-brand-copy{display:grid;gap:3px;min-width:0}
.sidebar-collapse{
  position:absolute;top:0;right:0;width:27px;height:28px;display:grid;place-items:center;
  padding:0;border:1px solid #383655;border-radius:9px;
  background:#1b1b32;color:#c9c4e8;font-size:22px;line-height:1;font-weight:800;
  transition:background .15s,border-color .15s,color .15s;
}
.sidebar-collapse:hover{border-color:#a07ce8;background:#302345;color:#fff}
.library-controls{align-items:flex-end}
.sort-control select{
  display:block;height:40px;min-height:40px;box-sizing:border-box;
  padding-top:0;padding-bottom:0;line-height:1.2;
}
.play-all-button{
  height:40px;min-height:40px;align-self:flex-end;justify-content:center;
  box-sizing:border-box;padding-top:0;padding-bottom:0;line-height:1.2;
}
.sort-direction{display:none!important}
.stage-talent{
  object-fit:contain!important;object-position:center bottom!important;
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;mix-blend-mode:normal;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 87%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 87%,transparent 100%);
}
.stage-left{left:0;max-width:37%;opacity:.83}
.stage-center{left:30%;max-width:41%;height:calc(100% - 18px)}
.stage-right{right:0;max-width:36%;opacity:.94}
.talent-image img{object-fit:cover;object-position:center top}

@media(min-width:1221px){
  .app-layout{transition:grid-template-columns .22s ease,gap .22s ease}
  body.sidebar-collapsed .app-layout{
    grid-template-columns:76px minmax(0,1fr) minmax(420px,min(34vw,560px));
    gap:18px;
  }
  body.sidebar-collapsed .sidebar{padding:12px 7px;border-radius:15px}
  body.sidebar-collapsed .sidebar-topline{
    justify-content:center;padding:3px 0 13px;min-height:42px;
  }
  body.sidebar-collapsed .sidebar-orb{width:34px;height:34px;border-radius:11px}
  body.sidebar-collapsed .sidebar-brand-copy,
  body.sidebar-collapsed .sidebar-rule,
  body.sidebar-collapsed .filter-section,
  body.sidebar-collapsed .playlist-section,
  body.sidebar-collapsed .sidebar-footer{display:none!important}
  body.sidebar-collapsed .sidebar-collapse{top:-5px;right:-4px;width:23px;height:24px;font-size:19px}
  body.sidebar-collapsed .main-nav{gap:8px}
  body.sidebar-collapsed .nav-item{
    position:relative;
    flex-direction:column;justify-content:center;gap:4px;
    min-height:61px;padding:8px 2px 7px;border-radius:11px;
  }
  body.sidebar-collapsed .nav-item>.nav-label,
  body.sidebar-collapsed .nav-item>.nav-count{display:none!important}
  body.sidebar-collapsed .nav-symbol{
    display:inline-flex;align-items:center;justify-content:center;
    width:35px;height:34px;margin:0;border-radius:10px;
    font-size:21px;line-height:1;
  }
  body.sidebar-collapsed .nav-short-label{
    display:block!important;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;
    color:#bbb9da;font-size:7px;font-weight:900;
    letter-spacing:.35px;line-height:1.1;text-align:center;
  }
  body.sidebar-collapsed .nav-item[data-sidebar-song-type="all"] .nav-symbol{
    color:var(--cyan);background:#173044;border:1px solid #35627a;
  }
  body.sidebar-collapsed .nav-item[data-sidebar-song-type="original"] .nav-symbol{
    color:var(--mint);background:#17332f;border:1px solid #32695e;
  }
  body.sidebar-collapsed .nav-item[data-sidebar-song-type="cover"] .nav-symbol{
    color:var(--pink);background:#39203c;border:1px solid #70436d;
  }
  body.sidebar-collapsed .nav-item[data-view="favorites"] .nav-symbol{
    color:var(--pink);background:#39203c;border:1px solid #70436d;
  }
  body.sidebar-collapsed .nav-item[data-tooltip]::after{
    content:attr(data-tooltip);
    position:absolute;z-index:200;left:calc(100% + 10px);top:50%;
    transform:translate(-4px,-50%);
    padding:7px 10px;border:1px solid #514773;border-radius:8px;
    background:#17162d;color:#f8f5ff;box-shadow:0 8px 24px #0008;
    font-size:11px;font-weight:900;white-space:nowrap;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .14s ease,transform .14s ease,visibility .14s;
  }
  body.sidebar-collapsed .nav-item[data-tooltip]:hover::after,
  body.sidebar-collapsed .nav-item[data-tooltip]:focus-visible::after{
    opacity:1;visibility:visible;transform:translate(0,-50%);
  }
  body.sidebar-collapsed .catalogue-column{min-width:0}
  body.sidebar-collapsed .hero-card{grid-template-columns:minmax(0,1fr) minmax(320px,.95fr)}
  body.sidebar-collapsed .hero-stage{min-width:0}
  body.sidebar-collapsed .player-column{min-width:0}
  body.sidebar-collapsed .video-frame-wrap{aspect-ratio:16/9;min-height:0}
}
@media(min-width:1221px) and (max-width:1500px){
  body.sidebar-collapsed .app-layout{grid-template-columns:72px minmax(0,1fr) minmax(385px,33vw);gap:14px;padding-inline:16px}
}
@media(max-width:1220px){
  .sidebar-collapse{display:none}
}
@media(max-width:970px){
  .library-controls{align-items:flex-end}
  .sort-control select,.play-all-button{height:38px;min-height:38px}
}
@media(max-width:680px){
  .library-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:7px}
  .sort-control select,.play-all-button{height:37px;min-height:37px}
}


/* Catalogue type filters: originals and covers remain one searchable library. */
.music-type-filter{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:-3px 0 15px}
.music-type-button{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid #343557;border-radius:9px;background:#15162d;color:#aeb2d4;font-size:11px;font-weight:900;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.music-type-button span{display:inline-flex;align-items:center;justify-content:center;min-width:21px;padding:2px 5px;border-radius:6px;background:#252643;color:#9298bf;font:9px 'DM Mono',monospace}
.music-type-button:hover{border-color:#625786;color:#fff}
.music-type-button.active{border-color:#7762a6;background:linear-gradient(110deg,#342449,#222847);color:#fff;box-shadow:inset 0 0 0 1px #ffffff06}
.music-type-button.active span{background:#49315d;color:#ffb3e2}
.song-kind{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:3px 5px;border:1px solid transparent;border-radius:5px;font:8px 'DM Mono',monospace;letter-spacing:.35px}
.song-kind-original{border-color:#376175;background:#122c3b;color:#8ce8ff}
.song-kind-cover{border-color:#784369;background:#321c38;color:#ff9edb}

/* Natural-ratio cut-outs with a clear top safe zone for the source badge. */
.hero-actions{display:none!important}
.hero-card{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr)}
.hero-copy{max-width:500px}
.hero-copy p{max-width:400px}
.hero-stage{position:relative;min-width:0;overflow:hidden;isolation:isolate}
.stage-talent{
  position:absolute!important;
  top:auto!important;
  bottom:0!important;
  height:calc(100% - 44px)!important;
  max-height:none!important;
  width:auto!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  opacity:1!important;
  filter:drop-shadow(0 10px 18px #02030bb0)!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  mix-blend-mode:normal!important;
  transform:none!important;
  transform-origin:center bottom!important;
  transition:filter .2s ease!important;
}
.stage-left{left:1%!important;right:auto!important;max-width:none!important;height:calc(100% - 44px)!important;z-index:2!important;opacity:.99!important}
.stage-center{left:14%!important;right:auto!important;max-width:none!important;height:calc(100% - 44px)!important;z-index:4!important}
.stage-right{left:auto!important;right:24%!important;max-width:none!important;height:calc(100% - 44px)!important;z-index:3!important;opacity:1!important}
.stage-ring{left:53%;top:49%;opacity:.42}
.stage-chip{top:12px;right:10px;z-index:7;white-space:nowrap}
.hero-stage:before{z-index:6;background:linear-gradient(90deg,#211d4530 0%,transparent 20%,transparent 81%,#172b4430 100%)}
.hero-stats{position:relative;z-index:7}
.discovery-fresh .discovery-symbol{color:#76eaff}
.discovery-fresh strong{color:#f4efff}

@media(min-width:1221px){
  .hero-card{grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)}
  .hero-copy{padding-left:28px}
}
@media(min-width:1500px){
  .stage-left{left:1%!important}
  .stage-center{left:14%!important}
  .stage-right{right:24%!important}
}
@media(max-width:1220px) and (min-width:681px){
  .hero-card{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
  .stage-left{left:-2%!important;height:calc(100% - 44px)!important}
  .stage-center{left:12%!important;height:calc(100% - 44px)!important}
  .stage-right{right:21%!important;height:calc(100% - 44px)!important}
}
@media(max-width:680px){
  .hero-card{display:block;position:relative;min-height:340px}
  .hero-copy{position:relative;z-index:4;padding:20px 18px 14px;max-width:78%}
  .hero-card h1{font-size:clamp(29px,8vw,36px);max-width:270px}
  .hero-copy p{font-size:11px;max-width:260px}
  .hero-stats{margin-top:16px;gap:7px}
  .hero-stage{position:absolute;z-index:1;top:0;right:0;bottom:0;left:22%;height:auto;min-height:0;opacity:1}
  .stage-talent{bottom:0!important;height:calc(100% - 44px)!important;max-height:none!important}
  .stage-left{left:-4%!important;height:calc(100% - 44px)!important;opacity:.82!important}
  .stage-center{left:12%!important;height:calc(100% - 44px)!important}
  .stage-right{right:21%!important;height:calc(100% - 44px)!important;opacity:.9!important}
  .stage-chip{top:9px;right:8px;font-size:6px;padding:6px 7px}
  .hero-stage:before{background:linear-gradient(90deg,#211d45b0 0%,#211d4560 32%,transparent 80%)}
  .hero-footer{position:relative;z-index:9}
  .music-type-filter{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px;scrollbar-width:thin}
  .music-type-button{flex:none;padding:7px 9px}
  .song-kind{font-size:7px;padding:2px 4px}
}

/* Single featured-talent banner: poster-like scale, natural proportions, no competing cut-outs. */
.hero-stage{
  min-width:0;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 70% 58%,#6d8cff22 0%,transparent 52%),
    radial-gradient(ellipse at 77% 82%,#42d4ed28 0%,transparent 43%);
}
.hero-stage:after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 68% 60%,#8f8eff20 0%,transparent 60%);
}
.hero-stage:before{
  z-index:1!important;
  background:linear-gradient(90deg,#211d4560 0%,#211d4512 21%,transparent 48%,#172b4418 100%)!important;
}
.stage-talent.stage-featured{
  position:absolute!important;
  z-index:3!important;
  left:auto!important;
  right:4%!important;
  top:auto!important;
  bottom:-16px!important;
  width:auto!important;
  height:calc(100% - 32px)!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  opacity:1!important;
  transform:none!important;
  transform-origin:center bottom!important;
  filter:drop-shadow(0 14px 24px #03030bc4) drop-shadow(0 0 24px #85dfff15)!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  mix-blend-mode:normal!important;
}
.stage-chip{z-index:8!important;top:12px!important;right:10px!important}
.stage-spark.sparkle-c{display:none!important}
.sparkle-a{z-index:4!important;top:24%!important;right:13%!important}
.sparkle-b{z-index:4!important;top:48%!important;left:7%!important}
.stage-ring{z-index:0!important;left:61%!important;top:55%!important;opacity:.58!important}
.hero-footer{z-index:9!important}

@media(min-width:1221px){
  .stage-talent.stage-featured{right:5%!important;height:calc(100% - 28px)!important;bottom:-14px!important}
}
@media(max-width:1220px) and (min-width:681px){
  .stage-talent.stage-featured{right:1%!important;height:calc(100% - 40px)!important;bottom:-12px!important}
  .stage-chip{max-width:calc(100% - 20px);font-size:7px!important}
}
@media(max-width:680px){
  .hero-stage{left:20%!important;right:0!important;top:0!important;bottom:0!important;opacity:1!important}
  .stage-talent.stage-featured{right:-2%!important;bottom:-8px!important;height:calc(100% - 52px)!important;max-height:none!important;opacity:.82!important}
  .stage-chip{top:9px!important;right:8px!important;font-size:6px!important;padding:6px 7px!important}
  .hero-stage:before{background:linear-gradient(90deg,#211d45b8 0%,#211d4570 34%,transparent 82%)!important}
}
@media(max-width:390px){
  .stage-talent.stage-featured{right:-7%!important;height:calc(100% - 67px)!important;opacity:.75!important}
  .stage-chip{max-width:calc(100% - 14px);font-size:5.5px!important}
}

/* Featured talent spotlight refinement: increase presence while reserving the badge corner. */
.hero-stage{
  background:
    radial-gradient(ellipse at 76% 55%,#86a6ff30 0%,#657de814 34%,transparent 62%),
    radial-gradient(ellipse at 74% 84%,#45ddf23b 0%,transparent 48%),
    radial-gradient(ellipse at 64% 44%,#ff79cf12 0%,transparent 58%)!important;
}
.hero-stage:after{
  background:
    radial-gradient(ellipse at 74% 61%,#95a6ff1c 0%,transparent 53%),
    linear-gradient(180deg,#11122a08 45%,#11152d4a 100%)!important;
}
.stage-talent.stage-featured{
  right:1%!important;
  bottom:-27px!important;
  height:calc(100% + 28px)!important;
  filter:
    drop-shadow(0 16px 23px #03030bd0)
    drop-shadow(0 0 15px #83dfff1e)
    drop-shadow(-9px 0 18px #b5a0ff13)!important;
}
.stage-chip{
  left:12px!important;
  right:auto!important;
  top:12px!important;
  z-index:8!important;
  box-shadow:0 6px 18px #05061855,0 0 18px #6e91ff12!important;
  backdrop-filter:blur(12px);
}
.stage-ring{left:65%!important;top:56%!important;opacity:.65!important}
.sparkle-a{top:27%!important;right:10%!important;font-size:22px!important}
.sparkle-b{top:52%!important;left:8%!important}
@media(min-width:1221px){
  .stage-talent.stage-featured{right:1%!important;bottom:-30px!important;height:calc(100% + 34px)!important}
}
@media(max-width:1220px) and (min-width:681px){
  .stage-talent.stage-featured{right:-2%!important;bottom:-20px!important;height:calc(100% + 6px)!important}
  .stage-chip{left:8px!important;right:auto!important;max-width:calc(100% - 20px)}
}
@media(max-width:680px){
  .stage-talent.stage-featured{right:-4%!important;bottom:-12px!important;height:calc(100% - 22px)!important;opacity:.9!important}
  .stage-chip{left:auto!important;right:8px!important;top:9px!important;max-width:calc(100% - 14px)}
  .stage-ring{left:66%!important;top:56%!important}
}
@media(max-width:390px){
  .stage-talent.stage-featured{right:-8%!important;height:calc(100% - 36px)!important;opacity:.84!important}
}


/* Timed single-talent hero: clean stage with a slow, cinematic cross-fade. */
.stage-talent.stage-featured{
  right:1%!important;
  bottom:-30px!important;
  height:calc(100% + 34px)!important;
  transform:scale(1.12)!important;
  transform-origin:center bottom!important;
  transition:opacity .68s ease,transform .68s ease,filter .68s ease!important;
}
.stage-talent.stage-featured.is-entering{
  z-index:4!important;
  opacity:0!important;
  transform:translateY(12px) scale(1.04)!important;
}
.stage-talent.stage-featured.is-visible{
  z-index:4!important;
  opacity:1!important;
  transform:scale(1.12)!important;
}
.stage-talent.stage-featured.is-exiting{
  z-index:3!important;
  opacity:0!important;
  transform:translateY(5px) scale(1.07)!important;
}
.stage-chip{display:none!important}
@media(max-width:1220px) and (min-width:681px){
  .stage-talent.stage-featured{right:-2%!important;bottom:-20px!important;height:calc(100% + 6px)!important;transform:scale(1.07)!important}
  .stage-talent.stage-featured.is-visible{transform:scale(1.07)!important}
}
@media(max-width:680px){
  .stage-talent.stage-featured{right:-4%!important;bottom:-12px!important;height:calc(100% - 22px)!important;opacity:.9!important;transform:scale(1.04)!important}
  .stage-talent.stage-featured.is-visible{transform:scale(1.04)!important}
  .stage-talent.stage-featured.is-entering{transform:translateY(9px) scale(1.01)!important}
  .stage-talent.stage-featured.is-exiting{transform:translateY(4px) scale(1.02)!important}
}
@media(prefers-reduced-motion:reduce){
  .stage-talent.stage-featured{transition:none!important}
}


/* Final hero framing: give the featured talent room for both head and feet. */
.hero-card{
  min-height:480px;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
}
.hero-copy{max-width:530px}
.hero-copy p{max-width:450px}
.hero-stage{min-height:450px}
.stage-talent.stage-featured{
  right:0!important;
  bottom:29px!important;
  top:auto!important;
  height:calc(100% - 41px)!important;
  width:auto!important;
  max-width:100%!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:none!important;
  transform-origin:center bottom!important;
}
.stage-talent.stage-featured.is-entering{
  transform:translateY(8px)!important;
}
.stage-talent.stage-featured.is-visible{
  transform:none!important;
}
.stage-talent.stage-featured.is-exiting{
  transform:translateY(5px)!important;
}
.hero-footer{z-index:9!important}
@media(max-width:1699px) and (min-width:1221px){
  .hero-card{min-height:450px}
  .hero-stage{min-height:430px}
  .stage-talent.stage-featured{bottom:27px!important;height:calc(100% - 38px)!important}
}
@media(max-width:1220px) and (min-width:971px){
  .hero-card{min-height:430px;grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
  .hero-stage{min-height:410px}
  .stage-talent.stage-featured{bottom:27px!important;height:calc(100% - 38px)!important}
}
@media(max-width:970px) and (min-width:681px){
  .hero-card{min-height:390px;grid-template-columns:minmax(0,1.02fr) minmax(0,.88fr)}
  .hero-stage{min-height:370px}
  .stage-talent.stage-featured{bottom:26px!important;height:calc(100% - 36px)!important;max-width:100%!important}
}
@media(max-width:680px){
  .hero-card{min-height:350px}
  .hero-stage{left:20%!important;right:0!important;top:0!important;bottom:0!important;min-height:0!important;height:auto!important}
  .stage-talent.stage-featured{right:0!important;bottom:27px!important;height:calc(100% - 39px)!important;max-width:100%!important;opacity:.86!important;transform:none!important}
  .stage-talent.stage-featured.is-visible{transform:none!important;opacity:.9!important}
  .stage-talent.stage-featured.is-entering{transform:translateY(5px)!important}
  .stage-talent.stage-featured.is-exiting{transform:translateY(3px)!important}
}
@media(max-width:390px){
  .hero-card{min-height:335px}
  .stage-talent.stage-featured{bottom:27px!important;height:calc(100% - 47px)!important;opacity:.82!important}
}


/* Readability pass: strengthen the small labels and card metadata without enlarging the whole interface. */
.hero-eyebrow{font-size:10px!important;letter-spacing:.5px!important;line-height:1.45}
.hero-stats span{font-size:9px!important;line-height:1.35;letter-spacing:.15px}
.section-kicker{font-size:10px!important;letter-spacing:.75px!important}
.talent-section-note{font-size:9.5px!important}
.talent-card small{font-size:9px!important;letter-spacing:.15px}
.nav-count,.muted-count,.artist-check small,.playlist-row small{font-size:10.5px!important}
.sidebar-rule{font-size:10px!important;letter-spacing:.75px!important}
.filter-hint{font-size:11px!important;line-height:1.5}
.catalogue-status{font-size:11px!important}
.sidebar-footer p{font-size:10px!important;line-height:1.55}
.brand-copy small{font-size:9px!important;letter-spacing:.8px!important}
.top-live{font-size:9px!important;letter-spacing:.35px!important}
.song-card-meta{font-size:11px!important;gap:7px 9px;flex-wrap:wrap;line-height:1.45}
.song-card-meta span:not(.song-kind){font-size:11px!important;color:#a4aacb}
.song-kind{font-size:9px!important;letter-spacing:.15px!important;padding:4px 6px!important}
.mini-action{font-size:11px!important;padding:8px 4px}
.section-heading p,.library-top p{font-size:13px!important;line-height:1.55}
.result-count{font-size:11px!important}
.sort-control>span{font-size:11px!important}
.sort-control select,.playlist-select-row select{font-size:12px!important}
.discovery-card small{font-size:11px!important;line-height:1.45}
.player-kicker{font-size:9px!important;letter-spacing:.5px!important}
.player-status-row,.playing-text span,.queue-track-info span{font-size:11px!important;line-height:1.45}
.queue-track-info strong{font-size:12px!important}
.playlist-select-label{font-size:11px!important}
.player-footnote,.page-footer{font-size:10px!important;line-height:1.6}
.hero-footer{font-size:10.5px!important}
.artist-search input{font-size:13px!important}

@media(max-width:1220px){
  .hero-stats span{font-size:8.5px!important}
  .song-card-meta,.song-card-meta span:not(.song-kind){font-size:10.5px!important}
  .mini-action{font-size:10px!important}
}
@media(max-width:970px){
  .brand-copy small{font-size:8px!important;letter-spacing:.45px!important}
  .hero-eyebrow{font-size:8.5px!important;letter-spacing:.25px!important}
  .hero-stats span{font-size:8px!important}
  .player-kicker{font-size:8.5px!important}
  .section-kicker{font-size:9.5px!important}
}
@media(max-width:680px){
  .hero-eyebrow{font-size:8.5px!important;letter-spacing:.25px!important}
  .hero-copy p{font-size:12px!important;line-height:1.65!important}
  .hero-stats span{font-size:7.5px!important;white-space:normal!important;line-height:1.3!important}
  .section-kicker{font-size:9.5px!important}
  .song-title{font-size:12px!important;line-height:1.4!important}
  .song-artist{font-size:10.5px!important}
  .song-card-meta{font-size:10px!important;gap:6px 8px;margin-top:8px}
  .song-card-meta span:not(.song-kind){font-size:10px!important}
  .song-kind{font-size:8.8px!important;padding:3px 5px!important}
  .mini-action{font-size:9.5px!important;padding:6px 2px;gap:3px}
  .discovery-card strong{font-size:11px!important}
  .discovery-card small{font-size:9.5px!important;white-space:normal!important}
  .player-kicker{font-size:8.5px!important}
  .player-status-row,.playing-text span,.queue-track-info span{font-size:10.5px!important}
  .page-footer{font-size:9.5px!important}
}
@media(max-width:390px){
  .hero-eyebrow{font-size:8px!important;letter-spacing:.1px!important}
  .hero-card h1{font-size:31px!important;line-height:1.04!important}
  .hero-copy p{font-size:11px!important;line-height:1.55!important}
  .hero-stats span{font-size:7px!important}
  .song-card-meta{font-size:9.5px!important;gap:5px 7px}
  .song-card-meta span:not(.song-kind){font-size:9.5px!important}
  .song-kind{font-size:8.3px!important;padding:3px 4px!important}
  .mini-action{font-size:8.5px!important;padding:5px 1px;gap:2px}
  .discovery-card small{font-size:9px!important}
  .player-kicker{font-size:8px!important}
}


/* Mobile layout repair: stack hero copy/art instead of letting the portrait sit behind text. */
@media(max-width:680px){
  .hero-card{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto 178px!important;
    min-height:0!important;
    overflow:hidden!important;
    border-radius:18px!important;
  }
  .hero-copy{
    grid-column:1!important;
    grid-row:1!important;
    z-index:4!important;
    width:100%!important;
    max-width:none!important;
    padding:18px 17px 8px!important;
    align-self:start!important;
  }
  .hero-eyebrow{
    max-width:100%!important;
    font-size:9px!important;
    line-height:1.45!important;
    letter-spacing:.35px!important;
  }
  .hero-card h1{
    max-width:100%!important;
    margin:10px 0 8px!important;
    font-size:clamp(27px,7.8vw,32px)!important;
    line-height:1.06!important;
    letter-spacing:-1.1px!important;
    overflow-wrap:normal!important;
  }
  .hero-copy p{
    max-width:none!important;
    margin:0!important;
    font-size:12px!important;
    line-height:1.55!important;
  }
  .hero-stats{
    max-width:none!important;
    gap:10px!important;
    margin:12px 0 0!important;
    align-items:flex-start!important;
  }
  .hero-stats div{gap:3px!important}
  .hero-stats strong{font-size:15px!important;line-height:1.2!important}
  .hero-stats span{
    font-size:8.2px!important;
    line-height:1.3!important;
    letter-spacing:0!important;
    white-space:normal!important;
  }
  .hero-stats>i{height:25px!important;flex:none}
  .hero-stage{
    position:relative!important;
    grid-column:1!important;
    grid-row:2!important;
    inset:auto!important;
    width:100%!important;
    height:178px!important;
    min-height:0!important;
    margin:0!important;
    opacity:1!important;
    overflow:hidden!important;
    align-self:stretch!important;
  }
  .hero-stage:before{
    background:linear-gradient(180deg,#211d4500 0%,#211d4508 65%,#11142b35 100%)!important;
  }
  .hero-stage:after{
    background:
      radial-gradient(ellipse at 67% 45%,#93a7ff25 0%,transparent 56%),
      radial-gradient(ellipse at 67% 82%,#45ddf22a 0%,transparent 53%)!important;
  }
  .stage-ring{left:63%!important;top:48%!important}
  .stage-ring.ring-a{width:64%!important}
  .stage-ring.ring-b{width:47%!important}
  .stage-ring.ring-c{width:30%!important}
  .stage-talent.stage-featured{
    left:auto!important;
    right:5%!important;
    top:auto!important;
    bottom:24px!important;
    height:calc(100% - 28px)!important;
    width:auto!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    opacity:1!important;
    transform:none!important;
  }
  .stage-talent.stage-featured.is-entering{
    opacity:0!important;
    transform:translateY(7px)!important;
  }
  .stage-talent.stage-featured.is-visible{
    opacity:1!important;
    transform:none!important;
  }
  .stage-talent.stage-featured.is-exiting{
    opacity:0!important;
    transform:translateY(4px)!important;
  }
  .hero-footer{
    position:absolute!important;
    z-index:9!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    min-height:23px!important;
    padding:4px 7px!important;
    font-size:9px!important;
    background:#101127b8!important;
  }
  .talent-section{margin-top:18px!important}
  .section-heading{margin-bottom:8px!important}
  .section-heading h2{font-size:17px!important}
  .talent-strip{gap:6px!important;padding:2px 2px 8px!important}
  .talent-card{flex-basis:67px!important;padding:3px 2px 5px!important;gap:3px!important}
  .talent-image{width:55px!important;height:59px!important}
  .talent-card strong{font-size:9.5px!important}
  .quick-discovery{gap:8px!important;margin:9px 0 18px!important}
  .discovery-card{min-height:55px!important;padding:8px!important;gap:7px!important}
  .discovery-card strong{font-size:10.5px!important;line-height:1.25!important}
  .discovery-card small{font-size:9px!important;line-height:1.35!important;white-space:normal!important}
  .library-top{gap:9px!important;margin-bottom:12px!important}
  .library-top h2{font-size:21px!important}
  .library-top p{font-size:11px!important;line-height:1.45!important}
  .library-controls{grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important}
  .sort-control>span{font-size:11px!important}
  .sort-control select{height:40px!important;min-height:40px!important;font-size:11px!important;padding:8px 9px!important}
  .play-all-button{height:40px!important;min-height:40px!important;font-size:10px!important;padding:8px 10px!important}
  .music-type-filter{gap:6px!important;margin-bottom:12px!important}
  .music-type-button{font-size:10.5px!important;padding:8px 9px!important;gap:6px!important}
  .music-type-button span{font-size:9px!important}
  .song-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .song-card{min-width:0!important;border-radius:12px!important}
  .song-card-body{padding:9px!important}
  .song-title{font-size:12px!important;line-height:1.4!important;min-height:34px!important}
  .song-artist{font-size:10.5px!important}
  .song-card-meta{font-size:10px!important;gap:6px!important;line-height:1.4!important}
  .song-card-meta span:not(.song-kind){font-size:10px!important}
  .song-kind{font-size:9px!important;padding:3px 5px!important}
  .song-card-actions{gap:2px!important;margin-top:9px!important;padding-top:7px!important}
  .mini-action{font-size:9.5px!important;padding:6px 1px!important;gap:3px!important}
  .mobile-mini-player:not([hidden]){z-index:80!important}
  .player-column.mobile-open{
    z-index:85!important;
    top:calc(env(safe-area-inset-top) + 12px)!important;
    bottom:calc(88px + env(safe-area-inset-bottom))!important;
    max-height:calc(100dvh - 112px - env(safe-area-inset-bottom))!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
  }
  .player-column.mobile-open .video-frame-wrap{aspect-ratio:16/9!important}
  .player-column.mobile-open .now-playing-meta{padding:10px!important}
  .player-column.mobile-open .queue-card{padding:11px!important}
  .player-column.mobile-open .queue-list{max-height:150px!important;overflow:auto!important}
}
@media(max-width:390px){
  .hero-card{grid-template-rows:auto 164px!important}
  .hero-stage{height:164px!important}
  .hero-copy{padding:16px 14px 7px!important}
  .hero-card h1{font-size:27px!important;letter-spacing:-.9px!important}
  .hero-copy p{font-size:11.5px!important}
  .hero-stats{gap:7px!important}
  .hero-stats strong{font-size:14px!important}
  .hero-stats span{font-size:7.6px!important}
  .talent-card{flex-basis:62px!important}
  .talent-image{width:51px!important;height:55px!important}
  .song-grid{gap:7px!important}
  .song-card-body{padding:8px!important}
  .song-title{font-size:11.5px!important}
  .song-card-meta,.song-card-meta span:not(.song-kind){font-size:9.3px!important}
  .song-kind{font-size:8.5px!important}
  .mini-action{font-size:8.8px!important;gap:2px!important}
}


/* Mobile player final fix: minimized means return to the page, expanded means a compact-height overlay. */
@media(max-width:680px){
  .player-column.mobile-open{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    top:calc(env(safe-area-inset-top) + 12px)!important;
    bottom:auto!important;
    height:auto!important;
    width:auto!important;
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 150px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    align-content:start!important;
  }
  .player-column.mobile-open .player-card,
  .player-column.mobile-open .queue-card{
    min-height:0!important;
    flex:none!important;
  }
  .player-column.mobile-open .video-frame-wrap{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:16/9!important;
  }
  .player-column.mobile-open .queue-list{
    max-height:130px!important;
    overflow-y:auto!important;
  }
  .player-column.mobile-open .panel-collapse{
    min-width:42px!important;
    min-height:42px!important;
    border-color:#ff7acb!important;
    font-size:23px!important;
    touch-action:manipulation;
  }
  .mobile-tool[aria-expanded="true"]{
    border-color:#8d75c5!important;
    background:#262044!important;
    color:#fff!important;
  }
}


/* Expanded sidebar shows full category labels; compact rail uses distinct icons and short labels. */
.nav-short-label{display:none}
.nav-label{min-width:0}
.nav-item[data-sidebar-song-type="all"] .nav-symbol{color:var(--cyan)}
.nav-item[data-sidebar-song-type="original"] .nav-symbol{color:var(--mint)}
.nav-item[data-sidebar-song-type="cover"] .nav-symbol{color:var(--pink)}
.nav-item[data-sidebar-song-type="cover"] .nav-symbol{font-family:system-ui,sans-serif}
@media(prefers-reduced-motion:reduce){
  body.sidebar-collapsed .nav-item[data-tooltip]::after{transition:none}
}


/* Search should be an obvious action, not an unexplained keyboard shortcut. */
.global-search{gap:9px;padding-right:6px}
.global-search-button{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:78px;min-height:34px;padding:7px 12px;
  border:1px solid #4b7390;border-radius:9px;
  background:linear-gradient(115deg,#1d759b,#5369b5);
  color:#fff;font-size:12px;font-weight:900;letter-spacing:.1px;
  white-space:nowrap;box-shadow:0 3px 10px #061c382e;
  transition:filter .15s ease,transform .15s ease,border-color .15s ease;
}
.global-search-button:hover{filter:brightness(1.12);border-color:#8bdff3;transform:translateY(-1px)}
.global-search-button:active{transform:translateY(0)}
.global-search-button:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
@media(max-width:680px){
  .global-search{gap:7px;padding-right:5px}
  .global-search-button{min-width:72px;min-height:34px;padding:7px 10px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .global-search-button{transition:none}
}


/* Search results: land at the library heading, below sticky navigation. */
#music-library{scroll-margin-top:100px}
@media(max-width:680px){
  #music-library{scroll-margin-top:174px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}


/* Numbered catalogue pagination */
.pagination{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:22px 8px 26px;
  margin-top:4px;
  color:#aeb2d4;
}
.pagination[hidden]{display:none!important}
.pagination-summary{
  font-size:11px;
  font-weight:800;
  line-height:1.4;
  text-align:center;
  color:#b9bbd8;
}
.pagination-summary span{color:#858bad;font-weight:600}
.pagination-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  max-width:100%;
}
.pagination-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:36px;
  height:36px;
  padding:0 9px;
  border:1px solid #343557;
  border-radius:9px;
  background:#15162d;
  color:#c5c8e4;
  font-size:12px;
  font-weight:800;
  line-height:1;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.pagination-button:hover:not(:disabled){
  border-color:#647ba9;
  background:#242646;
  color:#fff;
}
.pagination-button.active,
.pagination-button[aria-current="page"]{
  border-color:#6f9abb;
  background:linear-gradient(130deg,#225d7a,#4d4e91);
  color:#fff;
  box-shadow:0 3px 12px #050a1c40;
}
.pagination-button:disabled{opacity:.35;cursor:default}
.pagination-ellipsis{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:17px;
  color:#797fa7;
  font-size:14px;
}
@media(max-width:680px){
  .pagination{gap:10px;padding:18px 2px 23px}
  .pagination-summary{font-size:10px}
  .pagination-controls{gap:4px}
  .pagination-button{min-width:31px;height:34px;padding:0 7px;border-radius:8px;font-size:11px}
  .pagination-direction span{display:none}
  .pagination-ellipsis{min-width:10px}
}
@media(max-width:390px){
  .pagination-controls{gap:3px}
  .pagination-button{min-width:29px;height:32px;padding:0 6px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .pagination-button{transition:none}
}


/* Full-height visual talent browser, launched from the global search. */
.talent-picker-toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:7px 9px;border:1px solid #514875;border-radius:9px;background:linear-gradient(135deg,#282044,#192d42);color:#ded8ff;font-size:11px;font-weight:900;white-space:nowrap;transition:border-color .15s,background .15s}
.talent-picker-toggle>span:first-child{color:#8ee9ff;font-size:15px}
.talent-picker-toggle b{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:2px 5px;border-radius:6px;background:#373153;color:#d5c4ff;font:10px 'DM Mono',monospace}
.talent-picker-toggle:hover,.talent-picker-toggle.has-selection{border-color:#ad8cff;background:linear-gradient(135deg,#342450,#1e3a50);color:#fff}
.talent-picker-toggle.has-selection b{background:#ff74c8;color:#27152e}
#browse-all-talents,.browse-talents-button{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid #45416b;border-radius:10px;background:#191a34;color:#d5c9ff;font-size:11px;font-weight:900}
#browse-all-talents:hover,.browse-talents-button:hover{border-color:#a18aff;background:#282144;color:#fff}
#browse-all-talents span,.browse-talents-button span{color:var(--cyan);font-size:15px}
.talent-picker-dialog{width:min(1000px,calc(100vw - 28px));max-width:none;max-height:calc(100dvh - 28px);padding:0;border:1px solid #4b4a78;border-radius:20px;background:linear-gradient(155deg,#191a36,#101122 82%);color:var(--text);box-shadow:0 28px 100px #000c;overflow:hidden}
.talent-picker-dialog::backdrop{background:#050611bf;backdrop-filter:blur(7px)}
.talent-picker-shell{display:flex;flex-direction:column;gap:12px;height:min(84vh,820px);height:min(84dvh,820px);max-height:calc(100dvh - 30px);padding:22px}
.talent-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex:none}
.talent-picker-head h2{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:4px 0;font-size:23px;line-height:1.25;font-weight:900}
.talent-picker-head p{margin:0;color:#a7accd;font-size:12px}
.talent-picker-close{flex:none;width:38px;height:38px;display:grid;place-items:center;border:1px solid #3e3e62;border-radius:11px;background:#20213b;color:#d9d8f2;font-size:24px;line-height:1}
.talent-picker-close:hover{border-color:#ff8acb;color:#fff}
.talent-picker-search{flex:none;height:48px;margin:0;padding:0 13px;border-radius:12px}
.talent-picker-search>span{font-size:23px}
.talent-picker-search input{font-size:14px}
.talent-picker-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
#talent-picker-selected{color:#a9aed1;font-size:11px;font-weight:800}
.talent-picker-dialog .clear-filters{width:auto;flex:none;margin:0;padding:7px 10px;font-size:10px}
.talent-picker-dialog .clear-filters span{font-size:13px}
.talent-picker-dialog .artist-filters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-content:start;gap:10px;flex:1 1 auto;min-height:170px;overflow-y:auto;overflow-x:hidden;padding:4px 5px 12px;scrollbar-width:thin;scrollbar-color:#555582 transparent}
.talent-picker-dialog .artist-check{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-width:0;min-height:145px;padding:12px 7px 9px;border:1px solid #303153;border-radius:13px;background:linear-gradient(155deg,#20213f,#15162b 78%);color:#d7d8f0;text-align:center;transition:border-color .14s,background .14s,transform .14s}
.talent-picker-dialog .artist-check:hover{border-color:#7772ac;background:linear-gradient(155deg,#2b2a50,#191a32);transform:translateY(-2px)}
.talent-picker-dialog .artist-check:has(input:checked){border-color:#ff8bce;background:linear-gradient(155deg,#432645,#22203f);box-shadow:inset 0 0 0 1px #ff74c84a}
.talent-picker-dialog .artist-check input{position:absolute;z-index:3;top:8px;left:8px;width:17px;height:17px;margin:0;accent-color:var(--pink);cursor:pointer}
.talent-picker-dialog .artist-check .artist-avatar{display:block;width:76px;height:84px;flex:none;object-fit:contain;object-position:center bottom;border:1px solid #ffffff16;border-radius:11px 11px 5px 5px;background:radial-gradient(ellipse at 50% 35%,#48416f 0%,#252342 62%,#17172d 100%)}
.talent-picker-dialog .artist-check .artist-avatar-fallback{display:grid;place-items:center;color:#bca7ff;font-size:26px}
.talent-picker-dialog .artist-check .artist-name{display:block;width:100%;min-height:32px;overflow:hidden;text-overflow:ellipsis;white-space:normal;overflow-wrap:anywhere;color:#f1efff;font-size:11px;font-weight:900;line-height:1.35}
.talent-picker-dialog .artist-check small{margin:0;color:#9fa4ca;font:10px 'DM Mono',monospace}
.talent-picker-dialog .filter-empty{grid-column:1/-1;padding:20px;text-align:center}
.talent-picker-dialog .show-all{display:none!important}
.talent-picker-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:11px;border-top:1px solid #303150;flex:none}
.talent-picker-footer>span{color:#8f94b8;font-size:10px;line-height:1.4}
.talent-picker-done{flex:none;min-width:95px;padding:10px 17px;border:1px solid #85dff0;border-radius:10px;background:linear-gradient(120deg,#237b9b,#6859ad);color:#fff;font-size:12px;font-weight:900}
.talent-picker-done:hover{filter:brightness(1.13)}
@media(max-width:970px) and (min-width:681px){.global-search{gap:6px;padding-inline:9px}.global-search .search-icon{display:none}.talent-picker-toggle{gap:4px;padding:6px 7px;font-size:10px}.talent-picker-toggle b{min-width:17px;font-size:9px}}
@media(max-width:680px){
  .talent-picker-toggle{min-height:31px;padding:5px 7px;gap:4px;border-radius:8px;font-size:10px}
  .talent-picker-toggle>span:first-child{font-size:14px}.talent-picker-toggle b{min-width:16px;padding:2px 4px;font-size:9px}
  .global-search{gap:6px}.global-search input{min-width:0}.browse-all-talents{padding:7px 8px;font-size:10px}
  .talent-picker-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:16px}
  .talent-picker-shell{height:calc(100dvh - 18px);max-height:calc(100dvh - 18px);gap:9px;padding:12px}
  .talent-picker-head h2{font-size:19px}.talent-picker-head p{font-size:10px;line-height:1.4;max-width:260px}
  .talent-picker-close{width:33px;height:33px}.talent-picker-search{height:42px;padding:0 10px}.talent-picker-search input{font-size:12px}
  .talent-picker-toolbar{gap:7px}#talent-picker-selected{font-size:9px;line-height:1.4}
  .talent-picker-dialog .clear-filters{padding:6px 7px;font-size:9px;white-space:nowrap}
  .talent-picker-dialog .artist-filters{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;min-height:120px;padding:3px 2px 9px}
  .talent-picker-dialog .artist-check{gap:5px;min-height:123px;padding:8px 5px 7px;border-radius:11px}
  .talent-picker-dialog .artist-check input{top:6px;left:6px;width:16px;height:16px}
  .talent-picker-dialog .artist-check .artist-avatar{width:61px;height:68px;border-radius:9px 9px 4px 4px}
  .talent-picker-dialog .artist-check .artist-name{font-size:10px;min-height:28px}.talent-picker-dialog .artist-check small{font-size:9px}
  .talent-picker-footer{gap:8px;padding-top:8px}.talent-picker-footer>span{font-size:9px;max-width:68%}
  .talent-picker-done{min-width:70px;padding:8px 12px;font-size:11px}
  .talent-section .section-heading{align-items:center}.talent-strip{gap:6px}.talent-card{flex-basis:67px}
}
@media(max-width:390px){.talent-picker-toggle>span:nth-child(2){display:none}.talent-picker-toggle b{padding:2px 4px}.talent-picker-dialog .artist-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.talent-picker-dialog .artist-check{min-height:135px}.talent-picker-dialog .artist-check .artist-avatar{width:72px;height:78px}}
@media(prefers-reduced-motion:reduce){.talent-picker-toggle,.browse-all-talents,.browse-talents-button,.talent-picker-dialog .artist-check{transition:none}}

/* Talent picker: roomier portrait grid and responsive dialog. */
.talent-picker-toggle{display:flex;align-items:center;justify-content:center;gap:7px;flex:none;height:34px;padding:0 11px;border:1px solid #49416f;border-radius:10px;background:linear-gradient(135deg,#272344,#1b203b);color:#ddd6ff;font-size:11px;font-weight:900;white-space:nowrap;transition:border-color .15s,background .15s,box-shadow .15s}
.talent-picker-toggle>span:first-child{color:#d6adff;font-size:14px}
.talent-picker-toggle>b{padding:3px 6px;border-radius:6px;background:#111226;color:#9699bd;font:9px 'DM Mono',monospace}
.talent-picker-toggle:hover,.talent-picker-toggle.has-selection{border-color:#ad8cff;background:linear-gradient(135deg,#382956,#202748);box-shadow:0 0 0 2px #a48aff14}
.talent-picker-toggle.has-selection>b{background:#a48aff;color:#17132a}
.talent-picker-dialog{width:min(1060px,calc(100vw - 32px));max-width:none;max-height:90vh;max-height:90dvh;margin:auto;padding:0;overflow:hidden;border:1px solid #49466f;border-radius:22px;background:linear-gradient(155deg,#17182f,#101123 78%);color:var(--text);box-shadow:0 30px 100px #000b}
.talent-picker-dialog::backdrop{background:#060610d9;backdrop-filter:blur(7px)}
.talent-picker-shell{display:flex;flex-direction:column;gap:15px;max-height:90vh;max-height:90dvh;min-height:0;padding:clamp(16px,2.5vw,28px)}
.talent-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex:none}
.talent-picker-head h2{margin:5px 0;color:#f7f4ff;font:900 clamp(22px,3vw,30px) 'Nunito',sans-serif;letter-spacing:-.6px}
.talent-picker-head h2 .result-count{margin-left:7px;vertical-align:middle;font-size:11px}
.talent-picker-head p{margin:0;color:#a2a5c8;font-size:12px;line-height:1.65}
.talent-picker-close{display:grid;place-items:center;width:38px;height:38px;flex:none;border:1px solid #3a3b5b;border-radius:12px;background:#1c1d37;color:#dcd8f4;font-size:25px;line-height:1;cursor:pointer}
.talent-picker-close:hover{border-color:#ff82c3;color:#fff}
.artist-search.talent-picker-search{display:flex;align-items:center;gap:10px;flex:none;height:48px;margin:0;padding:0 13px;border:1px solid #38395e;border-radius:12px;background:#111226}
.artist-search.talent-picker-search>span{color:#a99aff;font-size:22px}
.artist-search.talent-picker-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:13px}
.artist-search.talent-picker-search input::placeholder{color:#777ca3}
.talent-picker-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
#talent-picker-selected{color:#aaaed0;font-size:11px;line-height:1.5}
.talent-picker-toolbar .clear-filters{width:auto;flex:none;margin:0;padding:8px 11px;white-space:nowrap;border-style:solid}
.talent-picker-dialog .artist-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:8px;max-height:min(54vh,520px);max-height:min(54dvh,520px);min-height:100px;overflow:auto;padding:4px 5px 10px;scrollbar-width:thin;scrollbar-color:#4e4b79 transparent}
.talent-picker-dialog .artist-check{display:grid;grid-template-columns:17px 52px minmax(0,1fr) auto;align-items:center;gap:9px;min-width:0;min-height:70px;padding:8px 9px;border:1px solid #303153;border-radius:13px;background:linear-gradient(135deg,#1a1b37,#131428);color:#d7d5ef;font-size:12px;font-weight:800;transition:border-color .14s,background .14s,transform .14s}
.talent-picker-dialog .artist-check:hover{border-color:#7d70ae;background:linear-gradient(135deg,#252343,#1a1b35);transform:translateY(-1px)}
.talent-picker-dialog .artist-check:has(input:checked){border-color:#9a82eb;background:linear-gradient(135deg,#292247,#1c1c36);box-shadow:inset 0 0 0 1px #a58aff18}
.talent-picker-dialog .artist-check input{width:16px;height:16px;margin:0;accent-color:var(--pink)}
.talent-picker-dialog .artist-avatar{display:block;width:52px;height:52px;object-fit:cover;object-position:top center;border:1px solid #ffffff18;border-radius:12px;background:#282344}
.talent-picker-dialog .artist-avatar-fallback{display:grid;place-items:center;color:#c8b5ff;font-size:17px}
.talent-picker-dialog .artist-name{display:-webkit-box;min-width:0;overflow:hidden;color:#f0edff;font-size:11px;line-height:1.4;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.talent-picker-dialog .artist-check small{margin-left:0;color:#888db6;font:9px 'DM Mono',monospace}
.talent-picker-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;flex:none;padding-top:13px;border-top:1px solid #2d2e4c;color:#9296b8;font-size:10px;line-height:1.5}
.talent-picker-done{flex:none;padding:10px 20px;border:1px solid #b18cff;border-radius:10px;background:linear-gradient(135deg,#b184ff,#e17ccc);color:#17132a;font-size:12px;font-weight:900;box-shadow:0 5px 18px #ae7dff26}
.talent-picker-done:hover{filter:brightness(1.08)}
#browse-all-talents{margin-top:10px}
@media(max-width:760px){
  .talent-picker-dialog{width:calc(100vw - 18px);max-height:94vh;max-height:94dvh;border-radius:17px}
  .talent-picker-shell{max-height:94vh;max-height:94dvh;gap:12px;padding:15px 12px 12px}
  .talent-picker-dialog .artist-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:58vh;max-height:58dvh}
  .talent-picker-dialog .artist-check{grid-template-columns:16px 44px minmax(0,1fr);gap:7px;min-height:60px;padding:6px}
  .talent-picker-dialog .artist-avatar{width:44px;height:48px;border-radius:9px}
  .talent-picker-dialog .artist-check small{display:none}
  .talent-picker-dialog .artist-name{font-size:10px}
  .talent-picker-toolbar .clear-filters{padding:7px 8px;font-size:10px}
  .talent-picker-footer{font-size:9px}
  .talent-picker-toggle{gap:5px;padding-inline:8px}
}
@media(max-width:420px){
  .talent-picker-dialog{width:calc(100vw - 12px)}
  .talent-picker-head h2{font-size:22px}
  .talent-picker-head p{max-width:250px;font-size:11px}
  .talent-picker-toolbar{align-items:flex-start}
  .talent-picker-dialog .artist-filters{gap:6px;padding-inline:1px}
  .talent-picker-dialog .artist-check{grid-template-columns:14px 38px minmax(0,1fr);gap:5px;padding:5px}
  .talent-picker-dialog .artist-avatar{width:38px;height:43px}
  .talent-picker-dialog .artist-name{font-size:9px}
  .talent-picker-toggle>span:nth-child(2){display:none}
}



/* Talent picker card hardening: one bounded portrait frame, no style collisions. */
.talent-picker-dialog .artist-filters{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-content:start;
  align-items:stretch;
  gap:10px;
  max-height:min(54dvh,520px);
  min-height:120px;
  overflow-x:hidden;
  overflow-y:auto;
  padding:4px 5px 12px;
}
.talent-picker-dialog .artist-check{
  position:relative;
  display:grid;
  grid-template-columns:18px 52px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-width:0;
  min-height:76px;
  padding:9px 11px;
  overflow:hidden;
  text-align:left;
}
.talent-picker-dialog .artist-check input{
  position:static;
  inset:auto;
  display:block;
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--pink);
}
.talent-picker-dialog .artist-check .artist-avatar-frame{
  position:relative;
  display:grid;
  place-items:center;
  flex:none;
  width:52px;
  height:52px;
  overflow:hidden;
  border:1px solid #ffffff18;
  border-radius:12px;
  background:radial-gradient(ellipse at 50% 30%,#454066,#252342 68%,#17172d);
}
.talent-picker-dialog .artist-check .artist-avatar-frame .artist-avatar{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  max-width:none;
  height:100%;
  max-height:none;
  padding:0;
  margin:0;
  object-fit:cover;
  object-position:center 16%;
  border:0;
  border-radius:inherit;
}
.talent-picker-dialog .artist-check .artist-avatar-fallback{display:none}
.talent-picker-dialog .artist-check .artist-avatar-frame.image-unavailable .artist-avatar{display:none}
.talent-picker-dialog .artist-check .artist-avatar-frame.image-unavailable .artist-avatar-fallback{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#c8b5ff;
  font-size:21px;
}
.talent-picker-dialog .artist-check .artist-name{
  display:-webkit-box;
  min-width:0;
  width:auto;
  min-height:0;
  overflow:hidden;
  color:#f0edff;
  font-size:12px;
  font-weight:900;
  line-height:1.4;
  overflow-wrap:anywhere;
  white-space:normal;
  text-overflow:clip;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.talent-picker-dialog .artist-check small{
  justify-self:end;
  min-width:1.3em;
  margin:0;
  color:#a5a9cf;
  font:10px 'DM Mono',monospace;
  white-space:nowrap;
}
@media(max-width:900px){
  .talent-picker-dialog .artist-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
@media(max-width:560px){
  .talent-picker-shell{gap:10px;padding:14px 11px 11px}
  .talent-picker-dialog .artist-filters{grid-template-columns:minmax(0,1fr);gap:7px;max-height:58dvh}
  .talent-picker-dialog .artist-check{grid-template-columns:18px 46px minmax(0,1fr) auto;min-height:64px;gap:8px;padding:7px 8px}
  .talent-picker-dialog .artist-check .artist-avatar-frame{width:46px;height:46px;border-radius:10px}
  .talent-picker-dialog .artist-check .artist-name{font-size:11px}
}


/* Artist directory category filters */
.artist-category-filter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  flex:none;
}
.artist-category-filter button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  padding:7px 11px;
  border:1px solid #373858;
  border-radius:10px;
  background:#15162c;
  color:#aeb2d1;
  font-size:11px;
  font-weight:900;
  transition:border-color .15s,background .15s,color .15s;
}
.artist-category-filter button:hover{border-color:#7770aa;color:#f3efff}
.artist-category-filter button.is-active{
  border-color:#a68aff;
  background:linear-gradient(135deg,#34264c,#252344);
  color:#fff;
  box-shadow:inset 0 0 0 1px #a68aff1c;
}
.artist-category-filter button span{
  min-width:20px;
  padding:2px 5px;
  border-radius:6px;
  background:#292a49;
  color:#d2c5ff;
  font:10px 'DM Mono',monospace;
  text-align:center;
}
.artist-category-filter button.is-active span{background:#ae91ff;color:#171328}
.artist-category-note{flex:none;margin:-7px 0 0;color:#8288af;font-size:10px;line-height:1.45}
@media(max-width:560px){
  .artist-category-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .artist-category-filter button{justify-content:space-between;min-width:0;padding:7px 8px;font-size:10px}
  .artist-category-filter button:first-child{grid-column:1/-1}
  .artist-category-note{margin-top:-4px;font-size:9px}
}


/* Make the artist directory genuinely usable on short and tall screens. */
.talent-picker-dialog{
  max-height:calc(100dvh - 12px);
  overflow:hidden;
}
.talent-picker-shell{
  height:min(calc(100dvh - 24px),1000px);
  max-height:calc(100dvh - 12px);
  min-height:0;
  gap:11px;
  padding:clamp(12px,1.6vw,20px) clamp(14px,2vw,24px);
}
.talent-picker-dialog .artist-filters{
  flex:1 1 0;
  height:auto;
  min-height:250px;
  max-height:none;
  overflow-x:hidden;
  overflow-y:scroll;
  scrollbar-width:auto;
  scrollbar-color:#a99aff #191a32;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
}
.talent-picker-dialog .artist-filters::-webkit-scrollbar{width:14px}
.talent-picker-dialog .artist-filters::-webkit-scrollbar-track{
  border:3px solid #191a32;
  border-radius:999px;
  background:#191a32;
}
.talent-picker-dialog .artist-filters::-webkit-scrollbar-thumb{
  min-height:42px;
  border:3px solid #191a32;
  border-radius:999px;
  background:linear-gradient(180deg,#b5a4ff,#7869c9);
}
.talent-picker-dialog .artist-filters::-webkit-scrollbar-thumb:hover{
  border-color:#23203d;
  background:linear-gradient(180deg,#d1c4ff,#9988f4);
}
@media(max-width:760px){
  .talent-picker-dialog{
    width:calc(100vw - 12px);
    max-height:calc(100dvh - 12px);
  }
  .talent-picker-shell{
    height:calc(100dvh - 18px);
    max-height:calc(100dvh - 18px);
    gap:9px;
    padding:12px;
  }
  .talent-picker-dialog .artist-filters{min-height:220px}
}
@media(max-width:560px){
  .talent-picker-dialog .artist-filters{min-height:180px}
}


/* Homepage: slow, manually pausable marquee for the full official talent roster. */
.talent-section-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:none;
}
.talent-marquee-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:8px 11px;
  border:1px solid #3a3b60;
  border-radius:11px;
  background:#16172f;
  color:#b9bbda;
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
  transition:border-color .15s,background .15s,color .15s;
}
.talent-marquee-toggle span{
  color:#c9b4ff;
  font-size:14px;
  line-height:1;
}
.talent-marquee-toggle:hover,
.talent-marquee-toggle:focus-visible{
  border-color:#927ee0;
  background:#22203e;
  color:#fff;
  outline:none;
}
.talent-strip{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  scroll-behavior:auto;
  overscroll-behavior-x:contain;
  cursor:grab;
}
.talent-strip:active{cursor:grabbing}
.talent-strip::-webkit-scrollbar{display:none;width:0;height:0}
.talent-strip .talent-card[data-talent-duplicate="true"]{user-select:none}
@media(max-width:760px){
  .talent-section-actions{gap:6px}
  .talent-marquee-toggle{min-height:34px;padding:7px 8px;font-size:10px}
  .talent-marquee-toggle span{font-size:12px}
}
@media(max-width:480px){
  .talent-section-actions{gap:4px}
  .talent-marquee-toggle{padding:6px 7px;font-size:9px}
  .talent-section-actions .browse-talents-button{padding:7px 8px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .talent-marquee-toggle{transition:none}
}


/* Prevent native snap points from cancelling the marquee's tiny animation steps. */
.talent-strip{
  scroll-snap-type:none!important;
  scroll-behavior:auto!important;
  overflow-x:auto!important;
}


/* Keep the two homepage heading actions aligned at exactly the same height. */
.talent-section-actions .talent-marquee-toggle,
.talent-section-actions .browse-talents-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  align-self:center!important;
  box-sizing:border-box!important;
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  padding:0 13px!important;
  line-height:1!important;
  vertical-align:middle;
}
.talent-section-actions .talent-marquee-toggle{
  gap:7px!important;
}
.talent-section-actions .talent-marquee-toggle span,
.talent-section-actions .browse-talents-button span{
  display:inline-flex;
  align-items:center;
  line-height:1!important;
}
@media(max-width:760px){
  .talent-section-actions .talent-marquee-toggle,
  .talent-section-actions .browse-talents-button{
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    padding:0 10px!important;
  }
}
@media(max-width:480px){
  .talent-section-actions .talent-marquee-toggle,
  .talent-section-actions .browse-talents-button{
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    padding:0 8px!important;
  }
  .talent-section-actions .talent-marquee-toggle{font-size:9px!important}
  .talent-section-actions .browse-talents-button{font-size:9px!important}
}


/* Static homepage talent paging: keep ten portraits sharp and on-screen. */
.talent-section .talent-section-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px!important;
}
.talent-page-controls{
  display:flex;
  flex:none;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
}
.talent-page-controls button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  height:34px;
  min-height:34px;
  padding:0 9px;
  border:1px solid #38395e;
  border-radius:9px;
  background:#15162d;
  color:#c5c7e2;
  font:800 11px 'Nunito',sans-serif;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.talent-page-controls button:hover:not(:disabled){
  border-color:#8d7bd8;
  background:#25213f;
  color:#fff;
}
.talent-page-controls button:disabled{
  opacity:.38;
  cursor:default;
}
.talent-page-controls .talent-page-shuffle{
  gap:5px;
  border-color:#49416d;
  color:#ddd2ff;
}
.talent-page-controls .talent-page-shuffle span{
  color:#c5aaff;
  font-size:15px;
  line-height:1;
}
.talent-page-controls .talent-page-arrow{
  width:32px;
  padding:0;
  font-size:22px;
  line-height:1;
}
#talent-page-status{
  min-width:75px;
  padding:0 3px;
  color:#9ea2c7;
  font:10px 'DM Mono',monospace;
  text-align:center;
  white-space:nowrap;
}
.talent-section #talent-strip{
  display:grid!important;
  grid-template-columns:repeat(10,minmax(0,1fr))!important;
  align-items:start;
  gap:7px!important;
  width:100%;
  max-width:100%;
  height:auto;
  max-height:none;
  min-height:0;
  padding:3px 0 5px!important;
  overflow:visible!important;
  overflow-x:visible!important;
  overflow-y:visible!important;
  scrollbar-width:none!important;
  scroll-snap-type:none!important;
  scroll-behavior:auto!important;
  cursor:default!important;
}
.talent-section #talent-strip::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.talent-section #talent-strip .talent-card{
  display:flex!important;
  flex:initial!important;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px!important;
  box-sizing:border-box;
  width:100%;
  min-width:0!important;
  min-height:0!important;
  height:auto;
  margin:0;
  padding:4px 2px 6px!important;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  box-shadow:none;
  transform:none!important;
  scroll-snap-align:none!important;
  transition:border-color .14s,background .14s;
}
.talent-section #talent-strip .talent-card:hover,
.talent-section #talent-strip .talent-card.selected{
  border-color:#554875;
  background:linear-gradient(180deg,#25213d80,transparent);
  box-shadow:none;
  transform:none!important;
}
.talent-section #talent-strip .talent-card .talent-image{
  position:relative;
  display:block;
  flex:none;
  width:clamp(42px,5vw,60px)!important;
  height:clamp(46px,5.6vw,66px)!important;
  margin:0 auto;
  overflow:hidden;
  border:0;
  border-radius:11px;
}
.talent-section #talent-strip .talent-card .talent-image img{
  position:absolute;
  left:50%;
  bottom:0;
  width:auto;
  height:108%;
  max-width:125%;
  max-height:none;
  object-fit:contain;
  object-position:bottom;
  transform:translateX(-50%)!important;
  transition:none!important;
  backface-visibility:visible;
  filter:drop-shadow(0 3px 4px #0004);
}
.talent-section #talent-strip .talent-card .talent-image i{display:none}
.talent-section #talent-strip .talent-card strong{
  display:block;
  width:100%;
  max-width:100%;
  overflow:hidden;
  color:#f1efff;
  font-size:10px!important;
  font-weight:850;
  line-height:1.3;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.talent-section #talent-strip .talent-card small{display:none!important}
@media(max-width:970px){
  .talent-section #talent-strip{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    row-gap:8px!important;
  }
  .talent-section #talent-strip .talent-card .talent-image{
    width:clamp(42px,6vw,56px)!important;
    height:clamp(46px,6.5vw,62px)!important;
  }
}
@media(max-width:560px){
  .talent-section .talent-section-actions{
    width:100%;
    justify-content:space-between!important;
    gap:5px!important;
  }
  .talent-page-controls{gap:3px}
  .talent-page-controls button{
    height:31px;
    min-height:31px;
    padding:0 7px;
    font-size:10px;
  }
  .talent-page-controls .talent-page-arrow{width:29px;padding:0}
  #talent-page-status{min-width:66px;font-size:9px}
  .talent-page-controls .talent-page-shuffle{gap:4px}
  .talent-section #talent-strip{gap:5px!important;row-gap:7px!important}
  .talent-section #talent-strip .talent-card{padding:3px 1px 5px!important}
  .talent-section #talent-strip .talent-card .talent-image{
    width:42px!important;height:46px!important;border-radius:9px;
  }
  .talent-section #talent-strip .talent-card strong{font-size:9px!important}
}


/* Banner-style talent rotation: stable portraits with an opacity-only crossfade. */
.talent-section #talent-strip{
  opacity:1;
  transition:opacity 400ms ease;
  will-change:opacity;
}
.talent-section #talent-strip.is-fading{
  opacity:0;
  pointer-events:none;
}
.talent-section #talent-strip .talent-card,
.talent-section #talent-strip .talent-card .talent-image img{
  animation:none!important;
  transition:none!important;
}
@media(prefers-reduced-motion:reduce){
  .talent-section #talent-strip{transition:none}
}


/* Built-in smart mixtape badge in the sidebar */
.playlist-row-label{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.playlist-smart-badge{
  flex:none;
  padding:3px 5px;
  border:1px solid #51437a;
  border-radius:5px;
  background:#29213f;
  color:#c8adff;
  font:800 7px 'DM Mono',monospace;
  font-style:normal;
  letter-spacing:.35px;
}
.playlist-row-smart{
  border:1px solid #3a3159;
  background:linear-gradient(100deg,#211b37,#17182e);
}
.playlist-row-smart:hover,.playlist-row-smart.active{
  border-color:#7865b0;
  background:linear-gradient(100deg,#302346,#20203b);
}
.playlist-row-smart .playlist-smart-badge{color:#d4c1ff}


/* Keep sidebar mixtapes inside the sidebar's padded content box. */
.sidebar,
.playlist-section,
.playlist-list,
.playlist-row{
  box-sizing:border-box;
  min-width:0;
  max-width:100%;
}
.playlist-section,
.playlist-list{
  width:100%;
}
.playlist-row{
  width:100%;
  gap:6px;
  overflow:hidden;
}
.playlist-row-label{
  flex:1 1 0;
  min-width:0;
  max-width:100%;
}
.playlist-row .playlist-smart-badge{
  flex:0 0 auto;
  margin:0;
  white-space:nowrap;
}
.playlist-row small{
  flex:0 0 auto;
  margin-left:0;
  white-space:nowrap;
}


/* Make the listening queue easier to read and control, especially on phones. */
.queue-list{
  max-height:390px!important;
  padding:3px 2px 5px;
  scrollbar-width:thin;
  scrollbar-color:#7771ad #17182f;
}
.queue-track{
  min-height:76px;
  gap:11px!important;
  padding:10px 7px!important;
  border:1px solid transparent;
  border-radius:12px!important;
  cursor:pointer;
  transition:background .14s,border-color .14s;
}
.queue-track:hover{
  border-color:#3e3b65;
  background:#22223f!important;
}
.queue-track:focus-within{outline:2px solid #8f7ce0;outline-offset:1px}
.queue-track.current{
  border-color:#66508c;
  background:linear-gradient(100deg,#302342,#1d1e39)!important;
}
.queue-track-art{
  width:64px!important;
  height:46px!important;
  flex:0 0 64px!important;
  border-radius:9px!important;
}
.queue-track-info{gap:5px!important}
.queue-track-info strong{
  display:-webkit-box;
  overflow:hidden;
  font-size:13px!important;
  line-height:1.4!important;
  white-space:normal!important;
  overflow-wrap:anywhere;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.queue-track-info span{font-size:11.5px!important;line-height:1.35!important}
.queue-track-actions{align-items:center;gap:3px}
.queue-track-play,.queue-track-remove{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  border-radius:10px!important;
  font-size:16px!important;
  touch-action:manipulation;
}
.queue-track-play{background:#262344;color:#c4b0ff}
.queue-track-play:hover{background:#3a315d!important;color:#fff}
.queue-track-remove{font-size:21px!important;color:#9fa3c4}
.queue-track-remove:hover{background:#46223e!important;color:#ffacd9!important}
.queue-heading h2{font-size:18px!important}
.queue-heading{margin-bottom:10px!important}
.queue-heading .result-count{font-size:12px!important;padding:3px 7px}
@media(max-width:680px){
  .player-column.mobile-open .queue-card{padding:13px!important}
  .player-column.mobile-open .queue-list{
    max-height:240px!important;
    padding:3px 2px 6px;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
  .player-column.mobile-open .queue-track{
    min-height:76px!important;
    padding:10px 5px!important;
    gap:9px!important;
  }
  .player-column.mobile-open .queue-track-art{
    width:60px!important;
    height:44px!important;
    flex-basis:60px!important;
  }
  .player-column.mobile-open .queue-track-info strong{font-size:12.5px!important}
  .player-column.mobile-open .queue-track-info span{font-size:11px!important}
  .player-column.mobile-open .queue-track-play,
  .player-column.mobile-open .queue-track-remove{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
  }
}
@media(max-width:390px){
  .player-column.mobile-open .queue-track{gap:7px!important}
  .player-column.mobile-open .queue-track-art{
    width:54px!important;
    height:40px!important;
    flex-basis:54px!important;
  }
  .player-column.mobile-open .queue-track-play,
  .player-column.mobile-open .queue-track-remove{
    width:34px!important;
    height:36px!important;
    min-width:34px!important;
    min-height:36px!important;
  }
}


/* Desktop catalogue visibility fix: the player should not follow the page scroll. */
@media(min-width:1221px){
  .player-column{
    position:static!important;
    top:auto!important;
    align-self:start;
  }
  .app-layout{align-items:start}
  /* The large featured banner was keeping the actual music library below the fold. */
  .hero-card{min-height:380px!important}
  .hero-stage{min-height:350px!important}
  .hero-copy{
    padding-top:19px!important;
    padding-bottom:20px!important;
  }
  .talent-section{margin-top:17px!important}
  .quick-discovery{
    margin-top:12px!important;
    margin-bottom:17px!important;
  }
  body.sidebar-collapsed .app-layout{
    grid-template-columns:76px minmax(0,1fr) minmax(330px,min(27vw,430px))!important;
    gap:16px!important;
    padding-inline:18px!important;
  }
}
@media(min-width:1221px) and (max-width:1500px){
  body.sidebar-collapsed .app-layout{
    grid-template-columns:72px minmax(0,1fr) minmax(310px,min(30vw,400px))!important;
    gap:14px!important;
    padding-inline:15px!important;
  }
}
/* Preserve the existing compact player overlay only when explicitly opened on mobile. */
@media(max-width:680px){
  .player-column{position:static!important}
  .player-column.mobile-open{position:fixed!important}
}


/* Keep only the now-playing video in view after the user scrolls into the catalogue. */
@media(min-width:1221px){
  body.player-docked .player-column{
    position:sticky!important;
    top:84px!important;
    align-self:start!important;
    z-index:30;
    max-height:calc(100vh - 96px);
  }
  body.player-docked .player-column .queue-card,
  body.player-docked .player-column .player-footnote{
    display:none!important;
  }
  body.player-docked .player-column .player-card{
    border-radius:15px;
    box-shadow:0 18px 42px #02020970;
  }
  body.player-docked .player-column .video-frame-wrap{
    min-height:0!important;
    aspect-ratio:16/9;
  }
}
@media(min-width:1221px) and (max-height:760px){
  body.player-docked .player-column .player-head{
    padding:10px 12px;
  }
  body.player-docked .player-column .player-head h2{
    font-size:16px;
  }
  body.player-docked .player-column .now-playing-meta{
    padding:10px;
  }
  body.player-docked .player-column .player-controls{
    gap:10px;
  }
  body.player-docked .player-column .player-status-row{
    margin-top:7px;
  }
}
/* Never dock the full-size player on tablet or mobile layouts. */
@media(max-width:1220px){
  body.player-docked .player-column{
    position:static!important;
    max-height:none;
  }
  body.player-docked .player-column .queue-card,
  body.player-docked .player-column .player-footnote{
    display:block!important;
  }
}


/* =========================================================
   Mobile-only repair: stable header, contained drawers/dialogs,
   and a single viewport-fitted player overlay. Desktop is unchanged.
   ========================================================= */
@media(max-width:680px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:clip!important;
    scroll-padding-top:12px;
  }
  body{
    min-width:0;
    padding-left:0;
    padding-right:0;
  }
  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:60!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100vw!important;
    height:auto!important;
    min-height:0!important;
    padding:9px 11px 10px!important;
    overflow:visible!important;
  }
  .topbar .brand{
    display:flex!important;
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    max-width:100%!important;
    gap:8px!important;
  }
  .topbar .brand-mark{width:35px!important;height:35px!important;flex:0 0 35px!important}
  .topbar .brand-copy{min-width:0!important}
  .topbar .brand-copy strong{font-size:19px!important;white-space:nowrap}
  .topbar .brand-copy small{
    max-width:100%;
    overflow:hidden;
    font-size:6px!important;
    letter-spacing:.55px!important;
    text-overflow:ellipsis;
  }
  .topbar .top-actions{
    grid-column:2!important;
    grid-row:1!important;
    min-width:0!important;
    gap:2px!important;
  }
  .topbar .favorite-shortcut{padding:5px!important}
  .topbar .favorite-shortcut b{display:none!important}
  .topbar .favorite-shortcut span{font-size:22px!important}
  .topbar .global-search{
    grid-column:1/-1!important;
    grid-row:2!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:42px!important;
    padding:0 8px!important;
    gap:6px!important;
  }
  .topbar .global-search input{
    display:block!important;
    flex:1 1 0!important;
    width:0!important;
    min-width:0!important;
    font-size:12px!important;
  }
  .topbar .global-search .search-icon{flex:none!important;font-size:23px!important}
  .topbar .global-search .talent-picker-toggle{
    flex:none!important;
    max-width:95px!important;
    min-width:0!important;
    padding:5px 6px!important;
    gap:4px!important;
    font-size:9px!important;
  }
  .topbar .global-search .talent-picker-toggle b{font-size:8px!important}
  .topbar .global-search-button{
    flex:none!important;
    min-width:65px!important;
    max-width:82px!important;
    padding:8px 10px!important;
    font-size:11px!important;
  }

  .mobile-toolbar{
    position:relative!important;
    top:auto!important;
    z-index:20!important;
    display:flex!important;
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    gap:7px!important;
    padding:8px 10px!important;
  }
  .mobile-tool{
    flex:1 1 0!important;
    min-width:0!important;
    min-height:43px!important;
    padding:8px 5px!important;
    gap:6px!important;
    font-size:11px!important;
    white-space:nowrap;
  }
  .mobile-tool span{flex:none;font-size:17px!important}
  .mobile-tool[aria-expanded="true"]{
    border-color:#9b83e5!important;
    background:#282242!important;
    color:#fff!important;
  }

  .app-layout{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    gap:13px!important;
    padding:10px 9px calc(30px + env(safe-area-inset-bottom))!important;
    overflow:visible!important;
  }
  .catalogue-column,.hero-card,.talent-section,.quick-discovery,.library-section,
  .library-top,.library-controls,.song-grid,.song-card,.player-column,
  .player-card,.queue-card,.queue-list{
    min-width:0!important;
    max-width:100%!important;
  }
  .catalogue-column{width:100%!important;overflow:visible!important}
  .song-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}
  .song-card{width:100%!important;overflow:hidden!important}
  .song-card-cover,.song-card-art,.song-card-media{min-width:0;max-width:100%}
  .library-controls{grid-template-columns:minmax(0,1fr) auto!important;width:100%!important}
  .library-controls>*{min-width:0!important}
  .sort-control select{min-width:0!important;max-width:100%!important}
  .talent-section .section-heading{display:flex;align-items:flex-end;gap:8px;min-width:0}
  .talent-section .section-heading>div:first-child{min-width:0}
  .talent-section .section-heading h2{font-size:16px!important;line-height:1.25!important}
  .talent-section .section-heading .section-kicker{font-size:8px!important;white-space:normal}
  .talent-section .browse-talents-button{flex:none;max-width:46%;white-space:normal;text-align:center}

  /* Browse & filters is a proper overlay drawer, not a full page section. */
  body.filters-open{overflow:hidden!important;overscroll-behavior:none}
  body.filters-open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:69;
    background:#03030bd1;
    backdrop-filter:blur(3px);
  }
  body.filters-open .sidebar{
    display:block!important;
    position:fixed!important;
    z-index:90!important;
    top:10px!important;
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    min-width:0!important;
    margin:0!important;
    padding:15px 13px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    border:1px solid #625282!important;
    border-radius:18px!important;
    box-shadow:0 25px 70px #000c!important;
  }
  body.filters-open .sidebar-topline{position:relative;padding-right:42px!important}
  body.filters-open .sidebar-collapse{
    display:grid!important;
    position:absolute!important;
    top:0!important;
    right:0!important;
    width:36px!important;
    height:36px!important;
    font-size:0!important;
    border-radius:10px!important;
    z-index:2;
  }
  body.filters-open .sidebar-collapse::before{
    content:"×";
    font-size:26px;
    line-height:1;
    color:#f3eaff;
  }
  body.filters-open .sidebar .playlist-row{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  body.filters-open .sidebar .playlist-row-label{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* The full player is one viewport-sized sheet; do not show the mini player behind it. */
  body.mobile-player-open{
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  body.mobile-player-open .mobile-mini-player:not([hidden]){
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  body.mobile-player-open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:69;
    background:#03030bd8;
    backdrop-filter:blur(3px);
  }
  .player-column.mobile-open{
    display:grid!important;
    position:fixed!important;
    z-index:90!important;
    inset:calc(env(safe-area-inset-top) + 8px) 8px calc(env(safe-area-inset-bottom) + 8px)!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:8px!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-rows:max-content!important;
    align-content:start!important;
    align-items:start!important;
    gap:10px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    border:1px solid #716092!important;
    border-radius:17px!important;
    background:#111222!important;
    box-shadow:0 24px 70px #000c!important;
    transform:none!important;
  }
  .player-column.mobile-open>*{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
  }
  .player-column.mobile-open .player-card,
  .player-column.mobile-open .queue-card{
    display:block!important;
    overflow:hidden!important;
    flex:none!important;
    min-height:0!important;
    border-radius:13px!important;
  }
  .player-column.mobile-open .player-head{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    padding:10px 11px!important;
  }
  .player-column.mobile-open .player-head>div{min-width:0}
  .player-column.mobile-open .player-head h2{font-size:16px!important}
  .player-column.mobile-open .player-kicker{font-size:8px!important;letter-spacing:.8px}
  .player-column.mobile-open .panel-collapse{
    display:grid!important;
    flex:none!important;
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    margin-left:auto!important;
    place-items:center!important;
    font-size:21px!important;
    touch-action:manipulation;
  }
  .player-column.mobile-open .video-frame-wrap{
    display:block!important;
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:16/9!important;
    overflow:hidden!important;
  }
  .player-column.mobile-open #youtube-player,
  .player-column.mobile-open #youtube-player iframe,
  .player-column.mobile-open .youtube-fallback{
    width:100%!important;
    max-width:100%!important;
  }
  .player-column.mobile-open #youtube-player{height:100%!important;min-height:0!important}
  .player-column.mobile-open #youtube-player iframe{position:absolute!important;inset:0!important;height:100%!important}
  .player-column.mobile-open .now-playing-meta{padding:9px 10px!important;min-width:0!important}
  .player-column.mobile-open .playing-title-row{display:flex;gap:8px;min-width:0}
  .player-column.mobile-open .playing-text{flex:1 1 0;min-width:0}
  .player-column.mobile-open .playing-text strong{
    display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px!important
  }
  .player-column.mobile-open .playing-text span{font-size:10px!important}
  .player-column.mobile-open .playing-art{flex:none;width:42px;height:42px}
  .player-column.mobile-open .player-controls{display:flex;justify-content:center;gap:clamp(5px,3vw,14px);margin-top:7px}
  .player-column.mobile-open .player-controls button{flex:none;min-width:34px;min-height:34px}
  .player-column.mobile-open .play-toggle{width:43px;height:43px}
  .player-column.mobile-open .player-status-row{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:6px;font-size:9px!important}
  .player-column.mobile-open .player-status-row>*{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .player-column.mobile-open .queue-card{padding:10px!important}
  .player-column.mobile-open .queue-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px!important}
  .player-column.mobile-open .queue-heading h2{font-size:16px!important}
  .player-column.mobile-open .queue-list{
    max-height:clamp(100px,20dvh,210px)!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  .player-column.mobile-open .queue-track{min-width:0!important;max-width:100%!important;gap:6px!important;padding:6px 3px!important}
  .player-column.mobile-open .queue-track-art{flex:none!important;width:48px!important;height:36px!important}
  .player-column.mobile-open .queue-track-info{flex:1 1 0!important;min-width:0!important}
  .player-column.mobile-open .queue-track-info strong{font-size:10px!important}
  .player-column.mobile-open .queue-track-info span{font-size:9px!important}
  .player-column.mobile-open .queue-track-play,
  .player-column.mobile-open .queue-track-remove{
    flex:none!important;width:32px!important;height:34px!important;min-width:32px!important;min-height:34px!important
  }
  .player-column.mobile-open .queue-actions{display:grid;gap:6px;min-width:0!important}
  .player-column.mobile-open .playlist-select-row{display:flex;gap:6px;min-width:0}
  .player-column.mobile-open .playlist-select-row select{flex:1 1 0;min-width:0;max-width:100%}
  .player-column.mobile-open .player-footnote{display:none!important}

  /* The artist dialog must be constrained to the actual phone viewport. */
  .talent-picker-dialog[open]{
    position:fixed!important;
    inset:calc(env(safe-area-inset-top) + 8px) 8px calc(env(safe-area-inset-bottom) + 8px)!important;
    display:block!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    transform:none!important;
    box-sizing:border-box!important;
    border-radius:16px!important;
  }
  .talent-picker-shell{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    min-width:0!important;
    min-height:0!important;
    gap:8px!important;
    padding:13px 10px 10px!important;
    overflow:hidden!important;
  }
  .talent-picker-head{gap:7px!important;min-width:0!important}
  .talent-picker-head>div{flex:1 1 0;min-width:0!important}
  .talent-picker-head h2{font-size:19px!important;line-height:1.2!important;overflow-wrap:anywhere}
  .talent-picker-head p{max-width:100%!important;font-size:10px!important}
  .talent-picker-close{flex:none!important;width:38px!important;height:38px!important}
  .talent-picker-search{flex:none!important;width:100%!important;min-width:0!important;height:42px!important}
  .artist-category-filter{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
    width:100%!important;
    min-width:0!important;
  }
  .artist-category-filter button{
    min-width:0!important;
    max-width:100%!important;
    padding:6px 7px!important;
    gap:5px!important;
    white-space:normal!important;
    font-size:10px!important;
  }
  .artist-category-filter button:first-child{grid-column:1/-1!important}
  .artist-category-filter button span{flex:none}
  .artist-category-note{flex:none!important;margin:0!important;font-size:9px!important;line-height:1.35!important}
  .talent-picker-toolbar{flex:none!important;min-width:0!important;gap:5px!important}
  #talent-picker-selected{flex:1 1 0;min-width:0!important;font-size:9px!important}
  .talent-picker-dialog .clear-filters{flex:none;max-width:43%;font-size:9px!important;padding:6px!important}
  .talent-picker-dialog .artist-filters{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    flex:1 1 0!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  .talent-picker-dialog .artist-check{
    display:grid!important;
    grid-template-columns:18px 42px minmax(0,1fr) auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:58px!important;
    padding:6px 7px!important;
    gap:7px!important;
  }
  .talent-picker-dialog .artist-check .artist-avatar-frame{width:42px!important;height:42px!important}
  .talent-picker-dialog .artist-check .artist-name{min-width:0!important;font-size:11px!important}
  .talent-picker-footer{flex:none!important;gap:6px!important;padding-top:8px!important}
  .talent-picker-footer>span{flex:1 1 0;max-width:none!important;min-width:0;font-size:9px!important}
  .talent-picker-done{flex:none;min-width:68px!important;padding:8px 10px!important}

  .mobile-mini-player:not([hidden]){
    position:fixed!important;
    z-index:80!important;
    left:8px!important;
    right:8px!important;
    bottom:calc(6px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    grid-template-columns:40px minmax(0,1fr) 36px 30px!important;
    gap:5px!important;
    padding:6px 7px!important;
    min-height:58px!important;
  }
  .mobile-mini-thumb{width:40px!important;height:40px!important}
  .mobile-mini-info{min-width:0!important}
  .mobile-mini-info strong{font-size:10px!important}
  .mobile-mini-info small{font-size:8px!important}
  body.mobile-player-open .mobile-mini-player:not([hidden]){display:none!important}
}
@media(max-width:390px){
  .topbar{padding-inline:8px!important;gap:7px!important}
  .topbar .brand-mark{width:32px!important;height:32px!important;flex-basis:32px!important}
  .topbar .brand-copy strong{font-size:17px!important}
  .topbar .brand-copy small{font-size:5.2px!important;letter-spacing:.3px!important}
  .topbar .global-search{gap:4px!important;padding-inline:6px!important}
  .topbar .global-search .search-icon{font-size:20px!important}
  .topbar .global-search .talent-picker-toggle{max-width:70px!important;padding-inline:4px!important}
  .topbar .global-search-button{min-width:58px!important;padding-inline:7px!important}
  .mobile-tool{font-size:10px!important}
  .mobile-tool span{font-size:15px!important}
  .app-layout{padding-inline:7px!important}
  .talent-picker-dialog .artist-check{grid-template-columns:17px 38px minmax(0,1fr) auto!important;gap:5px!important}
  .talent-picker-dialog .artist-check .artist-avatar-frame{width:38px!important;height:38px!important}
}


/* Final mobile heading fix: keep the title and Browse button in one stable row. */
@media(max-width:680px){
  .talent-section{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .talent-section .section-heading{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"intro action"!important;
    align-items:center!important;
    justify-content:initial!important;
    gap:9px!important;
    width:100%!important;
    min-width:0!important;
    margin-bottom:9px!important;
  }
  .talent-section .section-heading>div:first-child{
    grid-area:intro!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    flex:initial!important;
  }
  .talent-section .section-heading .section-kicker{
    display:block!important;
    width:100%!important;
    margin:0 0 4px!important;
    font-size:8px!important;
    letter-spacing:.75px!important;
    line-height:1.35!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }
  .talent-section .section-heading h2{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    font-size:clamp(16px,4.7vw,19px)!important;
    line-height:1.25!important;
    letter-spacing:-.35px!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  .talent-section .section-heading p{display:none!important}
  .talent-section .section-heading .talent-section-actions{
    grid-area:action!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    flex:initial!important;
    flex-wrap:nowrap!important;
    gap:0!important;
  }
  .talent-section .section-heading .browse-talents-button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    min-height:36px!important;
    height:auto!important;
    padding:8px 9px!important;
    border-radius:10px!important;
    font-size:10px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    text-align:center!important;
  }
  .talent-section .section-heading .browse-talents-button span{
    flex:none!important;
    font-size:13px!important;
  }
}
@media(max-width:390px){
  .talent-section .section-heading{gap:7px!important}
  .talent-section .section-heading h2{font-size:16px!important}
  .talent-section .section-heading .section-kicker{font-size:7px!important;letter-spacing:.55px!important}
  .talent-section .section-heading .browse-talents-button{
    padding:7px 7px!important;
    font-size:9px!important;
    gap:4px!important;
  }
}


.source-repo-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  width:max-content;
  max-width:100%;
  color:#b8a5ff;
  font-weight:800;
  text-decoration:none;
  text-underline-offset:3px;
  transition:color .15s ease;
}
.source-repo-link:hover,.source-repo-link:focus-visible{
  color:#79e8ff;
  text-decoration:underline;
}
@media(max-width:680px){
  .page-footer .source-repo-link{
    align-self:flex-start;
    min-height:32px;
    padding:7px 0;
  }
}


/* Keep the source footer after the listening room on mobile, while preserving
   its familiar position beneath the catalogue in the desktop grid. */
@media (min-width:681px){
  .app-layout > .page-footer{
    grid-column:2;
    min-width:0;
  }
}
@media (max-width:680px){
  .app-layout > .page-footer{
    order:3;
    grid-column:auto;
    width:100%;
    min-width:0;
    margin-top:0;
    padding-top:12px;
  }
}