/* AlphaVision brand theme (gold / black). Loaded after style.css and landing.css on every page and overrides their colours.
   Status colours (good / warning / critical) and camera-overlay colours stay as they are: they carry meaning. */
:root {
  /* palette */
  --g-bg: #0A0A0B;
  --g-surface: #141416;
  --g-surface-gold: #17140F;
  --g-surface-inset: #0D0D0F;
  --g-chip: #1D1A14;
  --g-border: #28282C;
  --g-border-gold: #3D3322;
  --gold: #D4AF5F;
  --gold-light: #E9D49C;
  --gold-dark: #A8803F;
  --gold-gradient: linear-gradient(90deg, #F3DFA8 0%, #D4AF5F 55%, #A8803F 100%);
  --font-heading: "Segoe UI Semibold", "Inter", system-ui, sans-serif;
  --font-body: "Segoe UI", "Inter", system-ui, sans-serif;

  /* mapped onto the app's tokens (style.css + landing.css) */
  --bg: var(--g-bg);
  --bg2: var(--g-surface-inset);
  --panel: var(--g-surface);
  --panel2: var(--g-surface-gold);
  --panel-solid: var(--g-surface);
  --glass: linear-gradient(160deg, rgba(26, 24, 21, .9) 0%, rgba(20, 20, 22, .94) 55%, rgba(14, 14, 16, .96) 100%);
  --line: var(--g-border);
  --line2: var(--g-border-gold);
  --ink: #F5F5F4;
  --ink2: #B9B5AD;
  --muted: #807B72;
  --accent: var(--gold);
  --accent2: var(--gold-dark);
  --font: var(--font-body);
}
h1, h2, h3, .brand-name, .page-title { font-family: var(--font-heading); }

/* ------------------------------ shared ------------------------------ */
.logo { filter: drop-shadow(0 6px 16px rgba(212, 175, 95, .3)); }
.brand-name span, .grad { background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ----------------------------- dashboard ----------------------------- */
body {
  background:
    radial-gradient(1100px 620px at 18% -12%, rgba(212, 175, 95, 0.07), transparent 62%),
    radial-gradient(900px 520px at 100% -5%, rgba(168, 128, 63, 0.05), transparent 60%),
    var(--bg);
}
.sidebar {
  background:
    radial-gradient(260px 220px at 20% 0%, rgba(212, 175, 95, .08), transparent 70%),
    linear-gradient(180deg, #121214 0%, #0A0A0B 100%);
}
.side-nav a.on { color: var(--gold-light); background: linear-gradient(90deg, rgba(212, 175, 95, .16), rgba(212, 175, 95, .04) 70%, transparent); border-color: var(--g-border-gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 8px 24px -14px rgba(212, 175, 95, .45); }
.side-nav a.on svg { filter: drop-shadow(0 0 6px rgba(212, 175, 95, .5)); }
.side-nav a.on::before { box-shadow: 0 0 12px rgba(212, 175, 95, .7); }
.ic, .tone-cyan, .tone-blue, .tone-violet { --tone: var(--gold); }
.kpi:is(.tone-cyan, .tone-blue, .tone-violet) .spark polyline { stroke: var(--gold); }
.kpi:is(.tone-cyan, .tone-blue, .tone-violet) .spark stop { stop-color: var(--gold); }
#ringG stop:first-child { stop-color: #F3DFA8; }
#ringG stop:last-child { stop-color: #A8803F; }
.avatar { color: #1a1408; background: var(--gold-gradient); box-shadow: 0 0 0 2px rgba(212, 175, 95, .25); }
.report-head { background: radial-gradient(600px 200px at 0% 0%, rgba(212, 175, 95, .1), transparent), linear-gradient(180deg, var(--panel), var(--g-surface-inset)); }
.ovz:hover, .cam-card:hover { box-shadow: var(--shadow), 0 22px 44px -24px rgba(212, 175, 95, .45); }
.switch[aria-pressed="true"] { background: rgba(212, 175, 95, .35); border-color: rgba(212, 175, 95, .6); }
.range input { accent-color: var(--gold); }
.rule-chip.ppe { background: var(--g-chip); color: var(--gold-light); }
.seg button.on { background: rgba(212, 175, 95, 0.16); color: var(--gold-light); }
.icon-btn:hover { background: rgba(212, 175, 95, 0.1); color: #fff; border-color: rgba(212, 175, 95, .35); }
.btn { border-color: var(--g-border-gold); color: var(--gold-light); background: linear-gradient(180deg, rgba(212, 175, 95, 0.16), rgba(168, 128, 63, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 20px -12px rgba(212, 175, 95, .45); }
.btn:hover { background: linear-gradient(180deg, rgba(212, 175, 95, 0.26), rgba(168, 128, 63, 0.14)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 26px -12px rgba(212, 175, 95, .55); }
.hero-banner::after { background: radial-gradient(500px 220px at 0% 0%, rgba(212, 175, 95, .12), transparent 70%), radial-gradient(400px 260px at 100% 100%, rgba(168, 128, 63, .08), transparent 70%); }
.hb-ring svg { filter: drop-shadow(0 10px 30px rgba(212, 175, 95, .2)); }
.zcode { color: #1a1408; background: linear-gradient(135deg, #F3DFA8, #D4AF5F); box-shadow: 0 4px 12px -4px rgba(212, 175, 95, .6); }
.zoom-btn:hover, .ptz button:hover { background: rgba(212, 175, 95, .35); }
.ltog.on { color: var(--gold-light); border-color: rgba(212, 175, 95, .45); background: rgba(212, 175, 95, .12); }
.insight .act { color: var(--gold-light); background: linear-gradient(90deg, rgba(212, 175, 95, .08), rgba(212, 175, 95, .02)); border-color: var(--g-border-gold); }

/* ------------------------------ landing ------------------------------ */
.bg-glow.g1 { background: #6b5527; opacity: .35; }
.bg-glow.g2 { background: #4a3b1c; opacity: .3; }
.btn.primary { background: var(--gold-gradient); color: #1a1408; box-shadow: 0 10px 30px rgba(212, 175, 95, .22); }
.btn.primary:hover { box-shadow: 0 14px 40px rgba(212, 175, 95, .32); }
.btn.ghost:hover { border-color: rgba(212, 175, 95, .45); }
.hs { border-left-color: rgba(212, 175, 95, .5); }
.ind-card { background: linear-gradient(180deg, #17171A, #111113); }
.monitor-head, .monitor-foot { background: var(--g-surface-inset); }
.monitor { background: var(--g-bg); box-shadow: 0 40px 100px rgba(0, 0, 0, .6), 0 0 0 1px rgba(212, 175, 95, .1), 0 0 80px rgba(168, 128, 63, .12); }
.scan { background: linear-gradient(180deg, transparent 0%, rgba(212, 175, 95, .06) 50%, transparent 100%); }
.f-ico.blue { background: rgba(212, 175, 95, .16); }
.ind-card::before { background: linear-gradient(135deg, rgba(212, 175, 95, .75), transparent 40%, transparent 60%, rgba(168, 128, 63, .6)); }
.ind-card:hover, .ind-card:focus-visible { box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 60px rgba(212, 175, 95, .1); }
.ic-badge .em { background: var(--g-chip); }
.final-cta { background: radial-gradient(600px 240px at 50% 0%, rgba(212, 175, 95, .12), transparent), var(--g-surface-gold); border-color: var(--g-border-gold); }