/* Signature Video Group skin for the device UI. Overrides the tokens in
   ui-sim/style.css only. Palette is taken from the SVG mark: sunrise orange
   over deep ocean blue, with the site's gold call-to-action colour. */
:root {
  --svg-orange: #e27a1f;
  --svg-gold: #dd9933;
  --svg-sun: #eca92a;
  --svg-blue: #1a8bcb;
  --svg-navy: #0b2e45;
  --svg-grey: #676767;

  --bg: #061521;
  --panel: #0c2333;
  --panel-2: #12304a;
  --line: #1c3c55;
  --text: #eef3f7;
  --muted: #8ea7b9;
  --dim: #56718a;
  --accent: var(--svg-blue);
  --green: #35c77b;
  --amber: var(--svg-orange);
  --red: #ff4f58;
  --grey: #3c566c;
  --font: "Open Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
}

body { background: #e9eef2; }
body.embed { background: transparent; }
body.embed .sim-toolbar { display: none; }
body.embed .sim-stage { height: 100vh; }

.bezel { background: #03090e; box-shadow: 0 24px 60px rgba(6, 21, 33, .35), inset 0 0 0 2px #10202c; }

.statusbar { background: #04111a; }
.brand-mark { width: 24px; height: 24px; border-radius: 5px; display: block; }
.role {
  background: linear-gradient(180deg, var(--svg-orange) 0%, var(--svg-sun) 48%, var(--svg-blue) 52%, var(--svg-navy) 100%);
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.rail { background: #04111a; }
.rail button.active { box-shadow: inset 3px 0 0 var(--svg-gold); }
.portrait .rail button.active { box-shadow: inset 0 3px 0 var(--svg-gold); }

.btn.primary { background: var(--svg-gold); color: #241500; }
.btn.on { background: var(--svg-gold); color: #241500; }
.seg button.active { background: var(--svg-blue); color: #fff; }
.role, .seg button.active { font-weight: 700; }
.c-amber .cam-head { background: var(--svg-orange); color: #fff; }
.c-green .cam-head { color: #04210f; }
.bar > div { background: linear-gradient(90deg, var(--svg-blue), #39b0ee); }
.pill.ok { color: #57d996; }
.banner.amber { background: rgba(226,122,31,.16); color: #ff9e4a; }
.state-tag.uploading, .state-tag.verifying, .state-tag.queued, .state-tag.received { color: #ff9e4a; }
h2 { letter-spacing: .1em; }
.toast { background: #fff; }