/* ============================================================
   BR4M TV Platform — ported 1:1 from the handoff prototype.
   All selectors are scoped under #br4mtv-root so the app never
   collides with wp-admin or theme styles.
   ============================================================ */

#br4mtv-root{
  --nc:#ec2020;
  font-family:'Inter',system-ui,sans-serif;
  color:#ededed;
  background:#000;
  display:block;
}
/* Admin: full-bleed dark canvas next to the wp-admin chrome. */
.br4mtv-root.br4mtv-admin{
  position:relative;
  margin:0 0 0 -20px;              /* cancel #wpcontent padding */
  width:calc(100% + 20px);
  height:calc(100vh - 32px);       /* below the admin bar */
  overflow:hidden;
}
.br4mtv-root.br4mtv-embed{
  position:relative;
  width:100%;
  height:88vh;
  min-height:640px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #161616;
}

#br4mtv-root *{box-sizing:border-box}
#br4mtv-root button{font-family:inherit}
#br4mtv-root ::-webkit-scrollbar{width:10px;height:10px}
#br4mtv-root ::-webkit-scrollbar-thumb{background:#222;border-radius:8px}
#br4mtv-root ::-webkit-scrollbar-track{background:transparent}

#br4mtv-root input,
#br4mtv-root textarea,
#br4mtv-root button{font-family:inherit}

#br4mtv-root input[type=range]{-webkit-appearance:none;appearance:none;height:5px;border-radius:5px;background:#222;outline:none}
#br4mtv-root input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 0 3px rgba(236,32,32,.45)}
#br4mtv-root input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 0 3px rgba(236,32,32,.45)}
#br4mtv-root input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;width:34px;height:34px;border-radius:9px;background:none;cursor:pointer;padding:0}
#br4mtv-root input[type=color]::-webkit-color-swatch-wrapper{padding:0}
#br4mtv-root input[type=color]::-webkit-color-swatch{border:2px solid rgba(255,255,255,.14);border-radius:9px}

@keyframes scSlideL{from{opacity:0;transform:translateX(-120%)}to{opacity:1;transform:translateX(0)}}
@keyframes scSlideR{from{opacity:0;transform:translateX(120%)}to{opacity:1;transform:translateX(0)}}
@keyframes scPop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes scFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes scFlip{from{opacity:0;transform:perspective(800px) rotateX(-95deg);transform-origin:top}to{opacity:1;transform:perspective(800px) rotateX(0)}}
@keyframes scSpin{from{opacity:0;transform:perspective(900px) rotateY(-200deg) scale(.5)}to{opacity:1;transform:perspective(900px) rotateY(0) scale(1)}}
@keyframes scDrop{0%{opacity:0;transform:translateY(-320px)}55%{opacity:1;transform:translateY(16px)}75%{transform:translateY(-10px)}90%{transform:translateY(4px)}100%{transform:translateY(0)}}
@keyframes scZoom{from{opacity:0;transform:scale(2.6);filter:blur(14px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes scElastic{0%{opacity:0;transform:scale(.3)}45%{opacity:1;transform:scale(1.18)}65%{transform:scale(.92)}82%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes scSwing{0%{opacity:0;transform:rotate(-14deg) translateY(-40px);transform-origin:top center}55%{opacity:1;transform:rotate(7deg)}75%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
@keyframes scGlitch{0%{opacity:0;transform:translate(0)}20%{opacity:1;transform:translate(-6px,3px);clip-path:inset(0 0 60% 0)}40%{transform:translate(5px,-2px);clip-path:inset(50% 0 0 0)}60%{transform:translate(-3px,0);clip-path:inset(0)}100%{opacity:1;transform:translate(0);clip-path:inset(0)}}
@keyframes scFadeOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes scSlideOutL{to{opacity:0;transform:translateX(-120%)}}
@keyframes scSlideOutR{to{opacity:0;transform:translateX(120%)}}
@keyframes scPopOut{to{opacity:0;transform:scale(.5)}}
@keyframes scConfetti{to{transform:translateY(560px) rotate(720deg);opacity:0}}
@keyframes scSparkle{0%{transform:scale(0) rotate(45deg);opacity:0}35%{opacity:1;transform:scale(1) rotate(45deg)}100%{transform:scale(0) rotate(45deg);opacity:0}}
@keyframes scShoot{to{transform:translateX(120px) scale(.2);opacity:0}}
@keyframes scRing{from{transform:scale(.15);opacity:.85}to{transform:scale(3.2);opacity:0}}
@keyframes scFallSoft{to{transform:translateY(560px) rotate(40deg);opacity:0}}
@keyframes scEmber{to{transform:translateY(-420px) scale(.3);opacity:0}}
@keyframes scShake{0%,100%{transform:translate(0)}20%{transform:translate(-7px,4px)}40%{transform:translate(6px,-4px)}60%{transform:translate(-5px,2px)}80%{transform:translate(4px,-2px)}}
@keyframes scFlash{0%{opacity:.85}100%{opacity:0}}
@keyframes scLetter{from{opacity:0;transform:translateY(16px) scale(.6)}to{opacity:1;transform:none}}
@keyframes scHolo{from{background-position:0 0,0 0}to{background-position:0 0,300% 0}}
@keyframes scMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scShimmer{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
@keyframes scEq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes scPulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes scDemoFall{0%{transform:translateY(-7px);opacity:0}30%{opacity:1}100%{transform:translateY(9px);opacity:0}}
@keyframes scDemoRise{0%{transform:translateY(9px);opacity:0}30%{opacity:1}100%{transform:translateY(-9px);opacity:0}}
@keyframes scDemoRing{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.7);opacity:0}}
@keyframes scHoloY{from{background-position:0 0}to{background-position:0 300%}}
@keyframes scGlowPulse{0%{opacity:0}18%{opacity:1}50%{opacity:.55}82%{opacity:1}100%{opacity:.7}}
@keyframes scEdgeIn{from{opacity:0}to{opacity:1}}
@keyframes bannerSwap{0%{opacity:0;transform:translateY(8px)}12%,88%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-8px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes chatIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}}
@keyframes neonPulse{0%,100%{box-shadow:0 0 18px -2px var(--nc,#ec2020),0 18px 40px -12px rgba(0,0,0,.7)}50%{box-shadow:0 0 34px 0px var(--nc,#ec2020),0 18px 40px -12px rgba(0,0,0,.7)}}