.customer-login {
  --login-width: 420px;
  --login-pad: 32px;
  --login-gap: 16px;
  --login-section: 24px;
  --login-small-gap: 8px;
  --login-control: 44px;
  --login-body: 14px;
  --login-small: 12px;
  --login-title: 24px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.customer-login .auth-wrap { min-height: 100svh; padding: var(--login-section) var(--login-gap); }
.customer-login .auth-card { width: min(var(--login-width), 100%); max-width: var(--login-width); padding: var(--login-pad); box-shadow: var(--shadow); }
.customer-login .auth-logo { margin-bottom: var(--login-section); }
.login-heading h1 { font-size: var(--login-title); line-height: 1.4; letter-spacing: -.03em; }
.login-heading p { margin-top: var(--login-small-gap); color: var(--text-2); font-size: var(--login-body); line-height: 1.7; }
.login-notice { margin: var(--login-section) 0; padding: var(--login-gap); border: 1px solid var(--info-line); border-radius: var(--radius-sm); background: var(--info-bg); color: var(--info); font-size: var(--login-small); line-height: 1.7; }
.login-notice strong { display: block; margin-bottom: 4px; }
.customer-login .field { margin-bottom: var(--login-gap); }
.customer-login .field > label { font-size: var(--login-body); margin-bottom: var(--login-small-gap); }
.customer-login .input { min-height: var(--login-control); font-size: var(--login-body); }
.customer-login .field .err { font-size: var(--login-small); line-height: 1.6; }
.password-field { position: relative; }
.password-field .input { padding-right: 64px; }
.password-toggle { position: absolute; right: 4px; top: 0; height: 100%; min-width: 52px; padding: 0 var(--login-small-gap); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-2); font: inherit; font-size: var(--login-small); cursor: pointer; }
.password-toggle:hover { color: var(--text); background: var(--surface-2); }
.customer-login .btn-block { min-height: var(--login-control); font-size: var(--login-body); margin-top: var(--login-small-gap); }
.customer-login :is(input, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.login-status { color: var(--info); font-size: var(--login-small); line-height: 1.8; }
.login-status:not(:empty), .login-note { margin-top: var(--login-gap); }
.login-footer { border-top: 1px solid var(--line); margin-top: var(--login-section); padding-top: var(--login-section); color: var(--text-2); font-size: var(--login-small); text-align: center; }
@media (max-width: 480px) { .customer-login { --login-pad: 24px; } }

.customer-login .input::placeholder { color: var(--text-2); }