:root{
  --card: rgba(255,255,255,.78);
  --card2: rgba(255,255,255,.62);
  --stroke: rgba(20,20,30,.14);
  --text: #1a1a22;
  --muted: rgba(26,26,34,.72);
  --shadow: 0 18px 60px rgba(0,0,0,.16);
  --radius: 22px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  overflow-x:hidden;

  /* SFONDO DEFINITIVO CON PNG */
  background:
    url("assets/background.png") repeat,
    radial-gradient(circle at 10% 10%, rgba(255,79,216,.30), transparent 50%),
    radial-gradient(circle at 90% 20%, rgba(107,255,207,.28), transparent 55%),
    radial-gradient(circle at 20% 90%, rgba(255,216,107,.25), transparent 55%),
    radial-gradient(circle at 90% 90%, rgba(107,182,255,.28), transparent 55%),
    linear-gradient(140deg, rgba(255,255,255,.45), rgba(255,255,255,.05));

  background-size: 600px 600px, auto, auto, auto, auto, auto;
  background-attachment: fixed;
}

.shell{
  min-height:100%;
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* TOP BAR */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--card2);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--stroke);
}
.brand__title{ font-weight:800; }
.brand__subtitle{ font-size:.92rem; color: var(--muted); }

.topbar__actions{ display:flex; gap:10px; }
.chip{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.70);
  border-radius: 999px;
  padding: 8px 12px;
  cursor:pointer;
}

/* LAYOUT */
.stage{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:14px;
  align-items:start;
}

@media (max-width: 980px){
  .stage{ grid-template-columns: 1fr; }
}

/* VIDEO */
.videoCard{
  position: sticky;
  top: 14px;
  align-self: start;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.video{
  width:100%;
  height:auto;
  display:block;
  background: rgba(0,0,0,.35);
}

.nowPlaying{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border-top: 1px solid var(--stroke);
  background: rgba(255,255,255,.62);
}

.nowPlaying__title{
  font-weight:900;
  font-size:1.08rem;
}

.nowPlaying__artist{
  color: var(--muted);
  font-size:.95rem;
}

/* COVER GRANDE */
.nowPlaying__cover{
  width:110px;
  height:110px;
  border-radius: 22px;
  object-fit:cover;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.45);
}

/* PLAYER */
.audioCard{
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.controls{
  display:flex;
  align-items:center;
  gap:10px;
}

.btn{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.75);
  border-radius: 16px;
  padding: 10px 12px;
  cursor:pointer;
}

.btn--primary{
  font-weight:800;
  padding: 10px 16px;
}

.spacer{ flex:1; }

.vol{
  display:flex;
  align-items:center;
  gap:8px;
  min-width: 170px;
}
#volume{ width: 100%; }

.timeline{
  display:grid;
  grid-template-columns: 48px 1fr 48px;
  align-items:center;
  gap:10px;
  margin-top: 12px;
}

.time{
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size:.95rem;
}

.bar{
  height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  border: 1px solid var(--stroke);
  overflow:hidden;
  cursor:pointer;
}

.bar__fill{
  height:100%;
  width:0%;
  background: rgba(0,0,0,.30);
  border-radius: 999px;
}

/* PLAYLIST */
.playlistHeader{
  display:flex;
  justify-content:space-between;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0,0,0,.18);
}

.playlist{
  margin-top: 10px;
  max-height: 520px;
  overflow:auto;
}

.track{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.58);
  margin-bottom: 10px;
  cursor:pointer;
}

.track.is-active{
  background: rgba(255,255,255,.86);
}

.track__left{
  display:flex;
  align-items:center;
  gap:10px;
}

.track__index{
  width:28px;
  height:28px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.06);
  font-weight:800;
}

.track__title{ font-weight:900; }

.track__right{
  display:flex;
  align-items:center;
  gap:8px;
}

/* EQUALIZER */
.eq{
  width:22px;
  height:16px;
  display:flex;
  align-items:flex-end;
  gap:3px;
  opacity:0;
}

.track.is-active .eq{ opacity:1; }

.eq span{
  width:4px;
  height:6px;
  background: rgba(0,0,0,.55);
  animation: eq 700ms infinite ease-in-out;
}

.eq span:nth-child(2){ animation-duration:600ms; }
.eq span:nth-child(3){ animation-duration:800ms; }
.eq span:nth-child(4){ animation-duration:560ms; }

.track.is-active.is-paused .eq span{
  animation:none;
}

@keyframes eq{
  0%,100%{ height:4px; }
  50%{ height:16px; }
}

/* TITOLO CHE PULSA */
@keyframes pulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.04); }
  100%{ transform:scale(1); }
}

.nowPlaying__title.is-playing{
  animation: pulse 1.6s ease-in-out infinite;
}

/* FOOTER */
.credits{
  margin-top:auto;
  border-radius: var(--radius);
  background: rgba(255,255,255,.65);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.credits__inner{
  padding: 14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.credits__text{ color: var(--muted); }
.credits__right{ display:flex; align-items:center; gap:12px; }
.credits__logo{ width:44px; opacity:.85; }
.credits__tag{ font-weight:800; }