:root{
    --bg:#000; --text:#fff; --muted:#cfcfcf;
    --hub_vd:#000000a6; --glass:#0d0d0db8;
    --bar_vd:#ffffff35; --buffer_vd:#ffffff60; --red:#ff0033;
  }
  .stage_vd{border-radius: 16px;position:relative;background:#000;aspect-ratio:16/9}

  .hub_vd{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;opacity:0;pointer-events:none;transition:.2s}
  .hub_vd.show_vd{opacity:1;pointer-events:auto}
  .top_vd,.bottom_vd{position:relative;z-index:2;padding:10px}
  .top_vd{display:flex;align-items:center;gap:10px}
  .titleblk_vd{min-width:0}
  .title_vd{color: #eee; font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62vw}
  .channel_vd{color:#e5e5e5}
  .spacer_vd{flex:1}
  .btn_vd{background:transparent;border:0;color:#fff;display:inline-grid;place-items:center;padding:0px;border-radius:10px;cursor:pointer}
  .btn_vd:active{transform:scale(.96)}
  .btn_vd svg{width:22px;height:22px}

  .shadetop_vd, .shadebottom_vd{
    position:absolute;left:0;right:0;height:90px;z-index:1;pointer-events:none;border-radius: 16px;
  }
  .shadetop_vd{top:0;background:linear-gradient(#000000c5,transparent)}
  .shadebottom_vd{bottom:0;background:linear-gradient(transparent,#000000c5)}

  .center_vd{display:grid;place-items:center;padding:14px 0}
  .triplet_vd{display:flex;align-items:center;gap:38px}
  .circle_vd{width:30px;height:30px;border-radius:50%;background:#00000066;border:1px solid #ffffff24;display:flex;align-items:center; justify-content: center;}
  .big_vd{width:40px;height:40px}
  .circle_vd svg{width:16px;height:16px}

  .actions_vd{display:flex;gap:14px;margin:0px 0 0px 0px}
  .aicon_vd{display:grid;place-items:center;gap:0px}
  .aicon_vd .ic_vd{background:#eee;border:1px solid #00000066;border-radius:20px;padding: 3px;display:inline-grid;place-items:center}
  .aicon_vd .ic_vd svg{width:20px;height:20px}
  .aicon_vd .ic_vd img{width:20px;height:20px}
  .aicon_vd .lab_vd{font-size:12px;color:#ddd}

  .bottomRow_vd{display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px}
  .lefthub_vd{min-width:0}
  .time_vd{font-variant-numeric:tabular-nums; color: #eee;}
  .scrub_vd{display:flex;align-items:center;gap:12px;margin-top:0px}
  .bar_vd{position:relative;flex:1;height:4px;border-radius:999px;background:var(--bar_vd);cursor:pointer}
  .buffer_vd{position:absolute;inset:0 auto 0 0;height:4px;border-radius:inherit;background:var(--buffer_vd);width:0}
  .prog_vd{position:absolute;inset:0 auto 0 0;height:4px;border-radius:inherit;background:var(--red);width:0}
  .dot_vd{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px #ffffff36;opacity:0;transition:.15s}
  .hub_vd.show_vd .dot_vd{opacity:1}
  .redDot_vd{width:10px;height:10px;border-radius:50%;background:var(--red)}

  .rightRail_vd{display:grid;justify-items:end}
  .mini_vd{display:flex;gap:10px;align-items:center;background:var(--glass);backdrop-filter:blur(8px);border:1px solid #ffffff18;padding:10px 12px;border-radius:14px;max-width:320px}
  .thumb_vd{width:100px;height:56px;border-radius:8px;overflow:hidden;background:#333}
  .thumb_vd img{width:100%;height:100%;object-fit:cover}
  .mini_vd .t_vd{font-weight:600}
  .mini_vd .s_vd{font-size:12px;color:#ddd}

  .zones_vd{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;z-index:0}
  .zone_vd{position:relative}
  .seekBadge_vd{position:absolute;bottom:50%;transform:translateY(50%) scale(.9);background:#00000078;border:1px solid #ffffff20;color:#fff;border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:6px;opacity:0;transition:.2s}
  .zone_vd.left .seekBadge_vd{left:16px}
  .zone_vd.right .seekBadge_vd{right:16px}
  .seekBadge_vd svg{width:18px;height:18px}
  .seekBadge_vd.show_vd{opacity:1;transform:translateY(50%) scale(1)}


  @media (max-width : 480px){
      .slider-track video {
          width: 268px;
          height: 218px;
      }
    
  }