/* ══════════════════════════════════════════════════════════════
   inscription.css — Night Kitchen (refonte premium)
   Dark par défaut · overrides light en bas
   SVG uniquement (aucun émoji comme icône)
   ══════════════════════════════════════════════════════════════ */

body, html { background: var(--bg-page) !important; }

/* ── PAGE SHELL ─────────────────────────────────────────────── */
.ni {
  min-height: 100vh;
  background: var(--bg-page);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  padding: 80px 16px 60px;
  isolation: isolate;
}

/* Grille de points subtile */
.ni-grid {
  position: fixed; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 85%);
}

/* Mesh orbs flous qui dérivent */
.ni-mesh {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.ni-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.55;
  animation: niOrbDrift 18s ease-in-out infinite;
}
.ni-orb--a {
  width: 520px; height: 520px; top: -160px; left: -140px;
  background: radial-gradient(circle at 30% 30%, rgba(52,211,153,0.8), transparent 70%);
}
.ni-orb--b {
  width: 460px; height: 460px; bottom: -140px; right: -120px;
  background: radial-gradient(circle at 50% 50%, rgba(251,191,36,0.5), transparent 70%);
  animation-delay: -6s; opacity: 0.4;
}
.ni-orb--c {
  width: 380px; height: 380px; top: 35%; left: 40%;
  background: radial-gradient(circle at 50% 50%, rgba(16,185,129,0.45), transparent 70%);
  animation-delay: -10s; opacity: 0.35;
}
@keyframes niOrbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -20px) scale(1.05); }
  66%      { transform: translate(-30px, 30px) scale(0.95); }
}

/* Grain léger */
.ni-grain {
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: 0.05;
  z-index: -1;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ── WRAPPER ────────────────────────────────────────────────── */
.ni-wrap {
  width: 100%; max-width: 500px;
  position: relative; z-index: 1;
}

/* ── BRAND ──────────────────────────────────────────────────── */
.ni-brand {
  text-align: center; margin-bottom: 32px;
  animation: niUp .55s cubic-bezier(.22,.61,.36,1) both;
}
.ni-brand-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.2);
  font-family: 'Poppins', sans-serif;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--g, #34d399);
  margin-bottom: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ni-eyebrow-ico { width: 14px; height: 14px; color: var(--g, #34d399); }
.ni-brand-title {
  font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 900;
  color: var(--text-primary); letter-spacing: -1px; line-height: 1.05;
}
.ni-brand-title span {
  background: linear-gradient(135deg, var(--g, #34d399), var(--g2, #10b981));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ni-brand-sub {
  font-family: 'DM Sans', sans-serif; font-size: 13.5px;
  color: var(--text-muted); margin-top: 8px;
}

/* ── PROGRESS ──────────────────────────────────────────────── */
.ni-progress {
  margin-bottom: 28px;
  animation: niUp .55s cubic-bezier(.22,.61,.36,1) .05s both;
}
.ni-steps {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; gap: 6px;
}
.ni-step-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 1;
}
.ni-step-dot {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.35);
  transition: all .35s cubic-bezier(.34,1.4,.64,1);
  position: relative;
}
.ni-step-dot-ico {
  width: 18px; height: 18px;
  transition: opacity .3s ease, transform .3s ease;
}
.ni-step-dot.active {
  background: linear-gradient(135deg, rgba(52,211,153,0.18), rgba(52,211,153,0.06));
  border-color: rgba(52,211,153,0.45);
  color: var(--g, #34d399);
  box-shadow:
    0 0 0 4px rgba(52,211,153,0.08),
    0 0 22px rgba(52,211,153,0.35);
  transform: scale(1.04);
}
.ni-step-dot.done {
  background: linear-gradient(135deg, var(--g, #34d399), var(--g2, #10b981));
  border-color: transparent;
  color: #03150a;
  box-shadow: 0 6px 18px rgba(52,211,153,0.4);
}
.ni-step-dot.done .ni-step-dot-ico { transform: scale(1.1); }
.ni-step-lbl {
  font-family: 'Poppins', sans-serif; font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.3px;
  color: rgba(255,255,255,0.32); transition: color .3s; white-space: nowrap;
}
.ni-step-item.active .ni-step-lbl { color: var(--g, #34d399); }
.ni-step-item.done .ni-step-lbl { color: rgba(52,211,153,0.55); }

.ni-step-line {
  flex: 1; height: 2px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  margin-top: -16px;
  position: relative; overflow: hidden;
}
.ni-step-line-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: linear-gradient(90deg, var(--g2, #10b981), var(--g, #34d399));
  width: 0%; transition: width .55s cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 0 10px rgba(52,211,153,0.55);
}

.ni-bar-track {
  height: 4px; background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.ni-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--g, #34d399), var(--g2, #10b981), #fbbf24);
  background-size: 200% 100%;
  animation: niBarShine 3s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(52,211,153,0.5);
  transition: width .55s cubic-bezier(.4,0,.2,1);
  width: 25%;
}
@keyframes niBarShine {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}

/* ── CARD ──────────────────────────────────────────────────── */
.ni-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.015), transparent 60%),
    rgba(6,18,12,0.65);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 28px;
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  overflow: hidden;
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.02);
  animation: niUp .55s cubic-bezier(.22,.61,.36,1) .12s both;
}
.ni-card::before {
  content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52,211,153,0.5), transparent);
}
.ni-card-shine {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(52,211,153,0.05) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: niCardShine 10s ease-in-out infinite;
}
@keyframes niCardShine {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}
.ni-card-wm {
  position: absolute; bottom: -32px; right: -20px;
  width: 180px; height: 180px;
  color: var(--g, #34d399);
  opacity: 0.04;
  pointer-events: none;
  transition: opacity .5s ease, transform .6s ease;
}

/* ── FORM / STEP ──────────────────────────────────────────── */
.ni-form { padding: 34px 30px; position: relative; z-index: 1; }

.ni-step-hd { text-align: center; margin-bottom: 28px; }
.ni-step-orb {
  width: 66px; height: 66px; border-radius: 20px;
  display: grid; place-items: center;
  margin: 0 auto 14px;
  position: relative;
}
.ni-step-orb svg { width: 30px; height: 30px; }
.ni-step-orb::after {
  content: ''; position: absolute; inset: -4px; border-radius: 24px;
  border: 1.5px solid var(--orb-glow, rgba(52,211,153,0.4));
  opacity: 0.4;
  animation: niOrbRing 2.4s ease-out infinite;
}
@keyframes niOrbRing {
  0%   { opacity: 1;   transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.25); }
}
.orb-green {
  background: linear-gradient(135deg, rgba(52,211,153,0.18), rgba(52,211,153,0.06));
  border: 1px solid rgba(52,211,153,0.4);
  color: var(--g, #34d399);
  --orb-glow: rgba(52,211,153,0.45);
  box-shadow: 0 8px 26px -8px rgba(52,211,153,0.5);
}
.orb-orange {
  background: linear-gradient(135deg, rgba(249,115,22,0.16), rgba(249,115,22,0.04));
  border: 1px solid rgba(249,115,22,0.35);
  color: #fb923c;
  --orb-glow: rgba(249,115,22,0.35);
  box-shadow: 0 8px 26px -8px rgba(249,115,22,0.5);
}
.orb-blue {
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(99,102,241,0.05));
  border: 1px solid rgba(99,102,241,0.4);
  color: #a5b4fc;
  --orb-glow: rgba(99,102,241,0.4);
  box-shadow: 0 8px 26px -8px rgba(99,102,241,0.5);
}
.orb-lime {
  background: linear-gradient(135deg, rgba(132,204,22,0.16), rgba(132,204,22,0.04));
  border: 1px solid rgba(132,204,22,0.4);
  color: #a3e635;
  --orb-glow: rgba(132,204,22,0.4);
  box-shadow: 0 8px 26px -8px rgba(132,204,22,0.5);
}
.ni-step-ttl {
  font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 900;
  color: var(--text-primary); letter-spacing: -0.6px; margin-bottom: 6px;
}
.ni-step-sub {
  font-family: 'DM Sans', sans-serif; font-size: 13.5px;
  color: var(--text-muted); line-height: 1.5;
}

/* Transitions entre steps */
.ni-step { display: none; }
.ni-step.active {
  display: block;
  animation: niStepIn .42s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes niStepIn {
  from { opacity: 0; transform: translateX(18px); filter: blur(3px); }
  to   { opacity: 1; transform: translateX(0); filter: blur(0); }
}

/* ── INPUTS ─────────────────────────────────────────────── */
.ni-field { margin-bottom: 18px; }
.ni-label {
  display: block;
  font-family: 'Poppins', sans-serif; font-size: 9px; font-weight: 800;
  color: rgba(52,211,153,0.6);
  text-transform: uppercase; letter-spacing: 1.6px;
  margin-bottom: 8px;
}
.ni-input {
  width: 100%; padding: 13px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500;
  color: var(--text-primary); outline: none;
  transition: all .25s ease;
}
.ni-input::placeholder { color: rgba(255,255,255,0.25); }
.ni-input:hover { border-color: rgba(255,255,255,0.14); }
.ni-input:focus {
  background: rgba(255,255,255,0.04);
  border-color: rgba(52,211,153,0.5);
  box-shadow:
    0 0 0 4px rgba(52,211,153,0.08),
    0 0 24px -8px rgba(52,211,153,0.4);
}
.ni-input.error {
  border-color: rgba(239,68,68,0.55);
  box-shadow: 0 0 0 4px rgba(239,68,68,0.08);
}
.ni-input-wrap { position: relative; }
.ni-eye-btn {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none;
  color: var(--text-muted);
  cursor: pointer; padding: 6px; border-radius: 8px;
  display: inline-flex; align-items: center;
  transition: color .2s, background .2s;
}
.ni-eye-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.icon-eye, .icon-eye-off { display: block; }
.icon-eye.hidden, .icon-eye-off.hidden { display: none; }

/* ── PASSWORD STRENGTH ─────────────────────────────────── */
.ni-strength {
  margin-top: 10px;
  opacity: 0; transition: opacity .3s ease;
}
.ni-strength.show { opacity: 1; }
.ni-strength-bars {
  display: flex; gap: 4px; height: 4px; margin-bottom: 6px;
}
.ni-strength-bar {
  flex: 1; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  transition: background .35s ease;
}
.ni-strength-lbl {
  font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* Error text */
.ni-error-text {
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700;
  color: #f87171; margin-top: 6px; display: none;
}
.ni-error-text.show { display: block; animation: niShake .35s ease; }
@keyframes niShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

/* Match icon (check) */
.ni-pwd-match {
  position: absolute; right: 48px; top: 50%;
  transform: translateY(-50%) scale(0);
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(52,211,153,0.3), rgba(52,211,153,0.12));
  border: 1px solid rgba(52,211,153,0.5);
  color: var(--g, #34d399);
  transition: transform .35s cubic-bezier(.34,1.6,.64,1);
}
.ni-pwd-match.show { transform: translateY(-50%) scale(1); }
.ni-pwd-match svg { width: 14px; height: 14px; }

/* ── GOOGLE BTN / SEPARATOR ────────────────────────────── */
.ni-sep {
  display: flex; align-items: center; gap: 14px;
  margin: 24px 0 20px;
}
.ni-sep-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}
.ni-sep-lbl {
  font-family: 'Poppins', sans-serif; font-size: 9.5px; font-weight: 800;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase; letter-spacing: 1.4px;
}
.ni-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--text-secondary); text-decoration: none;
  transition: all .22s ease;
}
.ni-google-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,0.4);
}
.ni-google-btn img { width: 18px; height: 18px; }

/* ── AVATAR UPLOAD ─────────────────────────────────────── */
.ni-avatar-wrap {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 26px;
}
.ni-avatar-ring {
  width: 108px; height: 108px;
  border-radius: 50%;
  padding: 3px;
  background:
    conic-gradient(from 0deg, var(--g, #34d399), var(--g2, #10b981), #fbbf24, var(--g, #34d399));
  animation: niAvatarSpin 6s linear infinite;
  box-shadow:
    0 0 30px rgba(52,211,153,0.35),
    0 16px 40px rgba(0,0,0,0.5);
  cursor: pointer;
  position: relative;
}
@keyframes niAvatarSpin { to { transform: rotate(360deg); } }
.ni-avatar-ring-inner {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--bg-page, #03150a);
  padding: 3px;
  animation: niAvatarUnspin 6s linear infinite;
}
@keyframes niAvatarUnspin { to { transform: rotate(-360deg); } }
.ni-avatar-img {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  position: relative;
}
.ni-avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ni-avatar-overlay {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(0,0,0,0.55);
  display: grid; place-items: center;
  color: #fff;
  opacity: 0; transition: opacity .25s ease;
}
.ni-avatar-ring:hover .ni-avatar-overlay { opacity: 1; }
.ni-avatar-hint {
  font-family: 'DM Sans', sans-serif; font-size: 11.5px;
  color: var(--text-muted); margin-top: 12px;
}

/* Pseudo wrap */
.ni-pseudo-wrap {
  position: relative;
  display: flex; align-items: stretch;
}
.ni-pseudo-at {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 900;
  color: var(--g, #34d399);
  pointer-events: none;
}
.ni-pseudo-input {
  padding-left: 36px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: -0.3px;
  text-align: center;
}
.ni-pseudo-hint {
  font-family: 'DM Sans', sans-serif; font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px; text-align: center;
}

/* ── SELECTION CARDS (genre) ──────────────────────────── */
.ni-select-grid { display: grid; gap: 10px; }
.ni-select-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ni-select-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 18px 8px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  cursor: pointer; gap: 10px;
  font-family: 'Poppins', sans-serif;
  position: relative; overflow: hidden;
  transition: transform .25s cubic-bezier(.22,.61,.36,1),
              background .25s, border-color .25s, box-shadow .25s;
}
.ni-select-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(52,211,153,0.12), transparent 65%);
  opacity: 0; transition: opacity .3s ease;
}
.ni-select-card:hover {
  background: rgba(52,211,153,0.05);
  border-color: rgba(52,211,153,0.3);
  transform: translateY(-2px);
}
.ni-select-card:hover::before { opacity: 1; }
.ni-select-card.selected {
  background: linear-gradient(135deg, rgba(52,211,153,0.14), rgba(52,211,153,0.04));
  border-color: rgba(52,211,153,0.5);
  box-shadow:
    0 0 0 4px rgba(52,211,153,0.08),
    0 10px 28px -10px rgba(52,211,153,0.45);
}
.ni-select-card.selected::before { opacity: 1; }
.ni-select-card-ico {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--text-muted);
  transition: color .25s ease, transform .3s ease;
  position: relative; z-index: 1;
}
.ni-select-card-ico svg { width: 26px; height: 26px; }
.ni-select-card:hover .ni-select-card-ico,
.ni-select-card.selected .ni-select-card-ico {
  color: var(--g, #34d399);
  transform: scale(1.08);
}
.ni-select-card-lbl {
  font-size: 11px; font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.6px;
  transition: color .25s ease;
  position: relative; z-index: 1;
}
.ni-select-card:hover .ni-select-card-lbl,
.ni-select-card.selected .ni-select-card-lbl { color: var(--g, #34d399); }

/* ── AGE CARDS (radio) ─────────────────────────────────── */
.ni-age-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ni-age-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 14px 4px;
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.22,.61,.36,1),
              background .25s, border-color .25s, box-shadow .25s;
}
.ni-age-card:hover {
  background: rgba(52,211,153,0.05);
  border-color: rgba(52,211,153,0.3);
  transform: translateY(-2px);
}
.ni-age-card input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.ni-age-card:has(input:checked) {
  background: linear-gradient(135deg, rgba(52,211,153,0.14), rgba(52,211,153,0.04));
  border-color: rgba(52,211,153,0.5);
  box-shadow:
    0 0 0 4px rgba(52,211,153,0.08),
    0 10px 24px -12px rgba(52,211,153,0.45);
}
.ni-age-ico {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--text-muted);
  transition: color .25s ease, transform .3s ease;
}
.ni-age-ico svg { width: 22px; height: 22px; }
.ni-age-card:hover .ni-age-ico,
.ni-age-card:has(input:checked) .ni-age-ico {
  color: var(--g, #34d399);
  transform: scale(1.08);
}
.ni-age-lbl {
  font-family: 'Poppins', sans-serif;
  font-size: 12px; font-weight: 800;
  color: var(--text-primary);
}
.ni-age-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 9.5px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.ni-age-card:has(input:checked) .ni-age-lbl,
.ni-age-card:has(input:checked) .ni-age-sub { color: var(--g, #34d399); }

@media (max-width: 480px) {
  .ni-age-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── STEPPER PORTIONS ─────────────────────────────────── */
.ni-stepper-wrap {
  text-align: center;
  margin-top: 22px;
}
.ni-stepper {
  display: inline-flex; align-items: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border: 1px solid rgba(52,211,153,0.22);
  border-radius: 22px;
  padding: 8px;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.25),
    0 10px 30px -14px rgba(52,211,153,0.3);
}
.ni-step-btn {
  width: 46px; height: 46px; border-radius: 14px;
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.22);
  color: var(--g, #34d399);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all .22s ease;
}
.ni-step-btn:hover {
  background: rgba(52,211,153,0.16);
  border-color: rgba(52,211,153,0.4);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -10px rgba(52,211,153,0.5);
}
.ni-step-btn:active { transform: scale(0.94); }
.ni-step-val-wrap {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 12px; min-width: 110px;
}
.ni-step-val {
  width: 100%; text-align: center;
  background: none; border: none;
  font-family: 'Poppins', sans-serif;
  font-size: 36px; font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -1px; line-height: 1;
  outline: none;
}
.ni-step-val::-webkit-outer-spin-button,
.ni-step-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ni-step-val-sub {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-top: 4px;
}
.ni-stepper-hint {
  font-family: 'DM Sans', sans-serif; font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 22px;
  padding: 0 16px;
}

/* ── RECAP ─────────────────────────────────────────────── */
.ni-recap {
  margin-top: 26px;
  padding: 18px 20px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(52,211,153,0.06), rgba(52,211,153,0.02));
  border: 1px solid rgba(52,211,153,0.22);
}
.ni-recap-head {
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 800;
  color: var(--g, #34d399);
  text-transform: uppercase; letter-spacing: 1.6px;
  text-align: center;
  margin-bottom: 14px;
}
.ni-recap-grid {
  display: flex; flex-direction: column; gap: 8px;
}
.ni-recap-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ni-recap-row:last-child { border-bottom: none; }
.ni-recap-lbl {
  font-family: 'DM Sans', sans-serif; font-size: 12px;
  color: var(--text-muted);
}
.ni-recap-val {
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 800;
  color: var(--text-primary);
  max-width: 60%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── NAVIGATION BTNS ──────────────────────────────────── */
.ni-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 30px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ni-prev-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 18px; border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700;
  color: var(--text-muted); cursor: pointer;
  transition: all .22s ease;
}
.ni-prev-btn:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.14);
  color: var(--text-primary);
  transform: translateX(-2px);
}

.ni-next-btn, .ni-submit-btn {
  display: none;
  align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: 14px;
  background: linear-gradient(135deg, var(--g, #34d399), var(--g2, #10b981));
  border: none;
  font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 800;
  color: #03150a;
  cursor: pointer; margin-left: auto;
  position: relative; overflow: hidden;
  box-shadow: 0 6px 22px -6px rgba(52,211,153,0.55);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ni-next-btn { display: flex; }
.ni-next-btn::after, .ni-submit-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.32) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s ease;
}
.ni-next-btn:hover, .ni-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -6px rgba(52,211,153,0.65);
  color: #03150a;
}
.ni-next-btn:hover::after, .ni-submit-btn:hover::after { transform: translateX(120%); }
.ni-submit-btn.show { display: flex; }

/* Login link */
.ni-login-link {
  text-align: center; margin-top: 22px;
  font-family: 'DM Sans', sans-serif; font-size: 13px;
  color: var(--text-muted);
}
.ni-login-link a {
  color: var(--g, #34d399); font-weight: 800;
  text-decoration: none; transition: color .15s;
}
.ni-login-link a:hover { color: #6ee7b7; }

/* ── ANIMATIONS SHELL ─────────────────────────────────── */
@keyframes niUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 520px) {
  .ni { padding: 60px 12px 50px; }
  .ni-form { padding: 26px 20px; }
  .ni-brand-title { font-size: 24px; }
  .ni-step-dot { width: 34px; height: 34px; }
  .ni-step-dot-ico { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ni-orb, .ni-card-shine, .ni-bar-fill,
  .ni-avatar-ring, .ni-avatar-ring-inner,
  .ni-step-orb::after { animation: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] .ni-grid {
  background-image: radial-gradient(circle, rgba(10,31,18,0.08) 1px, transparent 1px);
}
[data-theme="light"] .ni-orb--a { background: radial-gradient(circle at 30% 30%, rgba(16,185,129,0.55), transparent 70%); opacity: 0.45; }
[data-theme="light"] .ni-orb--b { background: radial-gradient(circle at 50% 50%, rgba(251,191,36,0.4), transparent 70%); opacity: 0.35; }
[data-theme="light"] .ni-orb--c { background: radial-gradient(circle at 50% 50%, rgba(52,211,153,0.4), transparent 70%); opacity: 0.3; }
[data-theme="light"] .ni-grain { opacity: 0.03; }

[data-theme="light"] .ni-brand-sub { color: rgba(10,31,18,0.5); }
[data-theme="light"] .ni-brand-eyebrow {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.3);
  color: #047857;
}
[data-theme="light"] .ni-eyebrow-ico { color: #047857; }

[data-theme="light"] .ni-step-dot {
  background: rgba(10,31,18,0.04);
  border-color: rgba(10,31,18,0.1);
  color: rgba(10,31,18,0.35);
}
[data-theme="light"] .ni-step-dot.active {
  background: linear-gradient(135deg, rgba(16,185,129,0.14), rgba(16,185,129,0.05));
  border-color: rgba(16,185,129,0.5);
  color: #059669;
}
[data-theme="light"] .ni-step-dot.done { color: #fff; }
[data-theme="light"] .ni-step-lbl { color: rgba(10,31,18,0.4); }
[data-theme="light"] .ni-step-item.active .ni-step-lbl { color: #059669; }
[data-theme="light"] .ni-step-line { background: rgba(10,31,18,0.08); }
[data-theme="light"] .ni-bar-track { background: rgba(10,31,18,0.08); }

[data-theme="light"] .ni-card {
  background: rgba(255,255,255,0.85);
  border-color: rgba(16,185,129,0.2);
  box-shadow: 0 30px 60px -30px rgba(10,31,18,0.18);
}
[data-theme="light"] .ni-card::before { background: linear-gradient(90deg, transparent, rgba(16,185,129,0.4), transparent); }
[data-theme="light"] .ni-card-wm { opacity: 0.03; color: #059669; }

[data-theme="light"] .ni-step-ttl { color: #0a2a18; }
[data-theme="light"] .ni-step-sub { color: rgba(10,31,18,0.55); }

[data-theme="light"] .ni-label { color: rgba(5,150,105,0.7); }
[data-theme="light"] .ni-input {
  background: #ffffff;
  border-color: rgba(10,31,18,0.12);
  color: #0a1f12;
}
[data-theme="light"] .ni-input::placeholder { color: rgba(10,31,18,0.3); }
[data-theme="light"] .ni-input:hover { border-color: rgba(10,31,18,0.22); }
[data-theme="light"] .ni-input:focus {
  background: #fff;
  border-color: rgba(16,185,129,0.5);
  box-shadow: 0 0 0 4px rgba(16,185,129,0.09);
}
[data-theme="light"] .ni-eye-btn { color: rgba(10,31,18,0.4); }
[data-theme="light"] .ni-eye-btn:hover { color: #0a1f12; background: rgba(10,31,18,0.04); }
[data-theme="light"] .ni-strength-bar { background: rgba(10,31,18,0.08); }
[data-theme="light"] .ni-strength-lbl { color: rgba(10,31,18,0.45); }
[data-theme="light"] .ni-pwd-match {
  background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(16,185,129,0.08));
  border-color: rgba(16,185,129,0.5);
  color: #059669;
}

[data-theme="light"] .ni-sep-line { background: linear-gradient(90deg, transparent, rgba(10,31,18,0.1), transparent); }
[data-theme="light"] .ni-sep-lbl { color: rgba(10,31,18,0.4); }
[data-theme="light"] .ni-google-btn {
  background: #ffffff;
  border-color: rgba(10,31,18,0.12);
  color: rgba(10,31,18,0.7);
}
[data-theme="light"] .ni-google-btn:hover {
  background: #fff;
  border-color: rgba(10,31,18,0.2);
  color: #0a1f12;
}
[data-theme="light"] .ni-avatar-ring-inner { background: #ffffff; }
[data-theme="light"] .ni-avatar-hint { color: rgba(10,31,18,0.45); }
[data-theme="light"] .ni-pseudo-at { color: #059669; }
[data-theme="light"] .ni-pseudo-hint { color: rgba(10,31,18,0.5); }

[data-theme="light"] .ni-select-card {
  background: #ffffff;
  border-color: rgba(10,31,18,0.1);
}
[data-theme="light"] .ni-select-card:hover {
  background: rgba(16,185,129,0.05);
  border-color: rgba(16,185,129,0.3);
}
[data-theme="light"] .ni-select-card.selected {
  background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.03));
  border-color: rgba(16,185,129,0.5);
}
[data-theme="light"] .ni-select-card-lbl { color: rgba(10,31,18,0.55); }
[data-theme="light"] .ni-select-card:hover .ni-select-card-lbl,
[data-theme="light"] .ni-select-card.selected .ni-select-card-lbl { color: #059669; }
[data-theme="light"] .ni-select-card-ico { color: rgba(10,31,18,0.45); }
[data-theme="light"] .ni-select-card:hover .ni-select-card-ico,
[data-theme="light"] .ni-select-card.selected .ni-select-card-ico { color: #059669; }

[data-theme="light"] .ni-age-card {
  background: #ffffff;
  border-color: rgba(10,31,18,0.1);
}
[data-theme="light"] .ni-age-card:hover {
  background: rgba(16,185,129,0.05);
  border-color: rgba(16,185,129,0.3);
}
[data-theme="light"] .ni-age-card:has(input:checked) {
  background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.03));
  border-color: rgba(16,185,129,0.5);
}
[data-theme="light"] .ni-age-ico { color: rgba(10,31,18,0.45); }
[data-theme="light"] .ni-age-card:hover .ni-age-ico,
[data-theme="light"] .ni-age-card:has(input:checked) .ni-age-ico { color: #059669; }
[data-theme="light"] .ni-age-lbl { color: #0a2a18; }
[data-theme="light"] .ni-age-sub { color: rgba(10,31,18,0.5); }
[data-theme="light"] .ni-age-card:has(input:checked) .ni-age-lbl,
[data-theme="light"] .ni-age-card:has(input:checked) .ni-age-sub { color: #059669; }

[data-theme="light"] .ni-stepper {
  background: #ffffff;
  border-color: rgba(16,185,129,0.25);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.04), 0 10px 30px -14px rgba(16,185,129,0.3);
}
[data-theme="light"] .ni-step-btn {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.3);
  color: #059669;
}
[data-theme="light"] .ni-step-btn:hover {
  background: rgba(16,185,129,0.14);
  border-color: rgba(16,185,129,0.4);
}
[data-theme="light"] .ni-step-val { color: #0a1f12; }
[data-theme="light"] .ni-step-val-sub { color: rgba(10,31,18,0.5); }
[data-theme="light"] .ni-stepper-hint { color: rgba(10,31,18,0.5); }

[data-theme="light"] .ni-recap {
  background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(16,185,129,0.02));
  border-color: rgba(16,185,129,0.3);
}
[data-theme="light"] .ni-recap-head { color: #059669; }
[data-theme="light"] .ni-recap-lbl { color: rgba(10,31,18,0.55); }
[data-theme="light"] .ni-recap-val { color: #0a2a18; }
[data-theme="light"] .ni-recap-row { border-color: rgba(10,31,18,0.06); }

[data-theme="light"] .ni-nav { border-color: rgba(10,31,18,0.08); }
[data-theme="light"] .ni-prev-btn {
  background: #ffffff;
  border-color: rgba(10,31,18,0.1);
  color: rgba(10,31,18,0.55);
}
[data-theme="light"] .ni-prev-btn:hover {
  background: rgba(10,31,18,0.04);
  color: #0a1f12;
}
[data-theme="light"] .ni-next-btn,
[data-theme="light"] .ni-submit-btn { color: #ffffff; }
[data-theme="light"] .ni-next-btn:hover,
[data-theme="light"] .ni-submit-btn:hover { color: #ffffff; }

[data-theme="light"] .ni-login-link { color: rgba(10,31,18,0.5); }