/* Table base (kept from earlier) */
.vidlist.compact{
  width:100%; table-layout:fixed;
  border-collapse:separate; border-spacing:0;
  font-size:.95rem;
  background: linear-gradient(180deg,#1a1a1a,#141414);
  border:1px solid #ffffff18; border-radius:12px;
}
.vidlist thead th{
  position:sticky; top:0; z-index:1;
  text-align:left; padding:8px 10px;
  background: linear-gradient(180deg,#1f1f1f,#191919);
  color:#f0f0f0; border-bottom:1px solid #ffffff22;
}
.vidlist tbody td{ padding:8px 10px; color:#eaeaea; border-bottom:1px solid #ffffff12; }
.vidlist tbody tr:nth-child(even) td{ background:#ffffff07; }
.vidlist tbody tr:hover td{ background:#ffffff10; }
.vidlist .empty{ text-align:center; padding:14px; color:#ccc; }

/* Columns */
.vidlist .c-thumb  { width: 140px; }
.vidlist .c-date   { width: 16ch; }
.vidlist .c-track  { width: 32%; }
.vidlist .c-series { width: 32%; }
.vidlist .c-watch  { width: 12ch; text-align:right; }

.vidlist td:nth-child(3),
.vidlist td:nth-child(4){ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Thumbnail cell */
.thumbcell{ padding:6px 10px !important; }
.thumb{
  position:relative; display:block; width:120px; aspect-ratio:16/9; border:0; cursor:pointer;
  border-radius:10px; overflow:hidden; background:#0e0e0e; padding:0;
  box-shadow:0 3px 10px rgba(0,0,0,.25); transition:transform .12s ease;
}
.thumb:hover{ transform: translateY(-2px); }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb .play, .thumb .ext{
  position:absolute; inset:auto 6px 6px auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:999px;
  background:#000000b0; color:#fff; font-size:.9rem;
}

/* Watch button */
.btn-watch{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#ffffff12; border:1px solid #ffffff24; color:#fff;
  padding:6px 10px; border-radius:10px; text-decoration:none; font-weight:600;
  transition: background .15s ease, transform .08s ease;
}
.btn-watch:hover{ background:#ffffff18; transform: translateY(-1px); }

/* Lightbox */
.ytbox[hidden]{ display:none; }
.ytbox{
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
}
.ytbox__backdrop{
  position:absolute; inset:0; background:#000000cc; backdrop-filter: blur(2px);
}
.ytbox__dialog{
  position:relative; width:min(92vw, 960px); aspect-ratio:16/9; background:#000; border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.6); overflow:hidden; transform: scale(.98);
  animation: yt-pop .18s ease-out forwards;
}
@keyframes yt-pop{ to{ transform: scale(1); } }
.ytbox__close{
  position:absolute; top:8px; right:8px; z-index:2;
  width:36px; height:36px; border-radius:999px; border:0; cursor:pointer;
  background:#00000088; color:#fff; display:grid; place-items:center;
}
.ytbox__frame{ position:absolute; inset:0; }
.ytbox__frame iframe{ width:100%; height:100%; border:0; display:block; }

@media (max-width: 720px){
  .vidlist thead{ display:none; }
  .vidlist, .vidlist tbody, .vidlist tr, .vidlist td{ display:block; width:100%; }
  .vidlist tr{ border-bottom:1px solid #ffffff18; }
  .vidlist td{ display:flex; justify-content:space-between; gap:1rem; }
  .thumbcell{ justify-content:flex-start; }
}
.ytbox__open{
  position:absolute; left:12px; bottom:10px; z-index:2;
  color:#fff; background:#00000066; padding:6px 10px; border-radius:8px;
  text-decoration:none; font-weight:600;
}
.ytbox__open:hover{ background:#00000088; }


.back-to-top{
  position: fixed; right: 16px; bottom: 16px;
  padding: 10px 12px; border-radius: 10px;
  background:#ffffff12; border:1px solid #ffffff24; color:#04196c;
  backdrop-filter: blur(6px);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .15s ease;
}
.back-to-top.show{ opacity:1; pointer-events:auto; }
.back-to-top:hover{ transform: translateY(-2px); }
html { scroll-behavior: smooth; }