body {
        background: #f8faff;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .flex-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
      }
      .flex-row {
        display: flex;
        flex-direction: row;
        gap: 20px;
      }
      .img-box {
        width: 220px;
        height: 220px;
        background: #e3e9f7;
        border: 2px solid #f54c4c;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 1em;
        box-shadow: 0 2px 8px rgba(90, 173, 250, 0.08);
        overflow: hidden;
        color: #7a7a7a;
      }
      .img-placeholder {
        width: 80px;
        height: 80px;
        background: #cfd8e8;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95em;
        color: #a0a0a0;
        margin-bottom: 6px;
        background-size: cover;
      }
      .img-box img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 6px;
  background: #cfd8e8;
  display: block;
  transition: 
    box-shadow 0.3s,
    filter 0.3s,
    transform 0.3s;
  cursor: pointer;
}

/* Bloom animation on hover only if not grayed out */
.img-box img:not(.img-dark):hover {
  box-shadow: 0 0 30px 10px #d94fbe88;
  transform: scale(1.15);
  filter: brightness(1.2);
}

.img-dark {
  filter: brightness(0.6) grayscale(0.3);
}

.img-normal {
  filter: none;
  box-shadow: none;
  transform: none;
}

.navbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-image: url('80a6725cb821b310705c937b0465e09c.png');
  border-bottom: 2px solid #ff5454;
  padding: 0.8em 2em;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

.navbar-title {
  font-size: 2em;
  font-weight: bold;
  color: #d94fbe;
  letter-spacing: 1px;
}

.navbar-settings {
  font-size: 1em;
  padding: 0.5em 1.2em;
  border-radius: 6px;
  border: 2px solid #90adfa;
  background: #fff;
  color: #333;
  cursor: pointer;
  justify-content: space-around;
}

body {
  margin-top: 70px;
}
:root {
        --primary-bg: #e3e9f7;
        --primary-accent: #1a237e;
        --navbar-bg: #1a237e;
        --navbar-accent: #b0bec5;
        --playing-glow: #e75480;
        --paused-glow: #f7a6c1;
        --font-main: 'Segoe UI', Arial, sans-serif;
        --img-size: 180px;
      }
      [data-theme="blue"] {
        --primary-bg: linear-gradient(135deg, #139dff 0%, #cc0000 100%);
        --primary-accent: #0d47a1;
        --navbar-bg: #1976d2;
        --navbar-accent: #90caf9;
        --playing-glow: #e75480;
        --paused-glow: #f7a6c1;
      }
      [data-theme="bgimage"] {
        --primary-bg: url('your-background-image.jpg') center center/cover no-repeat fixed;
        --primary-accent: #fff;
        --navbar-bg: rgba(30,30,30,0.85);
        --navbar-accent: #fff;
        --playing-glow: #e75480;
        --paused-glow: #f7a6c1;
      }
      html, body {
        background: var(--primary-bg);
        color: var(--primary-accent);
        font-family: var(--font-main);
        margin: 0;
        padding: 0;
        min-height: 100vh;
      }
      .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--navbar-bg);
        border-bottom: 2px solid var(--navbar-accent);
        padding: 0.8em 2em;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10;
        background-image: url('plid.png');
      }
      .navbar-title {
        font-size: 2em;
        font-weight: bold;
        color: var(--navbar-accent);
        letter-spacing: 1px;
      }
      .navbar-settings, .theme-toggle {
        font-size: 1em;
        padding: 0.5em 1.2em;
        border-radius: 6px;
        border: 2px solid var(--navbar-accent);
        background: #fff;
        color: var(--primary-accent);
        cursor: pointer;
        margin-left: 1em;
        transition: background 0.2s, color 0.2s;
      }
      .navbar-settings:active, .theme-toggle:active {
        background: var(--navbar-accent);
        color: #fff;
      }
      .navbar-controls {
        display: flex;
        align-items: center;
      }
      .flex-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        margin-top: 110px;
      }
      .flex-row {
        display: flex;
        flex-direction: row;
        gap: 30px;
      }
      .img-standalone {
        width: var(--img-size);
        height: var(--img-size);
        object-fit: contain;
        border-radius: 50%;
        margin-bottom: 6px;
        background: transparent;
        display: block;
        transition: 
          box-shadow 0.3s,
          filter 0.3s,
          transform 0.3s,
          border-color 0.3s;
        cursor: pointer;
        border: 0;
        box-shadow: none;
      }
      .img-standalone.spinning {
        box-shadow: 0 0 40px 16px var(--playing-glow);
        border-color: var(--playing-glow);
      }
      .img-standalone.paused {
        box-shadow: 0 0 40px 16px var(--paused-glow);
        border-color: var(--paused-glow);
      }
      @media (max-width: 1100px) {
        .flex-row {
          gap: 16px;
        }
        .img-standalone {
          width: 120px;
          height: 120px;
        }
        .navbar-title {
          font-size: 1.3em;
        }
      }
      @media (max-width: 700px) {
        .flex-row {
          flex-direction: column;
          gap: 12px;
        }
        .flex-container {
          gap: 12px;
        }
        .img-standalone {
          width: 60vw;
          height: 60vw;
          max-width: 180px;
          max-height: 180px;
        }
        .navbar {
          flex-direction: column;
          align-items: flex-start;
          padding: 0.5em 1em;
        }
        .navbar-controls {
          margin-top: 0.5em;
        }
      }
      .audio-title {
  margin-top: 8px;
  font-size: 1.08em;
  color: #fff;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 2px 8px #000, 0 0 2px #222;
  letter-spacing: 0.5px;
  display: block;
}