/*
 * Lidovo monochrome appearance layer.
 * Loaded after page-specific CSS so dark and light themes share one semantic
 * palette instead of accumulating screen-level colour overrides.
 */

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: oklch(0.145 0 0);
  --color-sidebar: oklch(0.105 0 0);
  --color-surface: oklch(0.19 0 0);
  --color-surface-raised: oklch(0.245 0 0);
  --color-surface-soft: oklch(0.17 0 0);
  --color-surface-accent: oklch(0.225 0 0);
  --color-border: oklch(0.39 0 0);
  --color-border-soft: oklch(0.39 0 0 / 0.42);
  --color-text: oklch(0.965 0 0);
  --color-text-muted: oklch(0.78 0 0);
  --color-text-subtle: oklch(0.65 0 0);
  --color-accent: oklch(0.76 0 0);
  --color-accent-strong: oklch(0.94 0 0);
  --color-accent-soft: oklch(0.92 0 0 / 0.09);
  --color-secondary: oklch(0.72 0 0);
  --color-focus: oklch(0.9 0 0);
  --color-primary: oklch(0.94 0 0);
  --color-on-primary: oklch(0.14 0 0);
  --color-channel-telegram: oklch(0.75 0.15 232);
  --color-channel-max: oklch(0.76 0.16 293);
  --shadow-panel: 0 12px 30px rgb(0 0 0 / 0.22);
  --theme-overlay: rgb(255 255 255 / 0.045);
  --theme-overlay-strong: rgb(255 255 255 / 0.085);
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: oklch(0.965 0 0);
  --color-sidebar: oklch(0.99 0 0);
  --color-surface: oklch(1 0 0);
  --color-surface-raised: oklch(0.925 0 0);
  --color-surface-soft: oklch(0.975 0 0);
  --color-surface-accent: oklch(0.94 0 0);
  --color-border: oklch(0.72 0 0);
  --color-border-soft: oklch(0.72 0 0 / 0.42);
  --color-text: oklch(0.18 0 0);
  --color-text-muted: oklch(0.4 0 0);
  --color-text-subtle: oklch(0.45 0 0);
  --color-accent: oklch(0.32 0 0);
  --color-accent-strong: oklch(0.16 0 0);
  --color-accent-soft: oklch(0.12 0 0 / 0.07);
  --color-secondary: oklch(0.42 0 0);
  --color-focus: oklch(0.24 0 0);
  --color-primary: oklch(0.17 0 0);
  --color-on-primary: oklch(0.99 0 0);
  --color-channel-telegram: oklch(0.43 0.14 232);
  --color-channel-max: oklch(0.42 0.15 293);
  --color-success: oklch(0.41 0.11 155);
  --color-success-soft: oklch(0.48 0.12 155 / 0.11);
  --color-warning: oklch(0.4 0.1 75);
  --color-warning-soft: oklch(0.55 0.12 75 / 0.12);
  --color-danger: oklch(0.44 0.16 25);
  --color-danger-soft: oklch(0.55 0.17 25 / 0.1);
  --shadow-panel: 0 10px 28px rgb(0 0 0 / 0.07);
  --theme-overlay: rgb(0 0 0 / 0.035);
  --theme-overlay-strong: rgb(0 0 0 / 0.07);
}

/* Authentication shares the saved appearance and the same semantic controls. */
html[data-theme] .login-page .brand__mark {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
html[data-theme] .login-page :is(.brand__copy strong, .login-card h1, .field label) { color: var(--color-text); }
html[data-theme] .login-page :is(.brand__copy small, .form-intro, .field-hint) { color: var(--color-text-muted); }

html[data-theme] body,
html[data-theme] .app-frame {
  background: var(--color-bg);
  background-image: none;
  color: var(--color-text);
}

html[data-theme] :is(.global-rail, .context-header, .mobile-header) {
  border-color: var(--color-border-soft);
  background: color-mix(in oklch, var(--color-sidebar) 96%, transparent);
  color: var(--color-text);
}

html[data-theme] .mobile-drawer {
  border-color: var(--color-border-soft);
  background: var(--color-sidebar);
  box-shadow: var(--shadow-panel);
  color: var(--color-text);
}

html[data-theme] :is(.rail-brand > span, .mobile-brand > span, .mobile-drawer__brand > span) {
  border-color: var(--color-border-soft);
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: none;
}

html[data-theme] :is(.mobile-brand, .mobile-drawer__brand) {
  color: var(--color-text);
}

html[data-theme] :is(.global-rail__link, .context-identity, .context-nav__link, .context-more summary) {
  color: var(--color-text-muted);
}

html[data-theme] :is(.global-rail__link, .context-nav__link, .context-more summary):hover {
  background: var(--theme-overlay);
  color: var(--color-text);
}

html[data-theme] .global-rail__link.is-active,
html[data-theme] .context-nav__link.is-active,
html[data-theme] .context-more.is-active summary {
  border-color: transparent;
  background: var(--theme-overlay-strong);
  color: var(--color-text);
}

html[data-theme] .context-nav__link.is-active::after {
  display: none;
}

html[data-theme] :is(.workspace-body, .mobile-drawer) .module-nav__link.is-active {
  background: var(--theme-overlay-strong);
  color: var(--color-text);
}

html[data-theme] :is(.context-more nav, .page-actions-menu > nav) {
  border-color: var(--color-border-soft);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

html[data-theme] :is(.context-more nav a, .page-actions-menu > nav a) {
  color: var(--color-text-muted);
}

html[data-theme] :is(.context-more nav a, .page-actions-menu > nav a):hover {
  background: var(--theme-overlay);
  color: var(--color-text);
}

html[data-theme] .context-identity > :is(span, .icon) {
  display: none;
}

html[data-theme] .context-nav {
  margin-inline-start: 12px;
}

.theme-toggle {
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.theme-toggle .icon {
  width: 19px;
  height: 19px;
}

:root[data-theme="dark"] .theme-icon__moon,
:root[data-theme="light"] .theme-icon__sun {
  display: none;
}

.drawer-theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding-inline: 10px;
  border-radius: 9px;
  background: transparent;
  color: var(--color-text-muted);
  text-align: start;
}

.drawer-theme-toggle:hover {
  background: var(--theme-overlay);
  color: var(--color-text);
}

.mobile-theme-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border-soft);
  border-radius: 11px;
  background: var(--color-surface);
  color: var(--color-text);
}

html[data-theme] :is(
  .panel,
  .resource-panel,
  .tracker-task-card,
  .integration-card,
  .metric-card,
  .report-definition-card,
  .policy-card,
  .settings-create-disclosure
) {
  border-color: var(--color-border-soft);
  background: var(--color-surface);
  background-image: none;
  box-shadow: none;
}

html[data-theme] :is(.button--primary, .composer-send-button, #publish-button) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: none;
}

html[data-theme] :is(.button--primary, .composer-send-button, #publish-button):hover {
  border-color: var(--color-text-muted);
  background: color-mix(in oklch, var(--color-primary) 88%, var(--color-bg));
  color: var(--color-on-primary);
}

html[data-theme] .button--secondary {
  border-color: var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: none;
}

html[data-theme] .button--quiet {
  border-color: var(--color-border-soft);
  background: var(--color-surface);
  color: var(--color-text-muted);
  box-shadow: none;
}

html[data-theme] :is(.button--secondary, .button--quiet):hover {
  border-color: var(--color-border);
  background: var(--theme-overlay-strong);
  color: var(--color-text);
}

html[data-theme] :is(
  .field label,
  .inbox-composer > label,
  .inbox-status-form > label,
  .personal-auth-form label
) {
  color: var(--color-text-muted);
}

html[data-theme="light"] .inbox-avatar {
  color: var(--color-text);
}

html[data-theme="light"] :is(code, .code-value) {
  color: var(--color-text-muted);
}

html[data-theme="light"] .code-link {
  color: var(--color-accent);
}

html[data-theme] :is(
  .compact-page-header h1,
  .page-header h1,
  .tracker-masthead h1,
  .resource-panel__toolbar h2,
  .resource-identity strong,
  .cell-stack strong,
  .tracker-funnel__label > span,
  .tracker-performance-panel__footer strong,
  .inspector-list dd,
  .messenger-conversation__preview b
) {
  color: var(--color-text);
}

html[data-theme] .compact-page-header__context {
  color: var(--color-text-muted);
}

html[data-theme] .inspector-status-form button {
  border-color: var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

html[data-theme] :is(input, select, textarea) {
  --control-background: var(--color-surface);
  color-scheme: inherit;
  border-color: var(--color-border-soft);
  background: var(--control-background);
  color: var(--color-text);
  caret-color: currentColor;
  -webkit-text-fill-color: currentColor;
}

html[data-theme] :is(input, textarea)::placeholder {
  color: var(--color-text-muted);
  -webkit-text-fill-color: currentColor;
  opacity: 1;
}

html[data-theme] :is(input, select, textarea):hover {
  border-color: var(--color-border);
}

html[data-theme] :is(input, select, textarea):focus {
  border-color: var(--color-focus);
}

html[data-theme] :is(.resource-table, .data-table) tbody tr:nth-child(even) {
  background: var(--theme-overlay);
}

/* Resource lists use the same theme roles as the other tables. */
html[data-theme] .resource-table th {
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
}
html[data-theme] :is(.inline-state, .resource-identity small, .cell-stack small, .muted-value) {
  color: var(--color-text-muted);
}
html[data-theme] .table-link { color: var(--color-accent); }
html[data-theme] .resource-avatar:not(.resource-avatar--telegram):not(.resource-avatar--max):not(.resource-avatar--image) {
  background: var(--color-surface-raised);
  border-color: var(--color-border-soft);
  color: var(--color-text-muted);
}

html[data-theme] :is(.resource-table, .data-table) tbody tr:hover {
  background: var(--theme-overlay-strong);
}

html[data-theme] :is(.workspace-body .module-sidebar, .messenger-filters) {
  border-color: var(--color-border-soft);
  background: var(--color-surface-soft);
  background-image: none;
}

html[data-theme] :is(.messenger-queue, .client-inspector, .messenger-thread-pane, .messenger-selection-empty) {
  border-color: var(--color-border-soft);
  background: var(--color-bg);
}

html[data-theme] :is(.messenger-thread-header, .messenger-composer, .client-inspector__footer, .message-history-nav) {
  border-color: var(--color-border-soft);
  background: var(--color-surface-soft);
  backdrop-filter: none;
}

html[data-theme] .messenger-conversation {
  border-color: var(--color-border-soft);
  background: transparent;
  box-shadow: none;
}

html[data-theme] .messenger-conversation:hover {
  background: var(--theme-overlay);
}

html[data-theme] .messenger-conversation.is-active {
  background: var(--theme-overlay-strong);
  box-shadow: inset 3px 0 var(--color-text);
}

html[data-theme] .messenger-timeline .inbox-message__bubble {
  border-color: var(--color-border-soft);
  background: var(--color-surface);
  box-shadow: none;
}

html[data-theme] .messenger-timeline .inbox-message--out .inbox-message__bubble {
  border-color: var(--color-border);
  background: var(--color-surface-raised);
}

html[data-theme] :is(
  .telegram-editor,
  .telegram-editor__toolbar,
  .composer-options,
  .inbox-advanced-filters,
  .inspector-tabs,
  .inspector-card-title,
  .test-result-json
) {
  border-color: var(--color-border-soft);
  background: var(--color-surface);
  color: var(--color-text);
}

html[data-theme] .status-badge--blue {
  border-color: var(--color-border-soft);
  background: var(--theme-overlay-strong);
  color: var(--color-text-muted);
}

html[data-theme] .messenger-source--telegram {
  --messenger-source-color: var(--color-channel-telegram);
}

html[data-theme] .messenger-source--max {
  --messenger-source-color: var(--color-channel-max);
}

html[data-theme] .messenger-source {
  border-color: color-mix(in oklch, var(--messenger-source-color) 42%, transparent);
  background: color-mix(in oklch, var(--messenger-source-color) 12%, transparent);
  color: var(--messenger-source-color);
}

html[data-theme] .messenger-source-badge--avatar {
  border-color: var(--color-surface-soft);
  background: color-mix(in oklch, var(--messenger-source-color) 16%, var(--color-surface));
  color: var(--messenger-source-color);
}

html[data-theme] :is(
  .inbox-connection-switcher__avatar.messenger-source--telegram,
  .inbox-connection-option__icon.messenger-source--telegram,
  .inbox-connection-switcher__avatar.messenger-source--max,
  .inbox-connection-option__icon.messenger-source--max
) {
  background: color-mix(in oklch, var(--messenger-source-color) 13%, var(--color-surface));
  color: var(--messenger-source-color);
}

html[data-theme] :is(.tag, .read-only-badge, .result-count) {
  border-color: var(--color-border-soft);
  background: var(--theme-overlay);
  color: var(--color-text-muted);
}

html[data-theme] .amo-deal-link {
  border-color: var(--color-border);
  background: var(--theme-overlay);
  color: var(--color-text);
}

html[data-theme] :is(.section-kicker, .eyebrow, .inspector-section h3, .inspector-card-title) {
  color: var(--color-text-muted);
}

html[data-theme] :is(.mobile-menu-button, .mobile-drawer__close, .messenger-inspector-toggle, .icon-button) {
  border-color: var(--color-border-soft);
  background: var(--color-surface);
  color: var(--color-text-muted);
}

html[data-theme] :is(.mobile-menu-button, .mobile-drawer__close, .messenger-inspector-toggle, .icon-button):hover {
  border-color: var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

html[data-theme] .inbox-connection-switcher > summary,
html[data-theme] .inbox-connection-switcher__menu {
  border-color: var(--color-border-soft);
  background: var(--color-surface);
  background-image: none;
  color: var(--color-text);
  box-shadow: var(--shadow-panel);
}

html[data-theme] .messenger-workspace[data-inbox-layout] .messenger-composer {
  border-color: var(--color-border-soft);
  background: var(--color-surface-soft);
}

html[data-theme] .messenger-workspace[data-inbox-layout] .composer-route select,
html[data-theme] .messenger-workspace[data-inbox-layout] .telegram-editor,
html[data-theme] .messenger-workspace[data-inbox-layout] .composer-options > summary,
html[data-theme] .messenger-workspace[data-inbox-layout] .composer-options[open] {
  border-color: var(--color-border-soft);
  background: var(--color-surface);
  color: var(--color-text);
}

html[data-theme] .messenger-workspace[data-inbox-layout] .telegram-editor__toolbar {
  border-block-end-color: var(--color-border-soft);
  background: var(--theme-overlay);
}

html[data-theme] .messenger-workspace[data-inbox-layout] .composer-file-button {
  border-color: var(--color-border-soft);
  background: var(--color-surface);
  color: var(--color-text-muted);
}

html[data-theme] .messenger-workspace[data-inbox-layout] .composer-send-button {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

html[data-theme] :is(.builder-topbar, .builder-palette, .builder-inspector, .builder-toolbar, .builder-mobile-views) {
  border-color: var(--color-border-soft);
  background: var(--color-surface);
  color: var(--color-text);
}

html[data-theme] :is(.flow-node, .builder-node, .builder-section, .builder-inspector-card) {
  border-color: var(--color-border-soft);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: none;
}

html[data-theme] :is(.flow-node.is-selected, .builder-node.is-selected) {
  border-color: var(--color-text);
  box-shadow: 0 0 0 1px var(--color-text);
}

html[data-theme="dark"] body.builder-page {
  color-scheme: dark;
  --color-bg: oklch(0.145 0 0);
  --color-surface: oklch(0.19 0 0);
  --color-surface-raised: oklch(0.245 0 0);
  --color-surface-soft: oklch(0.17 0 0);
  --color-border: oklch(0.39 0 0);
  --color-border-soft: oklch(0.39 0 0 / 0.42);
  --color-text: oklch(0.965 0 0);
  --color-text-muted: oklch(0.78 0 0);
  --color-text-subtle: oklch(0.65 0 0);
  --color-accent: oklch(0.76 0 0);
  --color-accent-strong: oklch(0.94 0 0);
  --color-accent-soft: oklch(0.92 0 0 / 0.09);
}

html[data-theme="light"] body.builder-page {
  color-scheme: light;
  --color-bg: oklch(0.965 0 0);
  --color-surface: oklch(1 0 0);
  --color-surface-raised: oklch(0.925 0 0);
  --color-surface-soft: oklch(0.975 0 0);
  --color-border: oklch(0.72 0 0);
  --color-border-soft: oklch(0.72 0 0 / 0.42);
  --color-text: oklch(0.18 0 0);
  --color-text-muted: oklch(0.4 0 0);
  --color-text-subtle: oklch(0.45 0 0);
  --color-accent: oklch(0.32 0 0);
  --color-accent-strong: oklch(0.16 0 0);
  --color-accent-soft: oklch(0.12 0 0 / 0.07);
}

html[data-theme] body.builder-page,
html[data-theme] body.builder-page :is(
  .builder-topbar,
  .builder-palette,
  .builder-inspector,
  .builder-sheetbar,
  .canvas-toolbar,
  .builder-canvas-panel,
  .simulator-panel,
  .simulator-header,
  .simulator-start,
  .builder-dialog,
  .flow-minimap,
  .flow-minimap__toggle,
  .builder-inspector > .builder-pane-heading,
  .dialog-editor-footer
) {
  border-color: var(--color-border-soft);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: none;
}

html[data-theme] body.builder-page .flow-canvas-viewport {
  background: radial-gradient(var(--color-border) 0.75px, transparent 0.9px) 0 0 / 14px 14px, var(--color-bg);
  scrollbar-color: var(--color-border) transparent;
}

html[data-theme] body.builder-page .flow-minimap__surface {
  background: var(--color-surface-soft);
}

html[data-theme] body.builder-page .flow-node,
html[data-theme] body.builder-page :is(.flow-node--start, .flow-node--start_condition, .flow-node--close_dialog, .flow-node--end, .flow-node--comment) {
  border-color: var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: none;
}

html[data-theme] body.builder-page .flow-node:hover {
  border-color: var(--color-text-muted);
  background: color-mix(in oklch, var(--color-surface-raised) 84%, var(--color-text));
}

html[data-theme] body.builder-page .flow-node.is-selected {
  border-color: var(--color-text);
  background: var(--color-surface-raised);
  box-shadow: 0 0 0 2px var(--color-text);
}

html[data-theme] body.builder-page :is(.flow-node__heading, .flow-node__footer) {
  border-color: var(--color-border-soft);
  background: transparent;
  color: var(--color-text-muted);
}

html[data-theme] body.builder-page :is(.flow-node__preview, .flow-node__title strong, .field > span) {
  color: var(--color-text);
}

html[data-theme] body.builder-page .palette-item__mark {
  color: var(--color-text-muted);
}

html[data-theme] body.builder-page .flow-edge-label {
  stroke: var(--color-bg);
  fill: var(--color-text-muted);
}

html[data-theme] body.builder-page :is(.flow-node__mark, .flow-node--start .flow-node__mark, .flow-node--start_condition .flow-node__mark, .flow-node--close_dialog .flow-node__mark, .flow-node--non_state .flow-node__mark, .flow-node--non_state_condition .flow-node__mark, .flow-node--comment .flow-node__mark) {
  background: var(--theme-overlay-strong);
  color: var(--color-text);
}

html[data-theme] body.builder-page :is(
  .field input,
  .field select,
  .field textarea,
  .simulator-message-row input,
  .dialog-search input,
  .telegram-editor__toolbar button,
  .flow-media-editor__empty,
  .button-editor-row,
  .variable-editor-row,
  .analytics-editor-row,
  .edge-condition-card,
  .edge-advanced-settings
) {
  border-color: var(--color-border-soft);
  background: var(--color-surface);
  color: var(--color-text);
}

html[data-theme] body.builder-page .button-layout-row {
  border-color: var(--color-border-soft);
  background: var(--color-surface-soft);
  color: var(--color-text);
}

html[data-theme] body.builder-page .button-layout-row__heading {
  color: var(--color-text-muted);
}

html[data-theme] body.builder-page .button-layout-row__count {
  color: var(--color-text-subtle);
}

html[data-theme] body.builder-page :is(.telegram-preview, .dialog-section, .dialog-trigger, .dialog-section--actions, .dialog-section--variables, .dialog-section--analytics, .dialog-section--webhook) {
  border-color: var(--color-border-soft);
  background: var(--color-surface-soft);
  color: var(--color-text);
}

html[data-theme] body.builder-page :is(.dialog-section > summary, .dialog-section-toggle, code) {
  color: var(--color-text-muted);
}

html[data-theme] body.builder-page .dialog-section-toggle {
  border-color: var(--color-border-soft);
  background: var(--color-surface);
}

html[data-theme] body.builder-page .dialog-section-toggle.is-active {
  border-color: var(--color-text);
  background: var(--theme-overlay-strong);
  color: var(--color-text);
}

html[data-theme] body.builder-page .dialog-inspector-resizer {
  background: var(--color-surface-soft);
}

html[data-theme] body.builder-page .dialog-inspector-resizer::after {
  background: var(--color-border);
}

html[data-theme] body.builder-page .builder-tools-menu__popover {
  border-color: var(--color-border-soft);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

html[data-theme] body.builder-page .builder-tools-menu__popover button {
  color: var(--color-text-muted);
}

html[data-theme] body.builder-page .builder-tools-menu__popover button:is(:hover, :focus-visible) {
  background: var(--theme-overlay);
  color: var(--color-text);
}

html[data-theme] body.builder-page .button--primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

html[data-theme] body.builder-page :is(.button--secondary, .button--quiet, .icon-button):hover {
  border-color: var(--color-border);
  background: var(--color-surface-raised);
}

html[data-theme] body.builder-page :is(button, input, select, textarea, summary, a):focus-visible {
  outline-color: var(--color-focus);
}

/* The shell stays monochrome; colour inside the canvas identifies block behaviour. */
html[data-theme] body.builder-page .flow-node {
  --builder-node-bg: #65738b;
  --builder-node-bg-hover: #586b87;
  --builder-node-border: #566680;
  --builder-node-text: #fff;
  border-color: var(--builder-node-border);
  background: var(--builder-node-bg);
  color: var(--builder-node-text);
}

html[data-theme] body.builder-page .flow-node:is(:hover, .is-selected) {
  border-color: color-mix(in srgb, var(--builder-node-border) 72%, #fff);
  background: var(--builder-node-bg-hover);
  color: var(--builder-node-text);
}

html[data-theme] body.builder-page .flow-node.is-selected {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--builder-node-bg) 42%, transparent);
}

html[data-theme] body.builder-page .flow-node.is-entry {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 52%, transparent);
}

html[data-theme] body.builder-page .flow-node.is-entry.is-selected {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--builder-node-bg) 42%, transparent),
    0 0 0 6px color-mix(in srgb, var(--color-success) 40%, transparent);
}

html[data-theme] body.builder-page .flow-node__entry {
  color: #155e3d;
}

html[data-theme] body.builder-page :is(.flow-node__compact-title, .flow-node__compact-meta) {
  color: inherit;
}

html[data-theme] body.builder-page :is(.flow-node--start, .flow-node--start_condition) {
  --builder-node-bg: #42755f;
  --builder-node-bg-hover: #386852;
  --builder-node-border: #34624e;
}

html[data-theme] body.builder-page :is(.flow-node--action, .flow-node--split) {
  --builder-node-bg: #675f86;
  --builder-node-bg-hover: #5b527a;
  --builder-node-border: #554d74;
}

html[data-theme] body.builder-page :is(.flow-node--condition, .flow-node--non_state_condition) {
  --builder-node-bg: #7b6c42;
  --builder-node-bg-hover: #6d5f38;
  --builder-node-border: #665832;
}

html[data-theme] body.builder-page :is(.flow-node--non_state, .flow-node--background) {
  --builder-node-bg: #506d78;
  --builder-node-bg-hover: #45616c;
  --builder-node-border: #3e5a65;
}

html[data-theme] body.builder-page :is(.flow-node--close_dialog, .flow-node--end) {
  --builder-node-bg: #856775;
  --builder-node-bg-hover: #785a68;
  --builder-node-border: #715261;
}

html[data-theme] body.builder-page .flow-node--comment {
  --builder-node-bg: #fff6d7;
  --builder-node-bg-hover: #f7ebc5;
  --builder-node-border: #c8b578;
  --builder-node-text: #65542b;
  border-style: dashed;
}

html[data-theme] body.builder-page :is(.palette-item--start, .palette-item--start_condition) .palette-item__mark {
  background: var(--color-success-soft);
  color: var(--color-success);
}

html[data-theme] body.builder-page :is(.palette-item--action, .palette-item--split) .palette-item__mark {
  background: oklch(0.55 0.12 300 / 0.14);
  color: oklch(0.62 0.14 300);
}

html[data-theme] body.builder-page :is(.palette-item--condition, .palette-item--non_state_condition) .palette-item__mark {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

html[data-theme] body.builder-page :is(.palette-item--non_state, .palette-item--background) .palette-item__mark {
  background: oklch(0.62 0.1 220 / 0.14);
  color: oklch(0.63 0.11 220);
}

html[data-theme] body.builder-page :is(.palette-item--close_dialog, .palette-item--end) .palette-item__mark {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

html[data-theme] body.builder-page .palette-item--comment .palette-item__mark {
  background: oklch(0.72 0.11 90 / 0.16);
  color: oklch(0.63 0.11 75);
}

@media (max-width: 960px) {
  html[data-theme] .mobile-header {
    height: 64px;
  }

  html[data-theme] :is(.workspace-body, .workspace-body--with-sidebar) {
    min-height: calc(100vh - 64px);
  }

  html[data-theme] .workspace-body .content {
    min-height: calc(100vh - 64px);
  }
}

@media (prefers-contrast: more) {
  :root[data-theme="dark"] {
    --color-border: oklch(0.58 0 0);
    --color-text-muted: oklch(0.9 0 0);
    --color-text-subtle: oklch(0.82 0 0);
  }

  :root[data-theme="light"] {
    --color-border: oklch(0.48 0 0);
    --color-text-muted: oklch(0.29 0 0);
    --color-text-subtle: oklch(0.38 0 0);
  }
}

/*
 * Interface rhythm contract.
 *
 * The product still contains several generations of page CSS.  Keep their
 * layout-specific rules, but make shared controls, panels and navigation use
 * one density scale after every legacy layer has loaded.
 */
:root[data-theme] {
  --ui-control-height: 40px;
  --ui-control-height-compact: 34px;
  --ui-control-radius: 8px;
  --ui-panel-radius: 10px;
  --ui-panel-padding: 16px;
  --ui-gap-control: 6px;
  --ui-gap-group: 16px;
}

html[data-theme] body:not(.builder-page) .field {
  gap: var(--ui-gap-control);
  min-width: 0;
}

html[data-theme] body:not(.builder-page) .field :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]),
  select:not([multiple])
) {
  height: var(--ui-control-height);
  min-height: var(--ui-control-height);
  padding-block: 8px;
  padding-inline: 12px;
  border-radius: var(--ui-control-radius);
  line-height: 1.2;
}

html[data-theme] body:not(.builder-page) .field select:not([multiple]) {
  appearance: none;
  padding-inline-end: 36px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px;
}

html[data-theme] body:not(.builder-page) .field textarea {
  min-height: 96px;
  padding: 10px 12px;
  border-radius: var(--ui-control-radius);
}

html[data-theme] body:not(.builder-page) .button {
  min-height: var(--ui-control-height);
  padding-block: 8px;
  padding-inline: 12px;
  border-radius: var(--ui-control-radius);
}

html[data-theme] body:not(.builder-page) .button--compact {
  min-height: var(--ui-control-height-compact);
  padding-block: 6px;
  padding-inline: 10px;
}

html[data-theme] body:not(.builder-page) :is(.settings-form, .field-row) {
  gap: var(--ui-gap-group);
}

html[data-theme] body:not(.builder-page) .field-row {
  align-items: start;
}

html[data-theme] body:not(.builder-page) .panel {
  padding: var(--ui-panel-padding);
  border-radius: var(--ui-panel-radius);
}

html[data-theme] body:not(.builder-page) .panel-heading {
  align-items: center;
  gap: 12px;
  margin-block-end: 12px;
}

html[data-theme] body:not(.builder-page) .panel-heading > :first-child {
  min-width: 0;
}

html[data-theme] body:not(.builder-page) .panel-heading h2 {
  margin-block-start: 0;
  line-height: 1.3;
}

html[data-theme] :is(.workspace-body, .mobile-drawer) .module-nav__link {
  min-height: var(--ui-control-height);
  padding: 8px 10px;
  border-radius: var(--ui-control-radius);
  color: var(--color-text-muted);
}

html[data-theme] :is(.workspace-body, .mobile-drawer) .module-nav__link:hover {
  background: var(--theme-overlay);
  color: var(--color-text);
}

html[data-theme] :is(.workspace-body, .mobile-drawer) .module-nav__link.is-active {
  background: var(--theme-overlay-strong);
  color: var(--color-text);
}

html[data-theme] :is(
  .workspace-body .module-identity strong,
  .workspace-body .module-identity span,
  .workspace-body .module-nav__label,
  .workspace-body .module-sidebar__meta
) {
  color: var(--color-text-subtle);
}

html[data-theme] .workspace-body .module-identity strong {
  color: var(--color-text);
}

html[data-theme] :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

html[data-theme] :is(input, select, textarea):focus-visible {
  border-color: var(--color-focus);
  box-shadow: none;
}

html[data-theme] select :is(option, optgroup) {
  background: var(--color-surface);
  color: var(--color-text);
}

html[data-theme] :is(
  .button:disabled,
  .icon-button:disabled,
  input:disabled,
  select:disabled,
  textarea:disabled,
  [aria-disabled="true"]
) {
  --control-background: var(--color-surface-soft);
  border-color: var(--color-border-soft);
  background: var(--color-surface-soft);
  color: var(--color-text-subtle);
  opacity: 1;
  cursor: not-allowed;
}

/* Browser autofill paints above author backgrounds. Keep its text and inset
   surface paired in every form, including focus and a runtime theme switch. */
html[data-theme] :is(input, select, textarea):is(:autofill, :-webkit-autofill) {
  box-shadow: 0 0 0 1000px var(--control-background) inset;
  -webkit-text-fill-color: var(--color-text);
  caret-color: var(--color-text);
}

html[data-theme] :is(input, select, textarea):disabled:is(:autofill, :-webkit-autofill) {
  -webkit-text-fill-color: var(--color-text-subtle);
}

@media (forced-colors: active) {
  html[data-theme] :where(a, button, input, select, textarea, summary):focus-visible {
    outline-color: Highlight;
  }
  html[data-theme] :is(input, select, textarea):is(:autofill, :-webkit-autofill) {
    box-shadow: none;
    -webkit-text-fill-color: FieldText;
    caret-color: FieldText;
  }
  html[data-theme] :is(input, select, textarea):disabled:is(:autofill, :-webkit-autofill) {
    -webkit-text-fill-color: GrayText;
  }
}

@media (max-width: 760px) {
  :root[data-theme] {
    --ui-control-height: 44px;
  }

  html[data-theme] body:not(.builder-page) .panel {
    padding: 14px;
  }
}

/* Compact flow catalogue: content determines height; rows keep a shared rhythm. */
html[data-theme] .flow-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-block-end: 14px;
}

html[data-theme] .flow-section-heading h2,
html[data-theme] .flow-section-heading p {
  margin: 0;
}

html[data-theme] .flow-section-heading p {
  max-width: 68ch;
  margin-block-start: 5px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

html[data-theme] .flow-section-heading__count {
  display: grid;
  place-items: center;
  min-width: 30px;
  min-height: 30px;
  padding-inline: 8px;
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

html[data-theme] .flow-grid {
  align-items: stretch;
  gap: 12px;
}

html[data-theme] .flow-grid--drafts {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

html[data-theme] .flow-grid--published {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

html[data-theme] .flow-card {
  min-height: 0;
  padding: 16px;
  border-radius: var(--ui-panel-radius);
}

html[data-theme] .flow-card__body {
  padding-block: 10px 12px;
}

html[data-theme] .flow-card__body h2,
html[data-theme] .flow-card__body h3 {
  margin: 5px 0 7px;
  color: var(--color-text);
  font-size: 18px;
  letter-spacing: -0.025em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

html[data-theme] .flow-card--draft .flow-card__body {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}

html[data-theme] .flow-card--draft .flow-card__body :is(h3, p) {
  margin: 0;
}

html[data-theme] .flow-card--draft .flow-card__body > p {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

html[data-theme] .flow-card--draft .button {
  margin-block-start: 2px;
}

html[data-theme] .flow-card__footer {
  min-height: 46px;
  padding-block-start: 12px;
}

html[data-theme] .flow-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 10px;
}

html[data-theme] .flow-stats div {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
}

html[data-theme] .flow-stats div + div::before {
  content: "·";
  margin-inline-end: 3px;
  color: var(--color-text-subtle);
}

html[data-theme] .flow-stats dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
}

html[data-theme] .metrics .metric-card {
  min-height: 82px;
  padding: 14px 16px;
}

html[data-theme] .metrics .metric-card:first-child {
  padding-inline-start: 16px;
}

html[data-theme] .metrics .metric-card p {
  margin-block-end: 5px;
}

html[data-theme] .metrics .metric-card strong {
  font-size: 26px;
}

/* Messenger identity keeps its native channel colour in both appearances. */
html[data-theme] :is(.resource-avatar--telegram, .flow-card__icon--telegram) {
  border-color: color-mix(in oklch, var(--color-channel-telegram) 35%, transparent);
  background: color-mix(in oklch, var(--color-channel-telegram) 13%, var(--color-surface));
  color: var(--color-channel-telegram);
}

html[data-theme] :is(.resource-avatar--max, .flow-card__icon--max) {
  border-color: color-mix(in oklch, var(--color-channel-max) 35%, transparent);
  background: color-mix(in oklch, var(--color-channel-max) 13%, var(--color-surface));
  color: var(--color-channel-max);
}

/* The connection drawer follows the active appearance instead of staying dark. */
html[data-theme] .entity-drawer {
  border-color: var(--color-border-soft);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-panel);
}

html[data-theme="light"] .entity-drawer {
  color-scheme: light;
}

html[data-theme="dark"] .entity-drawer {
  color-scheme: dark;
}

html[data-theme] .entity-drawer__header {
  border-color: var(--color-border-soft);
  background: var(--color-surface);
}

html[data-theme] .entity-drawer__header p {
  color: var(--color-text-muted);
}

html[data-theme] .entity-drawer__header h2,
html[data-theme] .entity-drawer .field label,
html[data-theme] .entity-drawer .segmented-field legend {
  color: var(--color-text);
}

html[data-theme] .entity-drawer .field-hint {
  color: var(--color-text-muted);
}

html[data-theme] .entity-drawer__footer {
  border-color: var(--color-border-soft);
  background: color-mix(in oklch, var(--color-surface) 94%, transparent);
}

html[data-theme] .segmented-field label {
  border-color: var(--color-border-soft);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
}

html[data-theme] .segmented-field label:has(input:checked) {
  border-color: var(--color-text);
  background: var(--theme-overlay-strong);
  color: var(--color-text);
}

html[data-theme] .drawer-info,
html[data-theme] .personal-unavailable__detail {
  border-color: var(--color-border-soft);
  background: var(--color-surface-soft);
}

html[data-theme] .drawer-info strong {
  color: var(--color-text);
}

html[data-theme] .drawer-info p,
html[data-theme] .personal-unavailable__detail {
  color: var(--color-text-muted);
}

html[data-theme] .personal-unavailable__detail {
  padding: 10px 12px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--ui-control-radius);
  line-height: 1.5;
}

@media (max-width: 760px) {
  html[data-theme] .flow-grid--drafts,
  html[data-theme] .flow-grid--published {
    grid-template-columns: 1fr;
  }

  html[data-theme] .flow-card {
    padding: 14px;
  }
}