/* Bangs Music Distro - Professional Song Page UI */
:root{
  --sp-bg:#050607;
  --sp-bg-2:#090b0f;
  --sp-card:#11141a;
  --sp-card-2:#161a22;
  --sp-soft:#1d2330;
  --sp-text:#f6f7fb;
  --sp-muted:#a4adbc;
  --sp-subtle:#737d8e;
  --sp-line:rgba(255,255,255,.10);
  --sp-line-2:rgba(255,255,255,.06);
  --sp-green:#22c55e;
  --sp-green-2:#16a34a;
  --sp-blue:#60a5fa;
  --sp-gold:#fbbf24;
  --sp-red:#fb7185;
  --sp-shadow:0 24px 80px rgba(0,0,0,.45);
  --sp-radius:24px;
  --sp-radius-sm:16px;
  --sp-max:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--sp-bg)!important;color:var(--sp-text);overflow-x:hidden}
body.sp-player-open{padding-bottom:108px}

.sp-page{background:
  radial-gradient(circle at 20% 0%, rgba(34,197,94,.14), transparent 34%),
  radial-gradient(circle at 80% 7%, rgba(96,165,250,.10), transparent 30%),
  linear-gradient(180deg, #07090d 0%, #050607 45%, #050607 100%);
  min-height:100vh;padding:18px 14px 80px;color:var(--sp-text)
}
.sp-wrap{max-width:var(--sp-max);margin:0 auto}

.sp-topnav{display:flex;align-items:center;gap:10px;overflow-x:auto;scrollbar-width:none;padding:6px 2px 18px;margin:0 -2px}
.sp-topnav::-webkit-scrollbar{display:none}
.sp-chip{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:38px;padding:0 15px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--sp-line);color:#dbe2ee;text-decoration:none;font-weight:900;font-size:13px;transition:transform .18s ease,background .18s ease,border-color .18s ease;color-scheme:dark}
.sp-chip:hover{transform:translateY(-1px);background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.20);color:#fff;text-decoration:none}
.sp-chip.is-active{background:var(--sp-green);border-color:var(--sp-green);color:#061008}

.sp-hero{position:relative;display:grid;grid-template-columns:minmax(260px,410px) 1fr;gap:30px;align-items:center;border:1px solid var(--sp-line);border-radius:32px;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.035));box-shadow:var(--sp-shadow);padding:24px;margin-bottom:22px}
.sp-hero__glow{position:absolute;inset:-30px;background:var(--sp-cover-bg);background-size:cover;background-position:center;filter:blur(48px);opacity:.18;transform:scale(1.08);pointer-events:none}
.sp-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,7,.20),rgba(5,6,7,.72));pointer-events:none}
.sp-hero__cover,.sp-hero__body{position:relative;z-index:1}
.sp-hero__cover{border-radius:28px;overflow:hidden;aspect-ratio:1/1;background:#111;box-shadow:0 22px 70px rgba(0,0,0,.50);border:1px solid rgba(255,255,255,.14)}
.sp-hero__cover img{display:block;width:100%;height:100%;object-fit:cover}
.sp-kicker{display:flex;gap:10px;align-items:center;font-size:12px;font-weight:950;color:#b9c3d2;text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px}
.sp-kicker i{width:9px;height:9px;border-radius:999px;background:var(--sp-green);box-shadow:0 0 0 6px rgba(34,197,94,.14)}
.sp-title{font-size:clamp(34px,5vw,72px);line-height:.94;margin:0 0 14px;font-weight:1000;letter-spacing:-.055em;color:#fff;max-width:850px}
.sp-artistline{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 13px;color:#d6deeb;font-size:16px;font-weight:850}
.sp-artistline a,.sp-link{color:#fff;text-decoration:none;font-weight:950}
.sp-artistline a:hover,.sp-link:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.sp-muted{color:var(--sp-muted)}
.sp-meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.sp-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:8px 11px;background:rgba(255,255,255,.07);border:1px solid var(--sp-line);font-size:12px;font-weight:900;color:#dde5f1}
.sp-pill--green{background:rgba(34,197,94,.13);border-color:rgba(34,197,94,.35);color:#c9ffd9}
.sp-pill--gold{background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.33);color:#ffe9a8}
.sp-pill--red{background:rgba(251,113,133,.14);border-color:rgba(251,113,133,.33);color:#ffd0d8}
.sp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.sp-btn{border:0;border-radius:999px;padding:12px 18px;min-height:46px;display:inline-flex;gap:9px;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--sp-line);text-decoration:none;font-size:14px;font-weight:950;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,opacity .18s ease}
.sp-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.13);color:#fff;text-decoration:none}
.sp-btn:disabled,.sp-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.sp-btn--primary{background:var(--sp-green);border-color:var(--sp-green);color:#061008}
.sp-btn--primary:hover{background:#35d873;color:#061008}
.sp-btn--blue{background:#2563eb;border-color:#2563eb;color:#fff}
.sp-btn--gold{background:var(--sp-gold);border-color:var(--sp-gold);color:#160f01}
.sp-btn--danger{background:rgba(251,113,133,.14);border-color:rgba(251,113,133,.34);color:#ffd9df}

.sp-player-card{margin:18px 0 0;padding:14px;border-radius:22px;background:rgba(0,0,0,.24);border:1px solid var(--sp-line)}
.sp-main-player{width:100%;height:44px;display:block;accent-color:var(--sp-green)}
.sp-player-tools{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:12px}
.sp-round{width:48px;height:48px;border-radius:999px;border:0;background:var(--sp-green);color:#061008;font-weight:1000;display:grid;place-items:center;cursor:pointer;box-shadow:0 16px 40px rgba(34,197,94,.20)}
.sp-time{font-size:12px;color:var(--sp-muted);font-weight:850;text-align:right;white-space:nowrap}
.sp-progress{height:9px;background:rgba(255,255,255,.11);border-radius:999px;overflow:hidden;cursor:pointer}
.sp-progress span{display:block;width:0;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--sp-green),#88ffad)}
.sp-audio-note{font-size:12px;color:var(--sp-muted);margin-top:9px;font-weight:750}

.sp-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}
.sp-main{min-width:0;display:grid;gap:18px}
.sp-side{display:grid;gap:16px;position:sticky;top:14px;min-width:0}
.sp-panel{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:18px;box-shadow:0 16px 48px rgba(0,0,0,.22)}
.sp-panel--flush{padding:0;overflow:hidden}
.sp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.sp-head h2{font-size:22px;line-height:1.05;margin:0;color:#fff;letter-spacing:-.025em;font-weight:1000}
.sp-head p{margin:6px 0 0;color:var(--sp-muted);font-size:13px;font-weight:750}

.sp-tabs{display:flex;gap:8px;border-bottom:1px solid var(--sp-line);margin:-3px -3px 14px;padding:3px 3px 10px;overflow-x:auto;scrollbar-width:none}
.sp-tabs::-webkit-scrollbar{display:none}
.sp-tab{border:1px solid transparent;background:transparent;color:var(--sp-muted);padding:9px 12px;border-radius:999px;font-weight:950;cursor:pointer;white-space:nowrap}
.sp-tab.is-active{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.35);color:#c9ffd9}
.sp-tab-panel{display:none}.sp-tab-panel.is-active{display:block}
.sp-prose{color:#d7deeb;font-size:15px;line-height:1.75;font-weight:600;word-break:break-word}
.sp-prose p{margin:0 0 12px}.sp-prose p:last-child{margin-bottom:0}
.sp-lyrics{max-height:330px;overflow:hidden;position:relative;white-space:pre-line}
.sp-lyrics.is-open{max-height:none}
.sp-lyrics:not(.is-open)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:78px;background:linear-gradient(180deg,rgba(17,20,26,0),var(--sp-card));pointer-events:none}
.sp-more{margin-top:12px}

.sp-credits{display:grid;gap:12px}
.sp-credit-row{display:grid;grid-template-columns:130px 1fr;gap:12px;border-bottom:1px solid var(--sp-line-2);padding-bottom:12px}
.sp-credit-row:last-child{border-bottom:0;padding-bottom:0}
.sp-credit-key{font-size:12px;color:var(--sp-subtle);text-transform:uppercase;letter-spacing:.1em;font-weight:950}
.sp-credit-val{font-weight:850;color:#eef3fb}
.sp-credit-val a{color:#fff;text-decoration:none}.sp-credit-val a:hover{text-decoration:underline}

.sp-share-grid{display:flex;gap:9px;flex-wrap:wrap}
.sp-share{border:1px solid var(--sp-line);background:rgba(255,255,255,.07);border-radius:999px;padding:10px 13px;color:#fff;text-decoration:none;font-weight:950;font-size:13px;cursor:pointer}
.sp-share:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.sp-copy-ok{font-size:12px;color:#bfffd0;margin-top:10px;display:none;font-weight:850}.sp-copy-ok.is-show{display:block}

.sp-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sp-song-card{position:relative;background:rgba(255,255,255,.045);border:1px solid var(--sp-line);border-radius:20px;padding:10px;min-width:0;overflow:hidden;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.sp-song-card:hover{transform:translateY(-2px);background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.18)}
.sp-song-cover{position:relative;display:block;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:#111;color:#fff;text-decoration:none;margin-bottom:10px}
.sp-song-cover img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .22s ease}.sp-song-card:hover .sp-song-cover img{transform:scale(1.035)}
.sp-card-play{position:absolute;right:10px;bottom:10px;width:42px;height:42px;border-radius:999px;border:0;background:var(--sp-green);color:#061008;font-weight:1000;box-shadow:0 12px 30px rgba(0,0,0,.35);cursor:pointer}
.sp-song-title{display:block;color:#fff;text-decoration:none;font-weight:950;font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-song-title:hover{text-decoration:underline}
.sp-song-sub{margin-top:4px;color:var(--sp-muted);font-size:12px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-song-meta{margin-top:7px;color:var(--sp-subtle);font-size:12px;font-weight:850}

.sp-rank-list,.sp-mini-list{display:grid;gap:10px}
.sp-rank{display:grid;grid-template-columns:26px 48px 1fr auto;gap:10px;align-items:center;border-radius:16px;padding:8px;background:rgba(255,255,255,.045);border:1px solid var(--sp-line-2)}
.sp-rank-num{font-size:13px;color:var(--sp-subtle);font-weight:1000;text-align:center}
.sp-rank img{width:48px;height:48px;object-fit:cover;border-radius:13px;background:#111}
.sp-rank-title{display:block;color:#fff;text-decoration:none;font-weight:950;font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.sp-rank-artist{color:var(--sp-muted);font-size:12px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.sp-rank-play{width:36px;height:36px;border-radius:999px;border:1px solid var(--sp-line);background:rgba(255,255,255,.08);color:#fff;cursor:pointer}

.sp-side-card{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border:1px solid var(--sp-line);border-radius:22px;padding:15px;box-shadow:0 12px 40px rgba(0,0,0,.20)}
.sp-side-title{font-size:15px;color:#fff;margin:0 0 12px;font-weight:1000;letter-spacing:-.015em}
.sp-sale-box{display:grid;gap:10px}
.sp-sale-price{font-size:28px;font-weight:1000;letter-spacing:-.04em;color:#fff;margin:0}.sp-sale-caption{color:var(--sp-muted);font-size:12px;line-height:1.5;font-weight:750;margin:0}
.sp-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.sp-stat{border-radius:16px;background:rgba(255,255,255,.055);border:1px solid var(--sp-line-2);padding:12px}
.sp-stat b{display:block;color:#fff;font-size:18px;font-weight:1000;letter-spacing:-.02em}.sp-stat span{color:var(--sp-muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.sp-ad img{width:100%;height:auto;border-radius:18px;display:block;background:#111}.sp-ad a{text-decoration:none;color:#fff}.sp-ad-text{margin-top:8px}.sp-ad-text b{display:block;font-size:13px}.sp-ad-text span{display:block;color:var(--sp-muted);font-size:12px;margin-top:3px}

.sp-empty{border-radius:18px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.16);padding:18px;color:var(--sp-muted);font-weight:800;text-align:center}
.sp-alert{border-radius:18px;padding:14px 16px;margin-bottom:14px;border:1px solid rgba(251,113,133,.35);background:rgba(251,113,133,.12);color:#ffd7de;font-weight:850;line-height:1.5}
.sp-alert--gold{border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.12);color:#ffe6a3}

.sp-mini-player{position:fixed;left:50%;bottom:16px;transform:translate(-50%,140%);z-index:9999;width:min(760px,calc(100vw - 22px));display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:22px;background:rgba(12,15,20,.92);border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 80px rgba(0,0,0,.55);backdrop-filter:blur(14px);transition:transform .24s ease}
.sp-mini-player.is-show{transform:translate(-50%,0)}
.sp-mini-player img{width:54px;height:54px;border-radius:15px;object-fit:cover;background:#111}
.sp-mini-title{font-size:14px;font-weight:1000;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sp-mini-artist{font-size:12px;color:var(--sp-muted);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.sp-mini-actions{display:flex;align-items:center;gap:8px}.sp-mini-btn{width:42px;height:42px;border-radius:999px;border:0;background:var(--sp-green);color:#061008;font-weight:1000;cursor:pointer}.sp-mini-close{width:38px;height:38px;border-radius:999px;border:1px solid var(--sp-line);background:rgba(255,255,255,.08);color:#fff;font-weight:1000;cursor:pointer}

@media(max-width:980px){
  .sp-page{padding:12px 10px 96px}.sp-hero{grid-template-columns:1fr;gap:16px;padding:14px;border-radius:26px}.sp-hero:after{background:linear-gradient(180deg,rgba(5,6,7,.15),rgba(5,6,7,.78))}.sp-hero__cover{max-width:430px;width:100%;margin:0 auto;border-radius:22px}.sp-title{font-size:clamp(31px,10vw,50px)}.sp-grid{grid-template-columns:1fr}.sp-side{position:static}.sp-card-grid{display:flex;overflow-x:auto;gap:12px;padding-bottom:4px;scroll-snap-type:x mandatory;scrollbar-width:none}.sp-card-grid::-webkit-scrollbar{display:none}.sp-song-card{min-width:178px;scroll-snap-align:start}.sp-credit-row{grid-template-columns:1fr;gap:5px}.sp-player-tools{grid-template-columns:auto 1fr}.sp-time{grid-column:1 / -1;text-align:left}.sp-topnav{padding-bottom:12px}.sp-rank-title,.sp-rank-artist{max-width:unset}.sp-rank{grid-template-columns:24px 46px minmax(0,1fr) auto}.sp-actions .sp-btn{flex:1 1 calc(50% - 10px)}
}
@media(max-width:520px){
  .sp-actions .sp-btn{flex:1 1 100%;width:100%}.sp-hero{margin-bottom:16px}.sp-panel{padding:15px;border-radius:20px}.sp-stat-grid{grid-template-columns:repeat(2,1fr)}.sp-mini-player{grid-template-columns:48px 1fr auto;border-radius:18px;bottom:10px}.sp-mini-player img{width:48px;height:48px}.sp-mini-close{display:none}.sp-title{letter-spacing:-.04em}.sp-meta{gap:6px}.sp-pill{font-size:11px;padding:7px 9px}
}


/* Fix: keep the mobile mini-player cover visible and stable on all phone browsers */
.sp-mini-player img,
#spMiniCover{
  display:block !important;
  flex:0 0 auto;
  min-width:48px;
  min-height:48px;
  background:#111827 url('/assets/img/songs/cover1.jpg') center/cover no-repeat;
}
@media (max-width:640px){
  .sp-mini-player{
    grid-template-columns:50px minmax(0,1fr) auto !important;
    overflow:hidden;
  }
  .sp-mini-player img,
  #spMiniCover{
    width:50px !important;
    height:50px !important;
    min-width:50px;
    min-height:50px;
  }
}

/* Final player stability fixes */
.sp-audio-note.is-error{color:#ffb4b4;background:rgba(255,59,48,.1);border-color:rgba(255,59,48,.25)}
.sp-mini-player img,#spMiniCover{display:block!important;opacity:1!important;visibility:visible!important;object-fit:cover;background:#111827 url('/assets/img/songs/cover1.jpg') center/cover no-repeat;}
.sp-btn[disabled],.sp-round[disabled]{opacity:.55;cursor:not-allowed}

/* Pause, play-count and mobile UX final patch */
.sp-btn.is-playing,
.sp-round.is-playing,
.sp-card-play.is-playing,
.sp-mini-btn.is-playing{background:#ffffff !important;color:#05070a !important;}
.sp-audio-note{min-height:18px;}
@media (max-width:760px){
  html,body{overflow-x:hidden !important;}
  .sp-page{width:100%;max-width:100vw;padding:10px 10px 118px !important;}
  .sp-topnav{margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .sp-hero{padding:12px !important;border-radius:22px !important;gap:14px !important;}
  .sp-hero__cover{width:min(100%,360px) !important;max-width:360px !important;margin-inline:auto !important;}
  .sp-title{font-size:clamp(28px,9vw,42px) !important;line-height:1.02 !important;word-break:break-word;}
  .sp-artist-line,.sp-meta{font-size:13px !important;}
  .sp-actions{display:grid !important;grid-template-columns:1fr 1fr;gap:10px !important;}
  .sp-actions .sp-btn{width:100% !important;min-height:48px;justify-content:center;padding-left:12px !important;padding-right:12px !important;white-space:normal !important;text-align:center;}
  .sp-player-box{border-radius:18px !important;padding:12px !important;}
  .sp-player-tools{grid-template-columns:46px minmax(0,1fr) !important;gap:10px !important;}
  .sp-progress{min-width:0 !important;height:13px !important;}
  .sp-time{grid-column:1 / -1 !important;text-align:left !important;font-size:12px !important;}
  .sp-song-card{min-width:168px !important;}
  .sp-panel{padding:14px !important;border-radius:20px !important;}
  .sp-rank{grid-template-columns:22px 44px minmax(0,1fr) 36px !important;gap:8px !important;}
  .sp-rank-title,.sp-rank-artist{max-width:100% !important;}
  .sp-side-card{padding:14px !important;border-radius:20px !important;}
  .sp-mini-player{left:8px !important;right:8px !important;bottom:8px !important;width:auto !important;transform:translateY(140%) !important;grid-template-columns:52px minmax(0,1fr) 48px !important;padding:9px !important;border-radius:18px !important;}
  .sp-mini-player.is-show{transform:translateY(0) !important;}
  .sp-mini-player img,#spMiniCover{width:52px !important;height:52px !important;min-width:52px !important;min-height:52px !important;border-radius:14px !important;}
  .sp-mini-actions{gap:0 !important;}
  .sp-mini-btn{width:46px !important;height:46px !important;}
  .sp-mini-close{display:none !important;}
}
@media (max-width:390px){
  .sp-actions{grid-template-columns:1fr !important;}
  .sp-song-card{min-width:156px !important;}
  .sp-mini-title{font-size:13px !important;}
  .sp-mini-artist{font-size:11px !important;}
}

/* No-refresh player + stronger phone safety patch */
.sp-btn.is-playing,
.sp-round.is-playing,
.sp-card-play.is-playing,
#spMiniPlay.is-playing {
  transform: translateY(-1px);
}
.sp-audio-note.is-error {
  color: #ffb4b4 !important;
  background: rgba(255, 70, 70, .08);
  border: 1px solid rgba(255, 70, 70, .22);
  border-radius: 12px;
  padding: 9px 11px;
}
#spMiniCover {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #171717 url('/assets/img/songs/cover1.jpg') center/cover no-repeat;
}
@media (max-width: 760px) {
  body.sp-player-open { padding-bottom: 104px !important; }
  .sp-page { overflow-x: hidden; }
  .sp-wrap { width: min(100%, 100vw); padding-left: 12px; padding-right: 12px; }
  .sp-topnav { gap: 8px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .sp-chip { white-space: nowrap; }
  .sp-hero { grid-template-columns: 1fr !important; gap: 16px !important; padding: 14px !important; border-radius: 22px !important; }
  .sp-hero__cover { max-width: min(100%, 360px); margin: 0 auto; }
  .sp-title { font-size: clamp(28px, 8vw, 46px) !important; line-height: 1.02 !important; }
  .sp-artistline { font-size: 15px; flex-wrap: wrap; gap: 6px 8px; }
  .sp-meta { gap: 7px; }
  .sp-pill { font-size: 12px; padding: 7px 9px; }
  .sp-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 9px; }
  .sp-actions .sp-btn { width: 100%; min-height: 46px; justify-content: center; padding-left: 10px; padding-right: 10px; }
  #spMainPlay { grid-column: 1 / -1; min-height: 52px; font-size: 16px; }
  .sp-player-card { border-radius: 18px; padding: 12px; }
  .sp-player-tools { grid-template-columns: 46px 1fr; gap: 10px; }
  .sp-time { grid-column: 1 / -1; text-align: center; }
  .sp-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .sp-panel { border-radius: 20px; padding: 14px; }
  .sp-mini { left: 10px !important; right: 10px !important; bottom: 10px !important; width: auto !important; max-width: none !important; grid-template-columns: 52px minmax(0,1fr) 44px 36px !important; gap: 9px !important; padding: 8px !important; border-radius: 18px !important; }
  .sp-mini__title, .sp-mini__artist { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sp-related-grid, .sp-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
}
@media (max-width: 420px) {
  .sp-actions { grid-template-columns: 1fr; }
  .sp-related-grid, .sp-card-grid { grid-template-columns: 1fr !important; }
  .sp-mini { grid-template-columns: 48px minmax(0,1fr) 40px 32px !important; }
  #spMiniCover { width: 48px !important; height: 48px !important; min-width: 48px !important; }
}


/* Direct player fix: keep native audio controls visible so phones can always play/pause. */
.sp-native-audio{width:100%;display:block;margin:0 0 12px;accent-color:#22c55e;border-radius:14px;background:#0b0f14;min-height:42px}
.sp-player-card audio::-webkit-media-controls-panel{background-color:#10161d}
.sp-player-card audio::-webkit-media-controls-current-time-display,.sp-player-card audio::-webkit-media-controls-time-remaining-display{color:#fff}
.sp-btn.is-playing,.sp-round.is-playing,.sp-mini-btn.is-playing,.sp-card-play.is-playing{background:#f59e0b!important;border-color:#f59e0b!important;color:#140b00!important}
.sp-audio-note.is-error{display:block;padding:10px 12px;border:1px solid rgba(255,85,85,.35);border-radius:14px;background:rgba(255,85,85,.10);color:#ffd1d1;overflow-wrap:anywhere}
@media (max-width:700px){
  .sp-player-card{padding:12px;border-radius:18px}
  .sp-native-audio{min-height:48px;margin-bottom:10px}
  .sp-player-tools{grid-template-columns:44px 1fr;gap:9px}
  .sp-time{grid-column:1 / -1;text-align:left}
  .sp-mini-player{left:10px;right:10px;bottom:10px;width:auto;grid-template-columns:46px minmax(0,1fr) auto;padding:9px;border-radius:18px}
  .sp-mini-player img{width:46px;height:46px;border-radius:12px;display:block!important;visibility:visible!important;opacity:1!important;object-fit:cover;background:#111}
  .sp-actions{gap:8px}.sp-btn{width:auto;flex:1 1 calc(50% - 8px);padding:11px 12px;font-size:13px}.sp-btn--primary{flex-basis:100%}
  body.sp-player-open{padding-bottom:92px}
}


/* Hard player fix: keep native audio visible and custom buttons responsive */
#spAudio.sp-native-audio{display:block!important;visibility:visible!important;opacity:1!important;width:100%!important;min-height:48px!important;position:relative!important;z-index:3!important;}
#spMainPlay,#spMainPlayMirror,#spMiniPlay,.sp-card-play,.sp-rank-play{touch-action:manipulation;-webkit-tap-highlight-color:rgba(34,197,94,.25);}
.sp-audio-note.is-error{color:#fecaca!important;background:rgba(239,68,68,.12)!important;border-color:rgba(239,68,68,.35)!important;}
.sp-audio-note{margin-top:10px;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);font-size:12px;color:#cbd5e1;overflow-wrap:anywhere;}
@media(max-width:700px){
  .sp-player-card{display:block!important;margin-top:14px!important;padding:12px!important;}
  #spAudio.sp-native-audio{min-height:52px!important;margin-bottom:12px!important;}
  #spMainPlay{min-height:54px!important;font-size:16px!important;}
  .sp-mini-player{z-index:9999!important;}
}


/* PJAX rescue player safeguards */
#spMainPlay,#spMainPlayMirror,#spMiniPlay,.sp-card-play,.sp-rank-play{pointer-events:auto!important;touch-action:manipulation!important;-webkit-tap-highlight-color:rgba(34,197,94,.25)!important;position:relative;z-index:20}
.sp-player-card{position:relative;z-index:15}
#spAudio.sp-native-audio{display:block!important;visibility:visible!important;opacity:1!important;width:100%!important;min-height:54px!important;pointer-events:auto!important;position:relative!important;z-index:20!important;background:#111827!important;border-radius:14px!important}
.sp-audio-note{overflow-wrap:anywhere;word-break:break-word}
.sp-audio-note.is-error{display:block!important;color:#fecaca!important;background:rgba(239,68,68,.14)!important;border:1px solid rgba(239,68,68,.35)!important}
.sp-mini-player.is-show{display:grid!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
#spMiniCover{display:block!important;visibility:visible!important;opacity:1!important;object-fit:cover!important;background:#111827!important}
@media(max-width:700px){
  .sp-page{padding-bottom:120px!important;overflow-x:hidden!important}
  .sp-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .sp-actions .sp-btn{width:100%!important;min-height:54px!important;font-size:15px!important}
  .sp-player-card{display:block!important;margin-top:14px!important;padding:12px!important;border-radius:18px!important}
  #spAudio.sp-native-audio{min-height:56px!important;margin-bottom:12px!important}
  .sp-player-tools{grid-template-columns:48px 1fr!important;gap:10px!important}
  .sp-time{grid-column:1/-1!important;text-align:left!important}
}