/* Card layout */
  .login-card {
    border-radius: var(--radius-xl);
  }

  .login-header {
    background: var(--brand-gradient);
    border-bottom: none;
    padding: 1rem 1.5rem;
  }

  .login-header-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-darkest);
    font-size: 1.2rem;
  }

  .login-body {
    background: var(--bg-white);
    padding: 1.5rem 1.5rem 1.75rem;
  }

  .login-footer {
    background: #fafafa;
    border-top: 1px solid #eee;
    padding: 0.85rem 1.25rem 1rem;
  }

  /* Inputs */
  .login-body .form-control {
    border-radius: var(--radius-md);
    border-color: var(--gray-border);
    padding: 0.6rem 0.75rem;
  }

  .login-body .form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.15rem rgba(244, 170, 36, 0.25);
  }

  .input-group-password .form-control {
    border-right: none;
  }

  .input-group-password .toggle-password-btn {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-color: var(--gray-border);
  }

  .input-group-password .toggle-password-btn:hover {
    background-color: #f7f7f7;
  }

  /* Error summary styling */
  #error-summary {
    border-radius: var(--radius-md);
    border-left: 4px solid #dc3545;
  }

  /* Card had fixed desktop padding at every width -- tighten it up on
     phones so the form doesn't feel cramped against the screen edges. */
  @media (max-width: 575.98px) {
    .login-header {
      padding: 0.85rem 1.1rem;
    }

    .login-body {
      padding: 1.1rem 1.1rem 1.35rem;
    }

    .login-footer {
      padding: 0.7rem 1.1rem 0.85rem;
    }
  }