/* DJC-TV v1.2.0 */
:root{ --djctv-bg:#0d0f2a; --djctv-card:#141739; --djctv-text:#e8ecff; --djctv-dim:#a9b0d6; --djctv-accent:#4c6fff; }
.djctv-hero{ margin:12px auto 24px; max-width:1200px; }
.djctv-root{ position:relative; z-index:1; }
.djctv-page-bg{ position:fixed; inset:0; background:#0b0d26; z-index:0; pointer-events:none; overflow:hidden; }
.djctv-page-bg::before,
.djctv-page-bg::after{
  content:'';
  position:absolute;
  width:220%;
  height:220%;
  filter:blur(90px);
  opacity:0.45;
  border-radius:50%;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.djctv-page-bg::before{
  top:-60%;
  left:-40%;
  background:radial-gradient(circle at center, rgba(210,65,146,0.55), transparent 50%);
  animation-name:djc-page-spot-a;
  animation-duration:18s;
}
.djctv-page-bg::after{
  bottom:-50%;
  right:-40%;
  background:radial-gradient(circle at center, rgba(45,58,245,0.45), transparent 50%);
  animation-name:djc-page-spot-b;
  animation-duration:22s;
}
@keyframes djc-page-spot-a{
  0%{ transform:translate3d(0,0,0) rotate(0deg); }
  50%{ transform:translate3d(10%, -6%,0) rotate(160deg); }
  100%{ transform:translate3d(0,0,0) rotate(320deg); }
}
@keyframes djc-page-spot-b{
  0%{ transform:translate3d(0,0,0) rotate(0deg); }
  50%{ transform:translate3d(-8%, 8%,0) rotate(-150deg); }
  100%{ transform:translate3d(0,0,0) rotate(-320deg); }
}
.djctv-hero-banner{ position:relative; max-width:1200px; margin:18px auto 10px; padding:18px; border-radius:18px; overflow:hidden; background:#121534; border:1px solid rgba(255,255,255,0.06); display:grid; grid-template-columns:1.1fr 0.9fr; gap:16px; align-items:center; }
.djctv-hero-banner::before,
.djctv-hero-banner::after{
  content:'';
  position:absolute;
  width:90%;
  height:90%;
  filter:blur(42px);
  opacity:0.55;
  pointer-events:none;
  border-radius:50%;
}
.djctv-hero-banner::before{
  top:-25%;
  left:-25%;
  background:radial-gradient(circle at center, rgba(210,65,146,0.65), transparent 55%);
  animation:djc-spot-a 11s ease-in-out infinite;
}
.djctv-hero-banner::after{
  bottom:-25%;
  right:-25%;
  background:radial-gradient(circle at center, rgba(45,58,245,0.6), transparent 55%);
  animation:djc-spot-b 13s ease-in-out infinite;
}
.djctv-hero-banner__inner{ position:relative; z-index:2; color:#e8ecff; display:flex; flex-direction:column; gap:8px; }
.djctv-hero-banner__glow{ position:absolute; inset:-20%; background:radial-gradient(circle at 20% 20%, rgba(76,111,255,0.35), transparent 40%), radial-gradient(circle at 80% 30%, rgba(255,255,255,0.08), transparent 35%); filter:blur(20px); z-index:1; opacity:0.8; }
.djctv-hero-badge{ display:inline-flex; align-items:center; gap:6px; background:rgba(76,111,255,0.18); color:#e8ecff; padding:6px 12px; border-radius:12px; font-weight:700; letter-spacing:0.02em; border:1px solid rgba(255,255,255,0.08); width:max-content; }
.djctv-hero-title{ font-size:20px; font-weight:800; letter-spacing:0.01em; }
.djctv-hero-sub{ color:#c5cbff; font-size:14px; }
.djctv-hero-cta{ display:flex; gap:8px; flex-wrap:wrap; }
.djctv-hero-cta .pill{ background:rgba(255,255,255,0.08); color:#e8ecff; border:1px solid rgba(255,255,255,0.08); padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; }
.djctv-hero-banner__logo{ position:relative; z-index:2; display:flex; align-items:center; justify-content:flex-end; }
.djctv-hero-banner__logo img{ max-width:100%; height:auto; width:320px; border-radius:12px; }
@media (max-width:980px){
  .djctv-hero-banner{ grid-template-columns:1fr 1fr; }
  .djctv-hero-banner__logo{ justify-content:flex-end; }
  .djctv-hero-banner__logo img{ width:200px; }
}
@keyframes djc-spot-a{
  0%{ top:-25%; left:-25%; }
  33%{ top:-8%; left:55%; }
  66%{ top:55%; left:-8%; }
  100%{ top:-25%; left:-25%; }
}
@keyframes djc-spot-b{
  0%{ bottom:-25%; right:-25%; }
  33%{ bottom:-8%; right:55%; }
  66%{ bottom:55%; right:-8%; }
  100%{ bottom:-25%; right:-25%; }
}
.djctv-hero-player{ position:relative; width:100%; border-radius:16px; overflow:hidden; background:#000; }
.djctv-hero-player iframe{ position:absolute; inset:0; width:100%; height:100%; }
.djctv-hero-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#e8ecff; background:linear-gradient(135deg,#0d0f2a,#1b1f45); font-weight:700; text-align:center; padding:20px; }
.djctv-hero-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.djctv-togglebar{ margin:0 0 6px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
#djctv-toggle-chat{ appearance:none; border:0; background:var(--djctv-accent); color:#fff; padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:700; line-height:1.1; }
.djctv-age-btn{ appearance:none; border:0; background:#2c2f52; color:#fff; padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:700; line-height:1.1; }
.djctv-hero-chat-wrap.is-hidden{ display:none; }
.djctv-hero-layout{ display:grid; grid-template-columns: 1fr 320px; gap:16px; align-items:stretch; }
@media (max-width: 980px){ .djctv-hero-layout{ grid-template-columns: 1fr; } }
.djctv-live-side{ position:relative; background:var(--djctv-card); border-radius:14px; padding:10px; display:flex; flex-direction:column; gap:8px; overflow:hidden; height:auto; min-height:0; margin-top:8px; box-sizing:border-box; }
.djctv-live-list{ overflow:auto; scrollbar-width:thin; scrollbar-color:var(--djctv-accent) rgba(255,255,255,0.08); -ms-overflow-style:auto; flex:1; display:flex; flex-direction:column; gap:8px; position:relative; padding-bottom:0; }
.djctv-live-list::-webkit-scrollbar{ width:6px; }
.djctv-live-list::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, rgba(76,111,255,0.95), rgba(76,111,255,0.65)); border-radius:99px; }
.djctv-live-list::-webkit-scrollbar-track{ background:rgba(255,255,255,0.06); border-radius:99px; }
.djctv-live-empty{ display:flex; align-items:center; justify-content:center; min-height:120px; color:#c5cbff; background:rgba(255,255,255,.02); border-radius:10px; padding:12px; text-align:center; }
.djctv-live-row{ display:flex; gap:8px; align-items:center; background:rgba(255,255,255,.03); border-radius:10px; padding:6px; cursor:pointer; min-height:56px; }
.djctv-live-row.is-live{ background:linear-gradient(90deg, rgba(76,111,255,0.25), rgba(76,111,255,0)); border:1px solid rgba(76,111,255,0.35); box-shadow:0 8px 20px rgba(76,111,255,0.18); }
.djctv-live-row:hover{ background:rgba(255,255,255,.07); }
.djctv-live-row .thumb{ width:44px; height:44px; border-radius:99px; background:#101327 center/cover no-repeat; flex:0 0 auto; }
.djctv-live-row .meta{ display:flex; flex-direction:column; line-height:1.2; color:#fff; }
.djctv-live-row .meta strong{ color:#fff; }
.djctv-live-row .meta small{ color:#c5cbff; }
.djctv-vert-nav{ appearance:none; border:0; background:var(--djctv-accent); color:#fff; border-radius:10px; padding:6px 10px; cursor:pointer; font-weight:700; }
.djctv-rail{ margin: 20px auto; max-width:1200px; position:relative; }
.djctv-rail > h3{ color:var(--djctv-text); font-size: 22px; font-weight:700; margin: 0 4px 10px; display:flex; align-items:center; gap:10px; }
.djctv-rail-scroll{ display:flex; gap:14px; overflow-x:auto; padding:6px 4px 10px; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; cursor:grab; }
.djctv-rail-scroll.is-grabbing{ cursor:grabbing; }
.djctv-rail-scroll::-webkit-scrollbar{ display:none; width:0; height:0; }
.djctv-vod-card{ display:block; width:280px; min-width:280px; scroll-snap-align:start; background:var(--djctv-card); border-radius:14px; box-shadow:0 6px 16px rgba(0,0,0,.25); text-decoration:none; color:var(--djctv-text); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease; }
.djctv-vod-card:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 12px 30px rgba(0,0,0,.35); }
.djctv-nav{ position:absolute; top:50%; transform:translateY(-50%); background:var(--djctv-card); color:var(--djctv-text); border:1px solid var(--djctv-accent); padding:6px 10px; border-radius:10px; cursor:pointer; font-weight:700; box-shadow:0 8px 20px rgba(0,0,0,.25); }
.djctv-nav.prev{ left:6px; }
.djctv-nav.next{ right:6px; }
.djctv-card-thumb{ width:100%; aspect-ratio:16/9; background:#101327 center/cover no-repeat; }
.djctv-card-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; }
.djctv-name{ font-weight:600; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.djctv-rail-placeholder .djctv-card{ scroll-snap-align:start; color:#fff; position:relative; overflow:hidden; border-radius:14px; box-shadow:0 6px 16px rgba(0,0,0,.25); }
.djctv-card-h{ width:320px; min-width:320px; aspect-ratio:16/9; }
.djctv-card-v{ width:160px; min-width:160px; aspect-ratio:9/16; }
.djctv-card-overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:12px; font-weight:700; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,0.55)); }
.djctv-like{ appearance:none; border:0; background:var(--djctv-accent); color:#fff; padding:6px 10px; border-radius:8px; cursor:pointer; font-weight:700; font-size:12px }
#djctv-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); z-index:9999; }
#djctv-modal .card{ width:min(760px, 92vw); background:#161a3a; color:#fff; border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.45); }
#djctv-modal header{ position:relative; height:220px; background:#101327 center/cover no-repeat; }
#djctv-modal header .avatar{ position:absolute; left:20px; bottom:-36px; width:72px; height:72px; border-radius:16px; background:#222 center/cover no-repeat; border:3px solid #161a3a; }
#djctv-modal .body{ padding:60px 20px 20px; }
#djctv-modal .close{ position:absolute; right:12px; top:12px; background:#0008; color:#fff; border:0; width:36px; height:36px; border-radius:99px; cursor:pointer; }
.djctv-secondary-player{ max-width:1200px; margin: 20px auto; display:none; }
.djctv-secondary-inner{ position:relative; width:100%; padding-top:56.25%; background:#0d0f2a; border-radius:14px; overflow:hidden; }
.djctv-secondary-inner iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }