/* Auth background */
.dx-auth{
  background:
    radial-gradient(1200px 600px at top right, rgba(42,122,95,.12), transparent),
    radial-gradient(1000px 500px at bottom left, rgba(244,180,26,.10), transparent),
    var(--bg);
}

/* Centering */
.dx-auth-wrap{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* Card */
.dx-auth-card{
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border-radius: 22px;
  padding: 28px 28px 26px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}

/* Brand */
.dx-auth-brand{
  text-align: center;
  margin-bottom: 22px;
}

.dx-auth-brand h1{
  font-size: 22px;
  font-weight: 800;
  margin: 12px 0 2px;
}

.dx-auth-brand p{
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

/* Logo */
.dx-logo{
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--brand), var(--brand-600));
  display: grid;
  place-items: center;
  margin: 0 auto;
  box-shadow: 0 10px 26px rgba(42,122,95,.35);
}

.dx-logo img{
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Form */
.dx-auth-form{
  margin-top: 10px;
}

.dx-field{
  margin-bottom: 16px;
}

.dx-auth-submit{
  width: 100%;
  height: 46px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(42,122,95,.35);
}

/* Footer */
.dx-auth-foot{
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

/* Mobile tightening */
@media (max-width: 480px){
  .dx-auth-card{
    padding: 22px;
    border-radius: 18px;
  }
}