body{
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px;
  background: radial-gradient(800px 500px at 10% 0%, rgba(168,79,192,.16), transparent),
              radial-gradient(700px 420px at 90% 10%, rgba(139,42,166,.12), transparent),
              #faf7fb;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.login-container{ width: 100%; max-width: 440px; }

.login-card{
  width: 100%;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(32,26,37,.12);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(20,10,30,.12);
  padding: 26px;
  backdrop-filter: blur(8px);
}

.login-card h1{
  margin: 0 0 16px;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: #201a25;
}

.form-group{ margin-bottom: 12px; }

.form-group input{
  width: 100%;
  height: 46px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(32,26,37,.14);
  outline: none;
  font-size: 14px;
}

.form-group input:focus{
  box-shadow: 0 0 0 4px rgba(139,42,166,.18);
  border-color: rgba(139,42,166,.35);
}

.actions{ margin-top: 14px; }

.btn-login{
  width: 100%;
  height: 46px;
  border: none;
  border-radius: 12px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #8b2aa6, #a84fc0);
  transition: transform .06s ease, filter .2s ease;
}

.btn-login:active{ transform: translateY(1px); }
.btn-login:hover{ filter: brightness(.98); }

.erro{
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(216,75,75,.10);
  border: 1px solid rgba(216,75,75,.25);
  color: #8f1f1f;
  font-weight: 800;
  font-size: 13px;
}