/*
 * Dark-only test runner. The five fixtures and their bindings stay in
 * automation-demo.js. Keep every surface intrinsic-height for iframe sizing.
 */
html:has(> body.automation-dark) {
  color-scheme: dark;
  background: #0a0b0d;
}

body.automation-dark {
  --qa-bg: #0a0b0d;
  --qa-panel: #15171b;
  --qa-ink: #e8eaed;
  --qa-muted: #9ba1ab;
  --qa-line: #2c3037;
  --qa-soft: #1b1e23;
  --qa-navy: #e8eaed;
  --qa-cyan: #7aa7ff;
  --qa-cyan-soft: #1c2b43;
  --qa-green: #75be99;
  --qa-shadow: none;
  color: var(--qa-ink);
  color-scheme: dark;
  background: var(--qa-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
body.automation-dark .qa-sandbox {
  width: 100%;
  max-width: none;
  padding: 22px clamp(12px, 1.6vw, 28px) 24px;
  background: transparent;
}
body.automation-dark .qa-hero {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding: 0 0 14px;
}
body.automation-dark .qa-hero h1 {
  margin: 0;
  color: #eceef1;
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.35;
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}
body.automation-dark .qa-eyebrow { display: none; }
body.automation-dark .qa-hero > p {
  justify-self: end;
  max-width: 650px;
  color: #9097a2;
  font-size: 12px;
}
body.automation-dark .qa-boundary {
  display: block;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #878e99;
  background: none;
  box-shadow: none;
}
body.automation-dark .qa-boundary p { font-size: 11px; line-height: 1.65; }
body.automation-dark .qa-boundary > .qa-status-dot,
body.automation-dark .qa-boundary > strong { display: none; }

/* A single working surface, with line tabs and no nested browser chrome. */
body.automation-dark .qa-workbench {
  --qa-workbench-bg: #15171b;
  --qa-workbench-panel: #15171b;
  --qa-workbench-line: #2c3037;
  --qa-workbench-muted: #9ba1ab;
  border: 1px solid #30343a;
  border-radius: 12px;
  background: #15171b;
  box-shadow: none;
}
body.automation-dark .qa-workbench-bar {
  display: flex;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 22px;
  border-bottom: 1px solid #292d33;
  color: #9ba1ab;
  background: #191c21;
  font-family: inherit;
  letter-spacing: 0;
}
body.automation-dark .qa-workbench-bar > strong {
  color: #d9dde3;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}
body.automation-dark .qa-workbench-state {
  color: #9299a5;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}
body.automation-dark .qa-view-tabs {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 0 22px;
  border-bottom: 1px solid #2c3037;
  background: #15171b;
  scrollbar-width: thin;
  scrollbar-color: #3b414b transparent;
}
body.automation-dark .qa-view-tabs button {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  min-width: 0;
  min-height: 49px;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: #949ba6;
  background: none;
  box-shadow: none;
  transform: none;
}
body.automation-dark .qa-view-tabs button > span { color: #737b88; font-size: 10px; font-weight: 500; }
body.automation-dark .qa-view-tabs button > strong { font-size: 12px; font-weight: 550; }
body.automation-dark .qa-view-tabs button:hover { color: #e7ebf1; background: none; }
body.automation-dark .qa-view-tabs button[aria-selected="true"] {
  min-width: 0;
  border-color: #79a6ff;
  color: #ebf1ff;
  background: none;
  box-shadow: none;
}
body.automation-dark .qa-view-tabs button[aria-selected="true"] > span { color: #92b6ff; }
body.automation-dark .qa-demo-grid { padding: 0; background: none; }
body.automation-dark .qa-panel,
body.automation-dark .qa-panel--wide {
  padding: 24px 22px;
  border: 0;
  border-radius: 0;
  color: var(--qa-ink);
  background: none;
  box-shadow: none;
  animation: none;
}
body.automation-dark .qa-panel-header { margin-bottom: 7px; }
body.automation-dark .qa-panel-header .qa-number,
body.automation-dark .qa-panel-header .qa-local-tag,
body.automation-dark .qa-panel-header .qa-session-badge { display: none; }
body.automation-dark .qa-tech-tag {
  padding: 0;
  color: #8d96a5;
  background: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .035em;
}
body.automation-dark .qa-panel h2 {
  max-width: none;
  margin: 0 0 5px;
  color: #ebedf1;
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.4;
}
body.automation-dark .qa-panel-intro {
  min-height: 0;
  max-width: none;
  margin-bottom: 22px !important;
  color: #929aa6;
  font-size: 12px;
  line-height: 1.75;
}
body.automation-dark .qa-panel-workspace,
body.automation-dark .qa-panel-workspace--analytics {
  display: grid;
  grid-template-columns: minmax(290px, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 24px;
  min-width: 0;
}
/* Code is a small inspectable document, not a full-height decorative column. */
body.automation-dark .qa-code-window {
  display: block;
  align-self: start;
  min-width: 0;
  border: 1px solid #30343c;
  border-radius: 8px;
  color: #ccd3df;
  background: #101216;
  box-shadow: none;
}
body.automation-dark .qa-code-toolbar {
  min-height: 53px;
  padding: 9px 12px;
  border-bottom: 1px solid #2c3037;
  background: #1b1e24;
}
body.automation-dark .qa-code-toolbar > span {
  min-width: 0;
  color: #a9b0bd;
  font-size: 11px;
}
body.automation-dark .qa-code-run {
  min-height: 34px;
  max-width: none;
  padding: 8px 12px;
  border: 1px solid #588ef1;
  border-radius: 6px;
  color: #fff;
  background: #3e72cc;
  box-shadow: none;
  font-size: 11px;
  font-weight: 550;
}
body.automation-dark .qa-code-run:hover {
  filter: none;
  background: #4c80db;
  transform: none;
}
body.automation-dark .qa-code-details { min-width: 0; }
body.automation-dark .qa-code-details summary {
  min-height: 38px;
  padding: 9px 12px;
  color: #a4adbb;
  cursor: pointer;
  font-size: 11px;
}
body.automation-dark .qa-code-details summary::marker { color: #727d8f; }
body.automation-dark .qa-code-details summary > span { float: right; color: #747e8c; font-size: 10px; }
body.automation-dark .qa-code-details summary:hover { color: #edf1f7; }
body.automation-dark .qa-code-window pre {
  min-height: 0;
  max-height: 242px;
  padding: 8px 0 15px;
  color: #c7cfdb;
  background: #101216;
  scrollbar-color: #3b4350 #16191e;
  scrollbar-width: thin;
}
body.automation-dark .qa-code-window code {
  white-space: normal;
  font-size: 11px;
  line-height: 23px;
}
body.automation-dark .qa-code-window code > span {
  min-height: 23px;
  padding-right: 16px;
  white-space: pre;
}
body.automation-dark .qa-code-window code > span::before { color: #626d7d; }
body.automation-dark .qa-code-window code b { color: #9bbcff; font-weight: 500; }
body.automation-dark .qa-code-window code em { color: #bcc7d8; }
body.automation-dark .qa-code-window > footer {
  min-height: 34px;
  padding: 8px 12px;
  border-top: 1px solid #292e36;
  color: #7d8796;
  background: #16191e;
  font-size: 9px;
  letter-spacing: .03em;
}
body.automation-dark .qa-code-window [data-qa-run-status] { color: #aab6c6; }
body.automation-dark .qa-code-window [data-qa-run-status]::before { box-shadow: none; }
body.automation-dark .qa-code-window [data-qa-run-status][data-state="RUNNING"] { color: #91b5ff; }
body.automation-dark .qa-code-window [data-qa-run-status][data-state="COMPLETE"] { color: #82c4a3; }
body.automation-dark .qa-code-window [data-qa-run-status][data-state="PAUSED"] { color: #d0b98c; }
body.automation-dark .qa-demo-surface,
body.automation-dark .qa-panel-workspace--analytics .qa-demo-surface {
  align-self: start;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--qa-ink);
  background: none;
  box-shadow: none;
}

/* Controls use one blue action color; green is reserved for successful results. */
body.automation-dark .qa-subheading { color: #939eaf; font-size: 10px; letter-spacing: .015em; }
body.automation-dark .qa-subheading strong { color: #b5c4db; font-size: 10px; }
body.automation-dark .qa-control-row label,
body.automation-dark .qa-credentials label,
body.automation-dark .qa-mock-form > label,
body.automation-dark .qa-auth-input,
body.automation-dark .qa-number-field-grid label { color: #adb6c4; font-weight: 500; }
body.automation-dark .qa-control-row input[type="number"],
body.automation-dark .qa-credentials input,
body.automation-dark .qa-input-with-action,
body.automation-dark .qa-input-with-action input,
body.automation-dark .qa-auth-input textarea,
body.automation-dark .qa-review-textarea,
body.automation-dark .qa-number-field-grid input,
body.automation-dark .qa-select-field-grid select {
  border-color: #353b46;
  border-radius: 6px;
  color: #e5e9ef;
  background: #111419;
  caret-color: #91b5ff;
}
body.automation-dark .qa-select-field-grid select option { color: #e5e9ef; background: #191d23; }
body.automation-dark input::placeholder,
body.automation-dark textarea::placeholder { color: #778291; opacity: 1; }
body.automation-dark .qa-primary-button,
body.automation-dark .qa-mock-hero button,
body.automation-dark .qa-mock-cta button {
  border-color: #588ef1;
  border-radius: 6px;
  color: #fff;
  background: #3e72cc;
  box-shadow: none;
  font-weight: 550;
}
body.automation-dark .qa-secondary-button {
  border-color: #3b4c66;
  border-radius: 6px;
  color: #c1d6ff;
  background: #202c3e;
  box-shadow: none;
  font-weight: 550;
}
body.automation-dark .qa-primary-button:hover { background: #4c80db; transform: none; }
body.automation-dark .qa-secondary-button:hover { border-color: #638ac8; background: #28374e; transform: none; }
body.automation-dark .qa-secondary-button.is-automation-target { border-color: #80aaff; background: #304565; box-shadow: 0 0 0 2px #28374e; }
body.automation-dark .qa-tier-picker button,
body.automation-dark .qa-review-rating button,
body.automation-dark .qa-review-tags button {
  border-color: #353b46;
  border-radius: 6px;
  color: #a8b4c5;
  background: #1b1f26;
}
body.automation-dark .qa-tier-picker { margin-top: 10px; }
body.automation-dark .qa-tier-picker button { min-height: 72px; }
body.automation-dark .qa-tier-picker button strong { color: #edf1f7; }
body.automation-dark .qa-tier-picker button small { display: none; }
body.automation-dark .qa-tier-picker button:hover,
body.automation-dark .qa-tier-picker button.is-automation-target,
body.automation-dark .qa-review-rating button:hover,
body.automation-dark .qa-review-tags button:hover { border-color: #749ce0; background: #202c3d; }
body.automation-dark .qa-tier-picker button.is-selected,
body.automation-dark .qa-review-rating button.is-selected,
body.automation-dark .qa-review-tags button.is-selected {
  border-color: #7aa7ff;
  color: #d4e2ff;
  background: #243751;
  box-shadow: none;
}
body.automation-dark .qa-inline-status,
body.automation-dark .qa-review-fieldset,
body.automation-dark .qa-review-results,
body.automation-dark .qa-product-card,
body.automation-dark .qa-cart-counter,
body.automation-dark .qa-session-card,
body.automation-dark .qa-auth-screen,
body.automation-dark .qa-auth-comment-panel,
body.automation-dark .qa-analytics-metrics > div,
body.automation-dark .qa-analytics-controls,
body.automation-dark .qa-mode-distribution,
body.automation-dark .qa-synthetic-summary > span {
  border-color: #303641;
  border-radius: 8px;
  color: #bdc6d3;
  background: #1a1e25;
  box-shadow: none;
}
body.automation-dark .qa-product-visual { border: 1px solid #3a4760; border-radius: 7px; color: #b6d0ff; background: #243044; }
body.automation-dark .qa-product-card h3,
body.automation-dark .qa-cart-counter strong,
body.automation-dark .qa-auth-screen > strong,
body.automation-dark .qa-analytics-metrics strong,
body.automation-dark .qa-mock-hero h3,
body.automation-dark .qa-mock-card-row strong { color: #e7edf5; }
body.automation-dark .qa-product-card small,
body.automation-dark .qa-product-card p,
body.automation-dark .qa-cart-counter,
body.automation-dark .qa-auth-screen > p,
body.automation-dark .qa-analytics-metrics span,
body.automation-dark .qa-session-card dt { color: #9aa5b6; }
body.automation-dark .qa-product-card small { display: none; }
body.automation-dark .qa-log,
body.automation-dark .qa-fingerprint-console {
  max-height: 190px;
  overflow: auto;
  border: 1px solid #2e3541;
  border-radius: 7px;
  color: #b3c0d1;
  background: #11161e;
  box-shadow: none;
  scrollbar-width: thin;
  scrollbar-color: #3b4350 #16191e;
}
body.automation-dark .qa-log { min-height: 66px; }
body.automation-dark .qa-log time,
body.automation-dark .qa-fingerprint-console time { color: #82a7df; }
body.automation-dark .qa-review-list li,
body.automation-dark .qa-auth-list li { color: #b9c5d4; background: #222932; }
body.automation-dark .qa-review-list li.is-empty,
body.automation-dark .qa-auth-list li.is-empty { color: #8793a5; background: none; }
body.automation-dark .qa-review-list li::after,
body.automation-dark .qa-auth-list li:not(.is-empty)::after { color: #84bd9f; }
body.automation-dark .qa-e2e-flow li { border-color: #353b46; border-radius: 7px; color: #9da9ba; background: #1b1f26; box-shadow: none; }
body.automation-dark .qa-e2e-flow li:not(:last-child)::after { color: #697589; }
body.automation-dark .qa-e2e-flow li.is-active { border-color: #7aa7ff; color: #dce8ff; background: #263750; box-shadow: none; }
body.automation-dark .qa-e2e-flow li.is-pass,
body.automation-dark .qa-e2e-result { border-color: #3d6653; color: #b7dcca; background: #1c2d25; box-shadow: none; }
body.automation-dark .qa-e2e-result { border-radius: 8px; }
body.automation-dark .qa-e2e-result > span { color: #17251e; background: #82ba9c; }
body.automation-dark .qa-session-card dd,
body.automation-dark .qa-auth-screen > span,
body.automation-dark .qa-auth-comment-panel > small,
body.automation-dark .qa-synthetic-summary strong { color: #a0bce8; }

/* The environment fixture has its own full-width preview below compact evidence. */
body.automation-dark .qa-panel-workspace--analytics {
  grid-template-columns: minmax(0, 1fr);
}
body.automation-dark .qa-panel-workspace--analytics .qa-code-window { width: 100%; }
body.automation-dark .qa-panel-workspace--analytics .qa-code-window pre { max-height: 152px; }
body.automation-dark .qa-analytics-heading { align-items: start; gap: 20px; }
body.automation-dark .qa-analytics-metrics > div { min-width: 0; padding: 8px 11px; }
body.automation-dark .qa-analytics-metrics strong { font-size: 19px; font-weight: 550; }
body.automation-dark .qa-panel-workspace--analytics .qa-analytics-main { grid-template-columns: minmax(240px, .65fr) minmax(0, 1.35fr); align-items: start; gap: 16px; }
body.automation-dark .qa-analytics-controls { padding: 14px; }
body.automation-dark .qa-analytics-footnote { color: #8f9aab; }
body.automation-dark .qa-analytics-footnote > span[aria-hidden="true"] { display: none; }
body.automation-dark .qa-analytics-footnote > [data-edit-key] { display: block; flex: 1; width: auto; height: auto; margin: 0; overflow: visible; border-radius: 0; color: #8f9aab; background: none; }
body.automation-dark .qa-synthetic-summary small { color: #a3afbf; }
body.automation-dark .qa-mock-browser { border: 1px solid #323a46; border-radius: 8px; color: #b4c2d3; background: #121820; box-shadow: none; }
body.automation-dark .qa-mock-browser-bar,
body.automation-dark .qa-mock-browser-footer,
body.automation-dark .qa-fingerprint-console header { border-color: #303947; color: #a4b5ca; background: #1b222c; }
body.automation-dark .qa-mock-browser-bar > span { display: none; }
body.automation-dark .qa-mock-browser-bar strong { color: #b3c4dc; }
body.automation-dark .qa-mock-browser-bar small,
body.automation-dark .qa-mock-browser-footer strong,
body.automation-dark .qa-fingerprint-console header strong { color: #91b6ed; }
body.automation-dark .qa-mock-viewport { background: #151b24; scrollbar-color: #4a596f transparent; }
body.automation-dark .qa-mock-page-content { background: #151b24; }
body.automation-dark .qa-mock-hero,
body.automation-dark .qa-mock-card-row article,
body.automation-dark .qa-mock-cta { border: 1px solid #344054; border-radius: 8px; color: #a6b5ca; background: #202938; box-shadow: none; }
body.automation-dark .qa-mock-hero > span,
body.automation-dark .qa-mock-card-row span,
body.automation-dark .qa-mock-cta > span { color: #97b5df; }
body.automation-dark .qa-mock-card-row small { color: #8e9fb7; }
body.automation-dark .qa-mock-target.is-active { border-color: #84adf0; background: #273950; box-shadow: 0 0 0 2px #344967; }
body.automation-dark .qa-fingerprint-console ol { color: #b0bfd4; }
body.automation-dark .qa-mode-distribution header,
body.automation-dark .qa-mode-bars > div { color: #9babbe; }
body.automation-dark .qa-mode-distribution header strong,
body.automation-dark .qa-mode-bars > div > strong { color: #b2c8e9; }
body.automation-dark .qa-mode-bars i { background: #303a49; }
body.automation-dark .qa-mode-bars b { background: #739be2; }

body.automation-dark :is(button, input, textarea, select, summary, pre, .qa-mock-viewport):focus-visible {
  outline: 2px solid #85afff;
  outline-offset: 3px;
}
body.automation-dark button:disabled { color: #c2c9d3; opacity: .58; }
@media (max-width: 1100px) {
  body.automation-dark .qa-code-toolbar { flex-wrap: wrap; gap: 8px; }
  body.automation-dark .qa-code-toolbar > span { width: 100%; max-width: none; }
  body.automation-dark .qa-code-run { max-width: 100%; }
}
@media (max-width: 980px) {
  body.automation-dark .qa-panel-workspace { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  body.automation-dark .qa-code-toolbar { flex-wrap: nowrap; }
  body.automation-dark .qa-code-toolbar > span { width: auto; max-width: 48%; }
  body.automation-dark .qa-code-window pre { max-height: 160px; }
  body.automation-dark .qa-analytics-heading { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  body.automation-dark .qa-hero { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  body.automation-dark .qa-hero > p { justify-self: start; }
  body.automation-dark .qa-workbench-bar,
  body.automation-dark .qa-view-tabs { padding-inline: 14px; }
  body.automation-dark .qa-view-tabs { gap: 22px; }
  body.automation-dark .qa-view-tabs button,
  body.automation-dark .qa-view-tabs button[aria-selected="true"] { min-width: 82px; }
  body.automation-dark .qa-panel { padding: 20px 14px; }
  body.automation-dark .qa-panel-workspace--analytics .qa-analytics-main { grid-template-columns: minmax(0, 1fr); }
  body.automation-dark .qa-analytics-metrics { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.automation-dark .qa-analytics-metrics > div { padding-inline: 8px; }
  body.automation-dark .qa-analytics-metrics span { font-size: 8px; }
  body.automation-dark .qa-analytics-metrics strong { font-size: 16px; overflow-wrap: anywhere; }
}
@media (max-width: 560px) {
  body.automation-dark .qa-sandbox { padding: 16px 10px; }
  body.automation-dark .qa-workbench { border-radius: 10px; }
  body.automation-dark .qa-code-toolbar { flex-wrap: wrap; padding: 10px; }
  body.automation-dark .qa-code-toolbar > span { width: 100%; max-width: none; }
  body.automation-dark .qa-code-run { width: 100%; max-width: none; min-height: 38px; }
  body.automation-dark .qa-code-window code { font-size: 10px; }
  body.automation-dark .qa-code-window pre { max-height: 135px; }
  body.automation-dark .qa-tier-picker button { min-height: 64px; }
  body.automation-dark .qa-select-field-grid select,
  body.automation-dark .qa-review-textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body.automation-dark *,
  body.automation-dark *::before,
  body.automation-dark *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Editable local runs and the full-width Mac workbench. */
body.automation-dark .qa-workbench { border-radius: 18px; }
body.automation-dark .qa-workbench-bar {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) auto minmax(100px, 1fr);
  min-height: 48px;
  padding-inline: 20px;
  background: linear-gradient(180deg, #21252b, #181c21);
}
body.automation-dark .qa-workbench-bar > strong { font-family: Consolas, ui-monospace, monospace; font-size: 11px; text-align: center; }
body.automation-dark .qa-workbench-state { justify-self: end; font-size: 10px; letter-spacing: .04em; }
body.automation-dark .qa-workbench-state i { background: #70bd9a; box-shadow: 0 0 0 4px rgba(112, 189, 154, .1); }
body.automation-dark .qa-view-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  background: #101318;
}
body.automation-dark .qa-view-tabs button,
body.automation-dark .qa-view-tabs button[aria-selected="true"] {
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
}
body.automation-dark .qa-view-tabs button > strong { font-size: 13px; font-weight: 600; }
body.automation-dark .qa-view-tabs button:hover { background: #1a212d; }
body.automation-dark .qa-view-tabs button[aria-selected="true"] { border-color: #435e88; background: #233149; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
body.automation-dark .qa-panel-workspace { align-items: stretch; }
body.automation-dark .qa-code-window { display: flex; flex-direction: column; align-self: stretch; }
body.automation-dark .qa-code-window > footer { margin-top: auto; }
body.automation-dark .qa-code-details[open] { display: flex; flex: 1; flex-direction: column; }
body.automation-dark .qa-code-details:not([open]) > pre { display: none; }
body.automation-dark .qa-code-details summary { flex: 0 0 auto; }
body.automation-dark .qa-code-window pre { flex: 1; min-height: 230px; max-height: none; }
body.automation-dark .qa-demo-surface { display: flex; flex-direction: column; align-self: stretch; }
body.automation-dark .qa-demo-surface > .qa-log,
body.automation-dark .qa-demo-surface > .qa-review-results,
body.automation-dark .qa-demo-surface > .qa-auth-list { margin-top: auto; }
body.automation-dark .qa-code-toolbar--config { display: block; padding: 12px; }
body.automation-dark .qa-code-toolbar--config > span { display: block; width: auto; max-width: none; margin-bottom: 12px; }
body.automation-dark .qa-run-options { display: flex; align-items: end; justify-content: space-between; gap: 8px; min-width: 0; }
body.automation-dark .qa-run-options label { display: grid; flex: 0 1 94px; gap: 5px; min-width: 0; color: #a8b5c8; font-size: 11px; }
body.automation-dark .qa-run-options input,
body.automation-dark .qa-run-options select { width: 100%; min-width: 0; height: 35px; padding: 0 8px; border: 1px solid #3f4b5d; border-radius: 6px; color: #e8edf5; background: #111720; font-size: 12px; }
body.automation-dark .qa-run-options .qa-code-run { flex: 1 1 auto; min-height: 35px; padding-inline: 9px; }
body.automation-dark .qa-review-list { max-height: 155px; overflow: auto; scrollbar-width: thin; }
body.automation-dark .qa-review-list li { display: grid; gap: 4px; padding-right: 45px; }
body.automation-dark .qa-review-list li strong { color: #e1e9f3; font-size: 12px; font-weight: 550; }
body.automation-dark .qa-review-list li small { color: #91a2bb; font-size: 10px; }
body.automation-dark .qa-cart-stage { flex: 1; margin-bottom: 14px; }
body.automation-dark .qa-cart-stage .qa-product-card { align-content: center; }
body.automation-dark .qa-review-results { margin-top: 14px !important; }
body.automation-dark #qa-panel-form .qa-demo-surface .qa-mock-form { margin-bottom: 12px; }

/* Real page-like states follow the existing E2E and auth fixtures. */
body.automation-dark .qa-flow-browser {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid #3b4658;
  border-radius: 10px;
  background: #151d29;
}
body.automation-dark .qa-flow-browser-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 39px;
  padding: 0 13px;
  border-bottom: 1px solid #354153;
  background: #242c38;
}
body.automation-dark .qa-flow-browser-bar .qa-window-lights { gap: 5px; }
body.automation-dark .qa-flow-browser-bar .qa-window-lights i { width: 7px; height: 7px; }
body.automation-dark .qa-flow-browser-bar [data-flow-url] { overflow: hidden; color: #aebbd0; font: 10px Consolas, ui-monospace, monospace; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
body.automation-dark .qa-flow-browser-bar [data-flow-status] { color: #9ec6fd; font: 9px Consolas, ui-monospace, monospace; }
body.automation-dark .qa-flow-page { min-height: 260px; padding: 16px; }
body.automation-dark .qa-flow-page-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #303c4e; color: #a7bddb; font-size: 11px; }
body.automation-dark .qa-flow-page-heading small { color: #778da9; font-size: 9px; }
body.automation-dark .qa-flow-page-content { display: grid; gap: 10px; padding-top: 16px; }
body.automation-dark .qa-flow-page-content h3 { margin: 0 0 4px; color: #e8eff9; font-size: 18px; font-weight: 600; }
body.automation-dark .qa-flow-page-content p { color: #98aac4; font-size: 11px; }
body.automation-dark .qa-flow-field { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 39px; padding: 9px 11px; border: 1px solid #344156; border-radius: 6px; background: #1a2535; }
body.automation-dark .qa-flow-field small { color: #91a4bf; font-size: 10px; }
body.automation-dark .qa-flow-field strong { min-width: 0; color: #c7d7ef; font-size: 11px; font-weight: 500; overflow-wrap: anywhere; text-align: right; }
body.automation-dark .qa-flow-action:disabled { min-height: 35px; padding: 7px 11px; border: 1px solid #517caf; border-radius: 6px; color: #dfeeff; background: #315b8b; opacity: 1; font-size: 11px; }
body.automation-dark .qa-flow-action.is-running { animation: qaBrowserPulse 1s ease-in-out infinite; }
body.automation-dark .qa-flow-product { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 93px; padding: 14px; border: 1px solid #6088be; border-radius: 8px; color: #cad8eb; background: #263a56; font-size: 12px; }
body.automation-dark .qa-flow-product-icon { padding: 10px; border-radius: 7px; color: #b9d7ff; background: #355276; font: 12px Consolas, monospace; }
body.automation-dark .qa-flow-product > strong { font-size: 10px; font-weight: 500; }
body.automation-dark .qa-flow-price-options { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
body.automation-dark .qa-flow-price-options > div { display: grid; place-items: center; min-height: 60px; border: 1px solid #35465e; border-radius: 7px; color: #a8bbd7; background: #1c293a; font-size: 11px; }
body.automation-dark .qa-flow-price-options > .is-selected { border-color: #7ca9e9; color: #e1edff; background: #2c4567; }
body.automation-dark .qa-flow-order-list { display: grid; border: 1px solid #35445b; border-radius: 7px; overflow: hidden; }
body.automation-dark .qa-flow-order-list > div { display: flex; justify-content: space-between; gap: 14px; min-height: 38px; align-items: center; padding: 8px 12px; color: #b0c2dc; font-size: 11px; }
body.automation-dark .qa-flow-order-list > div + div { border-top: 1px solid #35445b; }
body.automation-dark .qa-flow-order-list > .is-selected { color: #e1eeff; background: #2c4463; }
body.automation-dark .qa-flow-order-list small { font-size: 10px; }
body.automation-dark .qa-flow-comment { min-height: 78px; margin: 0; padding: 12px; border: 1px solid #5a7ba8; border-radius: 7px; color: #d7e5f9; background: #1b2a3e; font: 12px/1.7 Consolas, monospace; white-space: pre-wrap; }
body.automation-dark .qa-flow-boundary { font-size: 10px !important; color: #7f98b9 !important; }
body.automation-dark #qa-panel-e2e .qa-credentials,
body.automation-dark #qa-panel-auth .qa-auth-replay-stage { display: none; }
body.automation-dark .qa-e2e-flow li { min-height: 54px; padding: 8px; }
body.automation-dark .qa-e2e-flow li strong { font-size: 10px; }
body.automation-dark .qa-flow-context { grid-template-columns: repeat(4, minmax(0,1fr)); }
body.automation-dark .qa-session-card { margin-bottom: 12px; }
body.automation-dark .qa-session-card dd { overflow: visible; overflow-wrap: anywhere; white-space: normal; }
body.automation-dark .qa-e2e-result[hidden] { display: none; }
body.automation-dark .qa-panel-workspace--analytics { grid-template-columns: minmax(290px, .65fr) minmax(0, 1.35fr); }
body.automation-dark .qa-panel-workspace--analytics .qa-code-window pre { min-height: 230px; max-height: none; }
body.automation-dark .qa-panel-workspace--analytics .qa-analytics-main { grid-template-columns: minmax(210px, .7fr) minmax(0, 1.3fr); align-items: stretch; }
body.automation-dark .qa-analytics-controls { display: flex; flex-direction: column; }
body.automation-dark .qa-analytics-controls .qa-analytics-footnote { margin-top: auto !important; }
body.automation-dark .qa-analytics-main > .qa-mock-browser { display: flex; flex-direction: column; }
body.automation-dark .qa-analytics-main .qa-mock-browser-stage { flex: 1; }
body.automation-dark .qa-analytics-main .qa-mock-browser-footer { margin-top: auto; }
body.automation-dark .qa-analytics-bottom { align-items: stretch; }
body.automation-dark .qa-analytics-bottom .qa-fingerprint-console { max-height: none; }
@keyframes qaBrowserPulse { 50% { background-color: #456f9f; } }
@media (max-width: 1250px) {
  body.automation-dark .qa-panel-workspace--analytics { grid-template-columns: minmax(0, 1fr); }
  body.automation-dark .qa-panel-workspace--analytics .qa-code-window pre { max-height: 160px; min-height: 0; }
}
@media (max-width: 980px) {
  body.automation-dark .qa-panel-workspace { align-items: start; }
  body.automation-dark .qa-code-window pre { min-height: 0; max-height: 190px; }
  body.automation-dark .qa-demo-surface { align-self: start; }
}
@media (max-width: 700px) {
  body.automation-dark .qa-workbench-bar { grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; padding-inline: 12px; }
  body.automation-dark .qa-workbench-bar > strong { font-size: 9px; }
  body.automation-dark .qa-workbench-state { font-size: 8px; }
  body.automation-dark .qa-view-tabs { display: flex; gap: 8px; padding: 8px; }
  body.automation-dark .qa-view-tabs button,
  body.automation-dark .qa-view-tabs button[aria-selected="true"] { flex: 0 0 132px; min-height: 46px; padding: 8px 11px; }
  body.automation-dark .qa-view-tabs button > strong { font-size: 12px; }
  body.automation-dark .qa-panel-workspace--analytics .qa-analytics-main { grid-template-columns: minmax(0,1fr); }
  body.automation-dark .qa-flow-context { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  body.automation-dark .qa-run-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.automation-dark .qa-run-options .qa-code-run { grid-column: 1 / -1; }
  body.automation-dark .qa-run-options input,
  body.automation-dark .qa-run-options select { font-size: 16px; }
  body.automation-dark .qa-e2e-flow { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.automation-dark .qa-e2e-flow li:not(:last-child)::after { display: none; }
  body.automation-dark .qa-flow-page { padding: 12px; }
  body.automation-dark .qa-flow-browser-bar { gap: 8px; padding-inline: 10px; }
  body.automation-dark .qa-flow-product { grid-template-columns: auto minmax(0,1fr); }
  body.automation-dark .qa-flow-product > strong { grid-column: 2; }
  body.automation-dark .qa-flow-price-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.automation-dark .qa-flow-field { align-items: start; gap: 8px; }
  body.automation-dark .qa-flow-field small { flex: 0 0 62px; }
}