.pl-new { display: flex; gap: 10px; margin-bottom: 6px; max-width: 420px; }
.pl-new input { margin-bottom: 0; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; }
.pl-card { background: var(--panel); border-radius: 4px; padding: 18px; cursor: pointer; min-width: 0; }
.pl-card:hover { background: #333; }
.pl-card .pl-icon { font-size: 34px; color: var(--accent); }
.pl-card .pl-name { margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-card .pl-count { color: var(--dim); font-size: 12px; }
.pl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
.pl-head h2 { margin: 0; }
.pl-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-actions button:disabled { opacity: .4; cursor: default; }
.pl-row { display: grid; grid-template-columns: 48px 1fr 36px; gap: 12px; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pl-row:hover { background: #2b2b2b; }
.pl-row .info { min-width: 0; }
.pl-row .title, .pl-row .artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-row .artist { color: var(--dim); font-size: 12px; }
.pl-row .more { background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 16px; }
.pl-row .more:hover { color: var(--accent); }

#picker { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .6);
  display: flex; align-items: center; justify-content: center; }
.picker-box { width: min(380px, 92vw); max-height: 92vh; overflow-y: auto; background: var(--panel);
  border-radius: 4px; padding: 24px; }
.picker-song { color: var(--dim); margin: -8px 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; max-height: 240px; overflow-y: auto; }
.pk-list button { text-align: left; padding: 10px 12px; background: #333; border: 0; border-radius: 3px;
  color: var(--text); cursor: pointer; }
.pk-list button:hover { background: #444; }
.pk-new { display: flex; gap: 8px; }
.pk-new input { margin-bottom: 0; }
.pk-new button { white-space: nowrap; }
.pk-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.pl-title-wrap { min-width: 0; }
.pl-visibility-label { display: inline-block; margin-top: 3px; color: var(--dim); font-size: 12px; }
.pl-card .pl-badge { display: inline-block; margin-top: 10px; padding: 3px 8px; border-radius: 12px;
  background: #444; color: var(--dim); font-size: 11px; }
.pl-card.is-public .pl-badge { background: rgba(255, 87, 34, .14); color: var(--accent); }