@import url('/brand-theme.css?v=20261022nexus1');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* Color overrides only for the current registration form and earlier wizard.
   All fields, typography, dimensions and submit handlers stay with n8n. */
:root {
  --navy: var(--brand-text);
  --ink: var(--brand-text);
  --blue: var(--brand-blue);
  --teal: var(--brand-action);
  --muted: var(--brand-muted);
  --line: var(--brand-border);
  --red: var(--brand-error);
  --p1: var(--brand-action);
  --p2: var(--brand-blue);
  --cyan: var(--brand-action);
  color-scheme: dark;
}
body {
  /* Preserve the existing injected reading font. */
  font-family: "Manrope", system-ui, sans-serif;
  background: var(--brand-aurora), var(--brand-bg);
  color: var(--brand-text);
}
body .panel {
  background: radial-gradient(ellipse at 95% 0, rgba(139, 92, 246, .10), transparent 65%), rgba(11, 16, 28, .96);
  border-color: var(--brand-border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.header, .brand, .question, .nav { border-color: var(--brand-line); }
.brand-name, .brand b, .q-label, label { color: var(--brand-text); }
.brand small, .sub, .help, .q-help, .other-label, .done p, #done p { color: var(--brand-body); }
.brand .logo {
  background: linear-gradient(135deg, #173563, #263157);
  color: var(--brand-action);
}
h1 {
  color: var(--brand-text) !important;
  -webkit-text-fill-color: var(--brand-text) !important;
  background-image: none !important;
}
.eyebrow { color: var(--brand-action); }
.step-pill, .tags span {
  color: var(--brand-body);
  background-color: var(--brand-surface);
  border-color: var(--brand-border);
}
.progress { background-color: var(--brand-raised); }
.progress span { background-image: var(--brand-heading-gradient); }
input, textarea, select, .input, .textarea {
  background-color: var(--brand-surface);
  color: var(--brand-text);
  border-color: var(--brand-input-border);
  caret-color: var(--brand-action);
}
input::placeholder, textarea::placeholder { color: var(--brand-muted); opacity: 1; }
input:focus, textarea:focus, select:focus, .input:focus, .textarea:focus {
  border-color: var(--brand-action);
  box-shadow: 0 0 0 3px rgba(0, 240, 255, .12);
}
input:-webkit-autofill {
  -webkit-text-fill-color: var(--brand-text);
  -webkit-box-shadow: 0 0 0 1000px var(--brand-surface) inset;
  caret-color: var(--brand-action);
}
.option {
  background-color: var(--brand-surface);
  color: var(--brand-body);
  border-color: var(--brand-input-border);
}
.option:hover { background-color: var(--brand-raised); border-color: var(--brand-input-border); }
.option.selected {
  background-image: linear-gradient(135deg, rgba(0, 240, 255, .12), rgba(139, 92, 246, .14));
  border-color: var(--brand-action);
  color: var(--brand-text);
}
.mark { background-color: var(--brand-surface); border-color: var(--brand-input-border); color: var(--brand-bg); }
.option.selected .mark { background-image: linear-gradient(135deg, var(--brand-action), #38bdf8); }
.radio.selected .mark { background-color: var(--brand-bg); border-color: var(--brand-action); }
.notice { background-color: rgba(139, 92, 246, .10); border-color: rgba(139, 92, 246, .25); color: var(--brand-body); }
#submitBtn, .btn-next {
  background: var(--brand-action);
  color: var(--brand-bg);
  border-color: var(--brand-action);
  box-shadow: 0 10px 25px rgba(0, 240, 255, .12);
}
#submitBtn:hover, .btn-next:hover { background: var(--brand-action-hover); color: var(--brand-bg); }
.btn-back { background-color: var(--brand-surface); border-color: var(--brand-border); color: var(--brand-body); }
.toast { background-color: var(--brand-raised); color: var(--brand-text); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.done-mark, .tick { background: #10322e; color: var(--brand-success); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.req, #error, .q-error { color: var(--brand-error); }
input:user-invalid, textarea:user-invalid, [aria-invalid="true"], .question.invalid .input, .question.invalid .textarea { border-color: var(--brand-error); }
.option:focus-visible, .btn:focus-visible, button:focus-visible, input:focus-visible, a:focus-visible { outline-color: var(--brand-action); }
::selection { background: rgba(59, 130, 246, .45); color: var(--brand-text); }

/* Preserve the previous wizard's existing type and accessibility rules. */
.input, .textarea, .option, .btn { font-family: inherit; }
@media (max-width: 720px) { .input, .textarea, .option, .btn { font-size: 16px; } }
.q-error { margin: 10px 0 0; font-size: 14px; line-height: 1.5; font-weight: 600; }
.q-error[hidden] { display: none; }
.option:focus-visible, .btn:focus-visible { outline: 3px solid var(--brand-action); outline-offset: 3px; }
#stepTitle:focus { outline: none; }

/* Lucian #244 error-summary pattern, adapted for existing n8n fields.
   MIT attribution: /licenses/lucian-uxui.txt. */
.form-error-summary { grid-column: 1 / -1; padding: 14px 16px; border: 1px solid #a45b72; border-radius: 12px; background: #291824; color: var(--brand-error); }
.form-error-summary strong { display: block; font-size: 15px; line-height: 1.5; }
.form-error-summary ul { margin: 6px 0 0; padding-left: 20px; }
.form-error-summary a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-error); font-size: 14px; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px; }
.field-error { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; color: var(--brand-error); font: 600 14px/1.5 "Manrope", system-ui, sans-serif; }
.field-error-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; flex: 0 0 18px; border-radius: 50%; background: #472b3a; color: var(--brand-error); font-size: 12px; line-height: 1; }
.field-error[hidden], .form-error-summary[hidden] { display: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--brand-action); outline-offset: 3px; }
@media (max-width: 720px) { #registerForm input, #registerForm select, #registerForm textarea { font-size: 16px; } }