/* Preview-only semantic color overrides. Original layout rules are retained. */
/* Source geometry: automation/automation-demo-dark.css */
html[data-theme="light"]:has(> body.automation-dark) {
 background: var(--lp-page);
}
html[data-theme="light"] body.automation-dark {
 --qa-bg:var(--lp-page);
 --qa-panel:var(--lp-white);
 --qa-ink:var(--lp-ink);
 --qa-muted:var(--lp-muted);
 --qa-line:var(--lp-line);
 --qa-soft:var(--lp-raised);
 --qa-navy:var(--lp-ink);
 --qa-cyan:var(--lp-accent);
 --qa-cyan-soft:var(--lp-accent-soft);
 --qa-green:var(--lp-green);
 --qa-shadow:var(--lp-shadow);
}
html[data-theme="light"] body.automation-dark .qa-sandbox {
 background: transparent;
}
html[data-theme="light"] body.automation-dark .qa-hero h1 {
 color: var(--lp-ink);
}
html[data-theme="light"] body.automation-dark .qa-hero > p {
 color: var(--lp-text);
}
html[data-theme="light"] body.automation-dark .qa-boundary {
 color: var(--lp-muted);
}
html[data-theme="light"] body.automation-dark .qa-workbench {
 --qa-workbench-bg:var(--lp-white);
 --qa-workbench-panel:var(--lp-white);
 --qa-workbench-line:var(--lp-line);
 --qa-workbench-muted:var(--lp-muted);
 border: 1px solid var(--lp-line-strong);
 background: var(--lp-white);
}
html[data-theme="light"] body.automation-dark .qa-workbench-bar {
 border-bottom: 1px solid var(--lp-line-strong);
 color: var(--lp-text);
 background: var(--lp-white);
}
html[data-theme="light"] body.automation-dark .qa-workbench-bar > strong {
 color: var(--lp-ink);
}
html[data-theme="light"] body.automation-dark .qa-workbench-state {
 color: var(--lp-text);
}
html[data-theme="light"] body.automation-dark .qa-view-tabs {
 border-bottom: 1px solid var(--lp-line-strong);
 background: var(--lp-white);
 scrollbar-color: var(--lp-raised) transparent;
}
html[data-theme="light"] body.automation-dark .qa-view-tabs button {
 border-bottom: 2px solid transparent;
 color: var(--lp-text);
}
html[data-theme="light"] body.automation-dark .qa-view-tabs button > span {
 color: var(--lp-muted);
}
html[data-theme="light"] body.automation-dark .qa-view-tabs button:hover {
 color: var(--lp-ink);
}
html[data-theme="light"] body.automation-dark .qa-view-tabs button[aria-selected="true"] {
 border-color: var(--lp-line-strong);
 color: var(--lp-ink);
}
html[data-theme="light"] body.automation-dark .qa-view-tabs button[aria-selected="true"] > span {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-tech-tag {
 color: var(--lp-text);
}
html[data-theme="light"] body.automation-dark .qa-panel h2 {
 color: var(--lp-ink);
}
html[data-theme="light"] body.automation-dark .qa-panel-intro {
 color: var(--lp-text);
}
html[data-theme="light"] body.automation-dark .qa-code-window {
 border: 1px solid var(--lp-line-strong);
 color: var(--lp-ink);
 background: var(--lp-white);
}
html[data-theme="light"] body.automation-dark .qa-code-toolbar {
 border-bottom: 1px solid var(--lp-line-strong);
 background: var(--lp-white);
}
html[data-theme="light"] body.automation-dark .qa-code-toolbar > span {
 color: var(--lp-text);
}
html[data-theme="light"] body.automation-dark .qa-code-run {
 border: 1px solid var(--lp-line-strong);
 color: var(--lp-ink);
 background: var(--lp-accent-soft);
}
html[data-theme="light"] body.automation-dark .qa-code-run:hover {
 background: var(--lp-accent-soft);
}
html[data-theme="light"] body.automation-dark .qa-code-details summary {
 color: var(--lp-text);
}
html[data-theme="light"] body.automation-dark .qa-code-details summary::marker {
 color: var(--lp-muted);
}
html[data-theme="light"] body.automation-dark .qa-code-details summary > span {
 color: var(--lp-muted);
}
html[data-theme="light"] body.automation-dark .qa-code-details summary:hover {
 color: var(--lp-ink);
}
html[data-theme="light"] body.automation-dark .qa-code-window pre {
 color: var(--lp-text);
 background: var(--lp-white);
 scrollbar-color: var(--lp-raised) var(--lp-white);
}
html[data-theme="light"] body.automation-dark .qa-code-window code > span::before {
 color: var(--lp-muted);
}
html[data-theme="light"] body.automation-dark .qa-code-window code b {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-code-window code em {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-code-window > footer {
 border-top: 1px solid var(--lp-line-strong);
 color: var(--lp-muted);
 background: var(--lp-white);
}
html[data-theme="light"] body.automation-dark .qa-code-window [data-qa-run-status] {
 color: var(--lp-text);
}
html[data-theme="light"] body.automation-dark .qa-code-window [data-qa-run-status][data-state="RUNNING"] {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-code-window [data-qa-run-status][data-state="COMPLETE"] {
 color: var(--lp-green);
}
html[data-theme="light"] body.automation-dark .qa-code-window [data-qa-run-status][data-state="PAUSED"] {
 color: var(--lp-amber);
}
html[data-theme="light"] body.automation-dark .qa-subheading {
 color: var(--lp-text);
}
html[data-theme="light"] body.automation-dark .qa-subheading strong {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-control-row label,
html[data-theme="light"] body.automation-dark .qa-credentials label,
html[data-theme="light"] body.automation-dark .qa-mock-form > label,
html[data-theme="light"] body.automation-dark .qa-auth-input,
html[data-theme="light"] body.automation-dark .qa-number-field-grid label {
 color: var(--lp-text);
}
html[data-theme="light"] body.automation-dark .qa-control-row input[type="number"],
html[data-theme="light"] body.automation-dark .qa-credentials input,
html[data-theme="light"] body.automation-dark .qa-input-with-action,
html[data-theme="light"] body.automation-dark .qa-input-with-action input,
html[data-theme="light"] body.automation-dark .qa-auth-input textarea,
html[data-theme="light"] body.automation-dark .qa-review-textarea,
html[data-theme="light"] body.automation-dark .qa-number-field-grid input,
html[data-theme="light"] body.automation-dark .qa-select-field-grid select {
 border-color: var(--lp-line-strong);
 color: var(--lp-ink);
 background: var(--lp-white);
 caret-color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-select-field-grid select option {
 color: var(--lp-ink);
 background: var(--lp-white);
}
html[data-theme="light"] body.automation-dark input::placeholder,
html[data-theme="light"] body.automation-dark textarea::placeholder {
 color: var(--lp-muted);
}
html[data-theme="light"] body.automation-dark .qa-primary-button,
html[data-theme="light"] body.automation-dark .qa-mock-hero button,
html[data-theme="light"] body.automation-dark .qa-mock-cta button {
 border-color: var(--lp-line-strong);
 color: var(--lp-ink);
 background: var(--lp-accent-soft);
}
html[data-theme="light"] body.automation-dark .qa-secondary-button {
 border-color: var(--lp-line-strong);
 color: var(--lp-ink);
 background: var(--lp-raised);
}
html[data-theme="light"] body.automation-dark .qa-primary-button:hover {
 background: var(--lp-accent-soft);
}
html[data-theme="light"] body.automation-dark .qa-secondary-button:hover {
 border-color: var(--lp-line-strong);
 background: var(--lp-raised);
}
html[data-theme="light"] body.automation-dark .qa-secondary-button.is-automation-target {
 border-color: var(--lp-line-strong);
 background: var(--lp-raised);
 box-shadow: 0 0 0 2px rgba(35,53,73,0.120);
}
html[data-theme="light"] body.automation-dark .qa-tier-picker button,
html[data-theme="light"] body.automation-dark .qa-review-rating button,
html[data-theme="light"] body.automation-dark .qa-review-tags button {
 border-color: var(--lp-line-strong);
 color: var(--lp-accent);
 background: var(--lp-white);
}
html[data-theme="light"] body.automation-dark .qa-tier-picker button strong {
 color: var(--lp-ink);
}
html[data-theme="light"] body.automation-dark .qa-tier-picker button:hover,
html[data-theme="light"] body.automation-dark .qa-tier-picker button.is-automation-target,
html[data-theme="light"] body.automation-dark .qa-review-rating button:hover,
html[data-theme="light"] body.automation-dark .qa-review-tags button:hover {
 border-color: var(--lp-line-strong);
 background: var(--lp-raised);
}
html[data-theme="light"] body.automation-dark .qa-tier-picker button.is-selected,
html[data-theme="light"] body.automation-dark .qa-review-rating button.is-selected,
html[data-theme="light"] body.automation-dark .qa-review-tags button.is-selected {
 border-color: var(--lp-line-strong);
 color: var(--lp-ink);
 background: var(--lp-raised);
}
html[data-theme="light"] body.automation-dark .qa-inline-status,
html[data-theme="light"] body.automation-dark .qa-review-fieldset,
html[data-theme="light"] body.automation-dark .qa-review-results,
html[data-theme="light"] body.automation-dark .qa-product-card,
html[data-theme="light"] body.automation-dark .qa-cart-counter,
html[data-theme="light"] body.automation-dark .qa-session-card,
html[data-theme="light"] body.automation-dark .qa-auth-screen,
html[data-theme="light"] body.automation-dark .qa-auth-comment-panel,
html[data-theme="light"] body.automation-dark .qa-analytics-metrics > div,
html[data-theme="light"] body.automation-dark .qa-analytics-controls,
html[data-theme="light"] body.automation-dark .qa-mode-distribution,
html[data-theme="light"] body.automation-dark .qa-synthetic-summary > span {
 border-color: var(--lp-line-strong);
 color: var(--lp-text);
 background: var(--lp-white);
}
html[data-theme="light"] body.automation-dark .qa-product-visual {
 border: 1px solid var(--lp-line-strong);
 color: var(--lp-accent);
 background: var(--lp-raised);
}
html[data-theme="light"] body.automation-dark .qa-product-card h3,
html[data-theme="light"] body.automation-dark .qa-cart-counter strong,
html[data-theme="light"] body.automation-dark .qa-auth-screen > strong,
html[data-theme="light"] body.automation-dark .qa-analytics-metrics strong,
html[data-theme="light"] body.automation-dark .qa-mock-hero h3,
html[data-theme="light"] body.automation-dark .qa-mock-card-row strong {
 color: var(--lp-ink);
}
html[data-theme="light"] body.automation-dark .qa-product-card small,
html[data-theme="light"] body.automation-dark .qa-product-card p,
html[data-theme="light"] body.automation-dark .qa-cart-counter,
html[data-theme="light"] body.automation-dark .qa-auth-screen > p,
html[data-theme="light"] body.automation-dark .qa-analytics-metrics span,
html[data-theme="light"] body.automation-dark .qa-session-card dt {
 color: var(--lp-text);
}
html[data-theme="light"] body.automation-dark .qa-log,
html[data-theme="light"] body.automation-dark .qa-fingerprint-console {
 border: 1px solid var(--lp-line-strong);
 color: var(--lp-accent);
 background: var(--lp-white);
 scrollbar-color: var(--lp-raised) var(--lp-white);
}
html[data-theme="light"] body.automation-dark .qa-log time,
html[data-theme="light"] body.automation-dark .qa-fingerprint-console time {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-review-list li,
html[data-theme="light"] body.automation-dark .qa-auth-list li {
 color: var(--lp-accent);
 background: var(--lp-raised);
}
html[data-theme="light"] body.automation-dark .qa-review-list li.is-empty,
html[data-theme="light"] body.automation-dark .qa-auth-list li.is-empty {
 color: var(--lp-muted);
}
html[data-theme="light"] body.automation-dark .qa-review-list li::after,
html[data-theme="light"] body.automation-dark .qa-auth-list li:not(.is-empty)::after {
 color: var(--lp-green);
}
html[data-theme="light"] body.automation-dark .qa-e2e-flow li {
 border-color: var(--lp-line-strong);
 color: var(--lp-text);
 background: var(--lp-white);
}
html[data-theme="light"] body.automation-dark .qa-e2e-flow li:not(:last-child)::after {
 color: var(--lp-muted);
}
html[data-theme="light"] body.automation-dark .qa-e2e-flow li.is-active {
 border-color: var(--lp-line-strong);
 color: var(--lp-ink);
 background: var(--lp-raised);
}
html[data-theme="light"] body.automation-dark .qa-e2e-flow li.is-pass,
html[data-theme="light"] body.automation-dark .qa-e2e-result {
 border-color: var(--lp-line-strong);
 color: var(--lp-green);
 background: var(--lp-raised);
}
html[data-theme="light"] body.automation-dark .qa-e2e-result > span {
 color: var(--lp-ink);
 background: var(--lp-green-soft);
}
html[data-theme="light"] body.automation-dark .qa-session-card dd,
html[data-theme="light"] body.automation-dark .qa-auth-screen > span,
html[data-theme="light"] body.automation-dark .qa-auth-comment-panel > small,
html[data-theme="light"] body.automation-dark .qa-synthetic-summary strong {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-analytics-footnote {
 color: var(--lp-text);
}
html[data-theme="light"] body.automation-dark .qa-analytics-footnote > [data-edit-key] {
 color: var(--lp-text);
}
html[data-theme="light"] body.automation-dark .qa-synthetic-summary small {
 color: var(--lp-text);
}
html[data-theme="light"] body.automation-dark .qa-mock-browser {
 border: 1px solid var(--lp-line-strong);
 color: var(--lp-accent);
 background: var(--lp-white);
}
html[data-theme="light"] body.automation-dark .qa-mock-browser-bar,
html[data-theme="light"] body.automation-dark .qa-mock-browser-footer,
html[data-theme="light"] body.automation-dark .qa-fingerprint-console header {
 border-color: var(--lp-line-strong);
 color: var(--lp-accent);
 background: var(--lp-white);
}
html[data-theme="light"] body.automation-dark .qa-mock-browser-bar strong {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-mock-browser-bar small,
html[data-theme="light"] body.automation-dark .qa-mock-browser-footer strong,
html[data-theme="light"] body.automation-dark .qa-fingerprint-console header strong {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-mock-viewport {
 background: var(--lp-white);
 scrollbar-color: var(--lp-raised) transparent;
}
html[data-theme="light"] body.automation-dark .qa-mock-page-content {
 background: var(--lp-white);
}
html[data-theme="light"] body.automation-dark .qa-mock-hero,
html[data-theme="light"] body.automation-dark .qa-mock-card-row article,
html[data-theme="light"] body.automation-dark .qa-mock-cta {
 border: 1px solid var(--lp-line-strong);
 color: var(--lp-accent);
 background: var(--lp-raised);
}
html[data-theme="light"] body.automation-dark .qa-mock-hero > span,
html[data-theme="light"] body.automation-dark .qa-mock-card-row span,
html[data-theme="light"] body.automation-dark .qa-mock-cta > span {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-mock-card-row small {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-mock-target.is-active {
 border-color: var(--lp-line-strong);
 background: var(--lp-raised);
 box-shadow: 0 0 0 2px rgba(35,53,73,0.120);
}
html[data-theme="light"] body.automation-dark .qa-fingerprint-console ol {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-mode-distribution header,
html[data-theme="light"] body.automation-dark .qa-mode-bars > div {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-mode-distribution header strong,
html[data-theme="light"] body.automation-dark .qa-mode-bars > div > strong {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-mode-bars i {
 background: var(--lp-raised);
}
html[data-theme="light"] body.automation-dark .qa-mode-bars b {
 background: var(--lp-accent-soft);
}
html[data-theme="light"] body.automation-dark :is(button, input, textarea, select, summary, pre, .qa-mock-viewport):focus-visible {
 outline: 2px solid var(--lp-line-strong);
}
html[data-theme="light"] body.automation-dark button:disabled {
 color: var(--lp-text);
}
html[data-theme="light"] body.automation-dark .qa-workbench-bar {
 background: linear-gradient(180deg, var(--lp-raised), var(--lp-white));
}
html[data-theme="light"] body.automation-dark .qa-workbench-state i {
 background: var(--lp-green-soft);
 box-shadow: 0 0 0 4px rgba(35,53,73,0.023);
}
html[data-theme="light"] body.automation-dark .qa-view-tabs {
 background: var(--lp-white);
}
html[data-theme="light"] body.automation-dark .qa-view-tabs button,
html[data-theme="light"] body.automation-dark .qa-view-tabs button[aria-selected="true"] {
 border: 1px solid transparent;
}
html[data-theme="light"] body.automation-dark .qa-view-tabs button:hover {
 background: var(--lp-white);
}
html[data-theme="light"] body.automation-dark .qa-view-tabs button[aria-selected="true"] {
 border-color: var(--lp-line-strong);
 background: var(--lp-raised);
 box-shadow: inset 0 1px 0 rgba(35,53,73,0.012);
}
html[data-theme="light"] body.automation-dark .qa-run-options label {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-run-options input,
html[data-theme="light"] body.automation-dark .qa-run-options select {
 border: 1px solid var(--lp-line);
 color: var(--lp-ink);
 background: var(--lp-white);
}
html[data-theme="light"] body.automation-dark .qa-review-list li strong {
 color: var(--lp-ink);
}
html[data-theme="light"] body.automation-dark .qa-review-list li small {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-flow-browser {
 border: 1px solid var(--lp-line-strong);
 background: var(--lp-white);
}
html[data-theme="light"] body.automation-dark .qa-flow-browser-bar {
 border-bottom: 1px solid var(--lp-line-strong);
 background: var(--lp-raised);
}
html[data-theme="light"] body.automation-dark .qa-flow-browser-bar [data-flow-url] {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-flow-browser-bar [data-flow-status] {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-flow-page-heading {
 border-bottom: 1px solid var(--lp-line-strong);
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-flow-page-heading small {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-flow-page-content h3 {
 color: var(--lp-ink);
}
html[data-theme="light"] body.automation-dark .qa-flow-page-content p {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-flow-field {
 border: 1px solid var(--lp-line-strong);
 background: var(--lp-raised);
}
html[data-theme="light"] body.automation-dark .qa-flow-field small {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-flow-field strong {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-flow-action:disabled {
 border: 1px solid var(--lp-line-strong);
 color: var(--lp-ink);
 background: var(--lp-raised);
}
html[data-theme="light"] body.automation-dark .qa-flow-product {
 border: 1px solid var(--lp-line-strong);
 color: var(--lp-accent);
 background: var(--lp-raised);
}
html[data-theme="light"] body.automation-dark .qa-flow-product-icon {
 color: var(--lp-accent);
 background: var(--lp-raised);
}
html[data-theme="light"] body.automation-dark .qa-flow-price-options > div {
 border: 1px solid var(--lp-line-strong);
 color: var(--lp-accent);
 background: var(--lp-raised);
}
html[data-theme="light"] body.automation-dark .qa-flow-price-options > .is-selected {
 border-color: var(--lp-line-strong);
 color: var(--lp-ink);
 background: var(--lp-raised);
}
html[data-theme="light"] body.automation-dark .qa-flow-order-list {
 border: 1px solid var(--lp-line-strong);
}
html[data-theme="light"] body.automation-dark .qa-flow-order-list > div {
 color: var(--lp-accent);
}
html[data-theme="light"] body.automation-dark .qa-flow-order-list > div + div {
 border-top: 1px solid var(--lp-line-strong);
}
html[data-theme="light"] body.automation-dark .qa-flow-order-list > .is-selected {
 color: var(--lp-ink);
 background: var(--lp-raised);
}
html[data-theme="light"] body.automation-dark .qa-flow-comment {
 border: 1px solid var(--lp-line-strong);
 color: var(--lp-ink);
 background: var(--lp-raised);
}
html[data-theme="light"] body.automation-dark .qa-flow-boundary {
 color: var(--lp-accent) !important;
}