form{display:block}
.field{display:flex; flex-direction:column; gap: .4rem; margin-bottom: var(--space-5)}
.label{font-weight: 700; font-size: var(--fs-1)}
.req{color: var(--danger); margin-left: .25rem}
.help{color: var(--muted-2); font-size: var(--fs-1)}
.error{color: color-mix(in srgb, var(--danger) 90%, var(--text)); font-size: var(--fs-1)}

.input, select, textarea{
  width:100%;
  padding: .75rem .85rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: var(--fs-2);
}
textarea{min-height: 120px; resize: vertical}
.input::placeholder, textarea::placeholder{color: var(--muted-2)}

.input:focus, select:focus, textarea:focus{outline: none; border-color: rgba(56,189,248,.55); box-shadow: 0 0 0 4px rgba(56,189,248,.12)}

.is-invalid .input, .is-invalid select, .is-invalid textarea{border-color: rgba(239,68,68,.55); box-shadow: 0 0 0 4px rgba(239,68,68,.12)}

.form-row{display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5)}
@media (max-width: 980px){.form-row{grid-template-columns: 1fr}}

.auth{
  min-height: 100vh;
  display:grid;
  place-items:center;
  padding: var(--space-7);
}
.auth__card{width: min(460px, 100%);}
.auth__brand{display:flex; align-items:center; gap: var(--space-3); padding: var(--space-6); border-bottom: 1px solid var(--border)}
.auth__logo{width: 38px; height: 38px; border-radius: 14px; background: linear-gradient(135deg, var(--primary), var(--info)); box-shadow: var(--shadow-2)}
.auth__body{padding: var(--space-6)}