/* Shared operator UI palette. Load after page styles; client previews keep their own document styles. */
:root {
  color-scheme:dark;
  --ui-canvas:#151922;--ui-panel:#222833;--ui-raised:#2c3441;--ui-field:#191f28;
  --ui-text:#eef1f7;--ui-muted:#b0b9c9;--ui-gold:#e6cca0;--ui-on-gold:#202630;
  --ui-line:#ffffff26;--ui-control-line:#ffffff42;
  --ui-canvas-background:radial-gradient(ellipse at 12% 0%,#44536d33,transparent 58%),radial-gradient(ellipse at 90% 70%,#9f805417,transparent 52%),var(--ui-canvas);
  --ui-material:linear-gradient(140deg,#303846eb,#232a35f5);
  background:var(--ui-canvas);color:var(--ui-text);
}
/* The task-focused control room keeps BECO's materials with a smoky black canvas. */
body[data-beco-page=control-room] {
  --ui-canvas:#090a0c;--ui-panel:#202228;--ui-raised:#2c2e35;--ui-field:#16181d;
  --ui-canvas-background:radial-gradient(ellipse at 75% -20%,#85838a1f,transparent 56%),radial-gradient(ellipse at 25% 85%,#61656b19,transparent 50%),var(--ui-canvas);
}
/* Bridge existing page variables to one palette, including standalone and embedded tools. */
body[data-beco-page] {
  --bg:var(--ui-canvas);--canvas:var(--ui-canvas);--panel:var(--ui-panel);--surface:var(--ui-panel);--raised:var(--ui-raised);
  --text:var(--ui-text);--ink:var(--ui-text);--paper:var(--ui-text);--muted:var(--ui-muted);--gold:var(--ui-gold);--accent:var(--ui-gold);
  --line:var(--ui-line);--control-line:var(--ui-control-line);--beco-solid-surface:var(--ui-panel);
  --studio-bg:var(--ui-canvas);--studio-panel:var(--ui-panel);--studio-raised:var(--ui-raised);
  --studio-text:var(--ui-text);--studio-muted:var(--ui-muted);--studio-gold:var(--ui-gold);--studio-accent:var(--ui-gold);--studio-line:var(--ui-line);
  --setup-bg:var(--ui-canvas);--setup-panel:var(--ui-panel);--setup-text:var(--ui-text);--setup-muted:var(--ui-muted);--setup-gold:var(--ui-gold);--setup-line:var(--ui-line);
  --login-text:var(--ui-text);--login-muted:var(--ui-muted);--login-gold:var(--ui-gold);
  background:var(--ui-canvas-background)!important;color:var(--ui-text);
}
html body[data-beco-page].focused-page {background:var(--ui-canvas-background)!important}
html body[data-beco-page=growth-map].beco-design {background:var(--ui-canvas-background)!important}
body[data-beco-page] :is(.app-header,.app-options,.setup-header,.login-card,dialog) {
  background:var(--ui-panel)!important;color:var(--ui-text);border-color:var(--ui-line)!important;
}
body[data-beco-page] :is(.builder-work,.project-rail,.studio-main,.studio-sidebar,.review-summary,.focus-panel,.studio-document,.inbox-item,.inbox-empty,.inbox-toolbar) {
  background:var(--ui-material)!important;border-color:var(--ui-line)!important;
}
body[data-beco-page] :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=submit]),textarea,select) {
  background:var(--ui-field)!important;color:var(--ui-text)!important;border-color:var(--ui-control-line)!important;
}
body[data-beco-page] :is(input,progress) {accent-color:var(--ui-gold)}
body[data-beco-page] :is(button,a,input,textarea,select,summary):focus-visible {outline-color:var(--ui-gold)!important}
body[data-beco-page] :is(.primary,.action-link.primary) {background:var(--ui-gold)!important;color:var(--ui-on-gold)!important;border-color:var(--ui-gold)!important}
body[data-beco-page] :is(.muted,.hint,.quiet,.sub,.eyebrow,.kicker,.app-current-section) {color:var(--ui-muted)}
body[data-beco-page] .app-options :is(a,button),body[data-beco-page] .app-header #app-navigation a[aria-current=page] {color:var(--ui-gold)!important}
body[data-beco-page] .app-header {color:var(--ui-text)}
body[data-beco-page] .app-header :is(select,option) {background:var(--ui-panel)!important;color:var(--ui-text)!important}
body[data-beco-page] dialog::backdrop {background:#0009}
body[data-beco-page] :is(.business-editor,.business-switcher) button {background:var(--ui-raised);color:var(--ui-text);border-color:var(--ui-control-line)}
html body[data-beco-page] .business-editor button[type=submit] {background:var(--ui-gold)!important;color:var(--ui-on-gold)!important}

/* Business setup: conversation, summary, and supporting controls. */
body[data-beco-page=business-setup] :is(#summary,#sources,.setup-box) {background:var(--ui-panel)}
body[data-beco-page=business-setup] .message.owner {background:var(--ui-raised)}
body[data-beco-page=business-setup] .tag {background:var(--ui-raised)}

/* Full-page production, campaign, release, acquisition, and delivery screens. */
body:is([data-beco-page=ad-planner],[data-beco-page=campaign],[data-beco-page=release],[data-beco-page=acquisition],[data-beco-page=delivery-ops]) :is(section,.step) {background:var(--ui-panel);border-color:var(--ui-line)}
body:is([data-beco-page=ad-planner],[data-beco-page=campaign],[data-beco-page=release],[data-beco-page=acquisition],[data-beco-page=delivery-ops]) :is(a,summary,.count,#allocated-total,#status:not(.error),#review-status) {color:var(--ui-gold)}
body:is([data-beco-page=ad-planner],[data-beco-page=campaign],[data-beco-page=release],[data-beco-page=acquisition],[data-beco-page=delivery-ops]) :is(p,label,small,.footnote,.metric span) {color:var(--ui-muted)}
body:is([data-beco-page=ad-planner],[data-beco-page=campaign],[data-beco-page=release],[data-beco-page=acquisition],[data-beco-page=delivery-ops]) button {background:var(--ui-gold);color:var(--ui-on-gold)}
body:is([data-beco-page=campaign],[data-beco-page=release],[data-beco-page=acquisition]) button.secondary {background:var(--ui-raised);color:var(--ui-text)}
body[data-beco-page=ad-planner] :is(.creative-style,#saved-plan details,.note) {background:var(--ui-field)}
body[data-beco-page=ad-planner] :is(input,select,textarea):focus {box-shadow:0 0 0 3px #e6cca026}
body[data-beco-page=ad-planner] #status.error {color:#ffb4a7}
body[data-beco-page=operations] :is(button,.button):not(.secondary) {background:var(--ui-gold);color:var(--ui-on-gold)}
body[data-beco-page=operations] :is(.card,details,#results-form,.tabs a) {background:var(--ui-panel)}
body[data-beco-page=operations] .tabs a[aria-current] {background:var(--ui-raised)}
body[data-beco-page=operations] .tabs a {color:var(--ui-gold)}
body[data-beco-page=operations] :is(.secondary,.path li) {background:var(--ui-raised);color:var(--ui-text)}

/* Keep report/website previews and their exported content independent of the surrounding editor. */
body[data-beco-page=growth-map] .worksheet {background:var(--ui-panel);border-color:var(--ui-line)}
body[data-beco-page=growth-map] .intro p {color:var(--ui-muted)}
body[data-beco-page=growth-map] .worksheet button:not(.secondary) {background:var(--ui-gold);color:var(--ui-on-gold)}
body[data-beco-page=growth-map] .map :is(input,select,textarea) {background:#f7f7f7!important;color:#0b1a2e!important}
body:is([data-beco-page=organic],[data-beco-page=sites]) .tabs button[aria-selected=true] {background:var(--ui-raised);color:var(--ui-text)}
body[data-beco-page=login] .login-card button,body[data-beco-page=mfa] .login-card button:not(#mfa-logout) {background:var(--ui-gold);color:var(--ui-on-gold);border-color:var(--ui-gold)}
body:is([data-beco-page=login],[data-beco-page=mfa]) .login-card :is(p,label,small) {color:var(--ui-muted)}
body:is([data-beco-page=login],[data-beco-page=mfa]) .login-card a {color:var(--ui-gold)}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  body[data-beco-page] :is(.builder-work,.project-rail,.studio-main,.studio-sidebar,.review-summary,.focus-panel,.studio-document,.inbox-item,.inbox-empty,.inbox-toolbar) {background:var(--ui-panel)!important;backdrop-filter:none!important}
}

/* Main-workspace masthead, reused by standalone screens. Keep palette inherited. */
html body[data-beco-page] .app-header[data-navigation-style=workspace]{
 position:relative;top:auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px;height:98px;min-height:98px;padding:0 32px;
 background:transparent!important;border:0!important;box-shadow:none;backdrop-filter:none;color:var(--ui-text);
}
.app-header[data-navigation-style=workspace] .app-header-identity{display:flex;align-items:center;gap:16px;min-width:0}
.app-header[data-navigation-style=workspace] .app-workspace{border:0;padding:0;max-width:190px}
.app-header[data-navigation-style=workspace] .app-brand img{width:38px;height:38px}
html body[data-beco-page] .app-header[data-navigation-style=workspace] .business-switcher select{background:transparent!important;font-size:13px;border:0!important}
html body[data-beco-page] .app-header[data-navigation-style=workspace] #app-navigation{
 grid-column:2;grid-row:1;display:flex;position:relative;inset:auto;transform:none;flex:none;align-items:center;justify-content:center;gap:4px;
 width:max-content;max-width:none;margin:0;padding:6px;border:1px solid var(--ui-line);border-radius:100px;background:var(--ui-panel);
 box-shadow:inset 0 1px 0 #ffffff08,0 18px 55px #0003;overflow:hidden;
}
html body[data-beco-page] .app-header[data-navigation-style=workspace] #app-navigation a{
 display:flex;align-items:center;justify-content:center;gap:9px;min-width:119px;height:45px;margin:0;padding:1px 6px;border:0;border-radius:100px;
 color:var(--ui-muted);background:transparent;line-height:1.4;
}
html body[data-beco-page] .app-header[data-navigation-style=workspace] #app-navigation a strong{font-size:14px;font-weight:500}
html body[data-beco-page] .app-header[data-navigation-style=workspace] #app-navigation a small{display:none}
html body[data-beco-page] .app-header[data-navigation-style=workspace] #app-navigation a[aria-current=page]{
 color:var(--ui-text)!important;background:linear-gradient(165deg,#f3f4f736,#f6efde15);box-shadow:inset 0 1px 0 #ffffff4f,0 4px 8px #0003;
}
html body[data-beco-page] .app-header[data-navigation-style=workspace] #app-navigation a:hover{color:var(--ui-text);background-color:#ffffff09}
.app-header[data-navigation-style=workspace] #app-navigation svg{width:20px;height:20px;stroke-width:1.65}
html body[data-beco-page] .app-header[data-navigation-style=workspace] #app-nav-toggle{display:none}
.app-header[data-navigation-style=workspace] .top-actions{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:12px;min-width:0}
html body[data-beco-page] .app-header[data-navigation-style=workspace] #app-settings-toggle{display:grid;place-items:center;min-width:44px;width:44px;height:44px;min-height:44px;padding:12px;margin:0;border:1px solid var(--ui-line);border-radius:50%;background:var(--ui-panel);color:var(--ui-text)}
html body[data-beco-page] .app-header[data-navigation-style=workspace] .beco-account-trigger{min-height:44px;padding:8px 14px;border:1px solid var(--ui-control-line);border-radius:14px;background:transparent;color:var(--ui-text);font-size:13px;max-width:170px}
body[data-beco-page] .app-header[data-navigation-style=workspace] .beco-account-trigger:hover{background:#ffffff09}
@media(max-width:1000px){
 html body[data-beco-page] .app-header[data-navigation-style=workspace]{height:auto;min-height:126px;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:44px 54px;gap:8px 16px;padding:10px 20px}
 .app-header[data-navigation-style=workspace] .app-header-identity{grid-column:1;grid-row:1}
 .app-header[data-navigation-style=workspace] .top-actions{grid-column:2;grid-row:1}
 html body[data-beco-page] .app-header[data-navigation-style=workspace] #app-navigation{grid-column:1/-1;grid-row:2;justify-self:center}
}
@media(max-width:600px){
 html body[data-beco-page] .app-header[data-navigation-style=workspace]{padding:10px 12px;gap:8px}
 .app-header[data-navigation-style=workspace] .app-header-identity{gap:8px}
 .app-header[data-navigation-style=workspace] .app-brand{padding:0}
 .app-header[data-navigation-style=workspace] .app-brand img{width:30px;height:30px}
 .app-header[data-navigation-style=workspace] .app-workspace{min-width:0;max-width:160px}
 .app-header[data-navigation-style=workspace] .business-switcher select{padding:10px 16px 10px 0;max-width:100%;font-size:12px!important}
 .app-header[data-navigation-style=workspace] .top-actions{gap:8px}
 html body[data-beco-page] .app-header[data-navigation-style=workspace] .beco-account-trigger{max-width:100px;font-size:12px;padding:8px;gap:6px}
 html body[data-beco-page] .app-header[data-navigation-style=workspace] #app-navigation{gap:1px;padding:4px;max-width:100%}
 html body[data-beco-page] .app-header[data-navigation-style=workspace] #app-navigation a{min-width:80px;height:44px;padding:0 11px;gap:6px}
 html body[data-beco-page] .app-header[data-navigation-style=workspace] #app-navigation a strong{font-size:12px}
 .app-header[data-navigation-style=workspace] #app-navigation svg{width:16px;height:16px}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){html body[data-beco-page] .app-header[data-navigation-style=workspace] #app-navigation{background:var(--ui-panel);backdrop-filter:none}}
@media print{html body[data-beco-page] .app-header[data-navigation-style=workspace]{display:none!important}}

html body[data-beco-page] .app-header[data-navigation-style=workspace] #business-select{border-radius:100px;padding:10px 26px 10px 14px;border:1px solid var(--ui-line)!important;background:var(--ui-panel)!important;max-width:100%;min-width:0}

/* Align is the canvas reference for every operator surface, including Emporia. */
html body[data-beco-page].workspace-shell .world{background:var(--ui-canvas-background)}
body[data-beco-page]{min-height:100dvh;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body[data-beco-page] :is(h1,h2,h3,button,input,textarea,select){font-family:inherit}
body[data-beco-page] :is(button,a,input,textarea,select,summary){touch-action:manipulation}
body[data-beco-page] :is(button,a,input,textarea,select,summary):focus-visible{outline:2px solid var(--ui-gold);outline-offset:4px}
body[data-beco-page] :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),textarea,select){border-radius:12px}
body[data-beco-page] .login-card{border-radius:24px}
body[data-beco-page] .login-card :is(button,input){border-radius:12px}
body[data-beco-page] .login-card :is(.login-eyebrow,.login-foot){font-family:inherit;font-size:11px;letter-spacing:.1em}
body[data-beco-page] .app-inbox-scope{color:var(--ui-muted);font-size:13px;line-height:1.4}
/* Detail screens keep their contextual back destination and business identity. */
html body[data-beco-page]>header:not(.app-header):not(.masthead){background:transparent!important;border-color:var(--ui-line);gap:16px;min-height:88px}
body[data-beco-page]>header:not(.app-header):not(.masthead) a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid var(--ui-line);border-radius:100px;color:var(--ui-text);text-decoration:none}
body[data-beco-page]>header:not(.app-header):not(.masthead) a:hover{background:var(--ui-raised)}
body[data-beco-page]>header:not(.app-header):not(.masthead) span{color:var(--ui-muted);letter-spacing:.02em}
body[data-beco-page=ad-planner] section{border-radius:24px}
body[data-beco-page=ad-planner] button{border-radius:12px}
/* Embedded tools inherit the surrounding workspace, rather than painting a second canvas. */
html.workspace-embedded body[data-beco-page]{background:transparent!important}
@media(prefers-reduced-motion:no-preference){
 body[data-beco-page] :is(.app-header a,.app-header button,.app-options a,.app-options button,.tabs a,.tabs button,.app-back,header #back){transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease}
 body[data-beco-page] .app-options:popover-open{animation:beco-menu-enter .16s ease-out}
 @keyframes beco-menu-enter{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
}
@media(prefers-reduced-motion:reduce){body[data-beco-page] *,body[data-beco-page] *::before,body[data-beco-page] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:600px){
 body[data-beco-page]>header:not(.app-header):not(.masthead){min-height:76px;padding:16px;flex-wrap:wrap}
 body[data-beco-page] .app-inbox-scope{font-size:12px;max-width:90px}
 body[data-beco-page=business-setup] .setup-header nav{gap:8px}
 body[data-beco-page=business-setup] .setup-header nav a{padding:8px 12px}
}
/* The records visualization and Growth Map editor are operator surfaces too. */
@media screen{
 html body[data-beco-page=business] .universe{background:var(--ui-canvas-background)!important;border-color:var(--ui-line);border-radius:24px}
 html body[data-beco-page=business] .document-body{background:var(--ui-field);color:var(--ui-text);border-radius:12px}
 html body[data-beco-page=growth-map] :is(.worksheet,.map){background:var(--ui-panel)!important;color:var(--ui-text)!important;border:1px solid var(--ui-line)}
 html body[data-beco-page=growth-map] .document{background:var(--ui-field)!important;color:var(--ui-text)!important}
 html body[data-beco-page=growth-map] .map :is(.eyebrow,.hint,.empty){color:var(--ui-muted)!important}
 html body[data-beco-page=growth-map] .map :is(a,#actions a){color:var(--ui-gold)}
 html body[data-beco-page=growth-map] .map :is(input,select,textarea){background:var(--ui-field)!important;color:var(--ui-text)!important}
 html body[data-beco-page] .app-system-context button{background:var(--ui-panel);color:var(--ui-text);border:1px solid var(--ui-line);border-radius:100px;min-height:44px}
}
body[data-beco-page=delivery-ops] main>nav{align-items:center;min-height:44px;letter-spacing:.02em}
body[data-beco-page=delivery-ops] main>nav a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid var(--ui-line);border-radius:100px;color:var(--ui-text);text-decoration:none}
body[data-beco-page=delivery-ops] main>nav a:hover{background:var(--ui-raised)}

.app-header[data-navigation-style=workspace],.app-header[data-navigation-style=workspace] *{box-sizing:border-box}
html body[data-beco-page] #account-panel button{background:var(--ui-raised);color:var(--ui-text);border-color:var(--ui-control-line);border-radius:14px;min-height:44px}
html body[data-beco-page] #account-panel button[type=submit]{background:var(--ui-gold);color:var(--ui-on-gold)}
/* Older saved-run links still open this operator screen. Keep its shell consistent. */
html body[data-beco-page=legacy] :is(.canvas-column,#canvas){background:transparent!important}
html body[data-beco-page=legacy] .workflow-layout{border-radius:24px;overflow:hidden}
html body[data-beco-page=legacy] .workflow-layout>.inspector{--line:var(--ui-line);--muted:var(--ui-muted);--gold:var(--ui-gold);background:var(--ui-panel);color:var(--ui-text);border-color:var(--ui-line);scrollbar-color:var(--ui-raised) var(--ui-panel)}
html body[data-beco-page=legacy] .inspector :is(.inspector-heading,.inspector-tabs){background:var(--ui-panel);color:var(--ui-muted);box-shadow:none;border-color:var(--ui-line)}
html body[data-beco-page=legacy] .inspector :is(h2,h3,h4,p,summary,.state-label,.purpose,.output-document,.tool-tags span){color:var(--ui-text)!important}
html body[data-beco-page=legacy] .inspector :is(button,.artifact,.state-label){background:var(--ui-field);color:var(--ui-text);border-color:var(--ui-line);border-radius:12px}
html body[data-beco-page=legacy] .inspector-tabs button[aria-selected=true]{background:var(--ui-raised)}
html body[data-beco-page=legacy] .inspector a{color:var(--ui-gold)}
html body[data-beco-page] #saved-jobs button{background:var(--ui-raised);color:var(--ui-text);border-color:var(--ui-control-line);border-radius:12px;min-height:44px}
html body[data-beco-page] #saved-jobs form button{background:var(--ui-gold);color:var(--ui-on-gold)}
html body[data-beco-page] #saved-jobs a{color:var(--ui-gold)}
html body[data-beco-page] :is(#saved-jobs,#account-panel){font-family:inherit}
html body[data-beco-page=legacy] :is(.canvas-toolbar,.activity,.zoom,.orbit-menu){background:var(--ui-panel);border-color:var(--ui-line)}