.playlist-toolbar{
  padding:0 0 22px;
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:0.95rem;
  color:rgba(255,255,255,0.86);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:999px;
  padding:10px 16px;
  transition:0.25s ease;
}

.back-link:hover{
  color:#fff;
  border-color:rgba(255,255,255,0.28);
}

.video-grid-wrap{
  padding:18px 0 90px;
}

.filter-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:24px;
}

.filter-btn{
  border:1px solid rgba(255,255,255,0.14);
  background:transparent;
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  font:inherit;
  transition:0.25s ease;
}

.filter-btn:hover{
  border-color:rgba(255,255,255,0.28);
  background:rgba(255,255,255,0.05);
}

.filter-btn.active{
  background:#fff;
  color:#111;
  border-color:#fff;
}

.video-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.video-card{
  background:var(--card);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  cursor:pointer;
}

.video-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,0.14);
  box-shadow:0 18px 40px rgba(0,0,0,.24);
}

.video-thumb{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#0d0d0e;
}

.video-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}

.video-card:hover .video-thumb img{
  transform:scale(1.05);
}

.video-content{
  padding:16px 16px 18px;
}

.video-content h3{
  font-size:1rem;
  line-height:1.4;
  margin-bottom:8px;
}

.video-content p{
  font-size:0.9rem;
  color:var(--muted);
}

.video-play-btn{
  position:absolute;
  inset:auto auto 16px 16px;
  width:64px;
  height:64px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,0.66);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
  transition:transform .25s ease, background .25s ease;
}

.video-play-btn:hover{
  transform:scale(1.08);
  background:rgba(217,179,108,0.92);
}

.play-icon{
  width:0;
  height:0;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  border-left:18px solid #fff;
  margin-left:4px;
}

.video-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease, visibility .3s ease;
}

.video-modal.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.video-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.82);
  backdrop-filter:blur(10px);
}

.video-modal-dialog{
  position:relative;
  width:min(100% - 32px, 1440px);
  height:min(100% - 32px, 900px);
  margin:16px auto;
  background:#111214;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.45);
  z-index:2;
  display:flex;
  flex-direction:column;
}

.video-modal-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.45fr) minmax(360px, 0.85fr);
  height:100%;
  min-height:0;
  flex:1;
}

.video-modal-left{
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.video-player-wrap{
  width:100%;
  aspect-ratio:16/9;
  background:#000;
}

.video-player-wrap iframe{
  width:100%;
  height:100%;
  display:block;
}

.video-modal-right{
  border-left:1px solid rgba(255,255,255,0.08);
  background:#111214;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.video-modal-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:28px 24px 28px;
}

.video-modal-title{
  font-size:1.35rem;
  line-height:1.35;
  font-weight:700;
  margin-bottom:18px;
}

.video-meta-stats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}

.video-stat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.1);
  color:#fff;
  font-size:0.82rem;
  line-height:1;
}

.video-meta-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}

.video-tag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color:#fff;
  font-size:0.78rem;
  line-height:1.2;
}

.video-thumb-tags{
  position:absolute;
  top:12px;
  right:12px;
  left:12px;
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
  z-index:3;
  pointer-events:none;
}

.video-thumb-tags .video-tag{
  background:rgba(0,0,0,0.68);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(8px);
}

.video-meta-description{
  color:rgba(255,255,255,0.78);
  font-size:0.95rem;
  line-height:1.75;
  margin-bottom:24px;
}

.video-comments-section{
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:20px;
}

.video-comments-section h3{
  font-size:1rem;
  margin-bottom:14px;
}

.video-comments-list{
  display:grid;
  gap:14px;
}

.comment-item{
  padding:14px 16px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
}

.comment-item strong{
  display:block;
  font-size:0.92rem;
}

.comment-text{
  margin-top:8px;
  color:rgba(255,255,255,0.78);
  font-size:0.92rem;
  line-height:1.6;
}

.comment-like{
  margin-top:10px;
  color:rgba(255,255,255,0.62);
  font-size:0.82rem;
}

.video-modal-close{
  position:absolute;
  top:14px;
  right:16px;
  width:46px;
  height:46px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:2rem;
  line-height:1;
  cursor:pointer;
  z-index:5;
  transition:background .25s ease, transform .25s ease;
}

.video-modal-close:hover{
  background:rgba(255,255,255,0.16);
  transform:scale(1.05);
}

body.modal-open{
  overflow:hidden;
}

@media (max-width: 1100px){
  .video-modal-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0, 1fr);
  }

  .video-modal-right{
    border-left:none;
    border-top:1px solid rgba(255,255,255,0.08);
  }
}

@media (max-width: 991px){
  .video-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px){
  .video-grid{
    grid-template-columns:1fr;
  }

  .video-modal-dialog{
    width:100%;
    height:100dvh;
    margin:0;
    border-radius:0;
    border:none;
  }

  .video-modal-grid{
    height:100%;
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0, 1fr);
  }

  .video-modal-left{
    align-items:flex-start;
  }

  .video-player-wrap{
    width:100%;
    aspect-ratio:16/9;
    height:auto;
    flex:0 0 auto;
  }

  .video-modal-right{
    min-height:0;
  }

  .video-modal-scroll{
    padding:20px 16px 24px;
  }

  .video-modal-title{
    font-size:1.08rem;
    padding-right:44px;
  }
}