/* Premium home music player — visual redesign */

.home-player{
  --hp-ink:#2f281f;
  --hp-muted:#7a6a58;
  --hp-bronze:#8d5f35;
  --hp-bronze-deep:#6a4324;
  --hp-line:rgba(93,66,34,.16);
  --hp-glass:rgba(255,250,244,.66);
  --hp-glow:rgba(212,176,128,.42);
  --hp-rose:rgba(214,168,168,.28);
  --hp-champagne:rgba(236,210,170,.5);
  --hp-art-a:#f3e1cb;
  --hp-art-b:#e8c4a8;
  --hp-art-c:#d9b3b8;
  --hp-art-d:#c9a86a;
  grid-column:1 / -1;
  width:100%;
  justify-self:center;
  position:relative;
  display:grid;
  grid-template-columns:minmax(132px,168px) minmax(0,1fr) minmax(168px,228px);
  gap:16px 18px;
  align-items:stretch;
  min-height:0;
  padding:16px 18px;
  border-radius:30px;
  border:1.5px solid rgba(196,160,90,.72);
  background:
    linear-gradient(155deg,rgba(255,253,250,.92),rgba(250,236,222,.68) 42%,rgba(247,230,220,.84)),
    var(--hp-glass);
  backdrop-filter:blur(22px) saturate(1.2);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:
    0 22px 48px rgba(76,55,29,.12),
    0 0 0 1px rgba(255,248,236,.55),
    0 0 34px rgba(201,168,106,.28),
    0 0 60px rgba(212,176,128,.12),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 28px rgba(236,210,170,.16);
  overflow:hidden;
  isolation:isolate;
  animation:fadeUp .8s ease;
  cursor:default;
  transition:box-shadow .45s ease, border-color .45s ease, transform .35s ease;
}

.home-player.is-playing{
  border-color:rgba(201,168,106,.72);
  box-shadow:
    0 22px 48px rgba(76,55,29,.12),
    0 0 0 1px rgba(255,248,236,.5),
    0 0 36px rgba(201,168,106,.28),
    0 0 60px rgba(232,170,120,.12),
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 0 28px rgba(236,210,170,.16);
  animation:hpFramePulse 4.8s ease-in-out infinite;
}

@keyframes hpFramePulse{
  0%,100%{box-shadow:0 22px 48px rgba(76,55,29,.12),0 0 0 1px rgba(255,248,236,.5),0 0 32px rgba(201,168,106,.22),inset 0 1px 0 rgba(255,255,255,.88),inset 0 0 24px rgba(236,210,170,.14)}
  50%{box-shadow:0 22px 48px rgba(76,55,29,.12),0 0 0 1px rgba(255,248,236,.55),0 0 44px rgba(201,168,106,.34),inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 30px rgba(236,210,170,.2)}
}

.home-player::before{
  content:"";
  position:absolute;
  inset:-45% auto auto -25%;
  width:60%;
  height:95%;
  background:
    radial-gradient(circle at 40% 40%,var(--hp-glow) 0%,transparent 62%),
    radial-gradient(circle at 70% 30%,var(--hp-rose) 0%,transparent 55%);
  opacity:.7;
  pointer-events:none;
  z-index:0;
}

.home-player::after{
  content:"";
  position:absolute;
  right:-12%;
  bottom:-38%;
  width:48%;
  height:78%;
  background:
    radial-gradient(circle at 30% 40%,var(--hp-champagne) 0%,transparent 68%),
    radial-gradient(circle at 70% 60%,rgba(186,160,196,.18) 0%,transparent 60%);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}

.home-player > *{
  position:relative;
  z-index:1;
}

.hp-leds{
  position:absolute;
  top:14px;
  right:18px;
  z-index:2;
  display:flex;
  gap:6px;
  pointer-events:none;
}
.hp-led{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(201,168,106,.35);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  transition:background .35s ease, box-shadow .35s ease;
}
.hp-led:nth-child(2){background:rgba(184,140,90,.4)}
.home-player.is-playing .hp-led{
  background:#d4b07b;
  box-shadow:0 0 8px rgba(212,176,128,.75), inset 0 0 0 1px rgba(255,255,255,.45);
}
.home-player.is-playing .hp-led:nth-child(1){animation:hpLed 1.8s ease-in-out infinite}
.home-player.is-playing .hp-led:nth-child(2){animation:hpLed 1.8s ease-in-out .35s infinite}
.home-player.is-playing .hp-led:nth-child(3){animation:hpLed 1.8s ease-in-out .7s infinite}
@keyframes hpLed{
  0%,100%{opacity:.45;box-shadow:0 0 4px rgba(212,176,128,.3)}
  50%{opacity:1;box-shadow:0 0 10px rgba(212,176,128,.85)}
}

/* —— Artwork —— */
.hp-now{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.hp-art{
  position:relative;
  width:100%;
  aspect-ratio:1;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.55);
  background:
    radial-gradient(120% 90% at 20% 15%,rgba(255,255,255,.55),transparent 42%),
    linear-gradient(155deg,#f3e1cb,#e8c4a8 48%,#d9b3b8);
  box-shadow:
    0 14px 30px rgba(76,55,29,.14),
    0 0 0 1px rgba(141,95,53,.08),
    inset 0 1px 0 rgba(255,255,255,.65);
  transform:translateZ(0);
  transition:box-shadow .45s ease, transform .6s ease;
}

.hp-art img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  z-index:0;
}

.hp-art-orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:1;
}

.hp-art-orb-a{
  width:70%;
  height:70%;
  left:-18%;
  top:-22%;
  background:radial-gradient(circle,rgba(255,255,255,.55) 0%,rgba(255,236,214,.18) 42%,transparent 72%);
  mix-blend-mode:screen;
}

.hp-art-orb-b{
  width:55%;
  height:55%;
  right:-18%;
  bottom:-14%;
  background:radial-gradient(circle,rgba(232,170,120,.42) 0%,rgba(201,168,106,.12) 45%,transparent 72%);
  mix-blend-mode:soft-light;
  opacity:.9;
}

.hp-art-shine{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(125deg,rgba(255,255,255,.38) 0%,transparent 32%,transparent 64%,rgba(255,255,255,.1) 100%);
  mix-blend-mode:soft-light;
  pointer-events:none;
}

.hp-art-glass{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.14) 0%,transparent 28%,transparent 70%,rgba(63,53,43,.1) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}

.home-player.is-playing .hp-art{
  box-shadow:
    0 16px 34px rgba(76,55,29,.16),
    0 0 40px rgba(232,170,120,.38),
    0 0 0 1px rgba(201,168,106,.25),
    inset 0 1px 0 rgba(255,255,255,.7);
}
.home-player.is-playing .hp-art-orb-b{
  animation:hpOrb 7s ease-in-out infinite alternate;
}
.home-player.is-playing .hp-art img{
  animation:hpArtDrift 12s ease-in-out infinite alternate;
}

@keyframes hpOrb{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(6%,-4%) scale(1.06)}
}
@keyframes hpArtDrift{
  from{transform:scale(1)}
  to{transform:scale(1.045)}
}

.hp-now-text{min-width:0}

.hp-kicker{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font:600 9px/1 Poppins,sans-serif;
  letter-spacing:1.7px;
  text-transform:uppercase;
  color:var(--hp-bronze);
}

.hp-live{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(141,95,53,.16);
  color:var(--hp-bronze-deep);
  letter-spacing:1.2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.hp-live::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:#b06a3a;
  box-shadow:0 0 8px rgba(176,106,58,.8);
  animation:hpBlink 1.6s ease-in-out infinite;
}
.hp-live[hidden]{display:none !important}
@keyframes hpBlink{
  0%,100%{opacity:1}
  50%{opacity:.35}
}

.hp-title{
  font-family:'Cormorant Garamond',serif;
  font-size:28px;
  font-weight:600;
  line-height:1.08;
  letter-spacing:.2px;
  color:var(--hp-ink);
  margin:8px 0 0;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  transition:opacity .28s ease, transform .28s ease;
}
.home-player.is-switching .hp-title{
  opacity:.35;
  transform:translateY(4px);
}

.hp-artist{
  margin:6px 0 0;
  font:400 12px/1.35 Poppins,sans-serif;
  color:var(--hp-muted);
}

/* —— Stage —— */
.hp-stage{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:11px;
  min-width:0;
  padding:4px 2px;
}

.hp-wave-panel{
  border-radius:16px;
  padding:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,244,232,.18));
  border:1px solid rgba(93,66,34,.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 8px 18px rgba(76,55,29,.04);
}

.hp-wave-wrap{
  display:block;
  width:100%;
  height:64px;
  padding:8px 10px;
  border:0;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,252,248,.35),rgba(245,232,218,.22));
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.hp-wave-wrap:focus-visible{
  outline:2px solid #c9a86a;
  outline-offset:2px;
}

.hp-wave{
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}

.hp-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.hp-btn{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--hp-bronze-deep);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
  transition:transform .25s ease, color .25s ease, box-shadow .25s ease;
}
.hp-btn:focus-visible{
  outline:2px solid #c9a86a;
  outline-offset:4px;
}
.hp-btn svg{
  width:15px;
  height:15px;
  fill:currentColor;
}

.hp-btn-skip{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(93,66,34,.14);
  background:rgba(255,251,246,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 4px 10px rgba(76,55,29,.05);
  color:rgba(106,67,36,.78);
}
.hp-btn-skip:hover{
  transform:translateY(-1px) scale(1.04);
  color:var(--hp-bronze-deep);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 16px rgba(141,95,53,.12);
}

.hp-btn-play{
  width:64px;
  height:64px;
  border-radius:50%;
}
.hp-play-glow,
.hp-play-ring,
.hp-play-core{
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
}
.hp-play-glow{
  inset:-10px;
  background:radial-gradient(circle,rgba(232,170,120,.5) 0%,rgba(201,168,106,.18) 42%,transparent 70%);
  opacity:.6;
  transition:opacity .3s ease, transform .3s ease;
}
.hp-play-ring{
  inset:0;
  border:1px solid rgba(236,210,170,.65);
  box-shadow:
    0 0 0 5px rgba(255,248,241,.38),
    0 0 18px rgba(201,168,106,.22),
    inset 0 1px 0 rgba(255,255,255,.55);
}
.hp-play-core{
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 35% 28%,rgba(255,255,255,.32),transparent 42%),
    linear-gradient(160deg,#b8874f 0%,#8a552c 48%,#6a4324 100%);
  color:#fff8f0;
  box-shadow:
    0 12px 26px rgba(106,67,36,.3),
    0 0 26px rgba(232,170,120,.32),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.hp-play-core svg{
  width:22px;
  height:22px;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));
}
.hp-play-core svg[hidden]{display:none !important}
.hp-btn-play:hover{
  transform:scale(1.05);
}
.hp-btn-play:hover .hp-play-glow{
  opacity:.92;
  transform:scale(1.06);
}
.home-player.is-playing .hp-play-glow{
  opacity:1;
  animation:hpGlow 2.4s ease-in-out infinite;
}
@keyframes hpGlow{
  0%,100%{transform:scale(1);opacity:.7}
  50%{transform:scale(1.08);opacity:1}
}

.hp-progress-row{
  display:grid;
  grid-template-columns:42px 1fr 42px;
  gap:10px;
  align-items:center;
}

.hp-time{
  font:500 10px/1 Poppins,sans-serif;
  color:var(--hp-muted);
  letter-spacing:.3px;
  font-variant-numeric:tabular-nums;
}
.hp-time.is-end{text-align:right}

.hp-seek{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#c9a86a var(--hp-pct,0%),rgba(93,66,34,.12) var(--hp-pct,0%));
  outline:none;
  cursor:pointer;
  transition:height .2s ease;
  box-shadow:0 0 12px rgba(201,168,106,.32), 0 0 4px rgba(184,140,90,.2);
}
.hp-seek:hover{height:4px}
.hp-seek::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fffaf4;
  border:1.5px solid #c4a05a;
  box-shadow:0 0 0 3px rgba(201,168,106,.22), 0 2px 8px rgba(76,55,29,.18), 0 0 10px rgba(212,176,128,.35);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.hp-seek:hover::-webkit-slider-thumb{
  transform:scale(1.12);
  box-shadow:0 0 0 4px rgba(201,168,106,.28), 0 3px 10px rgba(76,55,29,.2);
}
.hp-seek::-moz-range-thumb{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fffaf4;
  border:1.5px solid var(--hp-bronze);
  box-shadow:0 0 0 3px rgba(201,168,106,.18);
  cursor:pointer;
}

.hp-volume{
  display:flex;
  align-items:center;
  gap:7px;
  max-width:132px;
  margin:0 auto;
  opacity:.92;
}
.hp-volume svg{
  width:13px;
  height:13px;
  fill:#b8925a;
  flex:0 0 auto;
  opacity:.9;
  filter:drop-shadow(0 0 4px rgba(201,168,106,.25));
}
.hp-vol{
  -webkit-appearance:none;
  appearance:none;
  flex:1;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(196,160,90,.85) var(--hp-vol,70%),rgba(93,66,34,.12) var(--hp-vol,70%));
  outline:none;
  cursor:pointer;
  box-shadow:0 0 6px rgba(201,168,106,.12);
}
.hp-vol::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#fffaf4;
  border:1.5px solid #c4a05a;
  box-shadow:0 0 8px rgba(212,176,128,.4);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.hp-vol:hover::-webkit-slider-thumb{
  transform:scale(1.1);
  box-shadow:0 0 12px rgba(212,176,128,.55);
}
.hp-vol::-moz-range-thumb{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fffaf4;
  border:1.5px solid rgba(141,95,53,.7);
  cursor:pointer;
}

.hp-status{
  min-height:12px;
  text-align:center;
  font:400 10px/1.2 Poppins,sans-serif;
  color:var(--hp-muted);
  opacity:.85;
}

/* —— Playlist —— */
.hp-list{
  display:flex;
  flex-direction:column;
  min-width:0;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.5);
  background:
    linear-gradient(165deg,rgba(255,255,255,.42),rgba(255,246,236,.28));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 10px 22px rgba(76,55,29,.04);
  overflow:hidden;
  backdrop-filter:blur(10px);
}

.hp-list-head{
  padding:12px 14px 8px;
  font:600 9px/1 Poppins,sans-serif;
  letter-spacing:1.7px;
  text-transform:uppercase;
  color:var(--hp-bronze);
}

.hp-tracks{
  list-style:none;
  margin:0;
  padding:0 8px 10px;
  display:flex;
  flex-direction:column;
  gap:3px;
  overflow:auto;
  max-height:230px;
}

.hp-track{
  display:grid;
  grid-template-columns:18px minmax(0,1fr) auto auto;
  gap:8px;
  align-items:center;
  width:100%;
  text-align:start;
  padding:9px 10px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:var(--hp-ink);
  cursor:pointer;
  font:inherit;
  transition:background .22s ease, box-shadow .22s ease, transform .22s ease;
}
.hp-track:hover{
  background:rgba(255,252,248,.72);
  transform:translateX(1px);
}
.hp-track:focus-visible{
  outline:2px solid #c9a86a;
  outline-offset:1px;
}
.hp-track.is-active{
  background:linear-gradient(120deg,rgba(255,248,241,.92),rgba(236,214,186,.5));
  box-shadow:
    inset 0 0 0 1px rgba(196,160,90,.28),
    0 6px 14px rgba(141,95,53,.07),
    0 0 16px rgba(201,168,106,.12);
}
.hp-track-num{
  font:600 10px/1 Poppins,sans-serif;
  color:rgba(122,106,88,.7);
}
.hp-track.is-active .hp-track-num{color:var(--hp-bronze)}
.hp-track-meta{min-width:0}
.hp-track-title{
  display:block;
  font:500 12.5px/1.2 Poppins,sans-serif;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--hp-ink);
}
.hp-track.is-active .hp-track-title{
  font-weight:600;
  color:#2a221a;
}
.hp-track-sub{
  display:block;
  margin-top:2px;
  font:400 10px/1.2 Poppins,sans-serif;
  color:var(--hp-muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.hp-track-dur{
  font:500 10px/1 Poppins,sans-serif;
  color:rgba(122,106,88,.72);
  font-variant-numeric:tabular-nums;
  min-width:28px;
  text-align:right;
}
.hp-eq{
  display:flex;
  align-items:flex-end;
  gap:2px;
  width:12px;
  height:10px;
  opacity:0;
  transition:opacity .2s ease;
}
.hp-track.is-active .hp-eq{opacity:1}
.hp-eq i{
  display:block;
  width:2.5px;
  border-radius:2px;
  background:var(--hp-bronze);
  height:40%;
}
.home-player.is-playing .hp-track.is-active .hp-eq i:nth-child(1){animation:hpEq 0.7s ease-in-out infinite alternate}
.home-player.is-playing .hp-track.is-active .hp-eq i:nth-child(2){animation:hpEq 0.55s ease-in-out infinite alternate-reverse}
.home-player.is-playing .hp-track.is-active .hp-eq i:nth-child(3){animation:hpEq 0.8s ease-in-out infinite alternate}
@keyframes hpEq{
  from{height:28%}
  to{height:100%}
}

@media (max-width:1100px){
  .home-player{
    grid-column:1 / -1;
    grid-template-columns:128px minmax(0,1fr);
    grid-template-areas:
      "now stage"
      "list list";
  }
  .hp-now{grid-area:now}
  .hp-stage{grid-area:stage}
  .hp-list{grid-area:list;max-height:none}
  .hp-tracks{
    max-height:132px;
    flex-direction:row;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:10px;
  }
  .hp-track{min-width:180px}
}

@media (max-width:768px){
  .home-player{
    grid-column:1 / -1;
    grid-template-columns:1fr;
    grid-template-areas:
      "now"
      "stage"
      "list";
    padding:14px;
    gap:12px;
    border-radius:26px;
  }
  .hp-now{
    flex-direction:row;
    align-items:center;
    gap:12px;
  }
  .hp-art{
    width:84px;
    flex:0 0 84px;
    border-radius:18px;
  }
  .hp-title{font-size:22px}
  .hp-wave-wrap{height:52px;padding:6px 8px}
  .hp-btn-skip{width:34px;height:34px}
  .hp-btn-play{width:58px;height:58px}
  .hp-tracks{
    flex-direction:column;
    max-height:168px;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .hp-track{min-width:0}
  .hp-volume{max-width:120px}
}

@media (prefers-reduced-motion:reduce){
  .home-player,
  .home-player.is-playing,
  .hp-btn,
  .hp-track,
  .hp-title{transition:none;animation:none}
  .home-player.is-playing .hp-art-orb-b,
  .home-player.is-playing .hp-art img,
  .home-player.is-playing .hp-play-glow,
  .home-player.is-playing .hp-track.is-active .hp-eq i,
  .home-player.is-playing .hp-led,
  .hp-live::before{animation:none}
}