/* Accent color: Global Settings › Appearance sets --formglut-admin-accent; the shades follow it. */
:root {
  --fg-accent: var(--formglut-admin-accent, #e94560);
  --fg-accent-dark: color-mix(in srgb, var(--fg-accent) 82%, #000);
  --fg-accent-light: color-mix(in srgb, var(--fg-accent) 65%, #fff);
  --fg-accent-border: color-mix(in srgb, var(--fg-accent) 30%, #fff);
  --fg-accent-soft: color-mix(in srgb, var(--fg-accent) 8%, #fff);
  --fg-accent-softer: color-mix(in srgb, var(--fg-accent) 4%, #fff);
}

/* Dark header shared by the form editor and the form settings page */
.fg-editor-header {
  background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; height: 64px; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.fg-editor-header-left { display: flex; align-items: center; gap: 12px; }
.fg-editor-back {
  display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.7);
  text-decoration: none; font-size: 13px; padding: 7px 14px; border-radius: 8px;
  transition: all 0.2s;
}
.fg-editor-back:hover { background: rgba(255,255,255,0.1); color: #fff; }
.fg-editor-header input.fg-editor-title-input {
  border: none; outline: none; box-shadow: none; font-size: 16px; font-weight: 600;
  color: #fff; padding: 6px 12px; border-radius: 6px; width: 280px; min-height: 0; height: auto;
  background: rgba(255,255,255,0.08);
}
.fg-editor-header input.fg-editor-title-input:read-only { cursor: default; background: rgba(255,255,255,0.08); color: #fff; }
.fg-editor-header input.fg-editor-title-input::placeholder { color: rgba(255,255,255,0.4); }
.fg-editor-header input.fg-editor-title-input:focus:not(:read-only) { background: rgba(255,255,255,0.12); }
.fg-editor-header-center { display: flex; gap: 2px; background: rgba(255,255,255,0.06); border-radius: 8px; padding: 3px; }
.fg-editor-tab {
  padding: 7px 18px; border-radius: 6px; font-size: 13px; font-weight: 500;
  cursor: pointer; color: rgba(255,255,255,0.65); text-decoration: none;
  border: none; background: none; transition: all 0.2s;
}
.fg-editor-tab:hover { background: rgba(255,255,255,0.08); color: #fff; }
.fg-editor-tab.active { background: var(--fg-accent); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--fg-accent) 30%, transparent); }
.fg-editor-header-right { display: flex; gap: 8px; align-items: center; }


/* Buttons in the dark bar: keep disabled ones readable instead of light-grey with dark text */
.fg-editor-header .ant-btn:disabled,
.fg-editor-header .ant-btn.ant-btn-primary:disabled {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.5) !important;
}
.fg-editor-header .ant-btn-primary:not(:disabled) { color: #fff; }