:root{--bg:#050607;--panel:#16171b;--panel2:#1f2026;--line:#2a2b31;--text:#f4f2ee;--dim:#a7a49d;--gold:#e2b740;--gold2:#f0cc63;--danger:#ff6b6f;--ok:#5ad19a;--side:248px;--pbar:84px}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font:15px/1.45 "Figtree",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--gold2)}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
svg{width:20px;height:20px;fill:currentColor;flex:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.dim{color:var(--dim)}

/* ---------- Brand ---------- */
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:800;font-size:18px;white-space:nowrap}
.brand em{font-style:normal;color:var(--gold)}
.brand img{border-radius:8px}

/* ---------- Sign-in gate (mirrors template) ---------- */
.top{display:flex;justify-content:space-between;align-items:center;padding:max(12px,env(safe-area-inset-top)) 20px 12px;position:relative;z-index:5}
.page{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,440px);gap:32px;align-items:center;max-width:1240px;margin:0 auto;padding:8px 20px 40px;min-height:calc(100dvh - 70px)}
@media (max-width:900px){.page{grid-template-columns:1fr;gap:8px;padding-top:0}}
.stage{display:flex;flex-direction:column;align-items:center;gap:14px}
.floor{position:relative;aspect-ratio:1;width:100%;max-width:560px;margin:0 auto;isolation:isolate}
.floor::before{content:"";position:absolute;inset:4%;border-radius:50%;z-index:-2;background:radial-gradient(circle,rgba(226,183,64,.22),rgba(122,76,255,.12) 45%,transparent 70%);opacity:calc(.6 + var(--kick,0)*.4);scale:calc(1 + var(--kick,0)*.04)}
.beams{position:absolute;inset:-10%;z-index:-1;border-radius:50%;opacity:.55;filter:blur(2px);background:conic-gradient(from 0deg,transparent 0 8%,rgba(226,183,64,.35) 10%,transparent 13% 30%,rgba(255,77,141,.3) 33%,transparent 36% 55%,rgba(122,76,255,.35) 58%,transparent 61% 80%,rgba(64,200,255,.3) 83%,transparent 86%);-webkit-mask-image:radial-gradient(circle,#000 25%,transparent 70%);mask-image:radial-gradient(circle,#000 25%,transparent 70%);animation:rot 9s linear infinite}
.photo{position:absolute;left:50%;top:50%;width:52%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:3}
.photo img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;position:relative;z-index:1;border:5px solid #0b0b0d;background:#111;transform:translateY(calc(var(--kick,0)*-6px)) scale(calc(1 + var(--kick,0)*.015))}
.photo::before{content:"";position:absolute;inset:-9px;border-radius:50%;background:conic-gradient(var(--gold),#ff4d8d,#7a4cff,#40c8ff,var(--gold));animation:rot 4s linear infinite}
.photo::after{content:"";position:absolute;inset:-30px;border-radius:50%;z-index:-1;box-shadow:0 0 60px 10px rgba(226,183,64,.35);opacity:calc(.55 + var(--kick,0)*.45)}
.nametag{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);z-index:2;background:var(--gold);color:#111;font-weight:900;font-size:14px;padding:5px 16px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.notes{position:absolute;inset:0;pointer-events:none;z-index:4}
.note{position:absolute;bottom:18%;color:var(--gold);font-size:22px;opacity:0;animation:float 4s ease-in infinite}
@keyframes float{0%{transform:translate(0,0);opacity:0}15%{opacity:.9}100%{transform:translate(var(--dx),-260px);opacity:0}}
.eq{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);display:flex;gap:5px;align-items:flex-end;height:46px}
.eq i{width:6px;border-radius:3px;background:linear-gradient(var(--gold2),#ff4d8d);height:20%;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(odd){animation-duration:.8s}.eq i:nth-child(3n){animation-duration:1.25s}.eq i:nth-child(4n){animation-delay:-.4s}
@keyframes eq{0%,100%{height:15%}50%{height:100%}}
@keyframes rot{to{rotate:360deg}}
.beat{display:flex;align-items:center;gap:12px;color:var(--dim)}
.beat b{color:var(--gold)}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:800}
.chip:active{scale:.96}
.card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px 26px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.card h1{margin:0 0 6px;font-size:28px;font-weight:900;letter-spacing:-.01em}
.card p{margin:0 0 18px}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--panel2);border-radius:999px;padding:4px;margin-bottom:18px}
.tabs button{border:0;background:none;padding:10px;border-radius:999px;font-weight:800;color:var(--dim)}
.tabs button[aria-selected=true]{background:var(--gold);color:#111}
.f{display:block;font-weight:700;margin-bottom:14px}
.f input{display:block;width:100%;margin-top:6px;padding:13px 14px;border-radius:12px;background:#0b0b0d;border:1px solid var(--line)}
.f input:focus{outline:none;border-color:var(--gold)}
.f input[type=file]{padding:10px;font-size:13px}
.pw{position:relative;display:block}
.pw .show{position:absolute;right:8px;top:50%;translate:0 -25%;border:0;background:none;color:var(--gold2);font-weight:700;font-size:13px}
.btn{border:0;border-radius:999px;padding:13px 20px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn.gold{background:var(--gold);color:#111}.btn.gold:hover{background:var(--gold2)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}.btn.ghost:hover{border-color:var(--gold)}
.btn.wide{width:100%}
.btn.sm{padding:8px 14px;font-size:13px}
.status{min-height:20px;margin:8px 0;color:var(--danger);font-size:13px}
.fine{color:var(--dim);font-size:12px;margin:16px 0 0}

/* ---------- App shell ---------- */
.app{display:grid;grid-template-columns:var(--side) 1fr;min-height:100dvh;padding-bottom:var(--pbar)}
.side{position:sticky;top:0;height:calc(100dvh - var(--pbar));display:flex;flex-direction:column;gap:18px;padding:18px 14px;border-right:1px solid var(--line);background:#0a0b0c;overflow:auto}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--dim);text-decoration:none;font-weight:700}
.nav a:hover{color:var(--text);background:var(--panel)}
.nav a.on{color:var(--text);background:var(--panel2)}
.nav a.on svg{color:var(--gold)}
.navlabel{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:16px 12px 6px;font-weight:800}
.me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:var(--panel)}
.me .av{width:36px;height:36px;border-radius:50%;background:var(--gold);color:#111;display:grid;place-items:center;font-weight:900;overflow:hidden;flex:none}
.me .av img{width:100%;height:100%;object-fit:cover}
.me b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me button{background:none;border:0;color:var(--dim);font-size:12px;padding:0}
.me button:hover{color:var(--gold2)}
.me div{min-width:0}

.main{min-width:0;outline:none}
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;padding:14px 28px;background:rgba(5,6,7,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.crumbs{font-weight:800;font-size:15px;color:var(--dim);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:0 14px;width:min(360px,40vw)}
.search svg{color:var(--dim);width:18px}
.search input{border:0;background:none;outline:none;padding:10px 0;width:100%}
.toggle{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--dim);font-weight:700;white-space:nowrap}
.toggle input{accent-color:var(--gold)}
.view{padding:24px 28px 60px;max-width:1280px}

/* Hero */
.hero{position:relative;display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:end;padding:28px;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,#2a1f06,#140f1f 60%,#0a0b0c);border:1px solid var(--line);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:var(--bgimg) center/cover;filter:blur(40px) saturate(1.3);opacity:.35;z-index:-1;scale:1.2}
.hero .cover{width:240px;aspect-ratio:1;border-radius:16px;object-fit:cover;box-shadow:0 20px 50px rgba(0,0,0,.6);background:#111}
.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--gold)}
.hero h1{font-size:clamp(32px,5vw,58px);line-height:1;margin:8px 0 10px;font-weight:900;letter-spacing:-.02em}
.hero p{margin:0 0 18px;color:#d9d5cc;max-width:60ch}
.row-act{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:760px){.hero{grid-template-columns:1fr;padding:20px}.hero .cover{width:160px}}

.sec{margin-top:36px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.sec-h h2{margin:0;font-size:22px;font-weight:900;letter-spacing:-.01em}
.sec-h a{font-weight:700;text-decoration:none;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
.tile{background:var(--panel);border:1px solid transparent;border-radius:16px;padding:12px;text-align:left;color:var(--text);transition:background .2s,border-color .2s;position:relative}
.tile:hover{background:var(--panel2);border-color:var(--line)}
.tile .art{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#111;margin-bottom:10px}
.tile .art img{width:100%;height:100%;object-fit:cover;display:block}
.tile .art .pbtn{position:absolute;right:8px;bottom:8px;width:42px;height:42px;border-radius:50%;background:var(--gold);color:#111;display:grid;place-items:center;opacity:0;translate:0 6px;transition:.2s;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.tile:hover .pbtn,.tile:focus-visible .pbtn{opacity:1;translate:0 0}
.tile b{display:block;font-size:15px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile span{display:block;color:var(--dim);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.grid.wide .art{aspect-ratio:16/9}
.ph{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#3a2a08,#1c1430);color:var(--gold);font-weight:900;font-size:30px;text-align:center;padding:10px}
.ph small{display:block;font-size:11px;color:var(--dim);font-weight:700;margin-top:4px}

/* Track list */
.tl{width:100%;border-collapse:collapse}
.tl th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:left;font-weight:800;padding:8px 10px;border-bottom:1px solid var(--line)}
.tl td{padding:8px 10px;border-bottom:1px solid rgba(42,43,49,.5);vertical-align:middle}
.tl tr.trk{cursor:pointer}
.tl tr.trk:hover td{background:var(--panel)}
.tl tr.trk.cur td{background:rgba(226,183,64,.08)}
.tl tr.trk.cur .tt b{color:var(--gold)}
.tl .num{width:44px;color:var(--dim);text-align:center;font-variant-numeric:tabular-nums}
.tl .tt{display:flex;align-items:center;gap:12px;min-width:0}
.tl .tt img,.tl .tt .mini{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;background:#111}
.tl .tt .mini{display:grid;place-items:center;background:linear-gradient(135deg,#3a2a08,#1c1430);color:var(--gold);font-weight:900;font-size:12px}
.tl .tt div{min-width:0}
.tl .tt b{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl .tt span{display:block;color:var(--dim);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl .yr,.tl .du{color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap;width:70px}
.tl .ac{width:110px;text-align:right;white-space:nowrap}
.e{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:3px;background:#3a3b42;color:#ddd;font-size:10px;font-weight:900;margin-left:6px;vertical-align:1px}
.tag{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--panel2);color:var(--gold2);margin-left:6px;vertical-align:1px}
.ext{font-size:12px;font-weight:800;text-decoration:none;padding:5px 10px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.ext:hover{border-color:var(--gold)}
.ic{border:0;background:none;color:var(--dim);width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;position:relative}
.ic:hover{color:var(--text);background:var(--panel2)}
.ic[aria-pressed=true]{color:var(--gold)}
.like[aria-pressed=true]{color:#ff4d8d}
@media (max-width:760px){.tl .yr,.tl th.yr{display:none}.tl .ac{width:auto}}

/* Album header */
.ahead{display:flex;gap:24px;align-items:flex-end;margin-bottom:24px;flex-wrap:wrap}
.ahead img{width:200px;aspect-ratio:1;border-radius:14px;object-fit:cover;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.ahead h1{font-size:clamp(30px,4.5vw,52px);margin:6px 0;font-weight:900;line-height:1;letter-spacing:-.02em}
.ahead p{margin:0 0 14px;color:var(--dim)}
.pagehead h1{font-size:32px;font-weight:900;margin:0 0 4px;letter-spacing:-.01em}
.pagehead p{color:var(--dim);margin:0 0 20px}

/* About */
.about{display:grid;grid-template-columns:1.3fr 1fr;gap:28px}
.facts{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.facts dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 16px}
.facts dt{color:var(--dim);font-weight:700;font-size:13px}
.facts dd{margin:0;font-weight:600}
.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
@media (max-width:900px){.about{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.stat b{display:block;font-size:26px;font-weight:900;color:var(--gold)}
.stat span{color:var(--dim);font-size:13px}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}

.empty{padding:40px;text-align:center;color:var(--dim);background:var(--panel);border-radius:16px;border:1px dashed var(--line)}
.empty b{display:block;color:var(--text);font-size:18px;margin-bottom:6px}

/* ---------- Player bar ---------- */
.player{position:fixed;left:0;right:0;bottom:0;height:var(--pbar);z-index:30;display:grid;grid-template-columns:minmax(180px,1fr) minmax(300px,1.4fr) minmax(180px,1fr);align-items:center;gap:16px;padding:0 18px;background:#0c0d0f;border-top:1px solid var(--line)}
.np{display:flex;align-items:center;gap:12px;min-width:0}
.np img{width:54px;height:54px;border-radius:10px;object-fit:cover;background:#1a1a1d;flex:none}
.np-meta{min-width:0}
.np-meta b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-meta span{display:block;color:var(--dim);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctl{display:flex;flex-direction:column;align-items:center;gap:4px}
.btns{display:flex;align-items:center;gap:8px}
.play{width:44px;height:44px;border-radius:50%;border:0;background:var(--gold);color:#111;display:grid;place-items:center}
.play:hover{background:var(--gold2)}
.play .i-pause{display:none}
.playing .play .i-pause{display:block}.playing .play .i-play{display:none}
#repOne{position:absolute;font-size:9px;font-weight:900;right:6px;top:6px;display:none;color:var(--gold)}
.rep-one #repOne{display:block}
.prog{display:flex;align-items:center;gap:10px;width:100%;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.prog input{flex:1}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:linear-gradient(var(--gold),var(--gold)) 0/var(--p,0%) 100% no-repeat,#33343b;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}
.right{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.right #vol{width:100px}

/* ---------- Floating video panel ---------- */
.pip{position:fixed;right:18px;bottom:calc(var(--pbar) + 14px);width:340px;z-index:40;background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);transition:transform .25s,opacity .25s}
.pip.off{transform:translateY(20px);opacity:0;pointer-events:none}
.pip.audio .pip-body{height:0}
.pip-head{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px}
.pip-meta{flex:1;min-width:0}
.pip-meta b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.pip-meta span{display:block;color:var(--dim);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pip-eq{display:flex;gap:2px;align-items:flex-end;height:14px}
.pip-eq i{width:3px;background:var(--gold);height:30%;border-radius:1px}
.playing .pip-eq i{animation:eq .9s ease-in-out infinite}.playing .pip-eq i:nth-child(2){animation-delay:-.3s}.playing .pip-eq i:nth-child(3){animation-delay:-.6s}
.pip-body{position:relative;height:191px;background:#000;transition:height .25s}
.pip-body iframe,#yt{position:absolute;inset:0;width:100%;height:100%;border:0}
.pip-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px}
.seg{display:flex;background:var(--panel2);border-radius:999px;padding:3px}
.seg button{border:0;background:none;padding:6px 12px;border-radius:999px;font-weight:800;font-size:13px;color:var(--dim)}
.seg button[aria-pressed=true]{background:var(--gold);color:#111}
.pip-note{font-size:11px;color:var(--dim);text-align:right}

/* Drawer & toast */
.drawer{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);display:flex;justify-content:flex-end}
.drawer-in{width:min(420px,100%);height:100%;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column}
.drawer-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.drawer-h b{font-size:18px}
#drawerBody{overflow:auto;padding:10px 12px 30px}
.qi{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer;border:0;background:none;width:100%;text-align:left}
.qi:hover{background:var(--panel2)}
.qi img,.qi .mini{width:40px;height:40px;border-radius:6px;object-fit:cover;flex:none}
.qi .mini{display:grid;place-items:center;background:linear-gradient(135deg,#3a2a08,#1c1430);color:var(--gold);font-weight:900;font-size:11px}
.qi div{min-width:0;flex:1}
.qi b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qi span{display:block;font-size:12px;color:var(--dim)}
.qi.cur b{color:var(--gold)}
.pl-new{display:flex;gap:8px;margin:6px 4px 14px}
.pl-new input{flex:1;padding:10px 12px;border-radius:10px;background:#0b0b0d;border:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:calc(var(--pbar) + 18px);translate:-50% 20px;opacity:0;z-index:70;background:var(--gold);color:#111;font-weight:800;padding:10px 18px;border-radius:999px;transition:.25s;pointer-events:none}
.toast.show{opacity:1;translate:-50% 0}

.tabbar{display:none}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  :root{--pbar:132px}
  .app{grid-template-columns:1fr}
  .side{display:none}
  .bar{padding:12px 16px;flex-wrap:wrap}
  .crumbs{flex-basis:100%}
  .search{flex:1;width:auto}
  .view{padding:18px 16px 40px}
  .player{grid-template-columns:1fr auto;grid-template-rows:auto auto;height:auto;bottom:60px;padding:8px 12px;gap:6px 10px}
  .np{grid-column:1}
  .right{grid-column:2;grid-row:1}
  .right #vol,.right #addPl{display:none}
  .ctl{grid-column:1/-1;flex-direction:row-reverse;gap:10px}
  .btns{gap:2px}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;height:60px;z-index:31;background:#08090a;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:700;color:var(--dim);text-decoration:none}
  .tabbar a.on{color:var(--gold)}
  .app{padding-bottom:calc(var(--pbar) + 60px)}
  .pip{right:10px;left:10px;width:auto;bottom:calc(var(--pbar) + 70px)}
  .pip-body{height:min(52vw,220px)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
  .toast{bottom:calc(var(--pbar) + 80px)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* YouTube hqdefault thumbnails are 4:3 with letterbox bars — crop them in square frames */
.sq{display:block;overflow:hidden;background:#111;flex:none;position:relative}
.sq img{width:100%;height:100%;object-fit:cover;display:block}
.sq .ph{font-size:12px}
.sq.row{width:44px;height:44px;border-radius:8px}
.sq.q{width:40px;height:40px;border-radius:6px}
.sq.cover{width:240px;aspect-ratio:1;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.sq.cover .ph,.sq.acover .ph{font-size:40px}
.sq.acover{width:200px;aspect-ratio:1;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.sq.round{border-radius:50%}
.photo img{transform:translateY(calc(var(--kick,0)*-6px)) scale(calc(1 + var(--kick,0)*.02))}
.photo{overflow:visible}
.photo .clip{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:1;border:5px solid #0b0b0d;background:#111}
.photo .clip img{border:0;border-radius:0}
@media (max-width:760px){.sq.cover{width:160px}.sq.acover{width:150px}}
.tl .tt b .e{display:inline-grid;color:#ddd;font-size:10px}
.tl .tt b .tag{display:inline-block;color:var(--gold2);font-size:11px}

/* Studio credit, install, feedback */
.studio{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);text-decoration:none;color:var(--dim);font-size:11px;margin-top:8px}
.studio img{border-radius:50%;border:1px solid var(--gold)}
.studio b{display:block;color:var(--text);font-size:12.5px}
.studio:hover{border-color:var(--gold)}
.side .me{margin-top:12px}
.gate-studio a{display:inline-flex;align-items:center;gap:8px;color:var(--gold2);text-decoration:none;font-weight:700}
.gate-studio img{border-radius:50%}
.studio-card{display:flex;gap:18px;align-items:flex-start;background:linear-gradient(135deg,#1a1405,#111214);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:16px;padding:20px}
.studio-card img{border-radius:50%;border:2px solid var(--gold);flex:none}
.studio-card h3{margin:4px 0 6px;font-size:20px}
.studio-card p{margin:0;color:var(--dim)}
.install{display:grid;gap:18px}
.ibox{display:flex;gap:18px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
.ibox h3{margin:0 0 4px;font-size:20px}.ibox p{margin:0 0 14px}
.iicon{border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
.step ol{margin:8px 0 0;padding-left:18px;color:var(--dim);line-height:1.7}
.step.qr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--dim);font-size:13px}
.step.qr img{border-radius:10px;background:#fff;padding:6px}
.mono{font-family:ui-monospace,monospace;color:var(--gold2)}
.fb{background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.fb iframe{display:block;width:100%;height:1250px;border:0}
.cta-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cta-box{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.cta-box img{border-radius:14px;flex:none}
.cta-box div{flex:1;min-width:0}
.cta-box b{display:block}.cta-box span{color:var(--dim);font-size:13px}
@media (max-width:900px){.cta-row{grid-template-columns:1fr}.tabbar{grid-template-columns:repeat(5,1fr)}.ibox{flex-direction:column;align-items:flex-start}.studio-card{flex-direction:column}}
.side{scrollbar-width:thin;scrollbar-color:#2a2b31 transparent}.side::-webkit-scrollbar{width:6px}.side::-webkit-scrollbar-thumb{background:#2a2b31;border-radius:3px}
@media (max-width:900px){
  :root{--pbar:142px}
  .ctl{flex-direction:column;gap:2px;min-width:0}
  .btns{justify-content:center;width:100%}
  .prog{padding:0 4px}
  .player{grid-template-columns:minmax(0,1fr) auto;padding:8px 12px 6px}
  .right{gap:0}
  .right .ic{width:34px;height:34px}
  .np-meta b{font-size:14px}
}

.ck{display:flex;align-items:center;gap:10px;margin:4px 0 14px;font-size:.88rem;color:var(--dim,#bbb);cursor:pointer}
.ck[hidden]{display:none}
.ck input{width:18px;height:18px;accent-color:#c9a84c}

/* long artist name: shrink sidebar brand to fit */
.side .brand span{font-size:14px}

/* legal links */
.legal-links{font-size:12px;color:var(--dim);margin:10px 0 0;text-align:center}
.legal-links a,.fine a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.legal-links a:hover,.fine a:hover{color:var(--gold,#e2b740)}

/* listen first */
.guest-cta{margin:14px 0 18px;display:grid;gap:8px}
.guest-cta .or{font-size:13px;color:var(--dim);text-align:center;margin:4px 0 0}
.guest-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:18px 28px 0;max-width:1224px;padding:12px 14px;border:1px solid rgba(226,183,64,.45);border-radius:14px;background:rgba(226,183,64,.08);font-size:14px;line-height:1.4}
.guest-bar b{color:var(--gold,#e2b740)}
@media (max-width:760px){.guest-bar{margin:14px 16px 0}}

/* ===== v2 fold / narrow-screen fix — WASHME TV Digital Studio =====
   Song tables could stretch wider than the phone (long titles never wrap),
   pushing the whole page off-screen on folded phones. Lock the table to the
   screen width so titles shorten with "…" and everything reflows when the
   phone is folded, unfolded or rotated. */
html{overflow-x:clip}
.view,.page,.main{min-width:0}
.tl{table-layout:fixed;width:100%}
.tl th.num{width:44px}
.tl th.yr{width:70px}
.tl th.du{width:64px}
.tl th.ac{width:132px}
.tl td.ac{overflow:visible}
@media (max-width:760px){
  .tl th.ac{width:84px}
}
@media (max-width:560px){
  .tl th,.tl td{padding:8px 6px}
  .tl th.num{width:30px}
  .tl td.num{padding-left:2px;padding-right:2px;font-size:13px}
  .tl th.du,.tl td.du{display:none}
  .tl th.ac{width:78px}
  .tl .tt{gap:10px}
  .tl .tt img,.tl .tt .mini{width:40px;height:40px}
  .tl .ac .ic{width:36px;height:36px}
  .tl .ac .ext{padding:4px 8px;font-size:11px;white-space:normal;line-height:1.2;display:inline-block;text-align:center}
  .hero .row-act,.row-act{flex-wrap:wrap}
}
@media (max-width:380px){
  .tl .tag{display:none}
}


/* Back to the FM collection — WASHME TV Digital Studio */
.fm-back{display:inline-flex;align-items:center;gap:2px;flex:none;height:36px;padding:0 12px 0 6px;border-radius:999px;border:1px solid var(--gold,#e2b740);color:var(--gold,#e2b740);font-weight:800;font-size:14px;text-decoration:none;white-space:nowrap;background:rgba(226,183,64,.08)}
.fm-back svg{width:20px;height:20px;fill:currentColor}
.fm-back:hover{background:var(--gold,#e2b740);color:#111}
.nav a.fm-nav{color:var(--gold,#e2b740)}

/* logos: no rings, transparent background (TV logo) */
img[src*="washme-logo.webp"],img[src*="logo-mark.png"],img[src*="tv-logo"]{border:0!important;border-radius:0!important;box-shadow:none!important;background:none!important;object-fit:contain}

/* phones: compact video dock (200x200 video beside the song info) stays visible while YouTube plays; the list scrolls above it */
.pip-body{min-height:200px}
.pip.audio.au .pip-body{min-height:0}
@media (max-width:900px){
  .app{padding-bottom:calc(var(--pbar) + 60px + var(--pipH,0px))}
  .pip{left:0;right:0;width:auto;bottom:calc(var(--pbar) + 62px);border-radius:14px 14px 0 0}
  .pip:not(.big):not(.au){display:grid;grid-template-columns:200px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:10px;padding:4px 10px 4px 4px}
  .pip:not(.big):not(.au) .pip-body{grid-column:1;grid-row:1/4;width:200px;height:200px;border-radius:10px;overflow:hidden}
  .pip:not(.big):not(.au) .pip-head{grid-column:2;grid-row:1;padding:6px 0 2px;align-items:flex-start}
  .pip:not(.big):not(.au) .pip-meta b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .pip:not(.big):not(.au) .pip-foot{grid-column:2;grid-row:2;flex-direction:column;align-items:flex-start;gap:6px;padding:6px 0}
  .pip:not(.big):not(.au) .pip-note{text-align:left}
  .pip:not(.big):not(.au) .pip-keep{grid-column:2;grid-row:3;align-self:end;flex-direction:column;align-items:flex-start;padding:0 0 6px;font-size:10.5px}
  .pip.big .pip-body{height:min(56vw,240px)}
  .toast{bottom:calc(var(--pbar) + 74px + var(--pipH,0px))}
}
.toast{border-radius:14px;text-align:center;line-height:1.4;width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;padding:12px 18px}