/* ══════════════════════════════════════════════════
   VPR TV v2 — Frontend Playlist
   ══════════════════════════════════════════════════ */

.vpr-playlist {
  --vpr-accent: #FF6B00;
  --vpr-radius: 6px;
  display: grid;
  grid-template-columns: 1fr 320px;
  overflow: hidden;
  border-radius: var(--vpr-radius);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.5;
}

/* ── DARK ──────────────────────────────────────── */
.vpr-playlist--dark { background:#111; border:1px solid rgba(255,255,255,.07); }
.vpr-playlist--dark .vpr-playlist__sidebar      { background:#181818; border-left:1px solid rgba(255,255,255,.07); }
.vpr-playlist--dark .vpr-playlist__sidebar-head { border-bottom:1px solid rgba(255,255,255,.07); }
.vpr-playlist--dark .vpr-playlist__sidebar-title{ color:#aaa; }
.vpr-playlist--dark .vpr-playlist__sidebar-count{ color:#555; }
.vpr-playlist--dark .vpr-playlist__now-playing  { background:#141414; border-top:1px solid rgba(255,255,255,.07); }
.vpr-playlist--dark .vpr-playlist__np-badge     { color:var(--vpr-accent); background:rgba(255,107,0,.12); }
.vpr-playlist--dark .vpr-playlist__np-cat       { color:#666; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.08); }
.vpr-playlist--dark .vpr-playlist__np-num       { color:var(--vpr-accent); }
.vpr-playlist--dark .vpr-playlist__np-title     { color:#f0f0f0; }
.vpr-playlist--dark .vpr-playlist__np-desc      { color:#777; }
.vpr-playlist--dark .vpr-playlist__channel-btn  { background:rgba(255,255,255,.06); color:#ddd; border:1px solid rgba(255,255,255,.1); }
.vpr-playlist--dark .vpr-playlist__channel-btn:hover { background:var(--vpr-accent); color:#fff; border-color:var(--vpr-accent); }
.vpr-playlist--dark .vpr-ep-item               { border-bottom:1px solid rgba(255,255,255,.05); }
.vpr-playlist--dark .vpr-ep-item:hover         { background:rgba(255,255,255,.04); }
.vpr-playlist--dark .vpr-ep-item--active       { background:rgba(255,107,0,.08); border-left:3px solid var(--vpr-accent); }
.vpr-playlist--dark .vpr-ep-item__num          { color:var(--vpr-accent); }
.vpr-playlist--dark .vpr-ep-item__title        { color:#e0e0e0; }
.vpr-playlist--dark .vpr-ep-item__cat          { color:#555; background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }
.vpr-playlist--dark .vpr-ep-item__desc         { color:#666; }

/* ── LIGHT ─────────────────────────────────────── */
.vpr-playlist--light { background:#fff; border:1px solid #e0e0e0; box-shadow:0 2px 12px rgba(0,0,0,.07); }
.vpr-playlist--light .vpr-playlist__sidebar      { background:#f5f5f5; border-left:1px solid #e0e0e0; }
.vpr-playlist--light .vpr-playlist__sidebar-head { border-bottom:1px solid #e0e0e0; }
.vpr-playlist--light .vpr-playlist__sidebar-title{ color:#555; }
.vpr-playlist--light .vpr-playlist__sidebar-count{ color:#aaa; }
.vpr-playlist--light .vpr-playlist__now-playing  { background:#fafafa; border-top:1px solid #e8e8e8; }
.vpr-playlist--light .vpr-playlist__np-badge     { color:var(--vpr-accent); background:rgba(255,107,0,.08); }
.vpr-playlist--light .vpr-playlist__np-cat       { color:#888; background:#efefef; border-color:#ddd; }
.vpr-playlist--light .vpr-playlist__np-num       { color:var(--vpr-accent); }
.vpr-playlist--light .vpr-playlist__np-title     { color:#111; }
.vpr-playlist--light .vpr-playlist__np-desc      { color:#666; }
.vpr-playlist--light .vpr-playlist__channel-btn  { background:var(--vpr-accent); color:#fff; border:1px solid var(--vpr-accent); }
.vpr-playlist--light .vpr-playlist__channel-btn:hover { background:#E85D04; border-color:#E85D04; }
.vpr-playlist--light .vpr-ep-item               { border-bottom:1px solid #eee; }
.vpr-playlist--light .vpr-ep-item:hover         { background:rgba(0,0,0,.025); }
.vpr-playlist--light .vpr-ep-item--active       { background:#fff5ed; border-left:3px solid var(--vpr-accent); }
.vpr-playlist--light .vpr-ep-item__num          { color:var(--vpr-accent); }
.vpr-playlist--light .vpr-ep-item__title        { color:#111; }
.vpr-playlist--light .vpr-ep-item__cat          { color:#888; background:#efefef; border-color:#ddd; }
.vpr-playlist--light .vpr-ep-item__desc         { color:#888; }

/* ── PLAYER COL ────────────────────────────────── */
.vpr-playlist__player-col { display:flex;flex-direction:column;min-width:0; }
.vpr-playlist__frame-wrap { position:relative;aspect-ratio:16/9;background:#000;width:100%; }
.vpr-playlist__frame      { position:absolute;inset:0;width:100%;height:100%;border:none;display:block; }

/* Now-playing */
.vpr-playlist__now-playing { padding:16px 20px;display:flex;flex-direction:column;gap:10px;flex:1; }

.vpr-playlist__np-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vpr-playlist__np-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px; width: fit-content;
}

.vpr-playlist__np-cat {
  display: inline-block;
  font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px;
  border: 1px solid transparent;
}

.vpr-playlist__np-info { flex:1; }
.vpr-playlist__np-num  { display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px; }
.vpr-playlist__np-title{ font-size:1rem;font-weight:700;line-height:1.3;margin:0;padding:0;border:none; }
.vpr-playlist__np-desc { font-size:.82rem;margin-top:4px;line-height:1.5; }

.vpr-playlist__channel-btn {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; font-size: .78rem; font-weight: 600;
  padding: 8px 14px; border-radius: 4px;
  transition: background .18s, color .18s, border-color .18s;
  width: fit-content;
}

/* ── SIDEBAR ────────────────────────────────────── */
.vpr-playlist__sidebar { display:flex;flex-direction:column;min-width:0;overflow:hidden; }
.vpr-playlist__sidebar-head { display:flex;align-items:center;justify-content:space-between;padding:12px 14px;flex-shrink:0; }
.vpr-playlist__sidebar-title { display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em; }
.vpr-playlist__sidebar-count { font-size:.72rem; }
.vpr-playlist__list { overflow-y:auto;flex:1;max-height:440px;scrollbar-width:thin;scrollbar-color:var(--vpr-accent) transparent; }
.vpr-playlist__list::-webkit-scrollbar { width:4px; }
.vpr-playlist__list::-webkit-scrollbar-thumb { background:var(--vpr-accent);border-radius:2px; }

/* ── EPISODE ITEM ───────────────────────────────── */
.vpr-ep-item { display:flex;gap:10px;padding:10px 12px;cursor:pointer;transition:background .15s;border-left:3px solid transparent; }
.vpr-ep-item:focus { outline:2px solid var(--vpr-accent);outline-offset:-2px; }

.vpr-ep-item__thumb { position:relative;width:90px;aspect-ratio:16/9;flex-shrink:0;border-radius:3px;overflow:hidden;background:#000; }
.vpr-ep-item__thumb img { width:100%;height:100%;object-fit:cover;display:block;transition:opacity .18s; }
.vpr-ep-item:hover .vpr-ep-item__thumb img,
.vpr-ep-item--active .vpr-ep-item__thumb img { opacity:.7; }

.vpr-ep-item__overlay { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }
.vpr-ep-item__play { width:26px;height:26px;color:var(--vpr-accent);opacity:0;transition:opacity .18s; }
.vpr-ep-item:hover .vpr-ep-item__play { opacity:1; }

/* Animated bars */
.vpr-ep-item__bars { display:flex;align-items:flex-end;gap:2px;height:16px; }
.vpr-ep-item__bars span { display:block;width:3px;background:var(--vpr-accent);border-radius:2px;animation:vpr-bar .9s ease-in-out infinite alternate; }
.vpr-ep-item__bars span:nth-child(1) { height:8px;  animation-delay:0s; }
.vpr-ep-item__bars span:nth-child(2) { height:14px; animation-delay:.2s; }
.vpr-ep-item__bars span:nth-child(3) { height:6px;  animation-delay:.4s; }
@keyframes vpr-bar { from{transform:scaleY(.4);opacity:.6} to{transform:scaleY(1);opacity:1} }

.vpr-ep-item__info  { flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;justify-content:center; }
.vpr-ep-item__num   { font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em; }
.vpr-ep-item__title { font-size:.82rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }

/* Category tag inside episode item */
.vpr-ep-item__cat {
  display: inline-block;
  font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 10px; border: 1px solid transparent;
  width: fit-content; margin-top: 1px;
}

.vpr-ep-item__desc  { font-size:.72rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }

/* ── RESPONSIVE ─────────────────────────────────── */
@media (max-width:700px) {
  .vpr-playlist { grid-template-columns:1fr; }
  .vpr-playlist__sidebar { border-left:none !important; border-top:1px solid rgba(255,255,255,.07); }
  .vpr-playlist--light .vpr-playlist__sidebar { border-top:1px solid #e0e0e0; }
  .vpr-playlist__list { max-height:260px; }
}

/* ── EMPTY ──────────────────────────────────────── */
.vpr-front-empty { padding:24px;text-align:center;color:#888;font-style:italic; }

/* ── REDUCED MOTION ─────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  .vpr-ep-item__bars span { animation:none;height:10px!important; }
  .vpr-ep-item, .vpr-playlist__channel-btn { transition:none; }
}