.login-theme { position: absolute; top: max(20px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); }

.login-page { min-height: 100svh; display: grid; align-content: center; justify-items: center; padding: 104px 24px 40px; gap: 32px; background: var(--paper); }

.login-brand { width: min(100%, 480px); }

.login-panel {
  width: min(100%, 480px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 36px 40px;

  & h1 { font-size: 52px; font-weight: 700; letter-spacing: .01em; margin: 12px 0 18px; }
}

.login-form {
  display: grid; margin-top: 28px;

  & input { padding: 12px 14px; border: 1px solid var(--line); background: var(--paper); border-radius: 5px; width: 100%; margin-bottom: 16px; }

  & .button { width: 100%; justify-content: space-between; }
}

.form-error { font-size: 15px; color: var(--error); margin: 0 0 16px; }

@media (max-width: 720px) {
  .login-panel {
    padding: 28px;

    & h1 { font-size: 44px; }
  }
}