:root {
  --nd-color-bg: #0f1419;
  --nd-color-surface: #1a2332;
  --nd-color-surface-elevated: #232f42;
  --nd-color-border: #2d3f5a;
  --nd-color-border-light: #3d5275;
  --nd-color-text: #e8edf4;
  --nd-color-text-muted: #8b99ad;
  --nd-color-text-dim: #5c6b7f;
  --nd-color-primary: #3b82f6;
  --nd-color-primary-hover: #2563eb;
  --nd-color-primary-glow: rgba(59, 130, 246, 0.25);
  --nd-color-success: #10b981;
  --nd-color-success-bg: rgba(16, 185, 129, 0.1);
  --nd-color-warning: #f59e0b;
  --nd-color-warning-bg: rgba(245, 158, 11, 0.1);
  --nd-color-error: #ef4444;
  --nd-color-error-bg: rgba(239, 68, 68, 0.1);
  --nd-color-accent: #8b5cf6;
  --nd-color-on-primary: #ffffff;
  --nd-space-xs: 0.25rem;
  --nd-space-sm: 0.5rem;
  --nd-space-md: 1rem;
  --nd-space-lg: 1.5rem;
  --nd-space-xl: 2rem;
  --nd-space-2xl: 3rem;
  --nd-radius-sm: 6px;
  --nd-radius-md: 8px;
  --nd-radius-lg: 12px;
  --nd-radius-xl: 16px;
  --nd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --nd-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --nd-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  --nd-shadow-glow: none;
  --nd-transition-fast: 120ms ease;
  --nd-transition-normal: 250ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--nd-font-ui, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); font-feature-settings: "cv11", "ss01"; background: var(--nd-color-bg); color: var(--nd-color-text); line-height: 1.5; }

/* Class-driven workflow sections retain their app-owned state and controls. */
[data-disclosure] > .section-title:has(> [data-disclosure-toggle]) { padding: 0; }
[data-disclosure] > .section-title::after { display: none; }
[data-disclosure-toggle] {
  display: flex;
  align-items: center;
  gap: var(--nd-space-sm);
  flex: 1;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--nd-space-md);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}
[data-disclosure-toggle]::after { content: ''; width: 6px; height: 6px; margin-left: auto; border-right: 1.5px solid var(--nd-color-text-dim); border-bottom: 1.5px solid var(--nd-color-text-dim); transform: translateY(-2px) rotate(45deg); transition: transform var(--nd-transition-fast); }
[data-disclosure-toggle][aria-expanded='false']::after { transform: rotate(-45deg); }
[data-disclosure-toggle]:focus-visible { outline: 2px solid var(--nd-color-primary); outline-offset: -2px; }
[data-disclosure-panel][hidden] { display: none !important; }
[data-disclosure] > [data-disclosure-panel] { max-height: none; }
@media (pointer: coarse) {
  [data-disclosure-toggle] { min-height: 44px; }
}

.nd-workflow-disclosure { width: 100%; min-width: 0; box-sizing: border-box; }
.nd-workflow-disclosure > summary.panel-heading { grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; }
.nd-imaging-controls > .control-panel { width: 100%; box-sizing: border-box; }
.nd-workflow-disclosure > summary { cursor: pointer; list-style: none; }
.nd-workflow-disclosure > summary::-webkit-details-marker { display: none; }
.nd-workflow-disclosure > summary::after { content: '▾'; margin-left: auto; }
.nd-workflow-disclosure:not([open]) > summary::after { content: '▸'; }
.nd-workflow-disclosure > summary:focus-visible { outline: 2px solid var(--nd-color-primary); outline-offset: 2px; }
.nd-workflow-disclosure:not([open]) > summary { margin-bottom: 0; }
.nd-workflow-disclosure:not([open]) > summary p { display: none; }
@media (pointer: coarse) {
  .nd-workflow-disclosure > summary { min-height: 44px; align-content: center; }
}

[data-disclosure]:is(.console-container, .nd-console-container).collapsed { height:auto; flex:0 0 auto; }
:is(.console-header, .nd-console-header) > [data-disclosure-toggle] { width:auto; padding:0; min-height:28px; }
@media (pointer:coarse) { :is(.console-header, .nd-console-header) > [data-disclosure-toggle] { min-height:44px; } }

/* Page-wide file drop (ui/pageDrop.js): a quiet frame over the whole window, and Undo in the status bar. */
.nd-drop-overlay { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; pointer-events: none; background: color-mix(in srgb, var(--nd-color-bg) 55%, transparent); box-shadow: inset 0 0 0 2px var(--nd-color-primary); backdrop-filter: blur(2px); }
.nd-drop-overlay[hidden] { display: none; }
.nd-drop-overlay p { margin: 0; padding: 8px 14px; color: var(--nd-color-text); background: var(--nd-color-surface); border: 1px solid var(--nd-color-border-light); border-radius: var(--nd-radius-md); font-size: 13px; font-weight: 500; }
.nd-status-undo { flex: 0 0 auto; margin: 0; padding: 2px 8px; color: var(--nd-color-primary); background: transparent; border: 1px solid var(--nd-color-border-light); border-radius: var(--nd-radius-sm); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.nd-status-undo:hover { background: var(--nd-color-surface-elevated); }

/* The input menu: its label is visually hidden, so the example's info icon sits beside the select. */
nd-example-selector { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; align-items: center; }
nd-example-selector > label { display: contents; }
nd-example-selector > label > .nd-info-icon { grid-row: 1; grid-column: 2; margin-left: var(--nd-space-sm); }
nd-example-selector > select { grid-row: 1; grid-column: 1; }
nd-example-selector > :not(label, select) { grid-column: 1 / -1; }
.nd-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* The input menu's "Load files…" and the page-wide drop replace the primary drop box. */
.nd-file-merged { display: none !important; }