.player-card {
      width: 100%;
      background: rgba(22, 28, 46, 0.85);
      backdrop-filter: blur(8px);
      border-radius: 2.5rem;
      box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.03);
      transition: all 0.2s;
    }

    /* ----- TOP NAV / PLAYLIST BAR ----- */
    .playlist-nav {
      display: flex;
      flex-wrap: wrap;
      align-items: top;
      gap: 0.2rem 0.2rem;
      margin-bottom: .5rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	  align-items: center;
      justify-content: center;
    }

    .nav-item {
      position: relative;
      list-style: none;
    }

    .nav-btn {background: rgba(255, 255, 255, 0.08);
      border: none;
	  color: tomato;
      border-radius: 3rem;
      padding: .3rem .5rem .4rem;
      font-weight: 500;margin-top:.2rem;
      border-radius: 40px;
      font-size: 0.8rem;
      letter-spacing: 0.3px;
      transition: 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: 0.2s;margin-left: 10px;
     backdrop-filter: blur(4px);
      box-shadow: 0 4px 58px rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .nav-btn:hover {
      background: rgba(255, 255, 255, 0.06);
      color: #d6e2ff;
      border-color: rgba(255, 255, 255, 0.08);
    }

    .nav-btn.active {
      background: rgba(255, 255, 255, 0.06);
      color: #d6e2ff;
      border-color: rgba(255, 255, 255, 0.08);
    }

    /* sublist (dropdown) */
    .sublist {
      display: none;
      background: #1e253b;
      left: 0;
      backdrop-filter: blur(12px);
      border-radius: 20px;
      padding: 0.9rem 0;
      min-width: 180px;
      box-shadow: 0 20px 35px -8px #080b14;
      border: 1px solid rgba(255, 255, 255, 0.06);
      z-index: 10;
    }

    .sublist.show {
      display: block;
    }

    .sublist-item {
      background: transparent;
      border: none;
      width: 100%;
      text-align: left;
      padding: .5rem 1.6rem;
      color: #bfcdf5;
      font-size: 0.9rem;
      font-weight: 450;
      transition: 0.15s;
      cursor: pointer;
      letter-spacing: 0.2px;
      display: flex;
      align-items: center;
      gap: 1px;
    }

    .sublist-item:hover {
      background: rgba(79, 110, 247, 0.2);
      color: white;
    }

    .sublist-item .track-indicator {
      font-size: 0.7rem;
      opacity: 0.6;
    }

    /* ----- TRACK INFO DISPLAY ----- */
    .track-info {
      display: flex;
      align-items: center;
      gap: 1rem;
      background: rgba(0, 0, 0, 0.25);
      border-radius: 60px;
      padding: 0.1rem 1.5rem 0.5rem 1.8rem;
       border: 1px solid rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(2px);
    }

    .track-info-icon {
      font-size: 1.4rem;
      opacity: 0.7;
    }

    .track-info-text {
      flex: 1;
      color: #dae3ff;
      font-weight: 600;
      letter-spacing: 0.2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .track-info-text strong {
      font-weight: 600;
      background: linear-gradient(90deg,red,#00c996);
-webkit-background-clip: text;background-clip: text;color: transparent;
      margin-right: 0.4rem;
    }

    .track-info-text span {
      opacity: 0.7;
      font-size: 0.9rem;
    }

    /* ----- AUDIO PLAYER CONTROLS ----- */
    .player-controls {
      background: rgba(12, 16, 28, 0.5);
      border-radius: 60px;
      padding: .0rem 3.5rem;
      backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, 0.03);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.8rem 1.2rem;
    }

    .ctrl-btn {
      background: transparent;
      border: none;
      color: #b3c3f0;
      font-size: 1.4rem;
      width: 32px;
      height: 32px;
      border-radius: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;margin-top:.1rem;
      transition: 0.2s;
      cursor: pointer;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid transparent;
    }

    .ctrl-btn:hover {
      background: rgba(79, 110, 247, 0.15);
      color: white;
      border-color: rgba(255, 255, 255, 0.05);
      transform: scale(1.02);
    }

    .ctrl-btn.primary {
      background: #4f6ef7;
      color: white;
      box-shadow: 0 6px 14px #1f3bb0;
    }

    .ctrl-btn.primary:hover {
      background: #5f7cff;
      box-shadow: 0 8px 20px #2a47c0;
    }

    .volume-wrapper {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      margin-left: 0.5rem;
      flex: 1 1 140px;
    }

    .volume-icon {
      color: #8b9cd6;
      font-size: 1.2rem;
    }

    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      width: 100%;
      max-width: 120px;
      cursor: pointer;
      height: 4px;
      background: #2f3a5a;
      border-radius: 10px;
      transition: 0.2s;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #6b86ff;
      border: 2px solid #c4d2ff;
      box-shadow: 0 2px 8px #0e1a3a;
      transition: 0.1s;
    }

    input[type="range"]::-webkit-slider-thumb:hover {
      background: #8aa0ff;
      transform: scale(1.08);
    }

    input[type="range"]::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #6b86ff;
      border: 2px solid #c4d2ff;
      cursor: pointer;
    }

    /* progress1 bar */
    .progress1-wrap {
      width: 100%;
      margin-top: .0rem;
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }

    .progress1-time {
      color: #8699cc;
      font-size: 0.8rem;
      font-variant-numeric: tabular-nums;
      min-width: 44px;
    }

    .progress1-bar {
      flex: 1;
      height: 4px;
      background: #2a3454;
      border-radius: 20px;
      position: relative;
      cursor: pointer;
    }

    .progress1-fill {
      width: 0%;
      height: 100%;
      background: linear-gradient(90deg, #6b86ff, #a5baff);
      border-radius: 20px;
      transition: width 0.08s linear;
    }