/* =========================
   VOD Detail page (inside <main>)
   ========================= */

.vod-detail{ display:flex; flex-direction:column; gap:16px; }

.vd-head{ display:flex; flex-direction:column; gap:10px; }
.vd-crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  color: rgba(230,232,240,.62);
  font-size: 12px;
}
.vd-crumb a{ color: rgba(230,232,240,.75); text-decoration:none; }
.vd-crumb a:hover{ color: var(--text); }
.vd-sep{ opacity:.6; }

.vd-head-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.vd-title{
  margin:0;
  font-size:26px;
  font-weight: 950;
  letter-spacing:.2px;
}
.vd-sub{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color: rgba(230,232,240,.70);
  font-size: 13px;
}
.vd-dot{ opacity:.6; }
.vd-muted{ color: rgba(230,232,240,.62); }
.vd-rate{ color: rgba(255,204,102,.95); font-weight: 950; }

.vd-pill{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius:999px;
  font-size: 11px;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.30);
}
.vd-pill.premium{
  background: rgba(255,204,102,.14);
  border-color: rgba(255,204,102,.22);
  color: rgba(255,224,150,.95);
}
.vd-pill.toy{
  background: rgba(0,210,255,.10);
  border-color: rgba(0,210,255,.22);
  color: rgba(230,232,240,.92);
}

.vd-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* grid */
.vd-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items:start;
}

/* cards */
.vd-card{
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.vd-left{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.vd-right{ display:flex; flex-direction:column; gap:14px; min-width:0; }

.vd-player{ position:relative; }
.vd-video-placeholder{
  aspect-ratio: 16/9;
  width:100%;
  border-radius: 16px;
  background:
    radial-gradient(circle at 70% 30%, rgba(127,92,255,.20), transparent 55%),
    radial-gradient(circle at 20% 40%, rgba(0,210,255,.18), transparent 55%),
    linear-gradient(135deg, rgba(26,31,54,.7), rgba(14,17,36,.85));
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(230,232,240,.78);
  font-weight: 950;
}
.vd-player-overlay{
  position:absolute;
  top: 10px;
  left: 10px;
  display:flex;
  gap:8px;
}
.vd-overlay-chip{
  font-size: 11px;
  font-weight: 950;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,204,102,.22);
  background: rgba(255,204,102,.14);
  color: rgba(255,224,150,.95);
}
.vd-overlay-chip.toy{
  border-color: rgba(0,210,255,.22);
  background: rgba(0,210,255,.10);
  color: rgba(230,232,240,.92);
}

/* action bar */
.vd-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.vd-bar-left{ display:flex; align-items:center; gap:8px; }
.vd-iconbtn{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: rgba(230,232,240,.92);
  cursor:pointer;
  font-weight: 950;
}
.vd-iconbtn:hover{ background: rgba(255,255,255,.07); }
.vd-likecount{ color: rgba(230,232,240,.72); font-weight: 850; }

/* creator/info */
.vd-info{ padding: 12px; }
.vd-creator{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.vd-avatar{
  width: 44px; height: 44px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(0,210,255,.25), rgba(127,92,255,.25)), #2a2f55;
  border: 1px solid rgba(255,255,255,.08);
}
.vd-cmeta{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.vd-cname{ font-weight: 950; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vd-verify{
  display:inline-flex;
  margin-left:6px;
  font-size: 12px;
  opacity:.9;
}
.vd-cactions{ display:flex; gap:10px; flex-wrap:wrap; }
.vd-desc{ margin-top: 10px; color: rgba(230,232,240,.78); line-height:1.5; }
.vd-desc p{ margin:0; }

.vd-tags{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.vd-tags span{
  font-size: 11px;
  font-weight: 900;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  color: rgba(230,232,240,.88);
}

/* comments */
.vd-comments{ padding: 12px; }
.vd-sec-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.vd-sec-head h2{ margin:0; font-size: 16px; font-weight: 950; }
.vd-link{ color: rgba(230,232,240,.65); text-decoration:none; }
.vd-link:hover{ color: var(--text); }

.vd-comment-compose{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap:10px;
}
.vd-mini-avatar{
  width: 34px; height: 34px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
}
.vd-comment-list{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.vd-comment{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}
.vd-comment-body{ flex:1; min-width:0; }
.vd-comment-top{ display:flex; gap:8px; align-items:baseline; }
.vd-comment-text{ margin-top: 6px; color: rgba(230,232,240,.85); }
.vd-more{
  width: 34px; height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: rgba(230,232,240,.9);
  cursor:pointer;
}
.vd-more:hover{ background: rgba(255,255,255,.07); }

.vd-comment.system{
  background: rgba(255,185,74,.10);
  border-color: rgba(255,185,74,.18);
  align-items:center;
}
.vd-sys{
  font-weight: 950;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,185,74,.14);
  border: 1px solid rgba(255,185,74,.20);
}

/* right side */
.vd-side{ padding: 12px; }
.vd-reco{ margin-top: 10px; display:flex; flex-direction:column; gap: 10px; }

.vd-reco-item{
  display:flex;
  gap:10px;
  text-decoration:none;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}
.vd-reco-item:hover{
  border-color: rgba(0,210,255,.18);
  background: rgba(255,255,255,.04);
}
.vd-reco-thumb{
  width: 140px;
  aspect-ratio: 16/9;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(0,210,255,.18), rgba(127,92,255,.20)),
    rgba(26,31,54,.7);
  position:relative;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.06);
}
.vd-reco-dur{
  position:absolute;
  right: 8px;
  bottom: 8px;
  font-size: 11px;
  font-weight: 950;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(230,232,240,.92);
}
.vd-reco-badge{
  position:absolute;
  top: 8px;
  left: 8px;
  font-size: 10px;
  font-weight: 950;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.30);
  color: rgba(230,232,240,.92);
}
.vd-reco-badge.premium{
  background: rgba(255,204,102,.14);
  border-color: rgba(255,204,102,.22);
  color: rgba(255,224,150,.95);
}
.vd-reco-badge.toy{
  background: rgba(0,210,255,.10);
  border-color: rgba(0,210,255,.22);
}
.vd-reco-meta{ flex:1; min-width:0; }
.vd-reco-title{
  font-weight: 950;
  color: rgba(230,232,240,.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.vd-kv{
  margin-top: 10px;
  display:grid;
  gap: 10px;
}
.vd-k{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}
.vd-k strong{ font-weight: 950; }

/* responsive */
@media (max-width: 1200px){
  .vd-grid{ grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 900px){
  .vd-grid{ grid-template-columns: 1fr; }
  .vd-actions{ width:100%; }
}
@media (max-width: 640px){
  .vd-title{ font-size:22px; }
  .vd-reco-thumb{ width: 120px; }
}

.vd-lock{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background: radial-gradient(circle at 50% 40%, rgba(0,210,255,.08), transparent 45%),
              rgba(10,12,22,.74);
  backdrop-filter: blur(10px);
}
.vd-lock-ico{
  width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 999px;
  border: 1px solid rgba(0,210,255,.25);
  background: rgba(0,210,255,.10);
  color: rgba(230,232,240,.92);
  font-weight: 950;
  margin-bottom: 4px;
}
.vd-lock-title{ font-weight: 950; font-size: 18px; }
.vd-lock-sub{ color: rgba(230,232,240,.65); font-size: 13px; }