.auth-page {
    min-height: 100vh;
    padding: 185px 24px 80px;
    display: grid;
    place-items: start center;
    background: linear-gradient(25deg, #ffcfe5 0%, #fff 52%, #fff 100%);
    color: #1d1d1d;
    font-family: "Lato", sans-serif;
}

.auth-panel { width: min(570px, calc(100vw - 36px)); }
.auth-heading { margin-bottom: 42px; text-align: center; }
.auth-heading h1 { margin: 0 0 13px; font-family: "Lato", sans-serif; font-size: 2.25rem; font-weight: 500; }
.auth-heading p { margin: 0; color: #6d6d6d; font-size: .875rem; line-height: 1.7; }
.social-login { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; }
.social-button { height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; background: #f3f3f3; color: #1d1d1d; font-size: .875rem; text-decoration: none; cursor: pointer; }
.social-button img { width: 16px; height: 16px; object-fit: contain; }
.social-button:disabled { opacity: 1; cursor: not-allowed; }
.auth-separator { height: 102px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #6d6d6d; font-size: .875rem; }
.auth-separator::before, .auth-separator::after { content: ""; width: 128px; height: 1px; background: #ededed; }
.auth-form { display: grid; gap: 18px; }
.auth-input { width: 100%; height: 59px; padding: 0 21px; border: 1px solid #ededed; border-radius: 999px; outline: none; background: #fff; color: #1d1d1d; font: 500 .875rem "Lato", sans-serif; transition: border-color .2s, box-shadow .2s; }
.auth-input:focus { border-color: #ff006a; box-shadow: 0 0 0 3px rgba(255, 0, 106, .1); }
.auth-input.invalid { border-color: #b42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, .08); }
.password-control { position: relative; display: block; }
.password-control .auth-input { padding-right: 52px; }
.password-toggle { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.password-toggle:hover { background: #f5f5f5; }
.password-toggle:focus-visible { outline: 2px solid #ff006a; outline-offset: 1px; }
.password-toggle img { width: 15px; height: 15px; pointer-events: none; }
.auth-options { display: flex; align-items: center; justify-content: space-between; font-size: .875rem; }
.remember-option, .terms-option { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.remember-option input, .terms-option input { width: 15px; height: 15px; accent-color: #ff006a; }
.forgot-link { font-weight: 600; }
.auth-submit { width: 100%; height: 59px; margin-top: 7px; border: 0; border-radius: 999px; background: #ff006a; color: #fff; font: 700 .875rem "Lato", sans-serif; }
.auth-submit:hover:not(:disabled) { background: #cd0056; }
.auth-submit:disabled { cursor: not-allowed; opacity: 1; }
.auth-resend { padding: 0; border: 0; background: transparent; color: #ff006a; cursor: pointer; text-align: left; font-weight: 700; }
.auth-resend:disabled { cursor: not-allowed; opacity: .45; }
.auth-switch { margin: 42px 0 0; text-align: center; font-size: .875rem; }
.auth-switch a, .terms-option a { color: #1d1d1d; font-weight: 600; text-decoration: underline; }
.auth-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-field { position: relative; display: grid; gap: 9px; margin: 0; color: #6d6d6d; font-size: .8rem; }
.terms-option { margin: 2px 0 3px; font-size: .8rem; }
.validation-summary { color: #b42318; font-size: .82rem; }
.validation-summary ul { margin: 0; padding-left: 20px; }
.validation-message { color: #b42318; font-size: .78rem; line-height: 1.35; }
.auth-error, .auth-success { padding: 11px 15px; border-radius: 8px; font-size: .84rem; }
.auth-error { background: #fff0f3; color: #a40034; }
.auth-success { background: #eaf8ef; color: #126b32; }
.auth-continue { width: 100%; height: 52px; display: grid; place-items: center; border: 1px solid #ff006a; border-radius: 999px; color: #ff006a; font-size: .875rem; font-weight: 700; text-decoration: none; }
.auth-continue:hover { background: #fff0f6; color: #cd0056; }
.register-page { padding-top: 185px; }
.register-page .auth-heading { margin-bottom: 35px; }
.register-page .auth-separator { height: 102px; }
.register-page .auth-switch { margin-top: 30px; }

@media (max-width: 640px) {
    .auth-page, .register-page { padding: 108px 18px 50px; }
    .auth-heading { margin-bottom: 30px; }
    .auth-heading h1 { font-size: 1.85rem; }
    .auth-heading p { max-width: 360px; margin: 0 auto; }
    .social-login, .auth-two-column { grid-template-columns: 1fr; }
    .auth-separator { height: 52px; }
    .auth-switch { margin-top: 30px; }
}