/**
 * Ninja Step Forms — Frontend stylesheet
 * =======================================
 * SCOPE: every rule lives under `.nsf-shell`. No global resets, no styling
 * outside the form shell. All visual values are CSS custom properties
 * (--nsf-*) with defaults matching the Get Ninja estimator design; the
 * Elementor widget controls feed overrides inline on the shell element.
 *
 * Design: white/slate background with subtle grid, left vertical stepper
 * rail, sticky top progress bar, centered 660px panel, fixed bottom nav.
 * Type: Montserrat headings / Lato body (system fallbacks).
 * RTL-safe: logical properties used throughout.
 */

.nsf-shell {
  /* ---------- Colors ---------- */
  --nsf-bg: #f8fafc;
  --nsf-bg-grid: rgba(15, 23, 42, 0.055);
  --nsf-surface: #ffffff;
  --nsf-text: #0f172a;
  --nsf-text-muted: #64748b;
  --nsf-text-faint: #94a3b8;
  --nsf-border: #e2e8f0;
  --nsf-border-strong: #cbd5e1;
  --nsf-brand: #f59e0b;
  --nsf-brand-dark: #b45309;
  --nsf-gradient-start: #fcdf87;
  --nsf-gradient-end: #fc9e19;
  --nsf-gradient: linear-gradient(135deg, var(--nsf-gradient-start) 0%, var(--nsf-gradient-end) 100%);
  --nsf-navy: #0f172a;
  --nsf-error: #dc2626;
  --nsf-error-bg: #fef2f2;
  --nsf-success: #16a34a;
  --nsf-success-bg: #f0fdf4;
  --nsf-warning: #d97706;
  --nsf-warning-bg: #fffbeb;
  --nsf-info-bg: #eff6ff;

  /* ---------- Typography ---------- */
  --nsf-font-heading: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --nsf-font-body: "Lato", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --nsf-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --nsf-font-size-base: 15px;
  --nsf-font-size-sm: 13px;
  --nsf-font-size-lg: 18px;

  /* ---------- Spacing ---------- */
  --nsf-space-xs: 4px;
  --nsf-space-sm: 8px;
  --nsf-space-md: 16px;
  --nsf-space-lg: 24px;
  --nsf-space-xl: 32px;
  --nsf-space-2xl: 48px;

  /* ---------- Radii ---------- */
  --nsf-radius-input: 6px;
  --nsf-radius-card: 12px;
  --nsf-radius-pill: 999px;

  /* ---------- Layout ---------- */
  --nsf-rail-width: 300px;
  --nsf-panel-max: 660px;
  --nsf-nav-height: 76px;
  --nsf-step-dot: 34px;

  /* ---------- Surfaces / chrome ---------- */
  --nsf-rail-bg: #ffffff;
  --nsf-progress-bg: rgba(255, 255, 255, 0.94);
  --nsf-nav-bg: rgba(255, 255, 255, 0.96);

  /* ---------- Shadows & focus ---------- */
  --nsf-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --nsf-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --nsf-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --nsf-focus-ring: rgba(245, 158, 11, 0.35);

  /* ---------- Shell base ---------- */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 100vh;
  background-color: var(--nsf-bg);
  background-image:
    linear-gradient(var(--nsf-bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--nsf-bg-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--nsf-text);
  font-family: var(--nsf-font-body);
  font-size: var(--nsf-font-size-base);
  line-height: 1.55;
  box-sizing: border-box;
}

.nsf-shell *,
.nsf-shell *::before,
.nsf-shell *::after {
  box-sizing: inherit;
}

/* Visually-hidden helper (a11y) */
.nsf-shell .nsf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hard hide: beats Elementor/Astra display utilities that may set display
   on nested sections/columns. */
.nsf-shell .nsf-panel[hidden],
.nsf-shell .nsf-field[hidden],
.nsf-shell [data-nsf-hidden][hidden] {
  display: none !important;
}

/* ================= Rail (stepper sidebar) ================= */

.nsf-shell .nsf-rail {
  width: var(--nsf-rail-width);
  flex: 0 0 var(--nsf-rail-width);
  background: var(--nsf-rail-bg);
  border-inline-end: 1px solid var(--nsf-border);
  padding: var(--nsf-space-xl) var(--nsf-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--nsf-space-xl);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 30;
}

.nsf-shell .nsf-rail-brand {
  display: flex;
  flex-direction: column;
  gap: var(--nsf-space-xs);
}

.nsf-shell .nsf-rail-logo {
  font-family: var(--nsf-font-heading);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--nsf-text);
  line-height: 1.1;
}

.nsf-shell .nsf-rail-logo .nsf-rail-logo-accent {
  background: var(--nsf-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nsf-shell .nsf-rail-logo-dot {
  color: var(--nsf-brand);
}

.nsf-shell .nsf-rail-logo-img {
  max-width: 180px;
  height: auto;
}

.nsf-shell .nsf-rail-kicker {
  font-family: var(--nsf-font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--nsf-brand-dark);
}

/* ---------- Step list ---------- */

.nsf-shell .nsf-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Vertical connecting line behind the dots */
.nsf-shell .nsf-steps-vertical::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--nsf-step-dot) / 2 - 1px);
  top: calc(var(--nsf-step-dot) / 2 + 6px);
  bottom: calc(var(--nsf-step-dot) / 2 + 6px);
  width: 2px;
  background: var(--nsf-border);
  border-radius: 2px;
}

.nsf-shell .nsf-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--nsf-space-md);
  padding-block: 10px;
}

.nsf-shell .nsf-step-btn {
  display: flex;
  align-items: center;
  gap: var(--nsf-space-md);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: default;
  width: 100%;
}

.nsf-shell .nsf-step-dot {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--nsf-step-dot);
  width: var(--nsf-step-dot);
  height: var(--nsf-step-dot);
  border-radius: 50%;
  border: 2px solid var(--nsf-border-strong);
  background: var(--nsf-surface);
  display: grid;
  place-items: center;
  font-family: var(--nsf-font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--nsf-text-faint);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

/* Upcoming step */
.nsf-shell .nsf-step .nsf-step-label {
  font-family: var(--nsf-font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--nsf-text-faint);
  line-height: var(--nsf-step-dot);
}

/* Current step: orange ring */
.nsf-shell .nsf-step.is-current .nsf-step-dot {
  border-color: var(--nsf-brand);
  color: var(--nsf-brand-dark);
  box-shadow: 0 0 0 5px var(--nsf-focus-ring);
}

.nsf-shell .nsf-step.is-current .nsf-step-label {
  color: var(--nsf-text);
  font-weight: 700;
}

/* Done step: gradient circle + check */
.nsf-shell .nsf-step.is-done .nsf-step-dot {
  background: var(--nsf-gradient);
  border-color: transparent;
  color: var(--nsf-navy);
}

.nsf-shell .nsf-step.is-done .nsf-step-dot .nsf-step-num {
  display: none;
}

.nsf-shell .nsf-step.is-done .nsf-step-dot::after {
  content: "\2713";
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.nsf-shell .nsf-step.is-done .nsf-step-label {
  color: var(--nsf-text-muted);
}

/* Rail footer */
.nsf-shell .nsf-rail-footer {
  margin-top: auto;
  padding-top: var(--nsf-space-lg);
  border-top: 1px solid var(--nsf-border);
  font-size: var(--nsf-font-size-sm);
  color: var(--nsf-text-muted);
  display: flex;
  flex-direction: column;
  gap: var(--nsf-space-sm);
}

.nsf-shell .nsf-rail-footer a {
  color: var(--nsf-brand-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ================= Main column ================= */

.nsf-shell .nsf-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--nsf-nav-height) + var(--nsf-space-md));
}

/* Static nav variant: no clearance needed */
.nsf-shell.nsf-nav-static .nsf-main {
  padding-bottom: 0;
}

/* ================= Sticky progress ================= */

.nsf-shell .nsf-progress {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--nsf-progress-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--nsf-border);
  padding: var(--nsf-space-md) var(--nsf-space-xl);
}

.nsf-shell .nsf-progress-inner {
  max-width: var(--nsf-panel-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--nsf-space-md);
}

.nsf-shell .nsf-progress-label {
  font-family: var(--nsf-font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--nsf-text);
  white-space: nowrap;
}

.nsf-shell .nsf-progress-track {
  position: relative;
  flex: 1 1 auto;
  height: 10px;
  border-radius: var(--nsf-radius-pill);
  background-color: var(--nsf-border);
  overflow: hidden;
}

/* Ticked track: fine vertical ticks over the whole bar */
.nsf-shell .nsf-progress-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.14) 0 2px,
    transparent 2px 14px
  );
  pointer-events: none;
}

.nsf-shell .nsf-progress-fill {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--nsf-gradient);
  border-radius: inherit;
  transition: width 0.45s ease;
}

.nsf-shell .nsf-progress-pct {
  font-family: var(--nsf-font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--nsf-text-muted);
  min-width: 44px;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* ================= Panels ================= */

.nsf-shell .nsf-panels {
  flex: 1 1 auto;
  padding: var(--nsf-space-2xl) var(--nsf-space-xl) var(--nsf-space-xl);
}

.nsf-shell .nsf-panel {
  max-width: var(--nsf-panel-max);
  margin-inline: auto;
}

.nsf-shell .nsf-panel-head {
  margin-bottom: var(--nsf-space-xl);
}

.nsf-shell .nsf-panel-title {
  font-family: var(--nsf-font-heading);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.25;
  color: var(--nsf-text);
  margin: 0 0 var(--nsf-space-sm);
}

/* Panel header: eyebrow, heading (with optional |accent| part), description. */
.nsf-shell .nsf-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nsf-text-muted);
  margin: 0 0 var(--nsf-space-sm);
}

.nsf-shell .nsf-heading {
  font-family: var(--nsf-font-heading);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.2;
  color: var(--nsf-text);
  margin: 0 0 var(--nsf-space-md);
}

.nsf-shell .nsf-heading-accent {
  background: var(--nsf-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nsf-shell .nsf-description {
  color: var(--nsf-text-muted);
  font-size: var(--nsf-font-size-base);
  margin: 0 0 var(--nsf-space-lg);
  max-width: 660px;
}

.nsf-shell .nsf-panel-sub {
  color: var(--nsf-text-muted);
  font-size: var(--nsf-font-size-base);
  margin: 0;
}

/* ================= Fixed bottom nav ================= */

.nsf-shell .nsf-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--nsf-nav-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--nsf-border);
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}

.nsf-shell .nsf-nav-inner {
  max-width: 1100px;
  margin-inline: auto;
  min-height: var(--nsf-nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nsf-space-md);
  padding: var(--nsf-space-sm) var(--nsf-space-xl) calc(var(--nsf-space-sm) + env(safe-area-inset-bottom));
}

.nsf-shell .nsf-nav-left {
  display: inline-flex;
  align-items: center;
  gap: var(--nsf-space-md);
}

/* Both nav buttons bottom-right; Back sits to the left of Continue. */
.nsf-shell .nsf-nav-right {
  display: inline-flex;
  align-items: center;
  gap: var(--nsf-space-sm);
  margin-inline-start: auto;
}

/* Mobile: center the Continue button. */
@media (max-width: 640px) {
  .nsf-shell .nsf-nav-inner {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  .nsf-shell .nsf-nav-right {
    margin-inline-start: 0;
  }
  .nsf-shell .nsf-saved-note {
    flex-basis: 100%;
  }
}

/* Static variant: nav sits in normal flow */
.nsf-shell.nsf-nav-static .nsf-nav {
  position: static;
  box-shadow: none;
}

.nsf-shell .nsf-saved-note {
  font-size: var(--nsf-font-size-sm);
  color: var(--nsf-text-faint);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.nsf-shell .nsf-saved-note.is-dirty {
  color: var(--nsf-warning);
}

/* ---------- Buttons ---------- */

.nsf-shell .nsf-btn {
  font-family: var(--nsf-font-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  border-radius: var(--nsf-radius-pill);
  padding: 14px 30px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Beat theme link/button resets (Astra/Elementor set text-decoration &
     colors on button/a): */
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.nsf-shell .nsf-btn:active {
  transform: translateY(1px);
}

.nsf-shell .nsf-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.nsf-shell .nsf-btn-continue,
.nsf-shell .nsf-btn-submit {
  background: var(--nsf-gradient);
  color: var(--nsf-navy) !important; /* theme button color overrides */
  box-shadow: 0 6px 18px rgba(252, 158, 25, 0.35);
}

.nsf-shell .nsf-btn-continue:hover:not([disabled]),
.nsf-shell .nsf-btn-submit:hover:not([disabled]) {
  box-shadow: 0 8px 22px rgba(252, 158, 25, 0.45);
}

.nsf-shell .nsf-btn-back {
  background: transparent;
  border-color: var(--nsf-border-strong);
  color: var(--nsf-text) !important; /* theme button color overrides */
}

.nsf-shell .nsf-btn-back:hover:not([disabled]) {
  border-color: var(--nsf-text-muted);
  background: var(--nsf-surface);
}

.nsf-shell .nsf-btn-small {
  padding: 9px 18px;
  font-size: 13px;
}

/* ================= Rail position variants ================= */

/* Right rail */
.nsf-shell.nsf-rail-right {
  flex-direction: row-reverse;
}

.nsf-shell.nsf-rail-right .nsf-rail {
  border-inline-end: 0;
  border-inline-start: 1px solid var(--nsf-border);
}

/* Top rail: horizontal bar across the top */
.nsf-shell.nsf-rail-top {
  flex-direction: column;
}

.nsf-shell.nsf-rail-top .nsf-rail,
.nsf-shell.nsf-rail-bottom .nsf-rail {
  width: 100%;
  flex: 0 0 auto;
  height: auto;
  position: static;
  border-inline-end: 0;
  border-bottom: 1px solid var(--nsf-border);
  flex-direction: row;
  align-items: center;
  gap: var(--nsf-space-xl);
  padding: var(--nsf-space-md) var(--nsf-space-xl);
  overflow-x: auto;
}

.nsf-shell.nsf-rail-top .nsf-rail-footer,
.nsf-shell.nsf-rail-bottom .nsf-rail-footer {
  margin-top: 0;
  margin-inline-start: auto;
  padding-top: 0;
  border-top: 0;
  border-inline-start: 1px solid var(--nsf-border);
  padding-inline-start: var(--nsf-space-lg);
  white-space: nowrap;
}

/* Bottom rail */
.nsf-shell.nsf-rail-bottom {
  flex-direction: column-reverse;
}

.nsf-shell.nsf-rail-bottom .nsf-rail {
  border-bottom: 0;
  border-top: 1px solid var(--nsf-border);
}

/* Hidden rail */
.nsf-shell.nsf-rail-hidden .nsf-rail {
  display: none;
}

/* ================= Stepper style variants ================= */

/* Horizontal steps (used by top/bottom rails and small screens) */
.nsf-shell.nsf-steps-horizontal .nsf-steps,
.nsf-shell.nsf-rail-top .nsf-steps,
.nsf-shell.nsf-rail-bottom .nsf-steps {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--nsf-space-lg);
}

.nsf-shell.nsf-steps-horizontal .nsf-steps-vertical::before,
.nsf-shell.nsf-rail-top .nsf-steps-vertical::before,
.nsf-shell.nsf-rail-bottom .nsf-steps-vertical::before {
  inset-inline-start: calc(var(--nsf-step-dot) / 2 + 6px);
  inset-inline-end: calc(var(--nsf-step-dot) / 2 + 6px);
  top: calc(var(--nsf-step-dot) / 2 - 1px);
  bottom: auto;
  width: auto;
  height: 2px;
}

.nsf-shell.nsf-steps-horizontal .nsf-step,
.nsf-shell.nsf-rail-top .nsf-step,
.nsf-shell.nsf-rail-bottom .nsf-step {
  padding-block: 0;
}

.nsf-shell.nsf-steps-horizontal .nsf-step-btn,
.nsf-shell.nsf-rail-top .nsf-step-btn,
.nsf-shell.nsf-rail-bottom .nsf-step-btn {
  flex-direction: column;
  gap: var(--nsf-space-sm);
  text-align: center;
  align-items: center;
}

.nsf-shell.nsf-steps-horizontal .nsf-step .nsf-step-label,
.nsf-shell.nsf-rail-top .nsf-step .nsf-step-label,
.nsf-shell.nsf-rail-bottom .nsf-step .nsf-step-label {
  line-height: 1.35;
  font-size: 12px;
  max-width: 110px;
}

/* Dots style: dots only, labels + numbers hidden (aria-label carries meaning) */
.nsf-shell.nsf-steps-dots .nsf-step-num {
  display: none;
}

.nsf-shell.nsf-steps-dots .nsf-step .nsf-step-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nsf-shell.nsf-steps-dots .nsf-steps-vertical::before {
  display: none;
}

.nsf-shell.nsf-steps-dots .nsf-step {
  padding-block: 6px;
}

/* Numbers style: numbered dots only, no connector line, no labels */
.nsf-shell.nsf-steps-numbers .nsf-steps-vertical::before {
  display: none;
}

.nsf-shell.nsf-steps-numbers .nsf-step .nsf-step-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nsf-shell.nsf-steps-numbers .nsf-step.is-done .nsf-step-dot .nsf-step-num {
  display: inline;
}

.nsf-shell.nsf-steps-numbers .nsf-step.is-done .nsf-step-dot::after {
  content: none;
}

/* ================= Fields ================= */

/* Phone field: small country-code select + number input in one row. */
.nsf-shell .nsf-tel-group {
  display: flex;
  gap: var(--nsf-space-sm);
  align-items: stretch;
}
.nsf-shell .nsf-tel-group .nsf-dial-code {
  flex: 0 0 110px;
  max-width: 110px;
}
.nsf-shell .nsf-tel-group input[type="tel"] {
  flex: 1 1 auto;
  min-width: 0;
}

/* Multi-column field grid: field wrappers carry nsf-width-{100,50,33}. */
.nsf-shell .nsf-fields {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--nsf-space-md) / -2);
}
.nsf-shell .nsf-field-wrap {
  padding: 0 calc(var(--nsf-space-md) / 2);
  margin-bottom: var(--nsf-space-lg);
  min-width: 0;
}
.nsf-shell .nsf-width-100 { flex: 0 0 100%; max-width: 100%; }
.nsf-shell .nsf-width-50  { flex: 0 0 50%; max-width: 50%; }
.nsf-shell .nsf-width-33  { flex: 0 0 33.3333%; max-width: 33.3333%; }
@media (max-width: 640px) {
  .nsf-shell .nsf-width-50,
  .nsf-shell .nsf-width-33 { flex-basis: 100%; max-width: 100%; }
}

.nsf-shell .nsf-field {
  margin-bottom: var(--nsf-space-lg);
}

.nsf-shell .nsf-field-label {
  display: block;
  font-family: var(--nsf-font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--nsf-text);
  margin-bottom: var(--nsf-space-sm);
}

/* Field hint: supports multi-line text (line breaks render as new lines). */
.nsf-shell .nsf-hint {
  font-size: var(--nsf-font-size-sm);
  color: var(--nsf-text-muted);
  margin: 0 0 var(--nsf-space-sm);
  white-space: pre-line;
}

.nsf-shell .nsf-required-mark {
  color: var(--nsf-error);
  font-weight: 700;
  margin-inline-start: 2px;
}

.nsf-shell .nsf-field-hint {
  font-size: var(--nsf-font-size-sm);
  color: var(--nsf-text-muted);
  margin-top: var(--nsf-space-xs);
  margin-bottom: var(--nsf-space-sm);
}

.nsf-shell .nsf-field-counter {
  font-size: var(--nsf-font-size-sm);
  color: var(--nsf-text-muted);
  margin-bottom: var(--nsf-space-sm);
  font-variant-numeric: tabular-nums;
}

.nsf-shell .nsf-field-counter strong {
  color: var(--nsf-text);
}

/* Inputs: beat Astra/Elementor UA-ish resets which set input/select/textarea
   background, border and font via low-specificity element selectors. */
.nsf-shell .nsf-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--nsf-border-strong);
  border-radius: var(--nsf-radius-input);
  background-color: var(--nsf-surface) !important;
  color: var(--nsf-text);
  font-family: var(--nsf-font-body);
  font-size: var(--nsf-font-size-base);
  line-height: 1.45;
  box-shadow: var(--nsf-shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nsf-shell textarea.nsf-input {
  min-height: 110px;
  resize: vertical;
}

.nsf-shell select.nsf-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--nsf-text-muted) 50%),
    linear-gradient(135deg, var(--nsf-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: 36px;
}

[dir="rtl"] .nsf-shell select.nsf-input {
  background-position: 20px 50%, 15px 50%;
}

.nsf-shell .nsf-input::placeholder {
  color: var(--nsf-text-faint);
  opacity: 1;
}

.nsf-shell .nsf-input:focus {
  outline: none;
  border-color: var(--nsf-brand);
  box-shadow: 0 0 0 3px var(--nsf-focus-ring);
}

.nsf-shell .nsf-field.is-invalid .nsf-input {
  border-color: var(--nsf-error);
}

.nsf-shell .nsf-field.is-invalid .nsf-input:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

.nsf-shell .nsf-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--nsf-error);
  font-size: var(--nsf-font-size-sm);
  margin-top: var(--nsf-space-xs);
}

/* The [hidden] attribute must win over the flex display above, otherwise the
   red "!" badge shows on every required field before any validation runs. */
.nsf-shell .nsf-error[hidden] {
  display: none;
}

.nsf-shell .nsf-error::before {
  content: "!";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nsf-error);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: inline-grid;
  place-items: center;
  margin-top: 2px;
}

.nsf-shell .nsf-field-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--nsf-warning-bg);
  border: 1px solid #fde68a;
  border-radius: var(--nsf-radius-input);
  color: #92400e;
  font-size: var(--nsf-font-size-sm);
  padding: var(--nsf-space-sm) var(--nsf-space-md);
  margin-top: var(--nsf-space-sm);
}

/* Two/three column rows */
.nsf-shell .nsf-row {
  display: flex;
  gap: var(--nsf-space-md);
  margin-bottom: var(--nsf-space-lg);
}

.nsf-shell .nsf-row .nsf-field {
  margin-bottom: 0;
}

.nsf-shell .nsf-col-50 { flex: 1 1 50%; min-width: 0; }
.nsf-shell .nsf-col-33 { flex: 1 1 33.333%; min-width: 0; }
.nsf-shell .nsf-col-66 { flex: 2 1 66.666%; min-width: 0; }

/* Honeypot: keep out of sight and out of tab order */
.nsf-shell .nsf-honeypot {
  position: absolute !important;
  inset-inline-start: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ================= Chips (pill radio / checkbox) ================= */

.nsf-shell .nsf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nsf-space-sm);
}

.nsf-shell .nsf-chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.nsf-shell .nsf-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.nsf-shell .nsf-chip > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--nsf-radius-pill);
  border: 1.5px solid var(--nsf-border-strong);
  background: var(--nsf-surface);
  font-family: var(--nsf-font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--nsf-text-muted);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

.nsf-shell .nsf-chip:hover > span {
  border-color: var(--nsf-brand);
  color: var(--nsf-text);
}

.nsf-shell .nsf-chip input:checked + span {
  background: var(--nsf-gradient);
  border-color: transparent;
  color: var(--nsf-navy);
  box-shadow: 0 4px 12px rgba(252, 158, 25, 0.35);
}

.nsf-shell .nsf-chip input:focus-visible + span {
  outline: none;
  box-shadow: 0 0 0 3px var(--nsf-focus-ring);
}

.nsf-shell .nsf-field.is-invalid .nsf-chip > span {
  border-color: var(--nsf-error);
}

/* ================= CSI grid ================= */

.nsf-shell .nsf-csi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--nsf-space-md);
}

/* Multi-select grid cards (template outputs .nsf-grid-cards): 2 per row. */
.nsf-shell .nsf-grid-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--nsf-space-md);
}
@media (max-width: 640px) {
  .nsf-shell .nsf-grid-cards {
    grid-template-columns: 1fr;
  }
}

.nsf-shell .nsf-grid-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--nsf-space-sm);
  padding: var(--nsf-space-md);
  border: 1px solid var(--nsf-border);
  border-radius: var(--nsf-radius-md);
  background: var(--nsf-surface);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.nsf-shell .nsf-grid-card:hover {
  border-color: var(--nsf-brand);
}
.nsf-shell .nsf-grid-card input[type="checkbox"] {
  accent-color: var(--nsf-brand);
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.nsf-shell .nsf-grid-card-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--nsf-text-faint);
  background: var(--nsf-bg);
  border-radius: 6px;
  padding: 2px 8px;
}
.nsf-shell .nsf-grid-card-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--nsf-text);
}
.nsf-shell .nsf-grid-card-check {
  margin-inline-start: auto;
  color: var(--nsf-brand-dark);
  font-weight: 800;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nsf-shell .nsf-grid-card:has(input:checked) {
  border-color: var(--nsf-brand);
  box-shadow: 0 0 0 3px var(--nsf-focus-ring);
}
.nsf-shell .nsf-grid-card:has(input:checked) .nsf-grid-card-check {
  opacity: 1;
}

.nsf-shell .nsf-csi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nsf-space-xs);
  text-align: start;
  padding: var(--nsf-space-md);
  border-radius: var(--nsf-radius-card);
  border: 1.5px solid var(--nsf-border);
  background: var(--nsf-surface);
  cursor: pointer;
  font: inherit;
  color: inherit;
  box-shadow: var(--nsf-shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.nsf-shell .nsf-csi-card:hover:not([disabled]) {
  border-color: var(--nsf-brand);
  transform: translateY(-2px);
  box-shadow: var(--nsf-shadow-md);
}

.nsf-shell .nsf-csi-card .nsf-csi-num {
  font-family: var(--nsf-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--nsf-text-faint);
  background: var(--nsf-bg);
  border: 1px solid var(--nsf-border);
  border-radius: 4px;
  padding: 2px 8px;
}

.nsf-shell .nsf-csi-card .nsf-csi-name {
  font-family: var(--nsf-font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--nsf-text);
  line-height: 1.35;
}

.nsf-shell .nsf-csi-card.is-selected {
  border-color: var(--nsf-brand);
  box-shadow: 0 0 0 3px var(--nsf-focus-ring), var(--nsf-shadow-md);
}

.nsf-shell .nsf-csi-card.is-selected .nsf-csi-num {
  background: var(--nsf-gradient);
  border-color: transparent;
  color: var(--nsf-navy);
}

.nsf-shell .nsf-csi-card.is-selected::after {
  content: "\2713";
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--nsf-gradient);
  color: var(--nsf-navy);
  font-size: 13px;
  font-weight: 800;
  display: grid;
  place-items: center;
  line-height: 1;
}

.nsf-shell .nsf-csi-card[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.nsf-shell .nsf-csi-other-wrap {
  margin-top: var(--nsf-space-md);
}

.nsf-shell .nsf-csi-counter {
  margin-top: var(--nsf-space-sm);
}

/* ================= Dropzone / file chips ================= */

.nsf-shell .nsf-dropzone {
  position: relative;
  border: 2px dashed var(--nsf-border-strong);
  border-radius: var(--nsf-radius-card);
  background: var(--nsf-surface);
  padding: var(--nsf-space-xl);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

/* Visually hide the native file input — the styled label opens the dialog. */
.nsf-shell .nsf-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nsf-shell .nsf-dropzone-label {
  display: block;
  cursor: pointer;
}

.nsf-shell .nsf-dropzone-kicker {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nsf-text-muted);
  margin-bottom: var(--nsf-space-sm);
}

/* "Take a photo" camera button inside image dropzones. */
.nsf-shell .nsf-dropzone {
  position: relative;
}
.nsf-shell .nsf-camera-btn {
  position: absolute;
  top: var(--nsf-space-sm);
  inset-inline-end: var(--nsf-space-sm);
  z-index: 2;
}

.nsf-shell .nsf-dropzone-title {
  display: block;
  font-weight: 600;
  color: var(--nsf-text);
  margin-bottom: var(--nsf-space-xs);
}

.nsf-shell .nsf-dropzone-hint {
  display: block;
  font-size: var(--nsf-font-size-sm);
  color: var(--nsf-text-muted);
}

.nsf-shell .nsf-dropzone:hover,
.nsf-shell .nsf-dropzone.is-dragover {
  border-color: var(--nsf-brand);
  background: var(--nsf-warning-bg);
}

.nsf-shell .nsf-dropzone-icon {
  font-family: var(--nsf-font-heading);
  font-weight: 800;
  font-size: 26px;
  color: var(--nsf-brand-dark);
  display: block;
  margin-bottom: var(--nsf-space-sm);
}

.nsf-shell .nsf-dropzone-text {
  font-weight: 600;
  color: var(--nsf-text);
}

.nsf-shell .nsf-dropzone-sub {
  font-size: var(--nsf-font-size-sm);
  color: var(--nsf-text-muted);
  margin-top: var(--nsf-space-xs);
}

.nsf-shell .nsf-file-list {
  display: flex;
  flex-direction: column;
  gap: var(--nsf-space-sm);
  margin-top: var(--nsf-space-md);
  padding: 0;
  list-style: none;
}

.nsf-shell .nsf-file-chip {
  display: flex;
  align-items: center;
  gap: var(--nsf-space-sm);
  background: var(--nsf-surface);
  border: 1px solid var(--nsf-border);
  border-radius: var(--nsf-radius-input);
  padding: var(--nsf-space-sm) var(--nsf-space-md);
  font-size: 14px;
  box-shadow: var(--nsf-shadow-sm);
}

.nsf-shell .nsf-file-chip .nsf-file-name {
  font-weight: 600;
  color: var(--nsf-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55%;
}

.nsf-shell .nsf-file-chip .nsf-file-size {
  color: var(--nsf-text-faint);
  font-size: var(--nsf-font-size-sm);
  font-variant-numeric: tabular-nums;
}

.nsf-shell .nsf-file-chip .nsf-file-status {
  margin-inline-start: auto;
  font-size: var(--nsf-font-size-sm);
  font-weight: 600;
}

.nsf-shell .nsf-file-chip.is-uploading .nsf-file-status { color: var(--nsf-warning); }
.nsf-shell .nsf-file-chip.is-ready .nsf-file-status { color: var(--nsf-success); }
.nsf-shell .nsf-file-chip.is-error .nsf-file-status { color: var(--nsf-error); }

.nsf-shell .nsf-file-progress {
  flex: 1 1 80px;
  height: 6px;
  border-radius: var(--nsf-radius-pill);
  background: var(--nsf-border);
  overflow: hidden;
  min-width: 60px;
}

.nsf-shell .nsf-file-progress > i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--nsf-gradient);
  border-radius: inherit;
  transition: width 0.2s ease;
}

/* Indeterminate shimmer while fetch upload is in flight */
.nsf-shell .nsf-file-chip.is-uploading .nsf-file-progress > i {
  width: 40% !important;
  animation: nsf-progress-slide 1.1s ease-in-out infinite;
}

@keyframes nsf-progress-slide {
  0% { margin-inline-start: -40%; }
  100% { margin-inline-start: 100%; }
}

.nsf-shell .nsf-file-remove {
  background: none;
  border: 0;
  color: var(--nsf-text-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.nsf-shell .nsf-file-remove:hover {
  color: var(--nsf-error);
  background: var(--nsf-error-bg);
}

.nsf-shell .nsf-ai-note {
  margin-top: var(--nsf-space-sm);
  font-size: var(--nsf-font-size-sm);
  border-radius: var(--nsf-radius-input);
  padding: var(--nsf-space-sm) var(--nsf-space-md);
}

.nsf-shell .nsf-ai-note.is-ok {
  background: var(--nsf-success-bg);
  border: 1px solid #bbf7d0;
  color: #166534;
}

.nsf-shell .nsf-ai-note.is-bad {
  background: var(--nsf-error-bg);
  border: 1px solid #fecaca;
  color: #991b1b;
}

/* ================= Matrix rows ================= */

.nsf-shell .nsf-matrix {
  display: flex;
  flex-direction: column;
  gap: var(--nsf-space-sm);
}

.nsf-shell .nsf-matrix-row {
  display: flex;
  align-items: center;
  gap: var(--nsf-space-md);
  background: var(--nsf-surface);
  border: 1px solid var(--nsf-border);
  border-radius: var(--nsf-radius-input);
  padding: var(--nsf-space-sm) var(--nsf-space-md);
  box-shadow: var(--nsf-shadow-sm);
}

.nsf-shell .nsf-matrix-row .nsf-matrix-label {
  flex: 1 1 auto;
  font-weight: 600;
  font-size: 14px;
}

.nsf-shell .nsf-matrix-row select.nsf-input {
  flex: 0 1 190px;
  width: auto;
}

/* ================= Tools matrix + stars ================= */

.nsf-shell .nsf-tools-matrix .nsf-tool-row {
  flex-wrap: wrap;
}

.nsf-shell .nsf-tool-check {
  display: inline-flex;
  align-items: center;
  gap: var(--nsf-space-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

.nsf-shell .nsf-tool-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--nsf-brand);
  cursor: pointer;
}

.nsf-shell .nsf-tool-rating {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: var(--nsf-space-md);
  flex-wrap: wrap;
  margin-top: var(--nsf-space-sm);
  padding-top: var(--nsf-space-sm);
  border-top: 1px dashed var(--nsf-border);
}

.nsf-shell .nsf-tool-other-text {
  flex: 1 1 180px;
}

.nsf-shell .nsf-stars {
  display: inline-flex;
  gap: 2px;
}

.nsf-shell .nsf-star {
  background: none;
  border: 0;
  padding: 2px;
  cursor: pointer;
  line-height: 0;
  border-radius: 4px;
}

.nsf-shell .nsf-star:focus-visible {
  outline: 2px solid var(--nsf-focus-ring);
  outline-offset: 1px;
}

.nsf-shell .nsf-star svg {
  width: 26px;
  height: 26px;
  display: block;
}

.nsf-shell .nsf-star svg path {
  fill: var(--nsf-border);
  stroke: var(--nsf-border-strong);
  stroke-width: 1;
  transition: fill 0.12s ease;
}

.nsf-shell .nsf-star.is-on svg path {
  fill: var(--nsf-brand);
  stroke: var(--nsf-brand-dark);
}

.nsf-shell .nsf-star:hover svg path {
  fill: var(--nsf-gradient-start);
}

.nsf-shell .nsf-years-label {
  font-size: var(--nsf-font-size-sm);
  color: var(--nsf-text-muted);
  font-weight: 600;
}

.nsf-shell .nsf-years-select {
  width: auto;
  flex: 0 1 170px;
}

/* ================= Speed test / gauge ================= */

.nsf-shell .nsf-speed-test {
  background: var(--nsf-surface);
  border: 1px solid var(--nsf-border);
  border-radius: var(--nsf-radius-card);
  padding: var(--nsf-space-lg);
  box-shadow: var(--nsf-shadow-md);
  text-align: center;
}

.nsf-shell .nsf-gauge-wrap {
  max-width: 320px;
  margin: 0 auto var(--nsf-space-md);
}

.nsf-shell .nsf-gauge-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

.nsf-shell .nsf-gauge-tick {
  stroke: var(--nsf-border-strong);
  stroke-width: 2;
}

.nsf-shell .nsf-gauge-tick-label {
  font-family: var(--nsf-font-mono);
  font-size: 10px;
  fill: var(--nsf-text-faint);
}

.nsf-shell .nsf-gauge-value {
  font-family: var(--nsf-font-heading);
  font-weight: 800;
  font-size: 30px;
  fill: var(--nsf-text);
}

.nsf-shell .nsf-gauge-unit {
  font-family: var(--nsf-font-heading);
  font-size: 12px;
  font-weight: 600;
  fill: var(--nsf-text-muted);
}

.nsf-shell .nsf-gauge-needle {
  stroke: var(--nsf-error);
  stroke-width: 3;
  stroke-linecap: round;
  transform-origin: 130px 130px;
  transform-box: view-box;
}

.nsf-shell .nsf-gauge-hub {
  fill: var(--nsf-navy);
}

.nsf-shell .nsf-speed-result {
  display: flex;
  justify-content: center;
  gap: var(--nsf-space-xl);
  margin: var(--nsf-space-md) 0;
  font-variant-numeric: tabular-nums;
}

.nsf-shell .nsf-speed-result .nsf-speed-stat {
  display: flex;
  flex-direction: column;
}

.nsf-shell .nsf-speed-result .nsf-speed-num {
  font-family: var(--nsf-font-heading);
  font-weight: 800;
  font-size: 24px;
  color: var(--nsf-text);
}

.nsf-shell .nsf-speed-result .nsf-speed-cap {
  font-size: var(--nsf-font-size-sm);
  color: var(--nsf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nsf-shell .nsf-speed-note {
  font-size: var(--nsf-font-size-sm);
  color: var(--nsf-text-muted);
  margin-top: var(--nsf-space-sm);
}

/* ================= Video recorder ================= */

.nsf-shell .nsf-video-recorder {
  background: var(--nsf-surface);
  border: 1px solid var(--nsf-border);
  border-radius: var(--nsf-radius-card);
  box-shadow: var(--nsf-shadow-md);
  overflow: hidden;
}

.nsf-shell .nsf-video-tabs {
  display: flex;
  border-bottom: 1px solid var(--nsf-border);
}

.nsf-shell .nsf-video-tab {
  flex: 1 1 50%;
  background: none;
  border: 0;
  padding: var(--nsf-space-md);
  font-family: var(--nsf-font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--nsf-text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}

.nsf-shell .nsf-video-tab.is-active {
  color: var(--nsf-text);
  border-bottom-color: var(--nsf-brand);
}

.nsf-shell .nsf-video-pane {
  padding: var(--nsf-space-lg);
}

.nsf-shell .nsf-video-stage {
  position: relative;
  border-radius: var(--nsf-radius-input);
  overflow: hidden;
  background: var(--nsf-navy);
  aspect-ratio: 16 / 9;
  margin-bottom: var(--nsf-space-md);
}

.nsf-shell .nsf-video-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--nsf-navy);
}

/* Mirror ONLY the live camera preview, never playback */
.nsf-shell .nsf-video-preview.is-live {
  transform: scaleX(-1);
}

.nsf-shell .nsf-video-timer {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  background: rgba(15, 23, 42, 0.8);
  color: #fff;
  font-family: var(--nsf-font-mono);
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--nsf-radius-pill);
  font-variant-numeric: tabular-nums;
  display: none;
}

.nsf-shell .nsf-video-timer.is-recording {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nsf-shell .nsf-video-timer.is-recording::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  animation: nsf-rec-blink 1s steps(2, start) infinite;
}

@keyframes nsf-rec-blink {
  to { visibility: hidden; }
}

.nsf-shell .nsf-video-controls {
  display: flex;
  gap: var(--nsf-space-sm);
  flex-wrap: wrap;
  align-items: center;
}

.nsf-shell .nsf-video-record-btn.is-recording {
  background: var(--nsf-error);
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.35);
}

.nsf-shell .nsf-video-upload-progress {
  height: 8px;
  border-radius: var(--nsf-radius-pill);
  background: var(--nsf-border);
  overflow: hidden;
  margin-top: var(--nsf-space-md);
  display: none;
}

.nsf-shell .nsf-video-upload-progress.is-active {
  display: block;
}

.nsf-shell .nsf-video-upload-progress > i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--nsf-gradient);
  transition: width 0.2s ease;
}

.nsf-shell .nsf-video-msg {
  font-size: var(--nsf-font-size-sm);
  margin-top: var(--nsf-space-sm);
}

.nsf-shell .nsf-video-msg.is-error {
  color: var(--nsf-error);
  background: var(--nsf-error-bg);
  border: 1px solid #fecaca;
  border-radius: var(--nsf-radius-input);
  padding: var(--nsf-space-sm) var(--nsf-space-md);
}

.nsf-shell .nsf-video-msg.is-ok {
  color: #166534;
  background: var(--nsf-success-bg);
  border: 1px solid #bbf7d0;
  border-radius: var(--nsf-radius-input);
  padding: var(--nsf-space-sm) var(--nsf-space-md);
}

/* ================= Review ================= */

.nsf-shell .nsf-review {
  display: flex;
  flex-direction: column;
  gap: var(--nsf-space-lg);
}

.nsf-shell .nsf-review-group {
  background: var(--nsf-surface);
  border: 1px solid var(--nsf-border);
  border-radius: var(--nsf-radius-card);
  box-shadow: var(--nsf-shadow-sm);
  overflow: hidden;
}

.nsf-shell .nsf-review-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nsf-space-md);
  padding: var(--nsf-space-md) var(--nsf-space-lg);
  background: var(--nsf-bg);
  border-bottom: 1px solid var(--nsf-border);
}

.nsf-shell .nsf-review-group-title {
  font-family: var(--nsf-font-heading);
  font-weight: 700;
  font-size: 15px;
  margin: 0;
}

.nsf-shell .nsf-review-edit {
  background: none;
  border: 1px solid var(--nsf-border-strong);
  border-radius: var(--nsf-radius-pill);
  padding: 6px 16px;
  font-family: var(--nsf-font-heading);
  font-weight: 600;
  font-size: 12px;
  color: var(--nsf-brand-dark);
  cursor: pointer;
}

.nsf-shell .nsf-review-edit:hover {
  border-color: var(--nsf-brand);
  background: var(--nsf-warning-bg);
}

.nsf-shell .nsf-review-rows {
  padding: var(--nsf-space-sm) var(--nsf-space-lg) var(--nsf-space-md);
}

.nsf-shell .nsf-review-row {
  display: flex;
  gap: var(--nsf-space-md);
  padding-block: var(--nsf-space-sm);
  border-bottom: 1px dashed var(--nsf-border);
  font-size: 14px;
}

.nsf-shell .nsf-review-row:last-child {
  border-bottom: 0;
}

.nsf-shell .nsf-review-key {
  flex: 0 0 38%;
  color: var(--nsf-text-muted);
  font-weight: 600;
}

.nsf-shell .nsf-review-val {
  flex: 1 1 auto;
  color: var(--nsf-text);
  overflow-wrap: anywhere;
}

.nsf-shell .nsf-review-val .nsf-review-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--nsf-bg);
  border: 1px solid var(--nsf-border);
  border-radius: var(--nsf-radius-pill);
  padding: 2px 12px;
  margin: 2px 4px 2px 0;
  font-size: 13px;
}

.nsf-shell .nsf-missing {
  color: var(--nsf-error) !important;
  font-weight: 700;
}

.nsf-shell .nsf-review-row.is-missing {
  background: var(--nsf-error-bg);
  margin-inline: calc(var(--nsf-space-lg) * -1);
  padding-inline: var(--nsf-space-lg);
  border-radius: var(--nsf-radius-input);
}

/* ================= Consent ================= */

.nsf-shell .nsf-consent {
  display: flex;
  gap: var(--nsf-space-sm);
  align-items: flex-start;
  background: var(--nsf-surface);
  border: 1px solid var(--nsf-border);
  border-radius: var(--nsf-radius-input);
  padding: var(--nsf-space-md);
  cursor: pointer;
  font-size: 14px;
}

.nsf-shell .nsf-consent input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--nsf-brand);
  flex: 0 0 auto;
  cursor: pointer;
}

.nsf-shell .nsf-field.is-invalid .nsf-consent {
  border-color: var(--nsf-error);
}

/* ================= Knockout / inline notices ================= */

.nsf-shell .nsf-notice {
  border-radius: var(--nsf-radius-input);
  padding: var(--nsf-space-md) var(--nsf-space-lg);
  margin-bottom: var(--nsf-space-lg);
  font-size: 14px;
  display: flex;
  gap: var(--nsf-space-md);
  align-items: flex-start;
  flex-wrap: wrap;
}

.nsf-shell .nsf-notice.is-warn {
  background: var(--nsf-warning-bg);
  border: 1px solid #fde68a;
  color: #92400e;
}

.nsf-shell .nsf-notice.is-block {
  background: var(--nsf-error-bg);
  border: 1px solid #fecaca;
  color: #991b1b;
}

.nsf-shell .nsf-notice .nsf-notice-actions {
  margin-inline-start: auto;
  display: flex;
  gap: var(--nsf-space-sm);
}

/* ================= Thank you ================= */

.nsf-shell .nsf-thankyou {
  max-width: var(--nsf-panel-max);
  margin: var(--nsf-space-2xl) auto;
  background: var(--nsf-surface);
  border: 1px solid var(--nsf-border);
  border-radius: var(--nsf-radius-card);
  box-shadow: var(--nsf-shadow-lg);
  padding: var(--nsf-space-2xl) var(--nsf-space-xl);
  text-align: center;
}

.nsf-shell .nsf-thankyou-check {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--nsf-gradient);
  color: var(--nsf-navy);
  font-size: 34px;
  font-weight: 800;
  display: inline-grid;
  place-items: center;
  margin-bottom: var(--nsf-space-lg);
  box-shadow: 0 8px 24px rgba(252, 158, 25, 0.4);
}

.nsf-shell .nsf-thankyou-title {
  font-family: var(--nsf-font-heading);
  font-weight: 800;
  font-size: 30px;
  margin: 0 0 var(--nsf-space-sm);
}

.nsf-shell .nsf-thankyou-msg {
  color: var(--nsf-text-muted);
  margin: 0 0 var(--nsf-space-lg);
}

.nsf-shell .nsf-thankyou-ref {
  display: inline-block;
  font-family: var(--nsf-font-mono);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  background: var(--nsf-bg);
  border: 1px dashed var(--nsf-border-strong);
  border-radius: var(--nsf-radius-input);
  padding: var(--nsf-space-sm) var(--nsf-space-lg);
  margin-bottom: var(--nsf-space-lg);
}

.nsf-shell .nsf-thankyou-redirect {
  font-size: var(--nsf-font-size-sm);
  color: var(--nsf-text-faint);
}

/* ================= Step transitions ================= */

.nsf-shell .nsf-panel.nsf-panel-enter {
  animation: nsf-panel-in 0.38s cubic-bezier(0.22, 0.8, 0.36, 1);
}

@keyframes nsf-panel-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= Responsive ================= */

/* <1024px: rail becomes a top bar, steps scroll horizontally */
@media (max-width: 1023px) {
  .nsf-shell {
    flex-direction: column;
  }

  .nsf-shell .nsf-rail {
    width: 100%;
    flex: 0 0 auto;
    height: auto;
    position: static;
    border-inline-end: 0;
    border-bottom: 1px solid var(--nsf-border);
    flex-direction: row;
    align-items: center;
    gap: var(--nsf-space-lg);
    padding: var(--nsf-space-md) var(--nsf-space-lg);
  }

  .nsf-shell .nsf-rail-brand {
    flex: 0 0 auto;
  }

  .nsf-shell .nsf-rail-logo {
    font-size: 17px;
  }

  .nsf-shell .nsf-rail-kicker {
    font-size: 9px;
  }

  .nsf-shell .nsf-steps {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--nsf-space-md);
    overflow-x: auto;
    flex: 1 1 auto;
    padding-bottom: var(--nsf-space-xs);
  }

  .nsf-shell .nsf-steps-vertical::before {
    inset-inline-start: calc(var(--nsf-step-dot) / 2 + 6px);
    inset-inline-end: calc(var(--nsf-step-dot) / 2 + 6px);
    top: calc(var(--nsf-step-dot) / 2 - 1px);
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .nsf-shell .nsf-step {
    padding-block: 0;
    flex: 0 0 auto;
  }

  .nsf-shell .nsf-step-btn {
    flex-direction: column;
    gap: var(--nsf-space-xs);
    align-items: center;
    text-align: center;
  }

  .nsf-shell .nsf-step .nsf-step-label {
    line-height: 1.3;
    font-size: 11px;
    max-width: 96px;
  }

  .nsf-shell .nsf-rail-footer {
    display: none;
  }

  .nsf-shell .nsf-panels {
    padding: var(--nsf-space-xl) var(--nsf-space-lg);
  }
}

/* <640px: single column fields, compact chrome */
@media (max-width: 639px) {
  .nsf-shell .nsf-row {
    flex-direction: column;
  }

  .nsf-shell .nsf-col-50,
  .nsf-shell .nsf-col-33,
  .nsf-shell .nsf-col-66 {
    flex: 1 1 100%;
  }

  .nsf-shell .nsf-csi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nsf-shell .nsf-rail {
    padding: var(--nsf-space-sm) var(--nsf-space-md);
    gap: var(--nsf-space-md);
  }

  .nsf-shell .nsf-rail-logo {
    font-size: 15px;
  }

  .nsf-shell .nsf-rail-kicker {
    display: none;
  }

  .nsf-shell .nsf-progress {
    padding: var(--nsf-space-sm) var(--nsf-space-md);
  }

  .nsf-shell .nsf-progress-label {
    font-size: 11px;
  }

  .nsf-shell .nsf-panels {
    padding: var(--nsf-space-lg) var(--nsf-space-md);
  }

  .nsf-shell .nsf-panel-title {
    font-size: 23px;
  }

  .nsf-shell .nsf-nav-inner {
    padding-inline: var(--nsf-space-md);
    gap: var(--nsf-space-sm);
    /* safe-area already applied via padding-bottom in base rule */
  }

  .nsf-shell .nsf-btn {
    padding: 13px 20px;
    font-size: 14px;
  }

  .nsf-shell .nsf-saved-note {
    display: none;
  }

  .nsf-shell .nsf-review-key {
    flex-basis: 34%;
  }
}

/* ================= Reduced motion ================= */

/* "Animation: off" behavior toggle — mirrors the reduced-motion rules. */
.nsf-shell.nsf-no-anim .nsf-panel.nsf-panel-enter {
  animation: none !important;
}

.nsf-shell.nsf-no-anim .nsf-progress-fill,
.nsf-shell.nsf-no-anim .nsf-btn,
.nsf-shell.nsf-no-anim .nsf-chip > span,
.nsf-shell.nsf-no-anim .nsf-csi-card,
.nsf-shell.nsf-no-anim .nsf-input {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .nsf-shell .nsf-panel.nsf-panel-enter {
    animation: none;
  }

  .nsf-shell .nsf-progress-fill,
  .nsf-shell .nsf-btn,
  .nsf-shell .nsf-chip > span,
  .nsf-shell .nsf-csi-card,
  .nsf-shell .nsf-input,
  .nsf-shell .nsf-file-progress > i,
  .nsf-shell .nsf-video-upload-progress > i {
    transition: none;
  }

  .nsf-shell .nsf-video-timer.is-recording::before,
  .nsf-shell .nsf-file-chip.is-uploading .nsf-file-progress > i {
    animation: none;
  }
}

/* Guard: if Elementor's entrance-animation JS never fires, the widget wrapper
   can be left with .elementor-invisible (visibility:hidden) and the whole form
   stays blank on the frontend. Never let the form stay invisible. */
.elementor-widget-nsf-form.elementor-invisible {
	visibility: visible !important;
	opacity: 1 !important;
}

/* ================= Full-width layout (v1.0.15) ================= */
/* Break out of narrow Elementor containers and use the full viewport width. */
.nsf-shell {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
}

/* Wider field grid gaps for breathing room */
.nsf-shell .nsf-fields {
  gap: var(--nsf-space-lg);
}

/* Phone field: ensure country select + number stay in one row */
.nsf-shell .nsf-tel-group {
  display: flex;
  gap: 8px;
  width: 100%;
}
.nsf-shell .nsf-tel-group select {
  flex: 0 0 110px;
  max-width: 110px;
}
.nsf-shell .nsf-tel-group input {
  flex: 1 1 auto;
  min-width: 0;
}

/* v1.0.16: Override old 660px panel cap from widget defaults (higher specificity than Elementor-generated CSS). */
/* v1.0.17: !important to guarantee override of Elementor's post-XXX.css */
body .elementor .nsf-shell .nsf-panels,
body .nsf-shell .nsf-panels {
  max-width: 1200px !important;
}

/* ===== UDA v3 design layer ===== */
.nsf-shell{--nsf-panel-max:820px}
.nsf-shell .nsf-nav{z-index:99990}
.nsf-shell .nsf-review-group{background:#fff;border:1px solid var(--nsf-border);border-radius:var(--nsf-radius-card);padding:18px 22px;margin-bottom:16px}
.nsf-shell .nsf-review-group-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.nsf-shell .nsf-review-group-title{font-family:var(--nsf-font-heading);font-size:15px;margin:0}
.nsf-shell .nsf-review-edit{background:none;border:0;color:var(--nsf-brand-dark);font-weight:700;cursor:pointer}
.nsf-shell .nsf-review-row{display:flex;gap:16px;padding:8px 0;border-top:1px solid var(--nsf-border)}
.nsf-shell .nsf-review-key{flex:0 0 38%;color:var(--nsf-text-muted);font-weight:700;font-size:13px}
.nsf-shell .nsf-review-val{flex:1;word-break:break-word}
.nsf-shell .nsf-video-preview{min-height:240px}
@media (max-width:640px){.nsf-shell .nsf-review-row{flex-direction:column;gap:2px}.nsf-shell .nsf-review-key{flex-basis:auto}}

/* ===== UDA 3.0.1: layout hardening (boxed themes, narrow containers) ===== */
/* Full-bleed: break out of boxed theme/Elementor containers. */
.nsf-shell{width:100vw;max-width:100vw;position:relative;left:50%;margin-left:-50vw;margin-right:-50vw}
body:has(.nsf-shell){overflow-x:clip}
.elementor-editor-active .nsf-shell{width:100%;max-width:100%;left:0;margin-left:0;margin-right:0}
.nsf-shell .nsf-main{min-width:0;flex:1 1 auto}
/* Reliable 12-col grid (replaces flex-wrap that overflowed when a gap was added). */
.nsf-shell .nsf-fields{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--nsf-space-lg,20px) var(--nsf-space-md,16px);margin:0}
.nsf-shell .nsf-field-wrap{padding:0;margin:0;min-width:0}
.nsf-shell .nsf-width-100{grid-column:span 12;max-width:none}
.nsf-shell .nsf-width-50{grid-column:span 6;max-width:none}
.nsf-shell .nsf-width-33{grid-column:span 4;max-width:none}
.nsf-shell .nsf-field-wrap input:not([type=checkbox]):not([type=radio]):not([type=file]),
.nsf-shell .nsf-field-wrap select,.nsf-shell .nsf-field-wrap textarea{width:100%;max-width:100%}
.nsf-shell .nsf-tel-group input{width:auto}
@media (max-width:700px){
  .nsf-shell .nsf-width-50,.nsf-shell .nsf-width-33{grid-column:span 12}
  .nsf-shell .nsf-panel-title{font-size:24px}
}

/* ===== UDA 3.0.2: buttons, gauge, video, card layout, circles, new fields ===== */
.nsf-shell .nsf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:10px;font-family:var(--nsf-font-heading);font-weight:700;font-size:15px;line-height:1.2;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:transform .15s,box-shadow .15s,filter .15s}
.nsf-shell .nsf-btn-primary,.nsf-shell button.nsf-speed-start,.nsf-shell button.nsf-video-record-btn{background:var(--nsf-gradient);color:#0f172a;border-color:transparent;box-shadow:0 6px 16px rgba(245,158,11,.35)}
.nsf-shell .nsf-btn-primary:hover,.nsf-shell button.nsf-speed-start:hover,.nsf-shell button.nsf-video-record-btn:hover{filter:brightness(1.04);transform:translateY(-1px);color:#0f172a}
.nsf-shell .nsf-btn-primary[disabled],.nsf-shell button.nsf-speed-start[disabled]{opacity:.7;cursor:wait;transform:none}
.nsf-shell .nsf-btn-ghost{background:#fff;color:#0f172a;border-color:var(--nsf-border);box-shadow:var(--nsf-shadow-sm)}
.nsf-shell .nsf-btn-ghost:hover{background:#f8fafc;color:#0f172a}
.nsf-shell button.nsf-video-record-btn.is-recording{background:#dc2626;color:#fff;box-shadow:0 6px 16px rgba(220,38,38,.3)}
.nsf-shell .nsf-hint h4{font-family:var(--nsf-font-heading);font-size:16px;margin:14px 0 6px;color:var(--nsf-text)}
.nsf-shell .nsf-hint h4:first-child{margin-top:0}
.nsf-shell .nsf-hint p{margin:0 0 6px}
.nsf-shell .nsf-hint ul,.nsf-shell .nsf-hint ol,.nsf-shell .nsf-description ul,.nsf-shell .nsf-description ol{margin:0 0 8px 22px;padding:0}
.nsf-shell .nsf-description p{margin:0 0 6px}
.nsf-shell .nsf-field-wrap:has(.nsf-video-recorder,.nsf-video)>.nsf-hint{background:#f8fafc;border:1px solid var(--nsf-border);border-radius:12px;padding:18px 22px;margin-bottom:14px}
/* speed test */
.nsf-shell .nsf-speed-test{background:#f8fafc;border:1px solid var(--nsf-border);border-radius:16px;padding:28px 20px;text-align:center}
.nsf-shell .nsf-gauge-wrap svg{width:100%;max-width:320px;height:auto;display:block;margin:0 auto 8px}
.nsf-shell .nsf-gauge-track{stroke:#e5e7eb}
.nsf-shell .nsf-gauge-fill{transition:stroke-dasharray .12s linear}
.nsf-shell .nsf-gauge-tick-label{fill:#94a3b8;font-size:10px;font-family:var(--nsf-font-body)}
.nsf-shell .nsf-gauge-value{fill:var(--nsf-text);font-size:34px;font-weight:800;font-family:var(--nsf-font-heading)}
.nsf-shell .nsf-gauge-unit{fill:#94a3b8;font-size:12px;letter-spacing:.2em}
.nsf-shell .nsf-gauge-ping{fill:#94a3b8;font-size:12px}
.nsf-shell .nsf-gauge-needle{stroke:#334155;stroke-width:3;stroke-linecap:round}
.nsf-shell .nsf-gauge-hub{fill:#fff;stroke:#334155;stroke-width:3}
.nsf-shell .nsf-speed-result,.nsf-shell .nsf-speed-note{display:block;margin:12px 0 0;color:var(--nsf-text-muted);font-size:14px;background:none;border:0;padding:0}
/* video */
.nsf-shell .nsf-video-tabs{display:flex;gap:4px;background:#e2e8f0;border-radius:12px;padding:4px;margin-bottom:14px}
.nsf-shell .nsf-video-tab{flex:1 1 50%;border:0;border-bottom:0;margin:0;padding:11px 12px;border-radius:9px;background:transparent;color:#475569;font-weight:700;font-size:14px;cursor:pointer}
.nsf-shell .nsf-video-tab.is-active{background:#fff;color:#0f172a;box-shadow:0 1px 3px rgba(15,23,42,.15)}
.nsf-shell .nsf-video-preview{width:100%;aspect-ratio:16/9;object-fit:cover;background:#111;border-radius:16px;display:block;margin-bottom:12px}
.nsf-shell .nsf-video-preview:not(.is-live):not([src]){display:none}
.nsf-shell .nsf-video-preview.is-live{transform:scaleX(-1)}
.nsf-shell .nsf-video-pane-link{background:#f8fafc;border:1px solid var(--nsf-border);border-radius:12px;padding:16px 18px}
.nsf-shell .nsf-video-link-note{margin:0 0 12px;color:var(--nsf-text-muted);font-size:14px;line-height:1.5}
.nsf-shell .nsf-video-link-note strong{color:var(--nsf-text-muted)}
/* CSI native checkbox stays hidden: the card itself is the control */
.nsf-shell .nsf-csi-card>input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
/* new fields */
.nsf-shell .nsf-password{position:relative}
.nsf-shell .nsf-password .nsf-input{padding-right:46px}
.nsf-shell .nsf-pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:#6b7280;cursor:pointer;padding:6px;line-height:0;box-shadow:none}
.nsf-shell .nsf-pw-toggle.is-on{color:var(--nsf-brand-dark)}
.nsf-shell .nsf-info-box{background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:16px 18px;color:var(--nsf-text)}
.nsf-shell .nsf-info-title{display:block;font-family:var(--nsf-font-heading);margin-bottom:4px}
.nsf-shell .nsf-info-box p{margin:0 0 4px}
.nsf-shell .nsf-extra-countries{padding:14px 18px;border-top:1px solid var(--nsf-border)}
.nsf-shell .nsf-extra-title{font-weight:700;margin:0 0 10px}
.nsf-shell .nsf-extra-row{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:8px;align-items:center;margin-bottom:8px}
.nsf-shell .nsf-extra-remove{width:36px;height:36px;border:1px solid var(--nsf-border);background:#fff;border-radius:8px;cursor:pointer;font-size:20px;line-height:1;color:#475569}
@media (max-width:600px){.nsf-shell .nsf-extra-row{grid-template-columns:auto 1fr auto}.nsf-shell .nsf-extra-row .nsf-extra-years{grid-column:2/3}}
/* step circles (progress style 2) */
.nsf-shell .nsf-circles{list-style:none;display:flex;justify-content:center;align-items:center;margin:0 auto 22px;padding:0}
.nsf-shell .nsf-circle{display:flex;align-items:center;margin:0;padding:0}
.nsf-shell .nsf-circle:not(:last-child)::after{content:"";width:34px;height:2px;background:#e5e7eb;margin:0 6px}
.nsf-shell .nsf-circle.is-done:not(:last-child)::after{background:#22c55e}
.nsf-shell .nsf-circle-dot{width:32px;height:32px;border-radius:50%;background:#eef0f4;color:#475569;font-weight:700;font-size:13px;display:grid;place-items:center}
.nsf-shell .nsf-circle.is-current .nsf-circle-dot{background:#f97316;color:#fff;box-shadow:0 0 0 4px rgba(249,115,22,.18)}
.nsf-shell .nsf-circle.is-done .nsf-circle-dot{background:#22c55e;color:#fff}
.nsf-shell .nsf-circle-check{display:none}
.nsf-shell .nsf-circle.is-done .nsf-circle-check{display:block}
.nsf-shell .nsf-circle.is-done .nsf-circle-num{display:none}
.nsf-shell.nsf-pstyle-circles .nsf-progress{display:none}
.nsf-shell.nsf-pstyle-circles .nsf-circles{padding-top:24px}
.nsf-shell.nsf-pstyle-circles.nsf-layout-rail .nsf-circles{position:relative;z-index:1}
/* centered card layout (registration style) */
.nsf-shell.nsf-layout-card{width:100%;max-width:none;left:0;margin-left:0;margin-right:0;display:block;background:transparent;min-height:0;padding:28px 16px}
.nsf-shell.nsf-layout-card .nsf-rail{display:none}
.nsf-shell.nsf-layout-card .nsf-card-head{text-align:center;max-width:640px;margin:0 auto 18px}
.nsf-shell.nsf-layout-card .nsf-card-title{font-family:var(--nsf-font-heading);font-size:30px;font-weight:800;margin:0 0 6px;color:var(--nsf-text)}
.nsf-shell.nsf-layout-card .nsf-card-subtitle{margin:0;color:var(--nsf-text-muted)}
.nsf-shell.nsf-layout-card .nsf-main{max-width:var(--nsf-panel-max,640px);margin:0 auto;background:#fff;border:1px solid var(--nsf-border);border-radius:16px;padding:28px 30px;box-shadow:var(--nsf-shadow-sm);margin-left:auto}
.nsf-shell.nsf-layout-card .nsf-panel{padding:0;margin:0;max-width:none}
.nsf-shell.nsf-layout-card .nsf-heading{font-size:21px}
.nsf-shell.nsf-layout-card .nsf-nav{position:static;left:auto;right:auto;bottom:auto;top:auto;width:auto;background:none;border:0;border-top:1px solid var(--nsf-border);box-shadow:none;margin-top:26px;padding:20px 0 0;min-height:0}
.nsf-shell.nsf-layout-card .nsf-nav-inner{padding:0;max-width:none}
.nsf-shell.nsf-layout-card .nsf-saved{display:none}
.nsf-shell.nsf-layout-card .nsf-nav-right{width:100%;display:flex;justify-content:space-between;gap:12px}
.nsf-shell.nsf-layout-card .nsf-progress{max-width:640px;margin:0 auto 14px}

/* ===== UDA 3.0.3: camera, small buttons ===== */
.nsf-shell .nsf-btn-small{padding:9px 16px;font-size:14px;border-radius:9px}
.nsf-shell .nsf-camera-btn{background:var(--nsf-gradient);color:#0f172a;border:0;box-shadow:0 4px 12px rgba(245,158,11,.35)}
.nsf-shell .nsf-camera-btn:hover{filter:brightness(1.05);color:#0f172a}
.nsf-cam-modal{position:fixed;inset:0;z-index:100001;background:rgba(15,23,42,.78);display:flex;align-items:center;justify-content:center;padding:16px}
.nsf-cam-box{background:#fff;border-radius:16px;padding:16px;width:100%;max-width:520px;box-shadow:0 24px 60px rgba(0,0,0,.4);font-family:var(--nsf-font-body,system-ui,sans-serif)}
.nsf-cam-video{width:100%;aspect-ratio:4/3;object-fit:cover;background:#111;border-radius:12px;display:block}
.nsf-cam-video.is-mirrored{transform:scaleX(-1)}
.nsf-cam-msg{margin:10px 0 0;color:#dc2626;font-size:14px;min-height:1px}
.nsf-cam-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
.nsf-cam-modal .nsf-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;border-radius:10px;font-weight:700;font-size:15px;cursor:pointer;border:1px solid #e2e8f0;background:#fff;color:#0f172a}
.nsf-cam-modal .nsf-btn-primary{background:linear-gradient(135deg,#fcdf87,#fc9e19);border-color:transparent}
.nsf-cam-modal .nsf-btn[disabled]{opacity:.5;cursor:not-allowed}
/* review cards: readable titles regardless of theme heading colours */
.nsf-shell .nsf-review-group{padding:0;overflow:hidden}
.nsf-shell .nsf-review-group-head{margin-bottom:0;padding:14px 22px;background:#f8fafc;border-bottom:1px solid var(--nsf-border)}
.nsf-shell .nsf-review-group-title{color:var(--nsf-text,#0f172a)!important;text-shadow:none}
.nsf-shell .nsf-review-rows{padding:4px 22px 10px}
.nsf-shell .nsf-review-row:first-child{border-top:0}
.nsf-shell .nsf-review-edit{color:#b45309}

/* ===== UDA 3.0.5: video stage, timer, 3-2-1 countdown ===== */
.nsf-shell .nsf-video-stage{position:relative;aspect-ratio:16/9;background:#0f172a;border-radius:16px;overflow:hidden;margin-bottom:14px}
.nsf-shell .nsf-video-stage .nsf-video-preview{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:0;object-fit:cover;display:block}
.nsf-shell .nsf-video-stage .nsf-video-preview:not(.is-live):not([src]){display:block;background:#0f172a}
.nsf-shell .nsf-video-idle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:14px;text-align:center;padding:16px}
.nsf-shell .nsf-video-stage .nsf-video-timer{position:absolute;top:12px;right:12px;left:auto;inset-inline-end:12px;z-index:3;display:inline-flex;align-items:center;gap:8px;background:rgba(15,23,42,.82);color:#fff;font:700 15px/1 var(--nsf-font-mono,ui-monospace,monospace);padding:7px 14px;border-radius:999px;font-variant-numeric:tabular-nums}
.nsf-shell .nsf-video-stage .nsf-video-timer.is-recording::before{content:"";width:9px;height:9px;border-radius:50%;background:#ef4444;animation:nsf-rec-blink 1s steps(2,start) infinite}
.nsf-shell .nsf-video-stage .nsf-video-timer.is-warning{background:#b91c1c}
.nsf-shell .nsf-video-countdown{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(15,23,42,.55);color:#fff}
.nsf-shell .nsf-video-countdown[hidden]{display:none}
.nsf-shell .nsf-video-count-label{font-size:16px;letter-spacing:.04em;text-transform:uppercase;opacity:.9}
.nsf-shell .nsf-video-count-num{font:800 clamp(72px,18vw,140px)/1 var(--nsf-font-heading,system-ui);text-shadow:0 4px 24px rgba(0,0,0,.45)}
.nsf-shell .nsf-video-count-num.is-pop{animation:nsf-count-pop .9s ease-out}
@keyframes nsf-count-pop{0%{transform:scale(1.5);opacity:0}25%{opacity:1}100%{transform:scale(1);opacity:1}}
.nsf-shell .nsf-video-record-btn.is-cancel{background:#fff;color:#0f172a;border:1px solid var(--nsf-border);box-shadow:var(--nsf-shadow-sm)}
@media (prefers-reduced-motion:reduce){.nsf-shell .nsf-video-count-num.is-pop{animation:none}}