.app-theme-toggle {
  flex: 0 0 auto;
  border: 1px solid #d8e2ef;
  border-radius: 9px;
  background: #fff;
  color: #50617b;
  padding: 9px 12px;
  cursor: pointer;
  font: 700 12px Inter, Segoe UI, Arial, sans-serif;
}
.app-theme-toggle:hover { background: #f7f9fc; border-color: #b9c8dc; }
.app-theme-toggle:focus-visible { outline: 2px solid #3865ef; outline-offset: 2px; }

html[data-app-theme="dark"] {
  color-scheme: dark;
  color: #e9f0fa;
  background: #111a27;
  --app-background: #111a27;
  --app-surface: #1b293a;
  --app-surface-raised: #26384e;
  --app-border: #40556e;
  --app-text: #e9f0fa;
  --app-muted: #b4c2d4;
  --app-accent: #a9c2ff;
  --app-success: #a7e2bf;
  --app-warning: #f1d49a;
  --app-danger: #ffc3c9;
  --app-workflow-canvas: #152236;
}
html[data-app-theme="dark"] body,
html[data-app-theme="dark"] .shell,
html[data-app-theme="dark"] main { background: var(--app-background); color: var(--app-text); }
html[data-app-theme="dark"] main { border-color: #393d42; }
html[data-app-theme="dark"] .shell main a { color: var(--app-accent); }
html[data-app-theme="dark"] h1,
html[data-app-theme="dark"] h2,
html[data-app-theme="dark"] h3,
html[data-app-theme="dark"] h4,
html[data-app-theme="dark"] .tools-page-heading h2,
html[data-app-theme="dark"] .empty strong,
html[data-app-theme="dark"] .task-timing strong { color: #e5e7eb; }
html[data-app-theme="dark"] header p,
html[data-app-theme="dark"] .muted,
html[data-app-theme="dark"] .hint,
html[data-app-theme="dark"] .metric span,
html[data-app-theme="dark"] .list-row small,
html[data-app-theme="dark"] .empty,
html[data-app-theme="dark"] .task-timing { color: #a3a9b1; }
html[data-app-theme="dark"] .workspace-header,
html[data-app-theme="dark"] .tabs { border-color: #383d42; }
html[data-app-theme="dark"] .tabs .tab { color: #a3a9b1; }
html[data-app-theme="dark"] .tabs .tab.active { color: #8eabff; border-color: #6689ff; }
html[data-app-theme="dark"] .nav-dropdown-toggle { color: #a3a9b1; }
html[data-app-theme="dark"] .nav-dropdown.is-active>.nav-dropdown-toggle,
html[data-app-theme="dark"] .nav-dropdown-toggle.active,
html[data-app-theme="dark"] .nav-dropdown.is-open>.nav-dropdown-toggle { color: #8eabff; }

html[data-app-theme="dark"] :where(.card,.panel,.panel-head,.panel-body,.run-card,.run-header,.flow-step,.agent-card,.agent-toolbar,.agent-action,.agent-library-category,.agent-instructions,.preset-card,.workflow-gallery-card,.workflow-import-card,.accounts-toolbar,.accounts-editor,.account-row,.usage-card,.history-entry,.task-board,.task-subtask-tab,.task-board-tab,.task-stages,.repository-file,.repository-group,.task-template-options,.task-template-options button,.task-flow-node,.task-flow-step,.task-flow-chooser,.task-flow-notify,.task-flow-add-before,.task-flow-view-node,.task-flow-view-open,.task-flow-engine-panel,.task-flow-engine-preview,.task-flow-token-tooltip,.task-flow-engine-tooltip,.workflow-preview-dialog-head,.workflow-preview-dialog-content,.task-flow-modal .modal-head,.task-flow-modal .modal-actions,.graph-connection,.graph-connection-detail,.graph-areas,.graph-capabilities,.graph-site-results,.graph-modal-panel .graph-capability-list li,.graph-modal-panel .graph-site,.graph-modal-panel .graph-site-list,.databricks-guide,.databricks-connections,.chat-calendar,.task-meta,.task-board-tab-tooltip,.task-group-section-heading,.task-group-action-tooltip,.task-flow-connection-icon,.task-flow-email-icon,#chat-image-preview,#task-image-preview,#text-file-preview,#db-result,#task-databricks-config,#usage-fixed,dialog,.nav-dropdown-menu,.nav-dropdown-submenu) {
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}
html[data-app-theme="dark"] :where(.panel-head,.run-header,.agent-toolbar,.accounts-toolbar,.accounts-table-head,.workflow-preview-dialog-head,.task-flow-node-head,.task-flow-view-node .task-flow-node-head,.graph-connection-head,.databricks-connections h3) {
  background-color: var(--app-surface-raised);
  color: var(--app-text);
}
html[data-app-theme="dark"] :where(.list-row,.account-row,.task-board-tab,.task-subtask-tab,.task-template-options button,.nav-dropdown-item,.nav-dropdown-submenu .nav-dropdown-item,.outline,.small-btn,.agent-action,.task-flow-view-open,.task-flow-engine-button,.task-flow-engine-preview,.graph-modal-panel .graph-site) {
  background-color: var(--app-surface);
  color: #d9dce0;
  border-color: var(--app-border);
}
html[data-app-theme="dark"] :where(.list-row.clickable:hover,.account-row:hover,.task-board-tab:hover,.task-subtask-tab:hover,.task-template-options button:hover,.nav-dropdown-item:hover,.nav-dropdown-item.active,.outline:hover,.small-btn:hover,.agent-action:hover,.task-flow-view-open:hover,.task-flow-engine-button:hover,.task-flow-engine-preview:hover,.graph-modal-panel .graph-site-list .graph-site:hover) {
  background-color: var(--app-surface-raised);
  color: #ffffff;
}
html[data-app-theme="dark"] :where(.panel,.card,.run-card,.agent-card,.usage-card,.account-row,.history-entry,.task-flow-node,.task-flow-view-node,.task-flow-step,.workflow-gallery-card,.workflow-import-card,.task-flow-canvas-scroll,.task-flow-view-scroll,.workflow-preview-dialog-content,.graph-capabilities,.graph-areas,.graph-connection,.graph-sharepoint-connections>.graph-site-results) {
  border-color: var(--app-border);
  box-shadow: 0 5px 20px #02071340;
}
html[data-app-theme="dark"] :where(input,textarea,select,.email-rich-editor,.task-flow-email-template select,.task-subtask-filter input,#text-file-preview) {
  border-color: #3a4c66;
  background: var(--app-background);
  color: #e5e7eb;
}
html[data-app-theme="dark"] input::placeholder,
html[data-app-theme="dark"] textarea::placeholder { color: #9298a1; }
html[data-app-theme="dark"] :is(label,.task-flow-email-template label,.repository-controls label,.task-run-view-control label,.task-run-execution-control label) { color: #b8bdc4; }
html[data-app-theme="dark"] :is(dialog,.modal-head,.modal-actions,#modal-body,.workflow-preview-dialog-head,.workflow-preview-dialog-content) { color: #e2e4e7; }
html[data-app-theme="dark"] dialog::backdrop { background: #020817bb; }
html[data-app-theme="dark"] :is(.modal-head,.modal-actions,.panel-head,.panel-body,.list-row,.run-header,.account-row,.workflow-preview-dialog-head) { border-color: #3a3f45; }
html[data-app-theme="dark"] :is(.nav-dropdown-menu,.nav-dropdown-submenu) { background: var(--app-surface); box-shadow: 0 14px 40px #020713a8; }
html[data-app-theme="dark"] .nav-dropdown-item { color: #d9dce0; }
html[data-app-theme="dark"] .nav-dropdown-item:hover,
html[data-app-theme="dark"] .nav-dropdown-item:focus-visible,
html[data-app-theme="dark"] .nav-dropdown-item.active { background: #32363b; color: #9cb5ff; }
html[data-app-theme="dark"] :is(.primary,.danger-button:hover,.task-attention-open,.overview-action-button) { color: #fff; }
html[data-app-theme="dark"] :is(.project-item:hover,.project-item.active) { background: #17243a; color: #fff; }
html[data-app-theme="dark"] .sidebar-add { color: #b8c8df; }
html[data-app-theme="dark"] .sidebar-bottom { color: #aebcd1; border-color: #253550; }
html[data-app-theme="dark"] .sidebar-bottom button { color: #dce6f7; }
html[data-app-theme="dark"] :where(.agent-meta span,.agent-category-tabs button[aria-selected="true"],.agent-library-category.active,.task-board-order,.task-group-section h3 span,.repository-tabs button.active,.tools-providers,.tools-sections button.active,.preset-invite,.preset-category-label,.email-template-variables,.task-flow-canvas-scroll,.task-flow-view-scroll,.task-flow-engine-preview.is-custom,.task-flow-engine-button.is-custom) {
  background-color: #30353a;
  color: #c7d6ef;
  border-color: #444a51;
}
html[data-app-theme="dark"] :is(.badge,.agent-identity,.account-identity>b,.workflow-gallery-step,.workflow-gallery-step-number,.workflow-template-branch,.task-flow-number,.task-flow-connection-icon.configured,.graph-capability-mark) { filter: brightness(.82) saturate(.9); }
html[data-app-theme="dark"] :is(.badge,.account-chip) { background: #34393f; color: #c5c8cd; }
html[data-app-theme="dark"] .badge.green,
html[data-app-theme="dark"] .account-chip.is-active { background: #17372e; color: #a7e2bf; }
html[data-app-theme="dark"] .badge.orange { background: #3c301c; color: #f0d49b; }
html[data-app-theme="dark"] .badge.red { background: #3b232a; color: #ffc3c9; }
html[data-app-theme="dark"] :where(.task-status,.task-stage:not(.done):not(.running):not(.review):not(.failed),.task-stages,.task-board>.task-board-tabs,.overview #project-usage-slot .codex-consumption,#chat-image-preview,#task-image-preview) { background: #2a2e33; color: #d5d7db; border-color: #3a3f45; }
html[data-app-theme="dark"] .agent-state.is-inactive,
html[data-app-theme="dark"] .account-chip.is-inactive { background: #34393f; color: #c1ccda; }
html[data-app-theme="dark"] :where(.task-attention,.task-review,.approval,.optimizer-alert,.task-flow-disconnected-warning,.task-flow-restart-warning,.global-activity,.notice-alert,.accounts-message,.graph-capability-alert,.task-flow-orphan-picker,.task-flow-view-node.awaiting-input,.task-flow-view-node.awaiting-action) {
  background-color: #352b1b;
  color: #f1d49a;
  border-color: #6f572b;
}
html[data-app-theme="dark"] :is(.task-flow-view-node.done,.task-stage.done,.task-status.done,.agent-state.is-active,.account-chip.is-active,.account-invitation) { background-color: #142f29; color: #a7e2bf; border-color: #286247; }
html[data-app-theme="dark"] :is(.task-flow-view-node.failed,.task-stage.failed,.notice-alert.notice-error,.account-danger,.accounts-message.is-error) { background-color: #351f27; color: #ffc3c9; border-color: #70404a; }
html[data-app-theme="dark"] :is(.task-flow-view-node.running,.task-stage.running,.task-status.running) { background-color: #34383d; color: #c6d7ff; border-color: #3a5688; }
html[data-app-theme="dark"] :is(.task-flow-node.email-notification,.task-flow-view-node.email-notification) { background-color: #241d37; border-color: #514071; }
html[data-app-theme="dark"] :is(.task-flow-node.email-notification .task-flow-node-head,.task-flow-view-node.email-notification .task-flow-node-head,.task-flow-node.email-notification .task-flow-email-template) { background-color: #2b2240; border-color: #514071; }
html[data-app-theme="dark"] .task-flow-view-node.aborted { background-color: #351f27; color: #ffc3c9; border-color: #a6525f; }
html[data-app-theme="dark"] .task-flow-view-node.aborted .task-flow-node-head { background-color: #41232c; border-color: #70404a; }
html[data-app-theme="dark"] .task-flow-view-node.aborted .task-flow-number { background: #ad394d; color: #fff; }
html[data-app-theme="dark"] .task-flow-view-node.aborted .task-flow-view-state-label { color: #ffc3c9; }
html[data-app-theme="dark"] .task-flow-canvas-scroll,
html[data-app-theme="dark"] .task-flow-view-scroll { background-color: #1c1f23; }
html[data-app-theme="dark"] :is(.markdown-body,.task-run-response.markdown-body,.task-current-output .output.markdown-body) { color: #d9dce0; }
html[data-app-theme="dark"] .task-run-artifacts { background: var(--app-surface-raised); border-color: var(--app-border); }
html[data-app-theme="dark"] .task-run-artifact { background: var(--app-surface); border-color: var(--app-border); }
html[data-app-theme="dark"] :is(.markdown-body blockquote,.task-run-response.markdown-body blockquote) { background: #32363b; color: #c5c8cd; }
html[data-app-theme="dark"] :is(.markdown-body code,.markdown-body pre,.history-entry details pre,.repository-event pre,#text-file-preview pre) { background: #101214; color: #d9dce0; }
html[data-app-theme="dark"] :is(.markdown-body hr,.task-run-response.markdown-body hr) { background: #454a50; }
html[data-app-theme="dark"] :is(.badge,.account-chip,.task-flow-number,.stage-number,.agent-identity,.account-identity>b,.workflow-gallery-step,.workflow-gallery-step-number,.workflow-template-branch,.task-flow-connection-icon.configured,.graph-capability-mark) { filter: none; }
html[data-app-theme="dark"] #usage-fixed :is(b,small,strong,span,p) { color: #c3c7cd; }
html[data-app-theme="dark"] #usage-fixed :is(.fixed-window strong,.fixed-track i) { color: #9cb5ff; }
html[data-app-theme="dark"] :is(.task-flow-number,.stage-number) { background: #3b4147; color: #c9d8f3; }
html[data-app-theme="dark"] :is(.documents-location,.documents-item) { border-color: var(--app-border); }
html[data-app-theme="dark"] .documents-location small,
html[data-app-theme="dark"] .documents-item small { color: var(--app-muted); }

html[data-app-theme="light"] {
  color-scheme: light;
  color: #26374f;
  background: #f4f7fb;
  --app-background: #f4f7fb;
  --app-surface: #fff;
  --app-surface-raised: #f8fafd;
  --app-border: #dce4ee;
  --app-text: #26374f;
  --app-muted: #718098;
}
html[data-app-theme="light"] body,
html[data-app-theme="light"] .shell,
html[data-app-theme="light"] main {
  background: var(--app-background);
  color: var(--app-text);
}
html[data-app-theme="light"] .workspace-header,
html[data-app-theme="light"] .tabs { border-color: var(--app-border); }
html[data-app-theme="light"] .sidebar {
  background: #101b30;
  color: #dce6f7;
  border-right: 1px solid #30405b;
}
html[data-app-theme="dark"] .sidebar {
  background: #0b1425;
  color: #e1e7f0;
  border-right: 1px solid #253550;
}
html[data-app-theme="dark"] .brand strong { color: #f0f1f3; }
html[data-app-theme="dark"] .brand small,
html[data-app-theme="dark"] .section-title { color: #9aaac2; }
html[data-app-theme="dark"] .project-item { color: #c3cde0; }
html[data-app-theme="dark"] .project-item:hover,
html[data-app-theme="dark"] .project-item.active { background: #17243a; color: #fff; }
html[data-app-theme="dark"] .sidebar-add { border-color: #344762; color: #c3cde0; }
html[data-app-theme="dark"] .sidebar-add:hover { background: #17243a; }

html[data-app-theme="light"] .brand strong { color: #fff; }
html[data-app-theme="light"] .brand small,
html[data-app-theme="light"] .section-title { color: #8da1bf; }
html[data-app-theme="light"] .project-item { color: #b8c8df; }
html[data-app-theme="light"] .project-item:hover,
html[data-app-theme="light"] .project-item.active { background: #233554; color: #fff; }
html[data-app-theme="light"] .folder { color: #85a2ff; }
html[data-app-theme="light"] .sidebar-add { border-color: #526884; color: #b8c8df; }
html[data-app-theme="light"] .sidebar-add:hover { background: #233554; }
html[data-app-theme="light"] .sidebar-bottom { border-color: #30405b; color: #aebcd1; }
html[data-app-theme="light"] .sidebar-bottom button { color: #dce6f7; }
html[data-app-theme="light"] .app-theme-toggle { border-color: #d8e2ef; background: #fff; color: #50617b; }
.sidebar-footer {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding: 10px 0 2px;
  border-top: 1px solid #3b4046;
}
#sidebar-agent-controls,
#sidebar-account-actions { display: block; }
#sidebar-account-actions { display: grid; gap: 6px; }
.sidebar-footer #sidebar-account-actions > .sidebar-add,
.local-agent-panel .sidebar-add {
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #344b68;
  border-radius: 8px;
  background: transparent;
  color: #c3c7cd;
  font-size: 12px;
  text-align: center;
}
.sidebar-footer .sidebar-add:hover,
.local-agent-panel .sidebar-add:hover { background: #17243a; }
.local-agent-panel {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid #3b4046;
}
.local-agent-panel > small { color: #aebcd1; font-size: 11px; line-height: 1.4; }
.local-agent-panel > a { font-size: 11px; text-align: center; text-decoration: none; }
html[data-app-theme="dark"] .sidebar-footer,
html[data-app-theme="dark"] .local-agent-panel { border-color: #253550; }
#sidebar-footer .sidebar-bottom {
  margin-top: 0;
  padding: 0 8px 2px;
  border-top: 0;
}
html[data-app-theme="light"] .sidebar-footer { border-color: #30405b; }
html[data-app-theme="light"] .local-agent-panel { border-color: #30405b; }
html[data-app-theme="light"] .local-agent-panel > small { color: #aebcd1; }
html[data-app-theme="light"] .sidebar-footer #sidebar-account-actions > .sidebar-add,
html[data-app-theme="light"] .local-agent-panel .sidebar-add {
  border-color: #344b68;
  color: #c3c7cd;
}
html[data-app-theme="light"] .sidebar-footer .sidebar-add:hover,
html[data-app-theme="light"] .local-agent-panel .sidebar-add:hover { background: #17243a; }
.first-project-guide { max-width: 1040px; margin: clamp(18px,5vh,52px) auto 30px; }
.first-project-heading { max-width: 760px; margin: 0 auto 24px; text-align: center; }
.first-project-eyebrow { color: #6f8ff0; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; }
.first-project-heading h2 { margin: 9px 0 8px; color: #e5e7eb; font-size: clamp(23px,3vw,32px); letter-spacing: -.7px; }
.first-project-heading p { margin: 0; color: #a8adb5; line-height: 1.55; }
.first-project-steps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.first-project-step { display: flex; align-items: flex-start; gap: 14px; min-height: 168px; padding: 20px; border: 1px solid #3a3f45; border-radius: 13px; background: #24282d; color: #d5d7db; box-shadow: 0 5px 20px #02071326; }
.first-project-number { display: grid; flex: 0 0 31px; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: #3b4147; color: #c9d8f3; font-size: 14px; font-weight: 800; }
.first-project-step h3 { margin: 3px 0 8px; color: #e5e7eb; font-size: 15px; }
.first-project-step p { margin: 0 0 10px; color: #a8adb5; font-size: 13px; line-height: 1.5; }
.first-project-step small { color: #8e9fb6; font-size: 11px; line-height: 1.45; }
.first-project-step .primary { display: inline-flex; align-items: center; min-height: 37px; margin-top: 3px; text-decoration: none; }
.first-project-step .outline { margin-top: 3px; }
.first-project-agent-status { padding: 9px 11px; border: 1px solid #454a50; border-radius: 8px; background: #1c1f23; color: #c3c7cd !important; }
.first-project-agent-status.is-connected { border-color: #286247; background: #142f29; color: #a7e2bf !important; }
.first-project-agent-status.is-error { border-color: #6f572b; background: #352b1b; color: #f1d49a !important; }
.first-project-connect-step button[hidden] { display: none; }
/* The workflow keeps exactly the same sizes, corners and layout in both themes. */
html[data-app-theme="dark"] :is(.task-flow-canvas-scroll,.task-flow-view-scroll) {
  background-color: var(--app-workflow-canvas);
  background-image: radial-gradient(circle,#50668166 1px,transparent 1px);
  border-color: var(--app-border);
}
html[data-app-theme="dark"] .task-flow-node {
  --wf-bg: #203247;
  --wf-head: #2a3e55;
  --wf-ink: #ecf3fc;
  --wf-muted: #bdcde0;
  --wf-border: #526b86;
  background: var(--wf-bg);
  border-color: var(--wf-border);
  color: var(--wf-ink);
  box-shadow: 0 8px 20px #050b1680;
}
html[data-app-theme="dark"] .task-flow-node:is(.waiting,.template-node) { --wf-bg: #203247; --wf-head: #2a3e55; }
html[data-app-theme="dark"] .task-flow-node.done { --wf-bg: #193a31; --wf-head: #235344; --wf-ink: #d6f5e1; --wf-muted: #addac0; --wf-border: #438a67; }
html[data-app-theme="dark"] .task-flow-node.running { --wf-bg: #41351f; --wf-head: #594824; --wf-ink: #fff0c9; --wf-muted: #efd69d; --wf-border: #aa8540; }
html[data-app-theme="dark"] .task-flow-node:is(.awaiting-input,.awaiting-action,.review) { --wf-bg: #41351f; --wf-head: #584524; --wf-ink: #fff0c9; --wf-muted: #efd69d; --wf-border: #aa8540; }
html[data-app-theme="dark"] .task-flow-node:is(.failed,.aborted) { --wf-bg: #452a35; --wf-head: #603642; --wf-ink: #ffe5e8; --wf-muted: #f1bfc6; --wf-border: #b46a79; }
html[data-app-theme="dark"] .task-flow-node.skipped { --wf-bg: #283340; --wf-head: #354354; --wf-ink: #dce6f3; --wf-muted: #b3c1d1; --wf-border: #63788e; }
html[data-app-theme="dark"] .task-flow-node.email-notification { --wf-bg: #30283f; --wf-head: #403353; --wf-ink: #f1e7ff; --wf-muted: #d8c2f0; --wf-border: #8166a7; }
html[data-app-theme="dark"] .task-flow-node.task-flow-view-node { background-color: var(--wf-bg); }
html[data-app-theme="dark"] .task-flow-node .task-flow-node-head,
html[data-app-theme="dark"] .task-flow-node .task-flow-email-template { background: var(--wf-head); border-color: var(--wf-border); color: var(--wf-ink); }
html[data-app-theme="dark"] .task-flow-node :is(.task-flow-node-head strong,.task-flow-step-top strong,.task-flow-view-port strong,.task-flow-view-port span,.task-flow-view-state-label,.task-flow-port label) { color: var(--wf-ink); }
html[data-app-theme="dark"] .task-flow-node :is(.task-flow-node-head small,.task-flow-token-label,.task-flow-view-state,.task-flow-notification-controls) { color: var(--wf-muted); }
html[data-app-theme="dark"] .task-flow-node :is(.task-flow-view-port,.task-flow-view-state) { border-color: var(--wf-border); }
html[data-app-theme="dark"] .task-flow-node :is(.task-flow-view-open,.task-flow-engine-preview,.task-flow-engine-button,.small-btn,.task-flow-notify,.task-flow-email-icon) { background: var(--wf-head); border-color: var(--wf-border); color: var(--wf-ink); }
html[data-app-theme="dark"] .task-flow-node :is(input:not([type="checkbox"]),select,textarea) { background: #142235; border-color: var(--wf-border); color: var(--wf-ink); }
html[data-app-theme="dark"] .task-flow-node .task-flow-number { background: #526f98; color: #fff; }
html[data-app-theme="dark"] .task-flow-node.done .task-flow-number { background: #33885b; }
html[data-app-theme="dark"] .task-flow-node.running .task-flow-number { background: #ab7925; }
html[data-app-theme="dark"] .task-flow-node:is(.awaiting-input,.awaiting-action,.review) .task-flow-number { background: #ab7925; }
html[data-app-theme="dark"] .task-flow-node:is(.failed,.aborted) .task-flow-number { background: #b75166; }
html[data-app-theme="dark"] .task-flow-node.email-notification .task-flow-number { background: #7650a6; }
html[data-app-theme="dark"] .task-flow-node .task-flow-token-tooltip { background: #203247; border-color: #6a82a0; color: var(--app-text); }
html[data-app-theme="dark"] .task-flow-node .task-flow-token-tooltip :is(span,b) { color: var(--app-text); }
html[data-app-theme="dark"] .task-flow-node.is-disconnected { border-color: #c99b4d; box-shadow: 0 0 0 2px #c99b4d66,0 8px 20px #050b1680; }
html[data-app-theme="dark"] .workflow-template-diagram .template-node.waiting:not(.email-notification) { background: var(--wf-bg); border-color: var(--wf-border); }
html[data-app-theme="dark"] .task-flow-wire-outline { stroke: #7da9ee; }
html[data-app-theme="dark"] .task-flow-wire-outline.error { stroke: #ec8d93; }
html[data-app-theme="dark"] .task-flow-wire-label { fill: #c4d9ff; }
html[data-app-theme="dark"] .task-flow-wire-label.error { fill: #ffc3c9; }
html[data-app-theme="dark"] .task-flow-wire-core { stroke: var(--app-workflow-canvas); }
html[data-app-theme="light"] .first-project-heading h2 { color: #17253b; }
html[data-app-theme="light"] .first-project-heading p { color: #718098; }
html[data-app-theme="light"] .first-project-step { background: #fff; border-color: #e3e9f2; color: #26374f; box-shadow: 0 4px 16px #2b3b5410; }
html[data-app-theme="light"] .first-project-number { background: #e8efff; color: #315fcb; }
html[data-app-theme="light"] .first-project-step h3 { color: #26374f; }
html[data-app-theme="light"] .first-project-step p { color: #65758e; }
html[data-app-theme="light"] .first-project-step small { color: #8493a7; }
html[data-app-theme="light"] .first-project-agent-status { border-color: #d6e0ec; background: #f6f8fc; color: #52627a !important; }
html[data-app-theme="light"] .first-project-agent-status.is-connected { border-color: #a8dfbb; background: #eaf8ef; color: #207647 !important; }
html[data-app-theme="light"] .first-project-agent-status.is-error { border-color: #e8be67; background: #fff5df; color: #805009 !important; }
@media (max-width: 800px) {
  .app-theme-toggle { padding: 8px 10px; white-space: nowrap; }
  .sidebar-footer { margin-top: 8px; }
  .first-project-steps { grid-template-columns: 1fr; }
  .first-project-guide { margin-top: 14px; }
}

html[data-app-theme="dark"] .task-flow-node .task-flow-notify.success.is-enabled { background: #24543e; color: #c8f1d8; border-color: #4d9c6d; }
html[data-app-theme="dark"] .task-flow-node .task-flow-notify.error.is-enabled { background: #61323e; color: #ffe0e4; border-color: #b46a79; }

/* Shared controls and content. Only paint is changed; component geometry stays in its base stylesheet. */
html[data-app-theme="dark"] .app-theme-toggle,
html[data-app-theme="dark"] :is(.email-rich-toolbar,.email-rich-toolbar button,.email-variable-buttons button,.task-flow-engine-panel,.task-flow-engine-tooltip,.task-flow-connection-head,.task-flow-connection-body,.task-flow-connection-actions,.chat-history-toolbar,.chat-panel .chat-model-settings,.history-date-bar,.task-board>.panel-head,.task-board>.task-board-tabs) {
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}
html[data-app-theme="dark"] .app-theme-toggle:hover,
html[data-app-theme="dark"] :is(.email-rich-toolbar button:hover,.tools-sections button:hover,.task-flow-engine-button:hover,.task-flow-engine-preview:hover) { background-color: var(--app-surface-raised); color: var(--app-accent); }
html[data-app-theme="dark"] :where(.panel,.card,.metric,.task-board,.task-flow-step,.task-flow-chooser,.workflow-template-stage,.tabular-data,.chat-message,.chat-file,.chat-calendar,.history-entry,.history-entry details,.repository-file,.repository-group,.databricks-guide,.graph-modal-panel,.documents-location,.documents-item,.accounts-editor) {
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}
html[data-app-theme="dark"] :where(.panel-head,.panel-body,.modal-head,.modal-actions,.task-flow-step,.task-flow-connection-head,.task-flow-connection-actions,.new-task-details,.new-task-schedule,.task-run-artifacts,.chat-model-settings,.chat-history-toolbar,.tabular-scroll th,.tabular-scroll td) { border-color: var(--app-border); }
html[data-app-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),textarea,select,[contenteditable="true"],.email-rich-editor) { background-color: #142235; color: var(--app-text); border-color: var(--app-border); }
html[data-app-theme="dark"] :where(input,textarea,select,[contenteditable="true"]):focus-visible { outline-color: var(--app-accent); }
html[data-app-theme="dark"] :is(input,textarea)::placeholder { color: #a6b8ce; }
html[data-app-theme="dark"] :is(.hint,.muted,.task-timing,.chat-panel form small,.chat-compose-actions small,.chat-model-settings small,.repository-count,.history-count,.task-board-summary,.task-subtask-filter-count,.overview-intro p,.overview-current-empty,.workflow-gallery-card p,.workflow-import-card p,.workflow-gallery-copy p,.workflow-import-copy p,.task-flow-heading p,.task-flow-condition,.task-flow-first,.databricks-guide p,.graph-modal-intro,.accounts-head p,.accounts-empty) { color: var(--app-muted); }
html[data-app-theme="dark"] :is(.metric strong,.overview-metrics .metric strong,.overview-current-titles strong,.overview-next h3,.git-overview-grid strong,.workflow-gallery-card h3,.workflow-import-card h3,.workflow-template-stage-name,.task-board-consumption strong,.task-board-main strong,.task-flow-step-top strong,.task-flow-chooser strong,.databricks-guide strong,.accounts-editor-empty strong,.account-identity>b) { color: var(--app-text); }
html[data-app-theme="dark"] :is(.agent-panel-compact .agent-toolbar,.agent-card,.agent-meta span,.task-board>.panel-head,.task-board>.task-board-tabs) { background-color: var(--app-surface); border-color: var(--app-border); }
html[data-app-theme="dark"] :is(.agent-card-title strong,.agent-title-link,.agent-card p,.agent-role,.agent-toolbar span,.agent-meta) { color: var(--app-text); }
html[data-app-theme="dark"] .agent-meta span { background-color: transparent; }
html[data-app-theme="dark"] :is(.agent-card-actions .agent-action,.agent-library-category,.agent-category-tabs button,.tools-sections button,.repository-tabs button,.task-board-tab,.task-subtask-tab) { color: var(--app-muted); border-color: var(--app-border); }
html[data-app-theme="dark"] :is(.task-board-tab:not(.active),.task-subtask-tab:not(.active)) { border-color: transparent; }
html[data-app-theme="dark"] :is(.agent-category-tabs button[aria-selected="true"],.agent-library-category.active,.tools-sections button.active,.repository-tabs button.active,.task-board-tab.active,.task-subtask-tab.active) { background-color: #253d61; color: #d4e3ff; border-color: #7297d8; }
html[data-app-theme="dark"] :is(.agent-category-tabs button[aria-selected="true"] span,.agent-library-category.active span,.task-board-tab.active span,.task-subtask-tab.active span) { background-color: #355482; color: #eaf2ff; }
html[data-app-theme="dark"] :is(.task-board-tab:hover,.task-subtask-tab:hover,.agent-library-category:hover,.tools-sections button:hover) { background-color: var(--app-surface-raised); color: var(--app-text); }

/* Overview, tasks, history, repository and chat. */
html[data-app-theme="dark"] :is(.codex-consumption,.overview #project-usage-slot .codex-consumption,.task-board-consumption,.task-run-artifact,.repository-thumbnail,.repository-event pre,.history-entry details pre,.tabular-scroll tbody tr:nth-child(even)) { background-color: #152235; color: var(--app-text); border-color: var(--app-border); }
html[data-app-theme="dark"] :is(.codex-consumption-head span,.codex-consumption small,.overview-current-titles span,.overview-next-item span,.task-board-main p,.task-board-main small,.task-board-main em,.task-group-heading p,.task-flow-row label small,.history-meta time,.repository-file-head small,.repository-group h3 small,.chat-top p,.chat-git small,.chat-message-head,.chat-response-usage) { color: var(--app-muted); }
html[data-app-theme="dark"] :is(.codex-consumption-head strong,.codex-consumption-grid b,.task-board-summary strong,.chat-message-head strong,.chat-response-usage strong,.history-entry summary,.repository-file summary,.repository-group h3,.git-overview-grid .git-publication) { color: var(--app-text); }
html[data-app-theme="dark"] :is(.repository-task-link,.overview-next-item button,.chat-text-open,.chat-publish-state strong) { color: var(--app-accent); }
html[data-app-theme="dark"] :is(.chat-message.user,.task-flow-row.selected,.git-file-diff.is-selected) { background-color: #263d61; color: #e8f0ff; border-color: #7093c5; }
html[data-app-theme="dark"] :is(.chat-calendar-nav,.chat-message-head span,.repository-tabs button.active,.overview-current-status) { color: var(--app-accent); }
html[data-app-theme="dark"] :is(.chat-calendar-weekdays,.chat-calendar p,.history-pages,.chat-history-toolbar>span,.chat-history-count,.chat-capabilities) { color: var(--app-muted); }
html[data-app-theme="dark"] :is(.chat-calendar-day,.history-calendar-day) { color: var(--app-muted); background-color: transparent; }
html[data-app-theme="dark"] :is(.chat-calendar-day.has-history,.history-calendar-day.has-history) { color: #d5e4ff; background-color: #29446d; }
html[data-app-theme="dark"] :is(.chat-calendar-day.selected,.history-calendar-day.selected) { color: #fff; background-color: #416ec2; }
html[data-app-theme="dark"] :is(.chat-file,.chat-history-toolbar,.chat-panel .chat-model-settings,.history-date-bar) { background-color: var(--app-surface-raised); border-color: var(--app-border); }
html[data-app-theme="dark"] :is(.chat-file button,.chat-image-preview-head button,.text-preview-head button) { color: var(--app-accent); }
html[data-app-theme="dark"] :is(.tabular-scroll thead,.task-run-artifacts,.task-run-datasets>summary) { background-color: var(--app-surface-raised); color: var(--app-text); }
html[data-app-theme="dark"] :is(.tabular-scroll th,.tabular-scroll td,.tabular-footer,.tabular-toolbar) { border-color: var(--app-border); color: var(--app-text); }
html[data-app-theme="dark"] :is(.task-flow-row label strong,.task-flow-step-top strong,.task-flow-chooser strong,.new-task-details h3,.workflow-preview-dialog-head h2) { color: var(--app-text); }
html[data-app-theme="dark"] :is(.task-flow-step-top small,.task-flow-condition,.task-flow-first,.task-flow-empty,.task-flow-notification-controls,.workflow-preview-dialog-head p) { color: var(--app-muted); }
html[data-app-theme="dark"] :is(.workflow-gallery-step,.workflow-template-stage,.task-flow-chooser,.task-flow-engine-panel,.task-flow-engine-tooltip,.task-flow-token-tooltip) { background-color: var(--app-surface-raised); border-color: var(--app-border); color: var(--app-text); }
html[data-app-theme="dark"] :is(.workflow-gallery-step-number,.task-flow-number,.stage-number) { background-color: #365482; color: #e8f0ff; }
html[data-app-theme="dark"] .workflow-template-branch { background-color: #204b38; color: #c8f1d8; border-color: #4d9c6d; }
html[data-app-theme="dark"] .workflow-template-branch.error { background-color: #593440; color: #ffe0e4; border-color: #b46a79; }
html[data-app-theme="dark"] .workflow-gallery-arrow { color: var(--app-muted); }

/* Informational, success and error states keep their meaning and contrast. */
html[data-app-theme="dark"] :is(.workflow-support,.task-optimizer,.preset-invite,.email-template-variables,.task-flow-engine-preview.is-custom,.task-flow-engine-button.is-custom) { background-color: #253d61; color: #d4e3ff; border-color: #587bb5; }
html[data-app-theme="dark"] :is(.workflow-support strong,.task-optimizer strong,.email-template-variables strong,.email-template-variables code) { color: #e2ecff; }
html[data-app-theme="dark"] :is(.task-status.done,.task-stage.done,.agent-state.is-active,.account-chip.is-active,.overview-current-stages li.done) { background-color: #193d30; color: #c8f1d8; border-color: #3f8960; }
html[data-app-theme="dark"] :is(.task-status.done strong,.task-stage.done .stage-state,.overview-current-stages li.done .overview-stage-mark) { color: #d6f5e1; }
html[data-app-theme="dark"] :is(.task-status.running,.task-stage.running,.overview-current-stages li.current) { background-color: #213d5e; color: #d7e9ff; border-color: #527daf; }
html[data-app-theme="dark"] :is(.task-status.review,.task-stage.review,.task-review,.task-attention,.chat-activity,.overview-consumption-activity,.overview-chat-active,.task-flow-disconnected-warning,.task-flow-restart-warning,.qa-review-answer,.qa-review .qa-review-next-step,.task-board-tab.has-pending-user,.task-subtask-tab.has-pending-user) { background-color: #43371f; color: #ffe9b8; border-color: #a17f3c; }
html[data-app-theme="dark"] :is(.task-status.review strong,.task-stage.review .stage-state,.task-review strong,.task-attention strong,.qa-review-answer label,.chat-activity small) { color: #fff0c9; }
html[data-app-theme="dark"] :is(.task-status.failed,.task-stage.failed,.notice-alert.notice-error,.accounts-message.is-error,.account-danger) { background-color: #4d2b36; color: #ffe0e4; border-color: #a66573; }
html[data-app-theme="dark"] :is(.task-stage.failed .stage-state,.notice-alert.notice-error strong,.accounts-message.is-error strong) { color: #ffe0e4; }
html[data-app-theme="dark"] :is(.task-flow-view-node.awaiting-input,.task-flow-view-node.awaiting-action) { background-color: #41351f; border-color: #aa8540; color: #fff0c9; }
html[data-app-theme="dark"] :is(.task-flow-view-node.awaiting-input .task-flow-node-head,.task-flow-view-node.awaiting-action .task-flow-node-head) { background-color: #584524; border-color: #aa8540; }
html[data-app-theme="dark"] :is(.task-flow-view-node.awaiting-input .task-flow-view-state,.task-flow-view-node.awaiting-action .task-flow-view-state) { color: #efd69d; }

/* Integrations, documents and account management. */
html[data-app-theme="dark"] :is(.databricks-connections h3,.graph-connection-head,.graph-site-results,.graph-area-results,.graph-capabilities,.graph-areas,.graph-modal-panel .graph-capability-list li,.graph-modal-panel .graph-site,.graph-modal-panel .graph-site-list,.accounts-toolbar,.accounts-table-head,.account-row,.accounts-editor,.documents-location,.documents-item) { background-color: var(--app-surface); color: var(--app-text); border-color: var(--app-border); }
html[data-app-theme="dark"] :is(.graph-site a,.graph-guide a,.databricks-guide a,.account-manage) { color: var(--app-accent); }
html[data-app-theme="dark"] :is(.graph-connection-head small,.graph-capability-list small,.graph-capability-note,.graph-modal-panel .graph-site span,.accounts-toolbar [data-count],.account-identity small,.account-license,.accounts-editor form>small,.documents-location small,.documents-item small) { color: var(--app-muted); }
html[data-app-theme="dark"] :is(.graph-capability-state.available,.graph-modal-panel .graph-capability-state.available,.account-chip.is-active,.account-invitation) { background-color: #193d30; color: #c8f1d8; border-color: #3f8960; }
html[data-app-theme="dark"] :is(.graph-capability-alert,.accounts-message,.task-flow-orphan-picker) { background-color: #43371f; color: #ffe9b8; border-color: #a17f3c; }
html[data-app-theme="dark"] :is(.graph-capability,.graph-capability-list li,.graph-site,.graph-sharepoint-connection,.graph-capability-footer,.graph-connection-detail,.accounts-head,.accounts-list,.accounts-editor hr) { border-color: var(--app-border); }
html[data-app-theme="dark"] :is(.graph-capability span,.graph-area-results,.graph-sharepoint-actions label,.graph-site-results>p) { color: var(--app-muted); }
html[data-app-theme="dark"] :is(.graph-modal-panel .graph-capability-copy strong,.graph-modal-panel .graph-site span,.account-identity strong) { color: var(--app-text); }
html[data-app-theme="dark"] .account-identity>b { background-color: #29446d; color: #e8f0ff; }
html[data-app-theme="dark"] :is(.account-row:hover,.graph-modal-panel .graph-site-list .graph-site:hover,.documents-item:hover) { background-color: var(--app-surface-raised); }
html[data-app-theme="dark"] .account-row.is-selected { background-color: #263d61; border-color: #7093c5; }
html[data-app-theme="dark"] .danger-button { background-color: #713a48; color: #fff1f2; border-color: #b46a79; }
html[data-app-theme="dark"] .danger-button:hover { background-color: #8b4455; color: #fff; }

/* Smaller controls that retain light backgrounds in their component stylesheets. */
html[data-app-theme="dark"] :is(.task-attention-close:hover,.task-delete:hover,.git-changes,.preset-agent-icon,.workflow-gallery-search,.preset-category-tabs .tab span,dialog:has(#preset-search) .preset-category-tabs .tab,dialog:has(#preset-search) .preset-category-tabs .tab span) { background-color: var(--app-surface-raised); color: var(--app-text); border-color: var(--app-border); }
html[data-app-theme="dark"] :is(.preset-category-tabs .tab.active span,dialog:has(#preset-search) .preset-category-tabs .tab.active,dialog:has(#preset-search) .preset-category-tabs .tab.active span) { background-color: #253d61; color: #d4e3ff; border-color: #7297d8; }
html[data-app-theme="dark"] :is(.overview-action-pending,.graph-coming-soon) { background-color: #43371f; color: #ffe9b8; border-color: #a17f3c; }
html[data-app-theme="dark"] :is(.workflow-gallery-search,.preset-category-tabs,.overview-next-tree ol) { border-color: var(--app-border); }
html[data-app-theme="dark"] .overview-next-tree li::before { border-color: var(--app-border); }
html[data-app-theme="dark"] .overview-next-tree li:last-child::after { background-color: var(--app-surface); }
html[data-app-theme="dark"] #text-file-preview pre.text-preview-highlighted { background-color: #101a29; color: var(--app-text); }
html[data-app-theme="dark"] #text-file-preview .code-preview-line::before { background-color: #26384e; color: var(--app-muted); border-color: var(--app-border); }
html[data-app-theme="dark"] :is(.git-diff-table th,.git-diff-dialog header,.git-diff-code,.git-diff-note) { border-color: var(--app-border); }

/* Workflow outcomes and mail icons keep their semantic colors on every workflow surface. */
html[data-app-theme="dark"] .task-flow-node .task-flow-port.success label,
html[data-app-theme="dark"] .task-flow-node .task-flow-view-port.success span { color: #72e0a0; }
html[data-app-theme="dark"] .task-flow-node .task-flow-port.error label,
html[data-app-theme="dark"] .task-flow-node .task-flow-view-port.error span { color: #ff8f98; }
html[data-app-theme="dark"] .task-flow-node .task-flow-notify.success { background-color: #193d30; border-color: #458764; color: #72e0a0; }
html[data-app-theme="dark"] .task-flow-node .task-flow-notify.error { background-color: #4d2b36; border-color: #a66573; color: #ff8f98; }
html[data-app-theme="dark"] .task-flow-node .task-flow-email-icon { background-color: #342847; border-color: #75599b; color: #d7baff; }