/* PXLTAB Node System theme bridge.
   This file changes presentation only; the approved Node System layout and
   browser-only behavior remain owned by the existing prototype styles. */

.node-system-page {
  --bg: #0a0d14;
  --surface: #121722;
  --surface-2: #161b27;
  --surface-3: #1a202d;
  --line: #242c3a;
  --line-strong: #343e50;
  --text: #f5f7fc;
  --muted: #aeb6c5;
  --accent: #67ddb3;
  --accent-2: #82a7ff;
  --blue: #82a7ff;
  --orange: #ffca6b;
  --radius: 16px;
  color: var(--text);
  background:
    radial-gradient(circle at 8% -8%, rgba(4, 73, 64, 0.28), transparent 25rem),
    radial-gradient(circle at 92% 4%, rgba(49, 35, 103, 0.24), transparent 28rem),
    var(--bg);
}

.node-system-page .app-shell {
  width: min(1560px, 100%);
  padding-top: 0;
}

.node-system-page .workspace-head {
  padding-top: 32px;
}

.node-system-page .panel {
  border-color: var(--line);
  background: linear-gradient(145deg, rgba(22, 27, 39, 0.98), rgba(15, 19, 28, 0.98));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

/* The first user decision is a tinted brand surface so the workflow chooser
   reads as the clear starting point without competing with selected controls. */
.node-system-page .user-workflow-panel {
  border-color: rgba(130, 167, 255, 0.34);
  background:
    linear-gradient(118deg, rgba(4, 73, 64, 0.20), rgba(49, 35, 103, 0.18)),
    var(--surface);
}

.node-system-page :is(
  .view-button.is-active,
  .system-choice-button.is-active,
  .user-category-button.is-active,
  .user-case-button.is-active,
  .library-actions .is-primary,
  .library-edit-dialog footer button.is-primary,
  .sp1-context-actions button,
  .sp1-primary-action,
  .sp1-dialog footer .is-primary,
  .d3-case-button.is-active
) {
  border-color: rgba(130, 167, 255, 0.62);
  color: #fff;
  background: var(--action-generation-gradient);
  box-shadow: 0 8px 24px rgba(10, 25, 49, 0.32);
}

.node-system-page .generate-button:not(:disabled),
.node-system-page .d4-primary-action:not(:disabled) {
  color: #fff;
  background: var(--action-generation-gradient);
}

/* Match the approved workflow Render action: the base stays stable and the
   aurora appears immediately on hover/focus without reflowing the control. */
.node-system-page :is(.generate-button, .d3-run-button) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-content: center;
  align-items: center;
  column-gap: 8px;
  text-align: center;
  transition: box-shadow 120ms ease, transform 80ms ease;
}

.node-system-page .generate-button {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.node-system-page .d3-run-button {
  grid-template-columns: 18px auto 18px;
}

.node-system-page :is(.generate-button, .d3-run-button)::before {
  content: "";
  position: absolute;
  inset: -200% -50%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(45% 65% at 22% 30%, rgba(58, 242, 176, 0.85), transparent 62%),
    radial-gradient(55% 70% at 62% 18%, rgba(76, 201, 240, 0.75), transparent 62%),
    radial-gradient(45% 65% at 82% 62%, rgba(139, 92, 246, 0.75), transparent 62%),
    radial-gradient(50% 60% at 38% 82%, rgba(67, 97, 238, 0.70), transparent 62%);
  filter: blur(12px) saturate(130%);
  opacity: 0;
  transition: opacity 140ms ease;
}

.node-system-page :is(.generate-button, .d3-run-button):not(:disabled):is(:hover, :focus-visible)::before {
  opacity: 1;
  animation: node-system-generate-aurora 5s linear infinite;
}

.node-system-page :is(.generate-button, .d3-run-button) > * {
  position: relative;
  z-index: 2;
}

.node-system-page :is(.generate-button, .d3-run-button) > span {
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.node-system-page :is(.generate-button, .d3-run-button) > svg {
  width: 18px;
  height: 18px;
  color: #fff;
  flex: 0 0 18px;
}

.node-system-page .generate-button > svg {
  grid-column: 1;
  justify-self: end;
}

.node-system-page .generate-button > .generate-button__label {
  grid-column: 2;
}

.node-system-page .generate-button > .generate-button__cost {
  grid-column: 3;
  justify-self: start;
  margin-left: 3px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.node-system-page .d3-run-button::after {
  content: "";
  position: relative;
  z-index: 2;
  width: 18px;
  height: 1px;
}

.node-system-page :is(.generate-button, .d3-run-button):not(:disabled):is(:hover, :focus-visible) {
  box-shadow: 0 8px 28px rgba(74, 93, 231, 0.30), 0 8px 24px rgba(58, 242, 176, 0.20);
}

.node-system-page :is(.generate-button, .d3-run-button):not(:disabled):active {
  transform: translateY(1px);
}

/* Every menu uses one completion language: empty placeholders remain neutral
   (or red when required), while a real selected value uses the same filled
   green-to-indigo treatment as the selected Render type. */
.node-system-page select:not(.has-placeholder):not([aria-invalid="true"]):not(:disabled),
.node-system-page .d3-output-setting[aria-required="true"].is-complete select,
.node-system-page .d3-user-multi-menu:has(.d3-user-menu-option.is-selected) > summary {
  border-color: rgba(74, 201, 148, 0.88);
  color: #fff;
  background: var(--action-generation-gradient);
  box-shadow: 0 8px 20px rgba(10, 25, 49, 0.20);
  color-scheme: dark;
}

.node-system-page .d3-user-multi-menu:has(.d3-user-menu-option.is-selected) > summary :is(span, i) {
  color: #fff;
}

.node-system-page .d3-output-setting[aria-required="true"].is-complete em {
  color: #68d5aa;
}

@keyframes node-system-generate-aurora {
  0% { transform: rotate(0deg) scale(1); filter: blur(12px) saturate(130%) hue-rotate(0deg); }
  50% { transform: rotate(180deg) scale(1.25); filter: blur(15px) saturate(170%) hue-rotate(45deg); }
  100% { transform: rotate(360deg) scale(1); filter: blur(12px) saturate(130%) hue-rotate(0deg); }
}

.node-system-page .library-category-button.is-active,
.node-system-page .library-version-option.is-selected,
.node-system-page .user-workflow-button.is-active {
  border-color: rgba(130, 167, 255, 0.62);
  background: linear-gradient(100deg, rgba(4, 73, 64, 0.92), rgba(49, 35, 103, 0.94));
  box-shadow: 0 8px 24px rgba(10, 25, 49, 0.26);
}

.node-system-page .user-workflow-button.is-active > span {
  border-color: rgba(103, 221, 179, 0.5);
  color: #b9ffe5;
  background: rgba(10, 13, 20, 0.36);
}

.node-system-page :is(
  .library-edit-button:hover,
  .workflow-group-actions button:hover:not(:disabled),
  .sp1-rule-header-actions button.is-primary:hover
) {
  color: #fff;
  background: var(--action-generation-gradient);
}

.node-system-page :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.node-system-page .px-header,
.node-system-page .px-debug-context,
.node-system-page .px-mobile-panel,
.node-system-page .px-menu {
  color: var(--color-text-primary);
}

.node-system-page .px-footer {
  margin-top: 28px;
}

/* Keep the section label outside the first content card. Both User UI and
   Debug UI use this contract, so their Inputs and Result headings align and
   retain a deliberate gap before the inner surface begins. */
.node-system-page .d3-input-section > .d3-section-heading,
.node-system-page .user-generation-layout > .result-panel > .d3-section-heading {
  min-height: 48px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 0 2px;
}

.node-system-page .d3-input-section > .d3-input-groups {
  margin-top: 0;
}

/* Inputs and Result share the same outer-section inset before their first
   inner card. This preserves the approved two-level hierarchy without letting
   headings or cards touch. */
.node-system-page :is(.d3-input-section.panel, .user-generation-layout > .result-panel) {
  padding: 18px;
}

/* Selected cards use a dark gradient in both moods. Their primary and
   supporting copy must therefore stay white in every theme. */
.node-system-page :is(
  .view-button.is-active,
  .system-choice-button.is-active,
  .user-category-button.is-active,
  .user-case-button.is-active,
  .library-category-button.is-active,
  .library-version-option.is-selected,
  .user-workflow-button.is-active,
  .d3-case-button.is-active,
  .d3-selection-option.is-selected,
  .d3-user-menu-option.is-selected,
  .d3-semantic-tag.is-selected,
  .library-actions .is-primary,
  .library-edit-dialog footer button.is-primary,
  .sp1-context-actions button,
  .sp1-primary-action,
  .sp1-dialog footer .is-primary
) :is(strong, span, small, b, em, p) {
  color: #ffffff;
}

.node-system-page :is(
  .system-choice-button.is-active,
  .user-workflow-button.is-active,
  .library-category-button.is-active
) small {
  opacity: 0.9;
}

/* Empty menu prompts are instructions, not chosen values. Once a real value
   is selected the JavaScript removes this class and the normal text returns. */
.node-system-page select.has-placeholder,
.node-system-page .d3-user-multi-menu > summary .has-placeholder {
  color: #98a2b3 !important;
  font-weight: 400 !important;
}

.node-system-page select.has-placeholder option {
  color: var(--text);
  font-weight: 500;
}

/* Required and still-empty controls use a consistent red signal in User UI
   and Debug UI. Optional fields retain the neutral hierarchy. */
.node-system-page :is(
  .d3-user-field.is-required-missing,
  .d3-user-field.is-invalid
) > span > b,
.node-system-page :is(
  .d3-user-field em.is-missing,
  .d3-user-field em.is-invalid,
  .user-case-selector.is-required-missing .user-case-control-heading > span
) {
  color: #ff737d;
}

.node-system-page :is(
  .d3-user-field.is-required-missing,
  .d3-user-field.is-invalid
) :is(select, .d3-user-multi-menu > summary),
.node-system-page .user-case-selector.is-required-missing .user-case-buttons {
  border-color: rgba(255, 92, 101, 0.84);
}

/* Required controls change from red to green only after they hold a valid
   selection. Optional controls keep their neutral border. */
.node-system-page .d3-user-field[aria-required="true"].is-complete :is(
  select,
  .d3-user-multi-menu > summary
),
.node-system-page .user-case-selector.is-complete .user-case-buttons {
  border-color: rgba(74, 201, 148, 0.88);
}

/* The protected site shell normally stamps Debug pages with a repeated
   watermark. This workspace already communicates its environment in the
   header, so the repeated overlay is intentionally disabled here only. */
body.node-system-page[data-site-environment="debug_staging"]::before {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

/* Light mode is presentation-only. Debug still starts in dark mode from the
   document attribute; the shared mood control applies this layer on demand. */
html[data-theme="light"] body.node-system-page {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #edf0f4;
  --line: #dfe3e9;
  --line-strong: #c8ced8;
  --text: #0b0b0c;
  --muted: #626872;
  --accent: #0b7657;
  --accent-2: #3657c8;
  --blue: #3157d5;
  --orange: #985b00;
  color-scheme: light;
  color: var(--text);
  background:
    radial-gradient(circle at 8% -8%, rgba(11, 118, 87, 0.10), transparent 25rem),
    radial-gradient(circle at 92% 4%, rgba(54, 87, 200, 0.08), transparent 28rem),
    var(--bg);
}

html[data-theme="light"] .node-system-page :is(
  .panel,
  .library-workspace,
  .library-categories-panel,
  .library-health,
  .d3-case-header,
  .d3-input-section,
  .d3-nodes-section,
  .d3-output-section,
  .d3-phase-boundary,
  .d4-rail-panel
) {
  border-color: var(--line);
  color: var(--text);
  background: linear-gradient(145deg, #ffffff, #fafbfc);
  box-shadow: 0 16px 42px rgba(16, 24, 40, 0.10);
}

html[data-theme="light"] .node-system-page .user-workflow-panel {
  border-color: rgba(54, 87, 200, 0.22);
  background:
    linear-gradient(118deg, rgba(11, 118, 87, 0.075), rgba(54, 87, 200, 0.065)),
    #ffffff;
}

/* Result uses the same two-level hierarchy as Inputs: one outer section and
   one inset content card. No second outer shadow is allowed. */
html[data-theme="light"] .node-system-page .user-output-grid {
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-theme="light"] .node-system-page .user-output-grid .d6-result-node {
  border-color: var(--line);
  background: var(--surface-2);
  box-shadow: none;
}

html[data-theme="light"] .node-system-page :is(
  .view-switcher,
  .system-placeholder-mark,
  .canvas-toolbar,
  .system-strip,
  .library-toolbar,
  .library-toast,
  .library-edit-dialog,
  .library-option-remove-dialog,
  .library-delete-dialog,
  .sp1-dialog,
  .d4-confirm-dialog,
  .d4-confirm-dialog form,
  .d6-node-dialog,
  .d6-node-dialog form
) {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface);
}

html[data-theme="light"] .node-system-page :is(
  .system-choice-button:not(.is-active),
  .user-category-button:not(.is-active),
  .user-workflow-button:not(.is-active),
  .user-case-button:not(.is-active),
  .library-category-button:not(.is-active),
  .library-array-option,
  .library-actions button:not(.is-primary),
  .library-edit-dialog footer button:not(.is-primary),
  .library-version-option:not(.is-selected),
  .library-version-lifecycle,
  .library-version-delete,
  .d3-case-button:not(.is-active),
  .d3-run-button:disabled,
  .d3-node-action,
  .d3-open-library,
  .d3-use-version,
  .d3-remove-image,
  .d5-unarchive-action,
  .d6-node-dialog-header button,
  .d4-card-actions button,
  .d4-primary-action:disabled,
  .d4-confirm-actions button
) {
  border-color: var(--line-strong);
  color: var(--muted);
  background: var(--surface);
}

html[data-theme="light"] .node-system-page :is(
  select,
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="url"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  textarea,
  .library-search-label input,
  .library-field select,
  .library-field input,
  .library-field textarea,
  .library-edit-configuration select,
  .library-edit-reason input,
  .library-edit-field select,
  .library-edit-option-controls select,
  .d3-semantic-tag > header select,
  .d4-profile-version select,
  .d5-history-search
) {
  border-color: var(--line-strong);
  color: var(--text);
  background: #ffffff;
}

html[data-theme="light"] .node-system-page :is(
  .pipeline-node,
  .system-strip article,
  .library-health-card,
  .library-health-notes > div,
  .library-node,
  .library-node-section,
  .library-edit-group,
  .library-edit-array,
  .library-details-grid div,
  .library-details-list li,
  .library-registry-configuration,
  .library-registry-setting,
  .library-registry-value,
  .library-technical-body > section,
  .workflow-rule-group,
  .workflow-rule-list li,
  .workflow-edit-rule-list li,
  .workflow-profile-card,
  .workflow-edit-section,
  .sp4-provider-context,
  .sp4-profile-version-select,
  .sp4-artifact-preview,
  .d3-input-group,
  .d3-case-buttons,
  .d3-user-category,
  .d3-user-field,
  .d3-node,
  .d3-output-setting,
  .d3-selection-option:not(.is-selected),
  .d3-user-multi-menu > summary,
  .d3-user-menu-options,
  .d3-user-menu-option:not(.is-selected),
  .d3-no-user-inputs,
  .d3-library-empty,
  .d3-semantic-container,
  .d3-semantic-tag,
  .d3-direct-intent,
  .d3-status-card,
  .d3-upload-card,
  .d4-provider-group,
  .d4-model-card,
  .d4-build-card,
  .d4-pointer-card,
  .d4-draft-change,
  .d4-empty-state,
  .d4-system-details,
  .d4-build-details,
  .d5-history-group,
  .d5-legacy-evidence,
  .d5-quarantine,
  .d3-run-evidence,
  .d6-node-dialog-summary,
  .d6-node-detail-section pre,
  .d6-node-detail-section,
  .d6-result-box,
  .sp1-rule-card,
  .sp2-rule-editor
) {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-2);
}

html[data-theme="light"] .node-system-page :is(
  .d3-profile-line,
  .d3-version-option,
  .d3-version-preview,
  #d3-run-evidence-body article
) {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-2);
}

html[data-theme="light"] .node-system-page :is(
  .d4-rail-heading > span,
  .d4-model-status,
  .d4-build-status,
  .d5-archive-pill,
  .d3-version-badge,
  .d6-node-status
) {
  border-color: var(--line-strong);
  color: #46505e;
  background: var(--surface-3);
}

html[data-theme="light"] .node-system-page :is(
  .canvas-grid,
  .library-canvas,
  .d6-result-node,
  .d3-output-preview,
  .d3-node-preview
) {
  border-color: var(--line);
  color: var(--text);
  background-color: #f7f8fa;
}

html[data-theme="light"] .node-system-page .d6-result-box {
  border-color: rgba(36, 112, 92, 0.24);
  color: var(--muted);
  background: linear-gradient(145deg, rgba(36, 112, 92, 0.10), rgba(255, 255, 255, 0.86) 54%), #eef5f2;
}

html[data-theme="light"] .node-system-page .d6-result-placeholder-icon {
  border-color: rgba(36, 112, 92, 0.32);
  color: #276f60;
  background: rgba(36, 112, 92, 0.08);
}

html[data-theme="light"] .node-system-page .d6-result-box strong {
  color: var(--text);
}

html[data-theme="light"] .node-system-page .d6-result-box span {
  color: var(--muted);
}

html[data-theme="light"] .node-system-page .d3-upload-card:hover,
html[data-theme="light"] .node-system-page .d3-upload-card:focus-within {
  background: linear-gradient(145deg, rgba(36, 112, 92, 0.12), rgba(255, 255, 255, 0.90) 56%), #f0f6f3;
  box-shadow: inset 0 0 0 1px rgba(36, 112, 92, 0.10);
}

html[data-theme="light"] .node-system-page .d3-upload-card:not(.is-required-missing):hover,
html[data-theme="light"] .node-system-page .d3-upload-card:not(.is-required-missing):focus-within {
  border-color: rgba(36, 112, 92, 0.68);
}

html[data-theme="light"] .node-system-page .canvas-grid {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
}

html[data-theme="light"] .node-system-page .pipeline-node {
  background: linear-gradient(145deg, #ffffff, #f4f6f8);
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.12);
}

html[data-theme="light"] .node-system-page .pipeline-node::before {
  border-color: var(--line-strong);
  background: #ffffff;
}

html[data-theme="light"] .node-system-page .user-workflow-button:not(.is-active) > span {
  border-color: var(--line);
  color: var(--muted);
  background: var(--surface-3);
}

html[data-theme="light"] .node-system-page :is(
  h1,
  h2,
  h3,
  h4,
  strong,
  legend,
  summary,
  .library-category-button strong,
  .library-health-card strong,
  .library-health-notes strong,
  .d3-status-card strong,
  .d4-model-card strong,
  .d4-build-card strong,
  .d4-pointer-card strong
) {
  color: var(--text);
}

html[data-theme="light"] .node-system-page :is(
  p,
  small,
  label,
  .field-help,
  .workspace-head p:last-child,
  .system-selector-copy p,
  .library-section-heading small,
  .library-section-heading span,
  .d3-case-header p,
  .d3-input-group > p,
  .d3-phase-boundary p
) {
  color: var(--muted);
}

html[data-theme="light"] .node-system-page :is(
  .d3-user-field > span,
  .d3-output-setting b,
  .d3-input-group-heading h3
) {
  color: var(--text);
}

html[data-theme="light"] .node-system-page :is(
  .d3-input-group-heading small,
  .d3-selection-category > strong,
  .d3-user-field em,
  .d3-output-settings-evidence,
  .d3-section-heading > span
) {
  color: #4f5968;
}

html[data-theme="light"] .node-system-page :is(input, textarea)::placeholder {
  color: #747c88;
  opacity: 1;
}

/* Debug integration gives this field an ID-level dark background. Match that
   specificity so the field and placeholder remain readable in light mode. */
html[data-theme="light"] body.node-system-page #d4-build-name {
  border-color: var(--line-strong);
  color: var(--text);
  background: #ffffff;
}

html[data-theme="light"] body.node-system-page .library-registry-configuration {
  border-color: var(--line) !important;
  color: var(--text) !important;
  background: var(--surface-2) !important;
}

html[data-theme="light"] .node-system-page :is(
  .d3-library-empty strong,
  .d3-library-empty span,
  .sp4-artifact-preview
) {
  color: var(--text);
}

html[data-theme="light"] .node-system-page .d3-upload-plus {
  border-color: #287883;
  color: #075c67;
  background: #f3fbfb;
}

html[data-theme="light"] .node-system-page :is(
  .d3-upload-empty em,
  .d3-user-field em.is-missing,
  .d3-user-field em.is-invalid,
  .user-case-selector .user-case-control-heading > em.is-missing,
  .d4-pointer-card .d4-readiness-error,
  .library-health > summary em.is-warning,
  .library-node header em.is-archived
) {
  color: #9f1239;
}

html[data-theme="light"] .node-system-page :is(
  .d3-user-field.is-required-missing,
  .d3-user-field.is-invalid
) > span > b,
html[data-theme="light"] .node-system-page .user-case-selector.is-required-missing .user-case-control-heading > span {
  color: #b42318;
}

html[data-theme="light"] .node-system-page :is(
  .d3-user-field.is-required-missing,
  .d3-user-field.is-invalid
) :is(select, .d3-user-multi-menu > summary),
html[data-theme="light"] .node-system-page .user-case-selector.is-required-missing .user-case-buttons {
  border-color: #c43f47 !important;
  box-shadow: none;
}

html[data-theme="light"] .node-system-page .d3-user-field[aria-required="true"].is-complete :is(
  select,
  .d3-user-multi-menu > summary
),
html[data-theme="light"] .node-system-page select:not(.has-placeholder):not([aria-invalid="true"]):not(:disabled),
html[data-theme="light"] .node-system-page .d3-output-setting[aria-required="true"].is-complete select,
html[data-theme="light"] .node-system-page .d3-user-multi-menu:has(.d3-user-menu-option.is-selected) > summary {
  border-color: #238060 !important;
  color: #ffffff !important;
  background: var(--action-generation-gradient) !important;
  box-shadow: 0 8px 20px rgba(10, 25, 49, 0.18);
  color-scheme: dark;
}

html[data-theme="light"] .node-system-page .d3-user-multi-menu:has(.d3-user-menu-option.is-selected) > summary :is(span, i) {
  color: #ffffff !important;
}

html[data-theme="light"] .node-system-page .user-case-selector.is-complete .user-case-buttons {
  border-color: #238060 !important;
  box-shadow: none;
}

html[data-theme="light"] .node-system-page .d3-output-setting[aria-required="true"].is-complete em {
  color: #197257;
}

html[data-theme="light"] .node-system-page .user-case-button:not(.is-active) {
  color: #20252d !important;
}

html[data-theme="light"] .node-system-page .d3-upload-card.is-required-missing {
  border-color: #c43f47 !important;
  box-shadow: inset 0 0 0 1px rgba(196, 63, 71, 0.18), 0 0 0 1px rgba(196, 63, 71, 0.10);
}

html[data-theme="light"] .node-system-page select.has-placeholder,
html[data-theme="light"] .node-system-page .d3-user-multi-menu > summary .has-placeholder {
  color: #747c88 !important;
  font-weight: 400 !important;
}

html[data-theme="light"] .node-system-page .generate-button:disabled {
  border-color: #59636f;
  color: #fff;
  background: #59636f;
  box-shadow: none;
}

/* Disabled actions remain visibly unavailable without becoming illegible. */
html[data-theme="light"] .node-system-page button:disabled {
  border-color: var(--line-strong);
  color: #66707d;
  background: #e4e8ed;
  opacity: 1;
}

html[data-theme="light"] .node-system-page .generate-button:disabled {
  border-color: #59636f;
  color: #fff;
  background: #59636f;
}

html[data-theme="light"] .node-system-page .generate-button:disabled > :is(svg, span, small) {
  color: #fff;
  opacity: 1;
}

/* Credit cost remains white on the dark Generate surface in Light mode. */
html[data-theme="light"] .node-system-page .generate-button > .generate-button__cost {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.20);
  opacity: 1;
}

html[data-theme="light"] .node-system-page .d3-run-button:disabled {
  border-color: #59636f !important;
  color: #fff !important;
  background: #59636f !important;
  opacity: 1;
}

html[data-theme="light"] .node-system-page .d3-run-button:disabled > :is(svg, span) {
  color: #fff;
  opacity: 1;
}

html[data-theme="light"] .node-system-page :is(
  .library-edit-dialog footer,
  .library-option-remove-dialog footer,
  .library-delete-dialog footer
) {
  border-color: var(--line);
  background: var(--surface-2);
}

/* Keep every selected and primary action visually identical across themes. */
html[data-theme="light"] .node-system-page :is(
  .view-button.is-active,
  .system-choice-button.is-active,
  .user-category-button.is-active,
  .user-case-button.is-active,
  .library-actions .is-primary,
  .library-edit-dialog footer button.is-primary,
  .sp1-context-actions button,
  .sp1-primary-action,
  .sp1-dialog footer .is-primary,
  .d3-case-button.is-active,
  .d3-selection-option.is-selected,
  .d3-user-menu-option.is-selected,
  .d3-semantic-tag.is-selected
) {
  border-color: rgba(54, 87, 200, 0.62);
  color: #ffffff;
  background: var(--action-generation-gradient);
  box-shadow: 0 8px 24px rgba(10, 25, 49, 0.22);
}

html[data-theme="light"] .node-system-page :is(
  .library-category-button.is-active,
  .library-version-option.is-selected,
  .user-workflow-button.is-active
) {
  border-color: rgba(54, 87, 200, 0.62);
  color: #ffffff;
  background: linear-gradient(100deg, rgba(4, 73, 64, 0.94), rgba(49, 35, 103, 0.95));
  box-shadow: 0 8px 24px rgba(10, 25, 49, 0.20);
}

/* The generic light-theme small/label rule must never override selected
   controls. Selected surfaces always carry white primary and supporting text. */
html[data-theme="light"] .node-system-page :is(
  .view-button.is-active,
  .system-choice-button.is-active,
  .user-category-button.is-active,
  .user-case-button.is-active,
  .library-category-button.is-active,
  .library-version-option.is-selected,
  .user-workflow-button.is-active,
  .d3-case-button.is-active,
  .d3-selection-option.is-selected,
  .d3-user-menu-option.is-selected,
  .d3-semantic-tag.is-selected,
  .library-actions .is-primary,
  .library-edit-dialog footer button.is-primary,
  .sp1-context-actions button,
  .sp1-primary-action,
  .sp1-dialog footer .is-primary
) :is(strong, span, small, b, em, p) {
  color: #ffffff;
}

/* The shared footer intentionally remains a dark brand surface in both
   themes. Keep its hierarchy independent from the light page palette. */
html[data-theme="light"] .node-system-page .px-footer {
  color: #f5f7fc;
}

html[data-theme="light"] .node-system-page .px-footer .px-footer__nav h2 {
  color: #ffffff;
}

html[data-theme="light"] .node-system-page .px-footer :is(
  .px-footer__brand p,
  .px-footer__nav a,
  .px-footer__bottom,
  .px-footer__status
) {
  color: #b5bfce;
}

html[data-theme="light"] .node-system-page .px-footer .px-footer__nav a:hover {
  color: #ffffff;
}

@media (max-width: 760px) {
  .node-system-page .app-shell {
    padding-inline: 14px;
  }

  .node-system-page .workspace-head {
    padding-top: 24px;
  }

  .node-system-page .px-footer {
    margin-top: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .node-system-page *,
  .node-system-page *::before,
  .node-system-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}