.login-wrap {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: var(--sp-5);
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.login-card {
  width: 100%; max-width: 380px; background: var(--card);
  border-radius: var(--card-radius); box-shadow: var(--shadow-2); padding: var(--sp-5);
}
.login-logo { width: 110px; margin: 0 auto var(--sp-4); }
.login-title { text-align: center; margin-bottom: var(--sp-5); color: var(--mini-title); }
.field { margin-bottom: var(--sp-4); }
.field label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--text-2); margin-bottom: var(--sp-1);
}
.field input {
  width: 100%; padding: 13px 14px; border: 1px solid var(--gray-line);
  border-radius: var(--btn-radius); background: var(--gray-bg); color: var(--text);
  transition: border-color 160ms var(--ease-standard);
}
.field input:focus { outline: none; border-color: var(--primary); background: var(--card); }
.remember { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.btn-primary {
  width: 100%; padding: 14px; border-radius: var(--btn-radius);
  background: var(--primary); color: #fff; font-weight: 700; letter-spacing: .5px;
}
.btn-primary[disabled] { opacity: .6; }
.login-error {
  background: rgba(244,67,54,.12); color: var(--error); border-radius: 8px;
  padding: 10px 12px; margin-bottom: var(--sp-3); font-size: 13px; display: none;
}
.login-error.show { display: block; }