:root {
  --accent-soft: color-mix(in srgb, var(--accent) 8%, white);
  --accent-soft-strong: color-mix(in srgb, var(--accent) 14%, white);
  --accent-border: color-mix(in srgb, var(--accent) 48%, var(--border));
  --accent-card: color-mix(in srgb, var(--accent) 4%, white);
  --accent-card-hover: color-mix(in srgb, var(--accent) 6%, white);
  --accent-card-selected: color-mix(in srgb, var(--accent) 8%, white);
  --accent-card-border: color-mix(in srgb, var(--accent) 14%, var(--border));
  --accent-card-border-hover: color-mix(in srgb, var(--accent) 20%, var(--border));
  --accent-card-border-selected: color-mix(in srgb, var(--accent) 28%, var(--border));
  --accent-card-selected-ring: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Shared selected and focused controls use the account theme on every module. */
.resource-entry-card:focus-visible,
.choice-button:focus-visible,
.device-class-choice:focus-visible,
.compact-choice:focus-visible,
.model-choice:focus-visible,
.product-choice:focus-visible,
.editor-icon-button:focus-visible,
.graph-toolbar button:focus-visible,
.node-group-toggle:focus-visible,
.node-choice:focus-visible,
.library-route-switch button:focus-visible {
  outline-color: var(--accent);
}

.choice-button.active,
.device-class-choice.active,
.compact-choice.active,
.model-choice.active,
.product-choice.active,
.verification-zone-options .device-class-choice.active,
.verification-line-summary,
.flow-step.selected {
  border-color: var(--accent);
  border-width: 1px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  box-shadow: none;
}

.resource-segmented button.active,
.verification-channel-tabs button.active,
.segmented button.active,
.mode-switch button.active,
.library-route-switch button.active[data-library-route],
.route-badge.edge,
.template-route.edge {
  color: var(--accent-dark);
}

.segmented button.active {
  background: var(--accent);
  color: white;
}

.library-route-switch button.active[data-library-route="vmos-edge"],
.route-badge.edge,
.editor-mark,
.inspector-node-icon {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.publishing-summary svg,
.summary-card-icon,
.product-choice .choice-check,
.verification-admin-route > i,
.receipt-link,
.text-action,
.editor-icon-button:hover,
.graph-toolbar button:hover,
.graph-toolbar button.active,
.graph-status.success,
.run-step-evidence,
.automation-run-notice {
  color: var(--accent-dark);
}

.proxy-device-option input,
.automation-start-dialog .toggle-field input {
  accent-color: var(--accent);
}

.automation-run-notice {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

.template-card.selected,
.combo-number,
.task-action:hover {
  background: var(--accent-soft);
}

.device-pointer-feedback {
  background: color-mix(in srgb, var(--accent) 42%, transparent);
}

/* Legacy Publishing and Automation Studio surfaces share the global theme. */
:root {
  --ink: var(--text);
  --muted: var(--text-muted);
  --line: var(--border);
  --soft: var(--surface-subtle);
}

.publishing-mode {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.publishing-summary svg,
.resource-icon,
.resource-entry-icon,
.empty-state svg,
.device-class-choice > svg {
  color: var(--accent-dark);
}

.resource-icon,
.resource-entry-icon {
  background: var(--accent-soft);
}

.flow-source-band {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

.proxy-device-option:hover,
.resource-entry-card:hover,
.choice-button:hover,
.device-class-choice:hover,
.compact-choice:hover,
.model-choice:hover,
.product-choice:hover,
.app-inventory-item:hover,
.template-card:hover,
.node-choice:hover,
.task-stat:hover {
  border-color: var(--accent-border);
  background: var(--surface-subtle);
}

.proxy-device-option:has(input:checked),
.designer-session-item.active,
.task-stat.active {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.resource-segmented,
.mode-switch {
  border-color: var(--border);
  background: var(--surface-subtle);
}

.library-route-switch {
  border-color: var(--border);
  background: var(--surface);
}

.resource-segmented button.active,
.verification-channel-tabs button.active,
.mode-switch button.active,
.task-mode-switch button.active {
  background: var(--surface);
  color: var(--accent-dark);
  box-shadow: 0 1px 3px rgba(20, 31, 38, .08);
}

.verification-admin-route {
  background: var(--surface-subtle);
}

.verification-admin-route > i,
.product-choice .choice-check,
.provider-managed-param .template-param-label strong {
  color: var(--accent-dark);
}

.flow-palette button:hover,
.table-wrap tbody tr[data-job-id]:hover,
#automation-runs tr:hover,
.designer-session-item:hover,
.node-group-toggle:hover,
.template-menu > div button:hover,
.template-menu > div button:focus-visible,
.graph-help > button:hover,
.inspector-close:hover {
  background: var(--surface-selected);
  color: var(--accent-dark);
}

.flow-step.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.studio-tabs button,
.ui-button,
.icon-text,
.node-choice,
.template-menu > div button,
.graph-toolbar button,
.editor-icon-button,
.library-route-switch button {
  color: var(--text-secondary);
}

.ui-button:hover,
.icon-text:hover,
.editor-icon-button:hover {
  border-color: var(--accent-border);
  background: var(--surface-subtle);
  color: var(--accent-dark);
}

.ui-button.primary,
.ui-button.primary:hover,
.ui-button.primary:active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.ui-button.primary:hover {
  border-color: var(--accent-dark);
  background: var(--accent-dark);
}

.ui-button.primary:active {
  filter: brightness(.92);
}

.ui-button.primary:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
  color: #fff;
}

.ui-button.primary:disabled {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  opacity: .42;
}

.ui-button.primary :is(span, svg) {
  color: inherit;
}

.template-card:hover,
.task-stat.active {
  border-color: var(--accent-border);
}

.template-card.selected,
.task-action:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.template-badge:not(.ai):not(.custom) {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.toast:not(.error) {
  background: var(--accent-dark);
}

.editor-mark:not(.pro),
.route-badge.edge,
.inspector-node-icon {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.palette-search input {
  border-color: var(--border) !important;
  background: var(--surface-subtle) !important;
}

.palette-search input:focus {
  border-color: var(--accent) !important;
  background: var(--surface) !important;
  outline-color: var(--accent-ring);
}

.node-choice-icon {
  background: var(--node-soft, var(--accent-soft));
  color: var(--node-accent, var(--accent-dark));
}

.graph-toolbar button:hover,
.graph-toolbar button.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.graph-status.success,
.task-detail-heading > div > span {
  color: var(--accent-dark);
}

.library-route-switch button.active[data-library-route="vmos-edge"],
.template-route.edge {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.template-route.edge {
  background: transparent;
}

.editor-icon-button:focus-visible,
.graph-toolbar button:focus-visible,
.node-group-toggle:focus-visible,
.node-choice:focus-visible,
.library-route-switch button:focus-visible {
  outline-color: var(--accent-ring);
}

.graph-surface {
  background-color: var(--surface-subtle);
  background-image: radial-gradient(circle, var(--border-strong) 1px, transparent 1px);
}

.graph-toolbar,
.graph-help,
.graph-status,
.graph-minimap,
dialog {
  border-color: var(--border);
  box-shadow: var(--shadow);
}

.editor-shell,
.provider-managed-param,
.template-requirements,
.task-stat.active,
.job-detail-summary,
.run-engine-summary > div,
.provider-json,
.automation-run-summary,
.takeover-panel {
  background: var(--surface-subtle);
}

.node-palette {
  background: var(--surface);
}

.palette-heading,
.inspector-heading,
.node-inspector,
.template-card,
.combo-panel,
.task-stat,
.task-table-shell {
  background: var(--surface);
}

.automation-run-notice,
.run-attention.takeover {
  border-color: var(--accent-border);
  border-left-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.automation-start-dialog .toggle-field input,
.proxy-device-option input {
  accent-color: var(--accent);
}

/* Template cards carry a quiet tint so the chosen theme is visible at rest. */
.template-card {
  border-color: var(--accent-card-border);
  background: var(--accent-card);
}

.template-card:hover {
  border-color: var(--accent-card-border-hover);
  background: var(--accent-card-hover);
}

.template-card.selected {
  border-color: var(--accent-card-border-selected);
  background: var(--accent-card-selected);
  box-shadow: inset 0 0 0 1px var(--accent-card-selected-ring);
}

.task-stat {
  border-color: var(--accent-card-border);
  background: var(--accent-card);
}

.task-stat:hover {
  border-color: var(--accent-card-border-hover);
  background: var(--accent-card-hover);
}

.task-stat.active {
  border-color: var(--accent-card-border-selected);
  background: var(--accent-card-selected);
  box-shadow: inset 0 0 0 1px var(--accent-card-selected-ring);
}