/* Universal box-sizing for consistency */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --lrc-text-color: #333; /* darker text */
  --lrc-bg-color: rgba(0, 0, 0, 0.05);
  --lrc-active-color: #000; /* bold black for active */
  --lrc-active-shadow: none; /* no glow in light mode */
  --lrc-hover-color: #005fcc; /* darker blue hover */
}

[data-theme="dark"] {
  --lrc-text-color: #ccc; /* original gray */
  --lrc-bg-color: rgba(255, 255, 255, 0.02);
  --lrc-active-color: #fff; /* bright white for active */
  --lrc-active-shadow: 0 0 4px rgba(212, 175, 55, 0.6); /* gold glow */
  --lrc-hover-color: #4fa2ff; /* original blue hover */
}

body {
  font-family: sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  min-width: 100vw;
  min-height: 100vh;
  /* background: linear-gradient(-45deg, #FFCDD2 50%, #B2EBF2 50%); */
}

/* Container for the player and album cover */
.music-container {
  width: 800px;          /* fixed desktop width */
  max-width: 90vw;       /* prevent overflow on smaller screens */
  height: auto !important;
  margin: 0 auto 120px auto; /* increased bottom margin */
  overflow-x: visible;    /* allow horizontal overflow if needed */
  overflow-y: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 1rem;
  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3);
}

/* Album cover section */
.album-cover {
  aspect-ratio: 1 / 1;       
  width: 100%;
  max-width: 30%;
  height: auto;
}

.album-cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;        
}


.album-cover > img:hover {
  opacity: 0.7;
}

/* Player info and controls */
.music-player {
  flex: 1 1 70%;           /* Take remaining ~70% */
  max-width: 70%;
  width: auto;
  height: auto !important;            /* Match container height */
  padding: 1em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: inherit;
  box-sizing: border-box;
  min-width: 0;            /* Fix flex overflow */
  flex-shrink: 0;          /* Prevent shrinking that hides content */
}