/* song.css — /song/<slug> page (extracted from inline <style>).
   Scoped to .songpg. Colors (--accent/--accent2/--glow) come from an inline <style> at page top. */
.songpg{position:relative;width:100%;padding:22px 40px 40px;min-height:calc(100vh - 62px - 80px)}
.songpg [hidden]{display:none!important}

.songpg #ambwrap{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.songpg #amb{position:absolute;inset:-20%;background-position:center;background-size:cover;filter:blur(52px) saturate(2.2) brightness(1);transform:scale(1.35) rotate(-7deg);opacity:1}
.songpg #amb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,11,.16),rgba(7,7,11,.52) 56%,#07070b)}

.songpg .hero{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;direction:ltr}
.songpg .npcard{width:min(94vw,430px);background:rgba(18,16,26,.5);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:18px 18px 20px;display:flex;flex-direction:column;align-items:center;gap:14px}
.songpg .coverwrap{position:relative;width:min(75vw,380px);height:min(75vw,380px)}
.songpg .coverwrap .bloom{position:absolute;inset:-24%;border-radius:50%;background:radial-gradient(circle,var(--glow) 0%,transparent 68%);filter:blur(52px);opacity:.72}
.songpg .cover{position:relative;width:100%;height:100%;border-radius:22px;object-fit:cover;box-shadow:0 36px 80px rgba(0,0,0,.6),0 0 85px -12px var(--glow);background:#15151c;display:block}
.songpg .titlerow{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.songpg .titlecol{min-width:0;text-align:left}
.songpg .ttl{font-size:clamp(1.5rem,6vw,2.1rem);font-weight:800;line-height:1.15;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.songpg .ar{color:rgba(255,255,255,.5);font-size:1rem;font-weight:500;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.songpg .likebig{background:none;border:none;color:rgba(255,255,255,.78);cursor:pointer;padding:4px;flex-shrink:0;transition:color .2s,transform .12s}
.songpg .likebig svg{width:46px;height:46px;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.songpg .likebig.isliked{color:#ff4d6d}
.songpg .likebig.isliked svg{fill:currentColor;stroke:none}
.songpg .likebig:active{transform:scale(.85)}
.songpg .prog{width:100%}
.songpg .pbar{position:relative;height:5px;background:rgba(255,255,255,.14);border-radius:5px;cursor:pointer;touch-action:none}
.songpg .pbar::before{content:"";position:absolute;top:-12px;bottom:-12px;left:0;right:0}
.songpg .pbar i{display:block;height:100%;width:0;background:var(--accent);border-radius:5px;touch-action:none;pointer-events:none}
.songpg .pbar .pth{position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.45);transform:translate(-50%,-50%);pointer-events:none}
.songpg .ptime{display:flex;justify-content:space-between;font-size:.78rem;opacity:.7;margin-top:8px;direction:ltr;font-variant-numeric:tabular-nums}
.songpg .fapers{text-align:center;direction:rtl;margin:2px 0 4px}
.songpg .fapers .fa{font-size:.92rem;font-weight:600;color:rgba(255,255,255,.6)}
.songpg .fapers .fb{font-size:.78rem;color:rgba(255,255,255,.4);margin-top:1px}
.songpg .ctl{width:100%;max-width:100%;display:flex;align-items:center;justify-content:center;gap:clamp(6px,2.4vw,13px);min-height:62px}
.songpg .pp{width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;background:var(--accent);color:#07070b;display:grid;place-items:center;box-shadow:0 14px 40px -8px var(--accent);transition:transform .15s;flex-shrink:0}
.songpg .pp:active{transform:scale(.93)}
.songpg .pp svg{width:30px;height:30px}
.songpg .pp .pa,.songpg .pp .ld{display:none}
.songpg .pp.playing .pi{display:none}
.songpg .pp.playing .pa{display:block}
.songpg .pp.loading .pi,.songpg .pp.loading .pa{display:none}
.songpg .pp.loading .ld{display:block;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.songpg .tb{width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.07);color:#fff;cursor:pointer;display:grid;place-items:center;flex-shrink:0;transition:background .15s,transform .12s}
.songpg .tb:hover{background:rgba(255,255,255,.13)}
.songpg .tb:active{transform:scale(.9)}
.songpg .tb svg{width:23px;height:23px;display:block}
.songpg .tb.sm{width:38px;height:38px}
.songpg .tb.sm svg{width:20px;height:20px}
.songpg .volrow{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;margin-top:8px}
.songpg .volrow input[type=range]{-webkit-appearance:none;appearance:none;width:140px;max-width:55%;height:4px;border-radius:4px;background:rgba(255,255,255,.18);outline:none}
.songpg .volrow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer}
.songpg .volrow input[type=range]::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:var(--accent);cursor:pointer}
.songpg .radiocta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;background:var(--accent);color:#07070b;border-radius:16px;padding:13px;font-weight:800;font-size:.95rem;text-decoration:none;margin-top:2px;box-shadow:0 10px 30px -10px var(--accent)}
.songpg .radiocta:active{transform:scale(.98)}
.songpg .acts{width:100%;display:flex;flex-wrap:wrap;gap:10px;margin-top:2px;direction:rtl}
.songpg .vinfo{width:100%;margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.08)}
.songpg .vtags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;direction:rtl}
.songpg .vtag{font-size:.72rem;padding:3px 11px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.78);text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.songpg .vtag:hover{background:rgba(255,255,255,.13)}
.songpg .vtag.editing{outline:2px solid #ffd87a;outline-offset:1px}
.songpg .vtag.vtag-add{opacity:.55;font-weight:700}
.songpg .vtag.vtag-add:hover{opacity:1}
.songpg .vtag.vtag-ok{opacity:.6;font-weight:700}
.songpg .vtag.vtag-ok:hover{opacity:1}
.songpg .vtag.vtag-ok.approved{opacity:1;background:rgba(34,197,94,.22);border-color:rgba(34,197,94,.5);color:#86efac}
.songpg .vtag input{width:10ch;max-width:40vw;background:transparent;border:none;outline:none;color:inherit;font-family:inherit;font-size:.72rem;text-align:center}
@media(max-width:640px){.songpg .vtag input{font-size:16px}}
.songpg .vtag.f-mood{color:#ffd87a;border-color:rgba(255,216,122,.3)}
.songpg .vtag.f-genre{color:#a7c7ff;border-color:rgba(167,199,255,.3)}
.songpg .vtag.f-theme{color:#ffb0c8;border-color:rgba(255,176,200,.28)}
.songpg .vtag.f-version{color:#b9f6c8;border-color:rgba(185,246,200,.3)}
.songpg .vaud{text-align:center;font-size:.74rem;opacity:.5;margin-top:9px;direction:ltr;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.songpg .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font:inherit;font-weight:600;font-size:.92rem;padding:13px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff}
.songpg #plBtn{flex:1}
.songpg #plBtn.issaved{border-color:var(--accent);color:var(--accent)}
.songpg .btn.dl,.songpg .btn.share,.songpg .btn.kb,.songpg .btn.story{width:54px;flex-shrink:0}
.songpg .btn.dl svg,.songpg .btn.share svg,.songpg .btn.kb svg{width:20px;height:20px}
.songpg .btn.story{font-size:22px;line-height:1}
.songpg .btn.story.loading{opacity:.5;pointer-events:none}

.songpg .sec{position:relative;z-index:1;margin-top:44px;max-width:860px;margin-left:auto;margin-right:auto}
.songpg .sectitle{font-size:1.15rem;font-weight:800;margin-bottom:16px}
.songpg .tlist{display:flex;flex-direction:column;gap:2px}
.songpg .trow{display:flex;align-items:center;gap:13px;padding:9px 10px;border-radius:13px;color:inherit;transition:background .15s}
.songpg .trow:hover{background:rgba(255,255,255,.05)}
.songpg .trow .th{width:52px;height:52px;border-radius:10px;object-fit:cover;background:#15151c;flex-shrink:0;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.songpg .trow .meta{flex:1;min-width:0}
.songpg .trow .tt{font-weight:600;font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.songpg .trow .ta{font-size:.78rem;opacity:.58;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.songpg .rlike{background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;padding:7px;flex-shrink:0;display:flex}
.songpg .rlike svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.songpg .rlike.isliked{color:#ff4d6d}
.songpg .rlike.isliked svg{fill:currentColor;stroke:none}
@media(max-width:640px){.songpg{padding:16px 14px 30px}}
@media(max-width:360px){.songpg .tb{width:40px;height:40px}.songpg .tb svg{width:21px;height:21px}.songpg .pp{width:56px;height:56px}.songpg .btn.dl,.songpg .btn.share,.songpg .btn.kb,.songpg .btn.story{width:48px}}

.songpg .sec.lyrics{margin-top:60px}
.songpg .lyrics .sectitle{display:flex;justify-content:center;align-items:center;gap:9px;flex-wrap:wrap}
.songpg .lyrics .sectitle .micon{width:21px;height:21px;flex-shrink:0}
.songpg .lhint{font-size:.74rem;opacity:.5;font-weight:500}
.songpg .lbox{position:relative;max-height:440px;overflow-y:auto;overflow-x:hidden;padding:26px 12px;text-align:center;scroll-behavior:smooth;-webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent)}
.songpg .lbox::-webkit-scrollbar{width:0}
.songpg .lplain{white-space:pre-line;text-align:right;direction:rtl;font-size:clamp(.88rem,3.4vw,1.02rem);line-height:1.95;color:rgba(255,255,255,.82);padding:18px 8px}
.songpg .lln{display:block;max-width:100%;font-size:clamp(1.5rem,5.5vw,2rem);font-weight:600;line-height:1.5;padding:8px 14px;border-radius:12px;color:rgba(255,255,255,.3);cursor:pointer;transform-origin:center;transition:color .3s,transform .3s,text-shadow .3s}
.songpg .lln:hover{color:rgba(255,255,255,.62)}
.songpg .lln.past{color:rgba(255,255,255,.2)}
.songpg .lln.active{color:#fff;font-weight:800;transform:scale(1.05);text-shadow:0 0 26px var(--accent)}

.plk{position:fixed;inset:0;z-index:130;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.plk[hidden]{display:none!important}
.plk-sheet{background:#12121a;width:100%;max-width:460px;border-radius:22px 22px 0 0;padding:18px 20px 30px;border:1px solid rgba(255,255,255,.08);max-height:82vh;overflow-y:auto;animation:plkUp .3s ease}
@keyframes plkUp{from{transform:translateY(40px);opacity:.4}to{transform:translateY(0);opacity:1}}
.plk-h{font-weight:800;font-size:1.02rem}
.plk-sub{font-size:.82rem;opacity:.6;margin:2px 0 16px}
.plk-close{float:left;background:none;border:none;color:#fff;font-size:1.05rem;cursor:pointer;opacity:.6}
.plk-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border-radius:13px;background:rgba(255,255,255,.05);margin-bottom:8px;cursor:pointer;border:1px solid transparent;transition:background .2s}
.plk-row:hover{background:rgba(255,255,255,.09)}
.plk-row.has{border-color:var(--accent);background:rgba(167,139,250,.12)}
.plk-row .nm{font-weight:600}
.plk-row .ct{font-size:.74rem;opacity:.55;white-space:nowrap}
.plk-new{display:flex;gap:8px;margin-top:14px}
.plk-new input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:11px 13px;color:#fff;font:inherit}
.plk-new button{background:var(--accent);color:#07070b;border:none;border-radius:11px;padding:11px 16px;font:inherit;font-weight:700;cursor:pointer}
.plk-ok{background:rgba(52,199,89,.16);border:1px solid rgba(52,199,89,.42);color:#7ee2a0;font-weight:700;font-size:.9rem;padding:11px 14px;border-radius:12px;margin:0 0 14px;animation:okIn .22s ease}
@keyframes okIn{from{transform:translateY(-6px);opacity:0}to{transform:translateY(0);opacity:1}}
.plk-done{width:100%;background:var(--accent);color:#07070b;border:none;border-radius:13px;padding:13px;font:inherit;font-weight:800;cursor:pointer;margin-top:18px}

/* ==== Lyrics-only middle column =========================================
   /song page's big transport card was removed — the shell owns audio + kebab
   owns actions. This is what's left: a slim title header + lyrics box, wide
   enough to breathe for karaoke reading. */
.songpg.lyrics-only {
  max-width: 720px;
  margin: 0 auto;
  padding: 26px 22px 40px;
}
.songpg.lyrics-only .lyr-head {
  text-align: center;
  padding: 8px 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 22px;
}
.songpg.lyrics-only .lyr-title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 6px;
}
.songpg.lyrics-only .lyr-artist {
  font-size: .95rem;
  color: rgba(255,255,255,.62);
}
.songpg.lyrics-only .lyr-artist .lyr-fa {
  color: var(--accent, #a78bfa);
  font-weight: 700;
}
.songpg.lyrics-only .sec.lyrics { margin-top: 0; }