/* Container */
.player-container {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f8f9fa;
    border: 1px solid #eef1f6;
    border-radius: 12px;
    padding: 16px;
    width: 100%;
    margin: 0 0 24px 0;
    font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    box-sizing: border-box;
  }
  
  /* Artwork */
  .player-artwork {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    background: #f8f9fa;
    flex-shrink: 0;
  }
  
  /* Right side */
  .player-right {
    flex: 1;
    min-width: 0;
  }
  
  .player-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: #111;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  
  .player-sub {
    font-size: .9rem;
    color: #6b7280;
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  
  /* Controls row */
  .player-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
  }
  
  /* Buttons */
  .player-btn {
    background: #fff;
    border: 1px solid #e5e7eb;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid; place-items: center;
    cursor: pointer;
    transition: transform .06s ease, background .2s ease, border-color .2s ease;
  }
  .player-btn:hover { transform: translateY(-1px); background: #f3f4f6; }
  .player-btn svg { width: 22px; height: 22px; fill: #111; }
  
  /* Progress */
  .player-progress {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .player-time {
    width: 44px;
    font-size: .8rem; color: #6b7280; text-align: center;
  }
  .progress-bar {
    position: relative;
    height: 6px; border-radius: 4px;
    background: #e5e7eb; flex: 1; cursor: pointer;
  }
  .progress-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 0%;
    background: #111; border-radius: 4px;
  }
  
  /* Volume */
  .player-volwrap { display:flex; align-items:center; gap:10px; }
  .player-vol {
    -webkit-appearance: none; appearance: none;
    width: 120px; height: 6px; background: #e5e7eb; border-radius: 4px; outline: none;
  }
  .player-vol::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px; background: #111; border-radius: 50%;
  }
  
  /* Hidden YouTube iframe (must remain in DOM) */
  #yt-audio-sink { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
  
  /* Responsive */
  @media (max-width: 768px) {
    .player-container { 
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }
    .player-right {
      width: 100%;
    }
    .player-artwork { 
      width: 100%;
      height: auto;
      max-height: 40vh;
      aspect-ratio: 1/1;
    }
    .player-row { 
      flex-wrap: wrap;
      gap: 8px;
    }
    .player-progress { 
      order: 3; 
      width: 100%; 
      margin-top: 8px;
    }
  }