.auth-app { width: 100%; max-width: 430px; min-height: 100dvh; margin: 0 auto; overflow: clip; background: linear-gradient(145deg,#fce1ed,#fff0f6 62%,#fadce9); box-shadow: 0 7px 38px #d778a51a; }
.auth-hero { position: relative; min-height: 242px; padding: 28px 25px 43px; text-align: center; color: white; background: linear-gradient(#63214c18,#7f24534a),url('profile-sunset.png') center / cover; }
.auth-hero::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 47px; background: linear-gradient(transparent,#fce5ef); pointer-events: none; }
.auth-brand { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 14px; border: 1px solid #ffd4e7d9; border-radius: 20px; color: white; background: #ffbfd543; text-decoration: none; box-shadow: inset 0 1px 8px #fff4; font-size: 43px; line-height: 1; }
.auth-hero p { margin: 0 0 8px; font-size: 10px; letter-spacing: 2.3px; font-weight: 700; }
.auth-hero h1 { margin: 0 0 10px; font-size: 26px; line-height: 1.3; text-shadow: 0 1px 6px #69254255; }
.auth-hero-caption { font-size: 11px; color: #fff0f7; line-height: 1.6; }
.auth-content { position: relative; padding: 0 19px; margin-top: -15px; }
.auth-card { border-radius: 24px; padding: 25px 21px; background: #fffafcdf; border: 1px solid #fff9; box-shadow: 0 4px 15px #cd628d24; }
.auth-card h2 { margin: 0 0 9px; font-size: 23px; line-height: 1.3; }
.auth-description { margin: 0 0 22px; color: #8e6c7d; font-size: 12px; line-height: 1.7; }
.auth-field { margin-bottom: 19px; }
.auth-field label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 700; }
.auth-input-wrap { position: relative; }
.auth-field input { width: 100%; min-height: 52px; padding: 13px; border: 1px solid #edc5d6; border-radius: 13px; background: #fffafd; color: #2b1538; font: inherit; font-size: 16px; outline: none; }
.auth-field input:focus { border-color: #df3176; box-shadow: 0 0 0 3px #f5a9c733; }
.auth-field input[aria-invalid="true"] { border-color: #b51d53; }
.auth-field input::placeholder { font-size: 13px; color: #a58c99; }
.auth-field input[type="password"],.auth-field input[data-password] { padding-right: 62px; }
.auth-password-toggle { position: absolute; top: 4px; right: 3px; min-width: 49px; min-height: 44px; padding: 0 7px; border-radius: 10px; font-size: 11px; color: #bd2864; }
.auth-hint { margin: 7px 1px 0; font-size: 10px; color: #9b7e8c; line-height: 1.65; }
.auth-error { margin: 7px 1px 0; font-size: 12px; color: #a52651; line-height: 1.6; }
.auth-forgot { display: block; width: fit-content; margin: -5px 0 14px auto; min-height: 44px; padding: 11px 0; color: #c61962; font-size: 12px; text-decoration: none; }
.auth-alt { margin: 21px 0 0; text-align: center; color: #98778a; font-size: 12px; line-height: 1.7; }
.auth-alt a { display: inline-block; min-height: 44px; padding: 10px 3px; color: #c61962; font-weight: 700; text-decoration: none; }
.auth-message { padding: 12px 13px; margin-bottom: 18px; border: 1px solid #ebbbce; border-radius: 12px; background: #ffe9f2; color: #8c2c56; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.auth-message.is-error { border-color: #e2a8bd; background: #fff0f5; color: #a02650; }
.auth-account-id { margin: 8px 0 0; font-weight: 700; }
.auth-footer { margin: 22px 25px; color: #a18092; font-size: 10px; line-height: 1.7; text-align: center; }
.auth-main-link { display: block; text-align: center; text-decoration: none; }
@media (min-width:431px) { .auth-app { min-height: 714px; border-radius: 31px; padding-bottom: 7px; } }
@media (max-width:350px) { .auth-hero { padding: 23px 18px 36px; min-height: 222px; } .auth-hero h1 { font-size: 23px; } .auth-content { padding: 0 13px; } .auth-card { padding: 23px 17px; } }