/* Playlists — IT-TUBE styling: white/red, minimal, mobile-first responsive. */

.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:16px}
.pl-card{background:#fff;border:1px solid var(--border-soft);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-soft);min-width:0}
.pl-card-cover{position:relative;display:block;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.pl-card-cover:hover{text-decoration:none}
.pl-card-cover img{width:100%;height:100%;object-fit:cover;display:block}
.pl-card-empty{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--text-muted);background:linear-gradient(135deg,var(--surface-2),var(--red-ghost))}
.pl-card-count{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;background:rgba(24,24,27,.82);color:#fff;font-size:12px;font-weight:600;padding:4px 9px;border-radius:8px}
.pl-card-vis{position:absolute;left:8px;top:8px}
.pl-card-info{padding:12px 14px}
.pl-card-title{font-size:15px;margin:0 0 4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pl-card-meta{font-size:13px;color:var(--text-secondary)}

.pl-create-card{background:#fff;border:1px solid var(--border-soft);border-radius:14px;padding:18px;box-shadow:var(--shadow-soft);margin-top:14px;max-width:640px}
.pl-create-card h2{font-size:17px;margin:0 0 12px}
.pl-create-form{display:flex;flex-direction:column;gap:10px}
.pl-create-form input[type=text],.pl-create-form textarea,.pl-create-form select,
.pl-modal-box input[type=text],.pl-modal-box textarea,.pl-modal-box select,
.pl-edit-box input[type=text],.pl-edit-box textarea,.pl-edit-box select{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--text);font-size:14px}
.pl-create-form input:focus,.pl-create-form textarea:focus,.pl-create-form select:focus,
.pl-modal-box input:focus,.pl-modal-box textarea:focus,.pl-modal-box select:focus,
.pl-edit-box input:focus,.pl-edit-box textarea:focus,.pl-edit-box select:focus{
  outline:none;border-color:var(--red-bright);box-shadow:0 0 0 3px var(--red-soft)}
.pl-vis-label{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-secondary)}
.pl-vis-label select{flex:1}
.pl-create-form .btn{align-self:flex-start}

/* Playlist page */
.pl-page{max-width:960px;margin:0 auto}
.pl-hero{display:flex;gap:20px;background:#fff;border:1px solid var(--border-soft);border-radius:16px;padding:20px;box-shadow:var(--shadow-soft);margin-bottom:18px}
.pl-cover{position:relative;flex:0 0 320px;width:320px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--surface-2)}
.pl-cover img{width:100%;height:100%;object-fit:cover}
.pl-cover-empty{font-size:0}
.pl-cover .pl-card-count{font-size:13px}
.pl-hero-info{min-width:0;flex:1}
.pl-kicker{font-size:13px;color:var(--text-muted);margin:0 0 6px;display:flex;align-items:center;gap:8px}
.pl-title{font-size:24px;margin:0 0 8px;overflow-wrap:anywhere}
.pl-owner{font-size:14px;color:var(--text-secondary);margin:0 0 8px}
.pl-desc{font-size:14px;margin:0 0 12px;overflow-wrap:anywhere}
.pl-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.pl-note{font-size:13px;margin:10px 0 0}

.pl-edit-box{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:18px;max-width:640px}
.pl-edit-box h2{font-size:17px;margin:0 0 12px}
.pl-edit-box form{display:flex;flex-direction:column;gap:10px}

.pl-items{list-style:none;display:flex;flex-direction:column;gap:10px;padding:0;margin:0}
.pl-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border-soft);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow-soft)}
.pl-item.drag-over{border-color:var(--red-bright);box-shadow:0 0 0 3px var(--red-soft)}
.pl-item.dragging{opacity:.55}
.pl-drag{cursor:grab;color:var(--text-muted);display:inline-flex;flex-shrink:0;padding:6px;touch-action:none}
.pl-num{color:var(--text-muted);font-size:14px;min-width:22px;text-align:center;flex-shrink:0}
.pl-thumb{position:relative;flex:0 0 168px;width:168px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--surface-2);display:block}
.pl-thumb img,.pl-thumb video{width:100%;height:100%;object-fit:cover}
.pl-thumb .duration{position:absolute;right:6px;bottom:6px;background:rgba(24,24,27,.82);color:#fff;font-size:11.5px;padding:2px 7px;border-radius:6px}
.pl-thumb .photo-indicator{position:absolute;left:6px;bottom:6px}
.pl-item-info{flex:1;min-width:0}
.pl-item-title{font-size:15px;margin:0 0 4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pl-item-meta{font-size:13px;color:var(--text-secondary)}
.pl-remove{flex-shrink:0}

/* Save modal */
.pl-modal-box{max-width:420px}
.pl-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.pl-modal-head h3{margin:0}
.pl-modal-error{color:var(--danger);font-size:13.5px;margin:6px 0}
.pl-modal-list{display:flex;flex-direction:column;max-height:46vh;overflow-y:auto;margin:8px 0}
.pl-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--border-soft);padding:11px 4px;cursor:pointer;font-size:14px;color:var(--text)}
.pl-row:hover{background:var(--red-ghost)}
.pl-row:last-child{border-bottom:0}
.pl-check{flex-shrink:0;width:22px;height:22px;border:1.5px solid var(--border);border-radius:7px;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:#fff}
.pl-row[aria-pressed=true] .pl-check{background:var(--red-bright);border-color:var(--red-bright)}
.pl-row-info{flex:1;min-width:0}
.pl-row-title{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-row-sub{display:block;font-size:12.5px;color:var(--text-muted)}
.pl-create{margin-top:10px;border-top:1px solid var(--border-soft);padding-top:10px}
.pl-create summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--text-secondary);padding:6px 0}
.pl-create summary:hover{color:var(--red-600)}
.pl-create form{display:flex;flex-direction:column;gap:8px;margin-top:8px}

/* Playlist strip on video pages */
.pl-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--border-soft);border-radius:12px;padding:10px 14px;margin:0 0 12px;font-size:14px;box-shadow:var(--shadow-soft)}
.pl-strip .btn{height:34px;padding:0 12px;font-size:13.5px}

/* Profile tabs */
.pl-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 4px}
.pl-tabs .btn{height:34px;padding:0 14px;font-size:13.5px;text-decoration:none}
.pl-tabs .btn[aria-current=page]{background:var(--red-soft);border-color:var(--red-bright);color:var(--red-800)}

@media (max-width:720px){
  .pl-hero{flex-direction:column;padding:14px}
  .pl-cover{flex:none;width:100%}
  .pl-title{font-size:20px}
  .pl-thumb{flex-basis:128px;width:128px}
  .pl-num{display:none}
}