/* Neutral surface elevations inspired by Atlassian; Prospectfy violet actions. */
#app-shell .app-appearance { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin:0 0 14px; color:var(--fg-secondary); font-size:12px; }
#app-shell .app-appearance select { min-height:38px; width:116px; padding:6px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--fg); font:inherit; cursor:pointer; }
#app-shell .app-appearance select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
html[data-app-theme="dark"] :is(#app-shell, body > dialog, #product-tour, #toast-container, #modal-paywall) {
  --app-ink:#DEE4EA;
  --app-canvas:#1D2125;
  --app-paper:#22272B;
  --app-violet:#B8A0FF;
  --app-violet-strong:#CDBBFF;
  --app-lavender:#352D4C;
  --app-whatsapp:#7EE2B8;
  --app-amber:#F5CD47;
  --app-danger:#FD9891;
  --bg:var(--app-canvas);
  --surface:var(--app-paper);
  --surface-alt:#282E33;
  --sidebar-bg:var(--app-canvas);
  --input-bg:#1D2125;
  --fg:var(--app-ink);
  --fg-secondary:#B6C2CF;
  --fg-tertiary:#A1ADBA;
  --text-muted:var(--fg-tertiary);
  --border:#3D454E;
  --border-light:#333B43;
  --border-strong:#73808C;
  --accent:var(--app-violet);
  --accent-hover:var(--app-violet-strong);
  --accent-soft:var(--app-lavender);
  --accent-light:#CDBBFF;
  --green:var(--app-whatsapp);
  --green-soft:#193D32;
  --red:var(--app-danger);
  --red-soft:#422B2D;
  --orange:var(--app-amber);
  --orange-soft:#3D3522;
  --shadow-sm:none;
  --shadow-md:0 8px 24px #0003;
  --shadow-lg:0 16px 48px #0006;
  color-scheme:dark;
  color:var(--fg);
}
html[data-app-theme="dark"] body:has(#app-shell:not([style*="display: none"])) { background:#1D2125; }
html[data-app-theme="dark"] body > dialog { background:#2C333A; }
html[data-app-theme="dark"] #app-shell :is(.mobile-app-header,.mobile-tab-bar) { background:#22272B; border-color:var(--border); }
html[data-app-theme="dark"] #app-shell .button--primary,
html[data-app-theme="dark"] body > dialog .button--primary { background:#B8A0FF; border-color:#B8A0FF; color:#211735; }
html[data-app-theme="dark"] #app-shell .button--primary:hover,
html[data-app-theme="dark"] body > dialog .button--primary:hover { background:#CDBBFF; border-color:#CDBBFF; color:#211735; }
html[data-app-theme="dark"] #app-shell :is(.filter-pill.active,.filter-pill[aria-pressed="true"]) { color:#1D2125; }
html[data-app-theme="dark"] #app-shell .workflow-rail li:is(.is-active,.is-complete) > span { color:#211735; }
html[data-app-theme="dark"] #app-shell .brand-lockup__image { filter:invert(1) hue-rotate(180deg); mix-blend-mode:screen; }
html[data-app-theme="dark"] #modal-paywall {
  --auth-surface:#2C333A; --auth-surface-alt:#22272B; --auth-fg:#DEE4EA;
  --auth-fg-secondary:#B6C2CF; --auth-fg-tertiary:#A1ADBA;
  --auth-border:#3D454E; --auth-border-strong:#73808C; --auth-accent:#B8A0FF;
}
html[data-app-theme="dark"] #modal-paywall .auth-notice-flag { background:var(--accent-soft); }
html[data-app-theme="dark"] :is(#app-shell,body > dialog) [style*="background: #FFFFFF"],
html[data-app-theme="dark"] :is(#app-shell,body > dialog) [style*="background: white"] { background:var(--surface) !important; }
/* Payment and pairing QR codes retain their original white quiet zone. */
html[data-app-theme="dark"] :is(.pix-checkout-qr,#wa-qr-container img) { background:white; }
@media(max-width:760px) { #app-shell .app-appearance { margin-bottom:12px; } #app-shell .app-appearance select { min-height:44px; } }