:root{
  --blue:#4A8DAA; --red:#EE3528; --black:#231F20; --white:#FFFFFF;
  --grey:#808285; --darkblue:#1D5873; --lightblue:#80C2DE;
  --lightgrey:#BABDC1; --lightestgrey:#DEE2E6;
}

/* Every widget designs at 1920×1080 inside #scene; assets/widget.js scales
   it to fit whatever viewport the Browser Source gives it. */
html,body{ margin:0; padding:0; width:100%; height:100%; overflow:hidden; font-family:'Sora',sans-serif; }
.scene{ position:absolute; left:0; top:0; width:1920px; height:1080px; transform-origin:0 0; }

/* ?bg=transparent — drop the scene colour so the widget can sit on top of
   the Animated Background widget or Restream's own background. */
html.bg-transparent, html.bg-transparent body, html.bg-transparent .scene{ background:transparent !important; }

/* Logo (logo_web_new.png is red + grey on transparent, so on dark scenes it
   sits on a white plate to stay legible). */
.logo-img{ display:block; width:auto; }
.logo-plate{ background:var(--white); border-radius:14px; padding:14px 26px; box-shadow:0 8px 24px rgba(0,0,0,0.25); }