/* playlists.css — premium private playlist experience */
#cloudPlaylistsRoot { width:100%; }
.pl-page-head { display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:22px; }
.pl-page-head h2,.pl-detail-hero h2 { font-size:clamp(2rem,4vw,3.2rem);line-height:1;margin:6px 0 10px; }
.pl-page-head p,.pl-detail-hero p { color:var(--text-secondary); }
.pl-primary,.pl-secondary { border:0;border-radius:999px;min-height:46px;padding:0 20px;font:700 .9rem 'Space Grotesk',sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px; }
.pl-primary { background:linear-gradient(135deg,#8d68ff,#5a8cff);color:white;box-shadow:0 12px 32px rgba(103,92,255,.28); }
.pl-secondary { background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:white; }
.pl-primary:disabled { opacity:.45;cursor:not-allowed; }
.pl-account-note { display:flex;align-items:center;gap:8px;color:#b9b2c7;font-size:.84rem;margin-bottom:18px; }
.pl-account-note i { color:#8dffbc; }
.pl-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px; }
.pl-card { position:relative;padding:12px;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.09);cursor:pointer;transition:.25s ease;overflow:hidden; }
.pl-card:hover { transform:translateY(-5px);border-color:rgba(148,111,255,.55);box-shadow:0 20px 50px rgba(0,0,0,.28); }
.pl-card-art { aspect-ratio:1;border-radius:15px;background:linear-gradient(135deg,#33255f,#0e0c17);overflow:hidden;display:grid;place-items:center;font-size:2.3rem;color:#c8b8ff;position:relative; }
.pl-card-art img,.pl-cover img { width:100%;height:100%;object-fit:cover;display:block; }
.pl-card-play { position:absolute;right:12px;bottom:12px;width:48px;height:48px;border:0;border-radius:50%;background:#8d68ff;color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.35);cursor:pointer;opacity:0;transform:translateY(8px);transition:.2s; }
.pl-card:hover .pl-card-play { opacity:1;transform:none; }
.pl-card-copy { padding:14px 4px 5px; }
.pl-card-copy h3 { font-size:1.03rem;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.pl-card-copy p { color:var(--text-secondary);font-size:.8rem;min-height:38px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.pl-card-copy small { color:#8f879b;display:block;margin-top:9px; }
.pl-menu-btn { position:absolute;top:19px;right:19px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(4,4,8,.72);color:#ddd;cursor:pointer;opacity:0;transition:.2s; }
.pl-card:hover .pl-menu-btn { opacity:1; }
.pl-empty-card { grid-column:1/-1;min-height:260px;border-radius:24px;border:1px dashed rgba(255,255,255,.18);background:rgba(255,255,255,.025);color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:pointer; }
.pl-empty-card i { font-size:2.4rem;color:#9d7cff; }
.pl-empty-card span,.pl-empty-copy { color:var(--text-secondary); }
.pl-modal-backdrop { position:fixed;inset:0;z-index:12000;background:rgba(0,0,0,.68);backdrop-filter:blur(12px);display:grid;place-items:center;padding:18px;opacity:0;transition:.18s; }
.pl-modal-backdrop.open { opacity:1; }
.pl-modal { width:min(520px,100%);max-height:min(720px,90vh);overflow:auto;border-radius:24px;padding:26px;background:linear-gradient(160deg,#18131f,#0b0910);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 100px rgba(0,0,0,.58);position:relative; }
.pl-modal h3 { font-size:1.65rem;margin:6px 0 20px; }
.pl-modal-close { position:absolute;right:16px;top:16px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:white;cursor:pointer; }
.pl-field { display:block;margin:14px 0; }
.pl-field span { display:flex;justify-content:space-between;font-size:.8rem;color:#c9c2d2;margin-bottom:7px; }
.pl-field em { color:#7d7587;font-style:normal; }
.pl-field input,.pl-field textarea { width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:white;padding:13px 14px;font:inherit;outline:none; }
.pl-field textarea { min-height:100px;resize:vertical; }
.pl-field input:focus,.pl-field textarea:focus { border-color:#8d68ff;box-shadow:0 0 0 3px rgba(141,104,255,.14); }
.pl-modal-action { width:100%;margin-top:12px; }
.pl-picker-list { display:grid;gap:8px;max-height:380px;overflow:auto; }
.pl-picker-row { width:100%;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;text-align:left;padding:10px;border-radius:14px;border:1px solid transparent;background:rgba(255,255,255,.04);color:white;cursor:pointer; }
.pl-picker-row:hover { border-color:rgba(141,104,255,.5);background:rgba(141,104,255,.1); }
.pl-picker-row span:nth-child(2) { display:flex;flex-direction:column;gap:4px;min-width:0; }
.pl-picker-row small { color:var(--text-secondary); }
.pl-cover { display:grid;place-items:center;background:linear-gradient(135deg,#33255f,#111);overflow:hidden;color:#c9baff;flex:none; }
.pl-cover-small { width:48px;height:48px;border-radius:10px; }
.pl-cover-large { width:170px;height:170px;border-radius:20px;font-size:2.8rem; }
.pl-cover-track { width:52px;height:52px;border-radius:10px; }
.pl-detail-hero { display:grid;grid-template-columns:auto auto 1fr auto;align-items:end;gap:22px;padding:24px;border-radius:24px;background:linear-gradient(135deg,rgba(105,78,180,.3),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.09); }
.pl-back { align-self:start;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);color:white;cursor:pointer; }
.pl-track-list { margin-top:18px;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.08); }
.pl-track { display:grid;grid-template-columns:32px 52px 1fr auto;align-items:center;gap:13px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer;transition:.15s; }
.pl-track:last-child { border-bottom:0; }
.pl-track:hover { background:rgba(255,255,255,.055); }
.pl-track-number { color:#81798b;text-align:center;font-size:.8rem; }
.pl-track-copy { display:flex;flex-direction:column;gap:4px;min-width:0; }
.pl-track-copy strong,.pl-track-copy small { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.pl-track-copy small { color:var(--text-secondary); }
.pl-track-remove { width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:#91899b;cursor:pointer; }
.pl-track-remove:hover { color:#ff6b8b;background:rgba(255,70,110,.1); }
.pl-loading,.pl-empty-detail { min-height:250px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:var(--text-secondary); }
.playlist-add-btn { position:absolute;right:12px;bottom:12px;z-index:8;display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(8,7,12,.82);backdrop-filter:blur(10px);color:#fff;padding:8px 11px;font:700 .72rem 'Space Grotesk',sans-serif;cursor:pointer;opacity:0;transform:translateY(5px);transition:.2s; }
.video-result:hover .playlist-add-btn,.trending-card:hover .playlist-add-btn { opacity:1;transform:none; }
.player-playlist-btn { display:inline-flex!important; }
@media (hover:none) { .playlist-add-btn,.pl-card-play,.pl-menu-btn { opacity:1;transform:none; } }
@media (max-width:700px) {
  .pl-page-head { align-items:flex-start;flex-direction:column; }
  .pl-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:11px; }
  .pl-card { padding:8px;border-radius:16px; }
  .pl-card-copy p { display:none; }
  .pl-detail-hero { grid-template-columns:auto 88px 1fr;padding:14px;gap:12px;align-items:center; }
  .pl-cover-large { width:88px;height:88px;border-radius:14px; }
  .pl-detail-hero .pl-primary { grid-column:2/4;width:100%; }
  .pl-detail-hero h2 { font-size:1.5rem; }
  .playlist-add-btn { opacity:1;transform:none;padding:7px 9px; }
  .playlist-add-btn span { display:none; }
}

/* =========================================================
   CRITICAL MODAL CLICK-SAFETY FIX
   The hidden playlist backdrop must not cover the entire page.
   ========================================================= */
.pl-modal-backdrop {
  pointer-events: none;
}

.pl-modal-backdrop[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.pl-modal-backdrop.open:not([hidden]) {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* Playlist picker membership state */
.pl-picker-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 150px;
  color: var(--text-secondary);
}

.pl-picker-status {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-end;
  gap: 7px !important;
  min-width: 70px;
  color: var(--text-secondary);
  font-size: .76rem;
}

.pl-picker-status b {
  font: inherit;
  font-weight: 800;
}

.pl-picker-row.is-working {
  cursor: wait;
  opacity: .75;
}

.pl-picker-row.is-added,
.pl-picker-row.is-added:hover {
  cursor: default;
  border-color: rgba(57, 255, 20, .28);
  background: rgba(57, 255, 20, .08);
  opacity: 1;
}

.pl-picker-row.is-added .pl-picker-status {
  color: #73ff8f;
}

.pl-picker-row:disabled {
  opacity: 1;
}

@media (max-width: 520px) {
  .pl-picker-status {
    min-width: 58px;
  }

  .pl-picker-status b {
    display: inline;
  }
}