/* v3.2 — YouTube-style dark watch page (mimic). Unique vw-* namespace. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0f0f0f;color:#f1f1f1;font-family:Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{font-family:inherit}

.vw-wrap{max-width:740px;margin:0 auto;padding:16px 16px 0}

.vw-video{border-radius:12px;overflow:hidden;background:#000}
@media(max-width:600px){.vw-wrap{padding:0}.vw-video{border-radius:0}}

/* offer button — hidden until the video reaches the pitch point */
#pw-offer{display:none;margin:16px 0 4px;padding:0 16px}
@media(min-width:601px){#pw-offer{padding:0}}
#pw-offer.pw-show{animation:pw-rise .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes pw-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.vw-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px 20px;border-radius:10px;background:#ff3b30;color:#fff;font-size:16px;font-weight:700;letter-spacing:.2px;text-decoration:none;transition:background .15s;animation:pw-pulse 1.8s ease-in-out infinite}
.vw-cta svg{width:20px;height:20px;transition:transform .15s}
.vw-cta:hover{background:#e8332a}
.vw-cta:hover svg{transform:translateX(3px)}
@keyframes pw-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,59,48,.45)}50%{transform:scale(1.02);box-shadow:0 0 0 12px rgba(255,59,48,0)}}
@media(prefers-reduced-motion:reduce){#pw-offer.pw-show,.vw-cta{animation:none}}

.vw-title{margin:16px 0 12px;font-size:20px;font-weight:700;line-height:1.3}
@media(max-width:600px){.vw-title{font-size:17px;padding:0 12px}}

.vw-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-bottom:16px;border-bottom:1px solid #272727}
@media(max-width:600px){.vw-meta{padding:0 12px 16px}}
.vw-chan{display:flex;align-items:center;gap:12px}
.vw-chan-av{width:40px;height:40px;border-radius:50%;object-fit:cover}
.vw-chan-name{font-size:15px;font-weight:600;line-height:1.2}
.vw-chan-sub{font-size:12px;color:#aaa}
.vw-subscribe{margin-left:6px;padding:9px 16px;border:none;border-radius:50px;background:#f1f1f1;color:#0f0f0f;font-size:14px;font-weight:600;cursor:pointer}
.vw-subscribe:hover{background:#d9d9d9}

.vw-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vw-pill{display:flex;align-items:center;gap:7px;padding:9px 15px;border:none;border-radius:50px;background:#272727;color:#f1f1f1;font-size:14px;font-weight:600;cursor:pointer}
.vw-pill:hover{background:#3d3d3d}
.vw-pill svg{width:20px;height:20px;fill:currentColor}
.vw-pill.split{gap:0;padding:0;overflow:hidden}
.vw-pill.split .half{display:flex;align-items:center;gap:7px;padding:9px 15px}
.vw-pill.split .sep{width:1px;align-self:stretch;background:#3d3d3d}

.vw-comments{padding:18px 0 32px}
@media(max-width:600px){.vw-comments{padding:18px 12px 32px}}
.vw-chead{display:flex;align-items:center;gap:20px;margin-bottom:22px;font-size:16px}
.vw-chead span{color:#aaa;font-size:14px}
.vw-thread{margin-bottom:18px}
.vw-cm{display:flex;gap:14px}
.vw-cm.reply{margin:14px 0 0 54px}
.vw-cm-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}
.vw-cm.reply .vw-cm-av{width:30px;height:30px}
.vw-cm-meta{font-size:13px;margin-bottom:3px}
.vw-cm-meta span{color:#aaa;margin-left:6px;font-weight:400}
.vw-cm-body p{font-size:14px;line-height:1.45}
.vw-cm-acts{display:flex;align-items:center;gap:16px;margin-top:7px}
.vw-cm-acts button{display:flex;align-items:center;gap:5px;background:none;border:none;color:#aaa;font-size:12px;font-weight:600;cursor:pointer}
.vw-cm-acts svg{width:16px;height:16px;fill:currentColor}
.vw-cm-acts button:hover{color:#f1f1f1}

.vw-footer{border-top:1px solid #272727;margin-top:8px}
.vw-footer .vw-wrap{padding:18px 16px;text-align:center}
.vw-footer p{color:#717171;font-size:12px;margin-bottom:6px}
.vw-foot-links a{color:#3ea6ff;text-decoration:none;margin:0 8px;font-size:12px}
.vw-foot-links span{color:#3d3d3d}
