/* ==========================================================================
   Registration SPA — Namespaced styles under .reg-shell to avoid bleed
   ========================================================================== */
.reg-shell { width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px 16px; }
.reg-shell .reg-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }

.reg-shell .reg-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.reg-shell .reg-card.hero { grid-column: span 7; }
.reg-shell .reg-card.info { grid-column: span 5; }

.reg-shell .reg-actions .btn {
  display: inline-block; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--btn-text);
  transition: all 0.2s ease;
  margin-right: 8px;
}
.reg-shell .reg-actions .btn:hover { 
  background: var(--btn-bg-hover); 
  transform: translateY(-1px); 
  border-color: var(--accent);
}
.reg-shell .reg-actions .btn.primary { 
  border-color: color-mix(in srgb, var(--accent) 60%, transparent); 
  background: color-mix(in srgb, var(--accent) 20%, transparent); 
  color: var(--accent);
  font-weight: 600;
}
.reg-shell .reg-actions .btn.primary:hover {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 4px 12px var(--accent-glow);
}

/* breadcrumbs */
.reg-shell .reg-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; color: var(--muted); }
.reg-shell .reg-steps .crumb { opacity: .6; }
.reg-shell .reg-steps .crumb.current { opacity: 1; font-weight: 600; color: var(--text); }
.reg-shell .reg-steps .crumb.done { opacity: .9; }

/* basic form (scoped) */
.reg-shell .row { margin-bottom: 12px; }
.reg-shell label { display: block; margin-bottom: 6px; font-size: 14px; color: var(--text); }
.reg-shell input[type="text"], 
.reg-shell input[type="email"] {
  width: 100%; padding: 11px 12px; border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--btn-bg); 
  color: var(--text); 
  outline: none;
  transition: all 0.2s ease;
}
.reg-shell input:focus { 
  border-color: var(--accent); 
  box-shadow: 0 0 0 3px var(--accent-glow); 
}

/* disabled inputs visibly distinct */
.reg-shell input[disabled] {
  opacity: .65; cursor: not-allowed;
  background: color-mix(in srgb, var(--btn-bg) 50%, transparent);
}

/* status indicator */
.reg-shell .with-status { position: relative; }
.reg-shell .status-dot {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--status-neutral);
}
.reg-shell .status-dot.ok  { 
  background: var(--status-ok); 
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-ok) 25%, transparent); 
}
.reg-shell .status-dot.bad { 
  background: var(--status-error); 
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-error) 25%, transparent); 
}
.reg-shell .status-dot.spin {
  background: transparent;
  border: 2px solid var(--status-neutral);
  border-top-color: transparent;
  width: 12px; height: 12px;
  border-radius: 50%;
  animation: regspin 0.7s linear infinite;
}
@keyframes regspin { to { transform: translateY(-50%) rotate(360deg); } }

/* responsive */
@media (max-width: 1200px) { .reg-shell { max-width: 980px; } }
@media (max-width: 900px)  { .reg-shell { max-width: 760px; } .reg-shell .reg-grid { gap: 12px; } .reg-shell .reg-card.hero, .reg-shell .reg-card.info { grid-column: span 12; } }
@media (max-width: 600px)  { .reg-shell { max-width: 92vw; padding: 16px 0; } .reg-shell .reg-card { border-radius: 16px; padding: 16px; } }