/* Listen page — spiritual modern presentation. Functional markup and player remain unchanged. */
.listen-hero{}
main.wrap[style*="max-width:820px"]{
  max-width:980px!important;
  padding-top:38px;
}
main.wrap[style*="max-width:820px"] .page-title{
  text-align:center;
  font-size:clamp(30px,4.2vw,42px);
  color:var(--gold-hi);
  letter-spacing:.8px;
  margin-bottom:4px;
}
main.wrap[style*="max-width:820px"] .page-title::before{
  content:"۞";
  display:block;
  color:var(--gold);
  font-size:22px;
  margin-bottom:4px;
}
main.wrap[style*="max-width:820px"] .page-sub{
  text-align:center;
  max-width:760px;
  margin:0 auto 28px;
  color:var(--muted);
}
.player-card{
  position:relative;
  overflow:hidden;
  max-width:900px;
  margin:0 auto 28px;
  padding:34px 34px 28px;
  border-color:rgba(201,162,39,.55);
  background:
    radial-gradient(circle at 50% 18%,rgba(201,162,39,.10),transparent 38%),
    linear-gradient(145deg,var(--panel),var(--panel-2));
  box-shadow:0 18px 45px rgba(0,0,0,.28), inset 0 1px rgba(228,197,99,.08);
}
.player-card::before,.player-card::after{
  content:"";
  position:absolute;
  width:52px;height:52px;
  border:1px solid var(--gold);
  opacity:.42;
  transform:rotate(45deg);
}
.player-card::before{top:-28px;left:-28px}
.player-card::after{bottom:-28px;right:-28px}
.player-card .now-ar{
  font-size:clamp(40px,5vw,56px);
  color:var(--gold-hi);
  text-shadow:0 0 24px rgba(201,162,39,.18);
}
.player-card .now-en{font-size:21px;margin-top:2px}
.player-card .now-meta{letter-spacing:.5px}
.seek-row{max-width:760px;margin:26px auto 8px}
.ctrl-row{gap:16px;margin-top:14px}
.ctrl{width:48px;height:48px;background:rgba(15,42,36,.9)}
.ctrl.big{width:68px;height:68px;box-shadow:0 8px 22px rgba(201,162,39,.2)}
.mini-row{margin-top:20px}
.chip{background:rgba(15,42,36,.55)}
.index-tools{max-width:900px;margin:0 auto 18px}
.index-tools .search-box input{background:var(--panel-2);border-color:rgba(201,162,39,.3)}
.track-list{max-width:900px;margin:0 auto;gap:10px}
.track{
  padding:14px 18px;
  border-radius:13px;
  background:linear-gradient(90deg,var(--panel),var(--panel-2));
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.track:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(0,0,0,.18)}
.track.current{box-shadow:inset 3px 0 var(--gold),0 8px 20px rgba(0,0,0,.16)}
@media(max-width:640px){
  main.wrap[style*="max-width:820px"]{padding:24px 14px 60px}
  .player-card{padding:26px 16px 22px}
  .player-card .now-ar{font-size:36px}
  .ctrl-row{gap:9px}
}