/* Shared canvas and type roles, extracted from Activity. Media retains its own contrast. */
:root {
  --flix-canvas:#fcf7ff;--flix-container:#f1eaf7;--flix-ink:#241f29;
  --flix-secondary:#665e70;--flix-outline:#e5dceb;--flix-activity-primary:#6851a7;
  --flix-font:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  --flix-heading-weight:500;--flix-body-weight:400;
}
@media(prefers-color-scheme:dark){:root:not(.light){
  --flix-canvas:#19151f;--flix-container:#292231;--flix-ink:#f0e8f6;
  --flix-secondary:#c6bbd0;--flix-outline:#494050;--flix-activity-primary:#d3bfff;
}}
:root.dark {
  --flix-canvas:#19151f;--flix-container:#292231;--flix-ink:#f0e8f6;
  --flix-secondary:#c6bbd0;--flix-outline:#494050;--flix-activity-primary:#d3bfff;
}
:root,:root.light,:root.dark {
  --bg-0:var(--flix-canvas);--bg-1:var(--flix-container);--bg-2:var(--flix-container);
  --stroke:var(--flix-outline);--text-hi:var(--flix-ink);
  --text-mid:var(--flix-secondary);--text-low:var(--flix-secondary);
  background:var(--flix-canvas)!important;color:var(--flix-ink);
  font-family:var(--flix-font);color-scheme:light dark;
}
html.light{color-scheme:light}html.dark{color-scheme:dark}
body {background:var(--flix-canvas)!important;color:var(--flix-ink)!important;font-weight:var(--flix-body-weight)}
body,body *{font-family:var(--flix-font)!important}
code,pre,[style*="font-family:monospace"],[style*="font-family: monospace"],[class*="-log"]{font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important}
h1,h2,h3,h4,strong,b {font-weight:var(--flix-heading-weight)!important}
button,input,select,textarea {font:inherit}
.fx-hdr,.customer-heading,#nvr-sidebar,.bottom-nav,.nav-bar {
  background:var(--flix-canvas)!important;color:var(--flix-ink)!important;
  border-color:var(--flix-outline)!important;
}
.fx-hdr h1,.customer-heading h1{color:var(--flix-ink)!important;text-shadow:none!important;font-weight:500!important}
.fx-hdr :is(.fx-site-chip,.fx-hbtn,.fx-logo){background:var(--flix-container)!important;color:var(--flix-ink)!important;border-color:var(--flix-outline)!important}
:is(.tab-content,#live-container,#flixsys-root,#tab-settings,#tab-search,#tab-health,#tab-flix,#tab-lalo,#fx-stg-body){background-color:var(--flix-canvas)!important;color:var(--flix-ink)}
:is(.ins-card,.fs-card,.sxs-card,.sxs-nav,.sxs-seg,.glass-panel,#fx-menu-pop,#fx-stg-card,#cld-pick-card,#cld-login-card,#wn-card,.activity-header-pop,dialog){background:var(--flix-container)!important;color:var(--flix-ink)!important;border-color:var(--flix-outline)!important}
:is(.fs-title,.fs-sysline,.sxs-title,.fxa-head,.fxa-item,.fxm-title,.fxm-row,.fxm-name,.dv-val){color:var(--flix-ink)!important}
:is(.fs-sec,.fs-ov,.fs-y,.fs-x,.fs-earliest,.fxm-sub,.fxa-sub,.sxs-sub,.dv-label,.flix-foot-std){color:var(--flix-secondary)!important}
#wn-card{background:var(--flix-canvas)!important}
#wn-card [style*="color:rgba(255,255,255"],#wn-card [style*="color:#fff"]{color:var(--flix-ink)!important}
#wn-card h2,#wn-card h3{font-weight:500!important}
/* Footage and its overlays keep black letterboxing and bright captions. */
video,canvas.media-canvas{background-color:#000}
.activity-view {
  --activity-surface:var(--flix-canvas);--activity-container:var(--flix-container);
  --activity-ink:var(--flix-ink);--activity-muted:var(--flix-secondary);
  --activity-primary:var(--flix-activity-primary);--activity-outline:var(--flix-outline);
}
/* Bridge legacy screen components into the shared roles without changing their controls. */
:root #tab-settings :is(.sxs-card,.sxs-nav,.sxs-seg),:root .lg-card {
  background:var(--flix-container)!important;border-color:var(--flix-outline)!important;color:var(--flix-ink)!important;
}
:root #tab-settings :is(h1,h2,h3,label,.sxs-title,.sxs-row-title,.sxs-navbtn),:root :is(.lg-title,.fs-title,.fs-sysline) {color:var(--flix-ink)!important}
:root #tab-settings :is(.sxs-sub,.sxs-desc,.sxs-row-sub),:root :is(.lg-sub,.lg-note) {color:var(--flix-secondary)!important}
:root :is(#nvr-login-overlay,#nvr-cloud-overlay){background:var(--flix-canvas)!important}
:root :is(#nvr-login-overlay,#nvr-cloud-overlay) .lg-band{display:none}
:root .lg-input{background:var(--flix-canvas)!important;color:var(--flix-ink)!important;border-color:var(--flix-outline)!important}
:root .lg-input::placeholder{color:var(--flix-secondary)!important}
:root .lg-card a{color:var(--flix-activity-primary)!important}
:root :is(.lg-title,.fs-title,.fxm-title,.sxs-title){font-weight:var(--flix-heading-weight)!important}
:root #content-container{background:var(--flix-canvas)!important}
:root #nvr-sidebar :is(.nav-btn:not(.sb-active),button[title="Settings"]){color:var(--flix-secondary)!important}
html:root:is(.light,.dark) :is(#content-container,#tab-settings,#tab-live,#tab-search,#tab-flix,#tab-insights,#tab-health,#tab-hardware,#tab-logs){background:var(--flix-canvas)!important}
html:root:is(.light,.dark) #tab-settings *{font-family:var(--flix-font)!important}
html:root:is(.light,.dark) #tab-settings :is(.sxs-card,.sxs-nav,.sxs-seg){background:var(--flix-container)!important;border-color:var(--flix-outline)!important}
html:root:is(.light,.dark) #tab-settings :is(h1,h2,h3,h4,strong,b,.sxs-title){font-weight:var(--flix-heading-weight)!important}
html:root:is(.light,.dark) :is(#tab-settings,#fx-stg-body,#fx-menu-pop) :is([style*="color:#697386"],[style*="color:#6b7280"],[style*="color:#9ca3af"],[style*="color:rgba(255,255,255,.55)"],[style*="color:rgba(255,255,255,0.5)"],[style*="color:rgba(255,255,255,.5)"]){color:var(--flix-secondary)!important}
:root #fx-boot{background:var(--flix-canvas)!important}
html:root:is(.light,.dark) :is(#sheet,.activity-date-sheet){background:var(--flix-canvas)!important;color:var(--flix-ink)!important}

html:root:is(.light,.dark) #nvr-bottom-bar { background: var(--flix-canvas) !important; color: var(--flix-ink); }

html:root:is(.light,.dark) :is(#tab-settings,#fx-stg-body,#fx-menu-pop) :is([style*="color:rgba(255,255,255,0.3"],[style*="color:rgba(255,255,255,0.4"],[style*="color:rgba(255,255,255,0.5"],[style*="color:rgba(255,255,255,.3"],[style*="color:rgba(255,255,255,.4"],[style*="color:rgba(255,255,255,.5"]){color:var(--flix-secondary)!important}
:root #tab-settings input::placeholder{color:var(--flix-secondary)!important;opacity:1}

/* Clip chrome and app-owned popovers share the canvas. Video stays letterboxed. */
html:root:is(.light,.dark) :is(#fx-menu-pop,#fx-stg-card,.flix-hbmenu,.fx-site-pop,#nvr-notif-sheet,.activity-header-pop,#nvr-cs-sheet){background:var(--flix-canvas)!important;color:var(--flix-ink)!important;border-color:var(--flix-outline)!important}
html:root:is(.light,.dark) #nvr-cs-sheet>div:not(#nvr-cs-vidwrap):not(#nvr-cs-split){background:var(--flix-canvas)!important;color:var(--flix-ink)!important}
html:root:is(.light,.dark) #nvr-cs-sheet>div:not(#nvr-cs-vidwrap) :is(button,a){color:var(--flix-ink)!important}
html:root:is(.light,.dark) #nvr-cs-sheet :is(#nvr-cs-cur,#nvr-cs-dur,#nvr-cs-info){color:var(--flix-secondary)!important}
html:root:is(.light,.dark) #nvr-cs-sheet :is(#nvr-cs-fill,#nvr-cs-knob){background:var(--flix-ink)!important}
html:root:is(.light,.dark) #nvr-cs-track{background:var(--flix-outline)!important}
html:root:is(.light,.dark) #fx-menu-pop :is(.fxm-lbl,.fxm-sub,.fxm-ic,.fxm-lbl .cnt){color:var(--flix-secondary)!important}
html:root:is(.light,.dark) #fx-menu-pop :is(.fxm-row,.fxm-site,.fxm-title){color:var(--flix-ink)!important}

html:root:is(.light,.dark) .fx-site-pop .fx-site-opt{color:var(--flix-ink)!important}
html:root:is(.light,.dark) :is(.fx-site-val,.nvr-notif-empty){color:var(--flix-secondary)!important}