:root { color-scheme: dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; margin: 0; background: #17181d; }
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
button, input, select, textarea { font: inherit; }
.safe-top { padding-top: max(1rem, env(safe-area-inset-top)); }
.safe-bottom { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
.auth-shell {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 12% 12%, rgba(212,252,95,.14), transparent 31%),
    radial-gradient(circle at 86% 84%, rgba(212,252,95,.08), transparent 32%),
    #17181d;
}
.glass-panel {
  background: rgba(36,37,45,.88);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 24px 70px rgba(0,0,0,.34);
  backdrop-filter: blur(18px);
}
.auth-field { position: relative; }
.auth-field input,
.auth-field select,
.auth-field textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.09);
  background: #17181d;
  color: #fff;
  border-radius: 1rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.auth-field input,
.auth-field select { min-height: 3.35rem; padding: 1rem 1rem 1rem 3rem; }
.auth-field textarea { min-height: 7.5rem; resize: vertical; padding: 1rem; }
.auth-field input::placeholder,
.auth-field textarea::placeholder { color: #71717a; }
.auth-field input:focus,
.auth-field select:focus,
.auth-field textarea:focus {
  border-color: rgba(212,252,95,.85);
  box-shadow: 0 0 0 4px rgba(212,252,95,.10);
  background: #1d1e24;
}
.auth-field .field-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #d4fc5f;
  pointer-events: none;
}
.auth-field .password-toggle {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border-radius: .75rem;
  color: #a1a1aa;
}
.auth-field .password-toggle:hover { color: #d4fc5f; background: rgba(255,255,255,.05); }
.field-invalid input,
.field-invalid select,
.field-invalid textarea { border-color: rgba(248,113,113,.85) !important; }
.field-error { display: none; margin-top: .4rem; color: #f87171; font-size: .72rem; }
.field-invalid .field-error { display: block; }
.progress-step::before {
  content: '';
  position: absolute;
  top: 1.05rem;
  left: calc(-50% + 1.25rem);
  width: calc(100% - 2.5rem);
  height: 2px;
  background: #3f3f46;
}
.progress-step:first-child::before { display: none; }
.progress-step.is-complete::before,
.progress-step.is-active::before { background: #d4fc5f; }
.progress-dot { transition: all .2s ease; }
.progress-step.is-active .progress-dot,
.progress-step.is-complete .progress-dot { background: #d4fc5f; border-color: #d4fc5f; color: #17181d; }
.form-step { display: none; }
.form-step.is-active { display: block; animation: stepIn .25s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
.upload-preview { background: linear-gradient(135deg, #2d2e38, #1f2026); }
.toast { transform: translate(-50%, 130%); transition: transform .28s ease; }
.toast.is-visible { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
