.form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bodyWrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-default);
  background: #1a1c22;
}

:global([data-theme="light"]) .header {
  background: #c8ccd3;
  border-bottom-color: #cccfd6;
}

.header :global(.secondaryButton) {
  border-color: #555;
}

.header :global(.secondaryButton):hover {
  border-color: #888;
}

.title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tabsWrapper {
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-primary);
  width: 100%;
}

:global([data-theme="light"]) .tabsWrapper {
  background: var(--bg-primary);
  border-bottom-color: var(--border-default);
}

.tabs {
  display: flex;
  gap: var(--space-2);
  padding: 8px var(--space-3);
  align-items: stretch;
  max-width: 1220px;
  margin: 0 auto;
  width: 100%;
}

.tabGroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-default);
  background: rgba(255, 255, 255, 0.02);
}

.tabGroupScope {
  composes: tabGroup;
  background: rgba(59, 130, 246, 0.04);
  border-color: rgba(59, 130, 246, 0.10);
  padding: 2px 11px;
  justify-content: center;
  align-items: center;
}

.tabGroupRecon {
  composes: tabGroup;
  background: rgba(34, 197, 94, 0.04);
  border-color: rgba(34, 197, 94, 0.10);
  padding: 2px 4px;
  gap: 1px;
}

.tabGroupOther {
  composes: tabGroup;
  background: rgba(234, 179, 8, 0.04);
  border-color: rgba(234, 179, 8, 0.10);
  padding: 18px 4px 4px 4px;
}

.tabGroupAgent {
  composes: tabGroup;
  background: rgba(168, 85, 247, 0.04);
  border-color: rgba(168, 85, 247, 0.10);
}

.tabGroupRemediation {
  composes: tabGroup;
  background: rgba(251, 146, 60, 0.04);
  border-color: rgba(251, 146, 60, 0.10);
  justify-content: center;
  align-items: center;
}

/* ---- Light mode: stronger tab group tinting ---- */

:global([data-theme="light"]) .tabGroup {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

:global([data-theme="light"]) .tabGroupScope {
  background: rgba(59, 130, 246, 0.10);
  border-color: rgba(59, 130, 246, 0.22);
}

:global([data-theme="light"]) .tabGroupRecon {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.22);
}

:global([data-theme="light"]) .tabGroupOther {
  background: rgba(234, 179, 8, 0.10);
  border-color: rgba(234, 179, 8, 0.22);
}

:global([data-theme="light"]) .tabGroupAgent {
  background: rgba(168, 85, 247, 0.10);
  border-color: rgba(168, 85, 247, 0.22);
}

:global([data-theme="light"]) .tabGroupRemediation {
  background: rgba(251, 146, 60, 0.10);
  border-color: rgba(251, 146, 60, 0.22);
}

.tabGroupPlain {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tabGroupLabel {
  font-size: 9px;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-tertiary);
  padding: 0 2px;
}

:global([data-theme="light"]) .tabGroupLabel {
  color: var(--text-secondary);
}

:global([data-theme="light"]) .compactTab {
  color: var(--text-primary);
}

.reconGroupInner {
  display: flex;
  align-items: stretch;
  gap: 6px;
  height: 100%;
}

.reconGroupContent {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.tabGroupHeader {
  display: flex;
  align-items: center;
  gap: 6px;
}

.viewModeToggle {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: stretch;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding-right: 6px;
}

.viewModeOption {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.viewModeOption:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

.viewModeOptionActive {
  background: rgba(34, 197, 94, 0.15);
  color: rgba(34, 197, 94, 0.9);
  border-color: rgba(34, 197, 94, 0.25);
}

.viewModeOptionActive:hover {
  background: rgba(34, 197, 94, 0.2);
  color: rgba(34, 197, 94, 1);
  border-color: rgba(34, 197, 94, 0.3);
}

.tabGroupTabs {
  display: flex;
  gap: 2px;
  margin-top: auto;
  margin-bottom: auto;
}

.compactTab {
  padding: 4px 1px !important;
  font-size: 11px !important;
  text-align: center;
  line-height: 1.2;
  white-space: normal !important;
}

.hiddenTab {
  visibility: hidden;
  pointer-events: none;
}

.wideTab {
  padding: 4px 6px !important;
}

.presetTab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding-left: 8px !important;
  padding-right: 1px !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

.presetTab:hover {
  background: rgba(34, 197, 94, 0.08) !important;
}

.presetIcon {
  color: rgba(34, 197, 94, 0.85);
  flex-shrink: 0;
  margin-right: -7px;
}

.presetBadge {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2);
  padding: 2px 8px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: var(--font-medium);
  color: rgba(34, 197, 94, 0.9);
  letter-spacing: 0.2px;
  vertical-align: middle;
}

:global([data-theme="light"]) .presetBadge {
  background: #fff;
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.3);
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 1220px;
  margin: 0 auto;
  width: 100%;
}

.contentWorkflow {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}

.loadingContainer {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--text-secondary);
}

.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Section styles */
.section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-default);
}

.sectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-default);
  cursor: pointer;
  user-select: none;
}

.sectionHeader:hover {
  background: var(--bg-hover);
}

.sectionTitle {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sectionIcon {
  transition: transform var(--transition-default);
}

/* Update Settings / Start to Scan on a scan section's own header. Pushed right
   so they sit next to the collapse chevron rather than centred by the header's
   space-between. */
.sectionHeaderActions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  margin-right: var(--space-3);
}

.sectionHeaderButton {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.12));
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.sectionHeaderButton:hover:not(:disabled) {
  background: var(--bg-hover, rgba(255, 255, 255, 0.06));
  color: var(--text-primary);
}

.sectionHeaderButton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sectionHeaderButtonPrimary {
  color: var(--status-success, #16a34a);
  border-color: color-mix(in srgb, var(--status-success, #16a34a) 40%, transparent);
}

.sectionHeaderButtonPrimary:hover:not(:disabled) {
  color: var(--status-success, #16a34a);
  background: color-mix(in srgb, var(--status-success, #16a34a) 12%, transparent);
}

.sectionIconOpen {
  transform: rotate(180deg);
}

.sectionContent {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sectionDescription {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Always-visible statement that a credential is not optional. The amber alert
   below it only renders when the token is MISSING, so an operator who has one
   configured otherwise gets no indication that it is what makes the scan run. */
.sectionRequirement {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.5;
}

.fieldRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.fieldGroup {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.fieldLabel {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.fieldLabelRequired::after {
  content: ' *';
  color: var(--status-error);
}

.fieldHint {
  font-size: 10px;
  color: var(--text-tertiary);
}

.fieldHintWarning {
  font-size: 10px;
  color: var(--status-error);
}

/* LHOST detected-host-IP suggestion (issue #180): a hint plus a compact inline
   button that fills the field with the host's detected LAN IP. */
.suggestionRow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  color: var(--text-tertiary);
}

.suggestionButton {
  font-size: 10px;
  font-weight: var(--font-medium);
  color: var(--accent-primary, var(--text-secondary));
  background: transparent;
  border: 1px solid var(--border-secondary, var(--border-primary));
  border-radius: var(--radius-1);
  padding: 1px var(--space-1);
  cursor: pointer;
  white-space: nowrap;
}

.suggestionButton:hover {
  background: var(--bg-secondary);
}

.toggleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.toggleRow:last-child {
  border-bottom: none;
}

.toggleLabel {
  font-size: var(--text-xs);
  color: var(--text-primary);
}

.toggleDescription {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: var(--space-0-5);
}

/* A toggle whose explanation is a paragraph, not a caption: the switch keeps the
   label's line and the prose gets its own, at half width so it reads as text
   rather than as a block wedged against the switch. */
.toggleBlock {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.toggleBlock:last-child {
  border-bottom: none;
}

.toggleBlockHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.toggleDescriptionBelow {
  max-width: 50%;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .toggleDescriptionBelow {
    max-width: 100%;
  }
}

.toggleRowCompact {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.toggleRowCompact:last-child {
  border-bottom: none;
}

.toggleRowCompactInfo {
  flex: 1;
  min-width: 0;
}

.toggleRowCompactLabel {
  font-size: 10px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  white-space: nowrap;
}

.toggleRowCompactInput {
  width: 80px;
  flex-shrink: 0;
}

.toggleLabelLg {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.checkboxGroup {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.subSection {
  padding: var(--space-3);
  background: var(--bg-tertiary);
  border-radius: var(--radius-default);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.subSectionTitle {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.subSectionTitleCollapsible {
  composes: subSectionTitle;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.subSectionTitleCollapsible:hover {
  color: var(--text-primary);
}

/* Tool Phase Restriction Grid */
.toolPhaseGrid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-default);
  overflow: hidden;
}

.toolPhaseHeader {
  display: grid;
  grid-template-columns: 1fr repeat(3, 120px);
  gap: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
}

.toolPhaseHeaderLabel {
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-align: center;
}

.toolPhaseHeaderLabel:first-child {
  text-align: left;
}

.toolPhaseRow {
  display: grid;
  grid-template-columns: 1fr repeat(3, 120px);
  gap: 0;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
}

.toolPhaseRow:last-child {
  border-bottom: none;
}

.toolPhaseRow:hover {
  background: var(--bg-hover);
}

.toolPhaseName {
  font-size: var(--text-xs);
  color: var(--text-primary);
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.apiKeyMissing {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: #ef4444;
  font-family: var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.apiKeyMissing:hover {
  color: #dc2626;
}

.apiKeyInputWrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.apiKeyInputWrapper .textInput,
.apiKeyInputWrapper input {
  flex: 1;
  padding-right: 36px;
}

.apiKeyToggle {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
}

.shodanWarning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(251, 146, 60, 0.08);
  border: 1px solid rgba(251, 146, 60, 0.25);
  border-radius: var(--radius-default);
  font-size: var(--text-xs);
  color: var(--status-warning-text);
  margin-bottom: var(--space-3);
}

.shodanWarning svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.apiKeyToggle:hover {
  color: var(--text-primary);
}

.phaseCheck {
  display: flex;
  align-items: center;
  justify-content: center;
}

.phaseCheck input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-secondary);
  cursor: pointer;
}

/* Time estimate indicator */
.timeEstimate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--status-warning-text);
  margin-top: var(--space-0-5);
  line-height: 1;
}

/* =============================================================================
   Model Selector (searchable dropdown)
   ============================================================================= */

.modelSelector {
  position: relative;
}

.modelSelectorInput {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1-5) var(--space-2);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-default);
  cursor: pointer;
  transition: var(--transition-all);
  min-height: 32px;
}

.modelSelectorInput:hover {
  border-color: var(--text-tertiary);
}

.modelSelectorInputFocused {
  border-color: var(--accent-secondary);
  box-shadow: 0 0 0 2px var(--border-focus);
}

.modelSearchInput {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: var(--text-xs);
  min-width: 0;
}

.modelSearchInput::placeholder {
  color: var(--text-tertiary);
}

.modelSelectedText {
  flex: 1;
  font-size: var(--text-xs);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modelSelectorIcon {
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.modelSelectorSpinner {
  flex-shrink: 0;
  color: var(--text-tertiary);
  animation: spin 1s linear infinite;
}

.modelDropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-default);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 50;
}

.modelDropdownEmpty {
  padding: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-align: center;
}

.modelGroup {
  border-bottom: 1px solid var(--border-subtle);
}

.modelGroup:last-child {
  border-bottom: none;
}

.modelGroupHeader {
  padding: var(--space-1-5) var(--space-2);
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background: var(--bg-tertiary);
  position: sticky;
  top: 0;
}

.modelOption {
  padding: var(--space-1-5) var(--space-2);
  cursor: pointer;
  transition: background 0.1s;
}

.modelOption:hover {
  background: var(--bg-hover);
}

.modelOptionSelected {
  background: color-mix(in srgb, var(--accent-secondary) 15%, transparent);
}

.modelOptionMain {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.modelOptionName {
  font-size: var(--text-xs);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modelOptionCtx {
  flex-shrink: 0;
  font-size: 9px;
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 1px 4px;
}

.modelOptionDesc {
  display: block;
  font-size: 9px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

/* =============================================================================
   Guardrail Block Modal
   ============================================================================= */

.guardrailOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: guardrailFadeIn 0.2s ease-out;
}

@keyframes guardrailFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes guardrailSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.guardrailModal {
  background: var(--bg-secondary);
  border: 1px solid var(--status-error);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-6, 32px);
  max-width: 440px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3, 12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 80, 80, 0.1);
  animation: guardrailSlideIn 0.25s ease-out;
}

.guardrailIconWrapper {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--status-error) 15%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--status-error);
  margin-bottom: var(--space-1, 4px);
}

.guardrailTitle {
  font-size: var(--text-lg, 18px);
  font-weight: var(--font-semibold, 600);
  color: var(--status-error);
  margin: 0;
}

.guardrailMessage {
  font-size: var(--text-sm, 14px);
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: color-mix(in srgb, var(--status-error) 8%, transparent);
  border-radius: var(--radius-default, 6px);
  width: 100%;
}

.guardrailHint {
  font-size: var(--text-xs, 12px);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.guardrailButton {
  margin-top: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-6, 32px);
  background: var(--status-error);
  color: #fff;
  border: none;
  border-radius: var(--radius-default, 6px);
  font-size: var(--text-sm, 14px);
  font-weight: var(--font-medium, 500);
  cursor: pointer;
  transition: opacity 0.15s;
}

.guardrailButton:hover {
  opacity: 0.9;
}

/* LLM provider / model selection gate modals (reuse .guardrailOverlay backdrop) */
.gateModal,
.gateModalWide {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-6, 32px);
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: guardrailSlideIn 0.25s ease-out;
  /* allow ModelPicker dropdowns to overflow the modal box */
  overflow: visible;
}

.gateModal {
  max-width: 460px;
  align-items: center;
  text-align: center;
}

.gateModalWide {
  max-width: 560px;
  text-align: left;
}

.gateIconWrapper {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-secondary) 15%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-secondary);
  margin-bottom: var(--space-1, 4px);
}

.gateModalWide .gateIconWrapper {
  align-self: flex-start;
}

.gateTitle {
  font-size: var(--text-lg, 18px);
  font-weight: var(--font-semibold, 600);
  color: var(--text-primary);
  margin: 0;
}

.gateMessage {
  font-size: var(--text-sm, 14px);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.gateField {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  margin-top: var(--space-2, 8px);
}

.gateLabel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-size: var(--text-sm, 14px);
  font-weight: var(--font-medium, 500);
  color: var(--text-primary);
}

.gateHint {
  font-size: var(--text-xs, 12px);
  color: var(--text-tertiary, var(--text-muted));
  line-height: 1.4;
}

.gateActions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2, 8px);
  margin-top: var(--space-4, 16px);
}

.gateModal .gateActions {
  justify-content: center;
  width: 100%;
}

/* Tool type badges (Passive / Active) */
.badgePassive,
.badgeActive {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 9999px;
  line-height: 1.4;
  white-space: nowrap;
}

.badgePassive {
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
  border: 1px solid rgba(6, 182, 212, 0.30);
}

.badgeActive {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.30);
}

.subSectionTitle .badgePassive,
.subSectionTitle .badgeActive {
  margin-left: 8px;
  position: relative;
  top: -2px;
}

.sectionHeaderRight {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Node info tooltip */
.nodeInfoIcon {
  color: #22c55e;
  cursor: help;
  flex-shrink: 0;
  opacity: 0.95;
  transition: opacity 0.15s, color 0.15s;
}

.nodeInfoIcon:hover {
  opacity: 1;
  color: #4ade80;
}

.nodeInfoContent {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0;
}

.nodeInfoLabel {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
}

.nodeInfoPills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.nodeInfoPill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9999px;
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.30);
  white-space: nowrap;
}

.nodeInfoPillInput {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9999px;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.30);
  white-space: nowrap;
}

.nodeInfoPillEnrich {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9999px;
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.30);
  white-space: nowrap;
}

/* =============================================================================
   File Import Button (multi-value field text-file loader)
   ============================================================================= */

.fileImportWrap {
  position: relative;
  display: block;
  width: 100%;
}

.fileImportWrap > input,
.fileImportWrap > textarea {
  width: 100%;
  padding-right: 36px;
}

.fileImportButton {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  z-index: 1;
}

.fileImportButton:hover:not(:disabled) {
  color: var(--accent-secondary);
  background: var(--bg-hover);
  border-color: var(--border-default);
}

.fileImportButton:focus-visible {
  outline: 2px solid var(--accent-secondary);
  outline-offset: 1px;
}

.fileImportButton:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.fileImportButtonInputPos {
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}

.fileImportButtonTextareaPos {
  top: 6px;
  right: 6px;
}

.fileImportButtonSuccess {
  color: #22c55e;
}

.fileImportButtonError {
  color: #ef4444;
}

.fileImportTooltip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0;
  font-size: 11px;
  line-height: 1.5;
}

.fileImportTooltipTitle {
  font-weight: 700;
  color: var(--color-gray-100);
}

.fileImportTooltipBody {
  color: var(--color-gray-300);
}

.fileImportTooltipSection {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fileImportTooltipLabel {
  font-weight: 600;
  color: var(--color-gray-200);
}

.fileImportTooltipList {
  margin: 0;
  padding-left: 16px;
  color: var(--color-gray-300);
}

.fileImportTooltipList code,
.fileImportTooltipFooter code {
  background: rgba(255, 255, 255, 0.10);
  padding: 0 3px;
  border-radius: 2px;
  font-size: 10px;
}

.fileImportTooltipFooter {
  color: var(--color-gray-400);
  font-size: 10px;
}

/* A column of inline Global Settings credential shortcuts. Each card carries its
   own border, so they need separation rather than a container. */
.credentialStack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

/* Two settings side by side. Collapses on narrow viewports so a small field
   never squeezes its label into a vertical stack of letters. */
.optionRow {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.detectorHintRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.browseButton {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.12));
  background: transparent;
  color: var(--accent-primary);
  cursor: pointer;
  white-space: nowrap;
}

.browseButton:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.06));
}

.detectorPicker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.02));
}

.detectorPickerHead {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* The list is over a thousand entries, so it scrolls inside the form rather
   than making the form itself thousands of pixels tall. */
.detectorGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
}

.detectorChip {
  padding: 2px 7px;
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  border-radius: 4px;
  border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.12));
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.detectorChip:hover {
  color: var(--text-primary);
  background: var(--bg-hover, rgba(255, 255, 255, 0.06));
}

.detectorChipOn {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  color: #fff;
}

/* A heading and its explanatory line are ONE block. Left as two children of the
   section they are pushed a full gap apart and read as unrelated. */
.groupHeader {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* The source picker takes half the width; a full-width select next to a short
   button left the dropdown stretched across the whole form for no reason. */
.addSourceRow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.addSourceRow select {
  flex: 0 0 50%;
  max-width: 50%;
  min-width: 0;
}

/* A source card's fields are .fieldGroup elements, which supply their own
   INTERNAL gap only. Stacked in a plain block container they touch: one field's
   hint sits flush against the next field's label. */
.sourceCardBody {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Tells the operator which host folder a local scan target is read from - the
   one fact the source's own fields cannot show. */
.localTargetNote {
  margin: 0;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--status-info-bg, rgba(59, 130, 246, 0.08));
  border: 1px solid var(--status-info-border, rgba(59, 130, 246, 0.25));
  border-radius: 6px;
}

.localTargetNote code {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text-primary);
}

/* ---------------------------------------------------------------------------
   Scan-input source picker (Supply Chain Scanner). The scan takes exactly ONE
   input, so the sources are mutually exclusive and the panel below always
   reflects the selected one.
   --------------------------------------------------------------------------- */

.inputSourceToggle {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.inputSourceOption {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.inputSourceOption:hover:not(:disabled) {
  border-color: var(--accent-primary);
}

.inputSourceOption:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.inputSourceOptionActive {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}

.inputPanel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  margin-bottom: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: 6px;
}

.inputRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.activeFile {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.activeFileName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono, monospace);
  color: var(--text-primary);
}

/* "what you type -> which credential" mapping. The marker is dropped so the
   rows read as a table of cases rather than a bulleted aside. */
.inputHintList {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-tertiary);
}

/* A source's fields two per row. The registry hands us up to a dozen small
   inputs per source and one under the other they pushed the shared options a
   full screen down. */
.sourceFieldGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) 16px;
  align-items: start;
}

.sourceFieldGrid > * {
  min-width: 0;
}

@media (max-width: 720px) {
  .sourceFieldGrid {
    grid-template-columns: 1fr;
  }
}