.auth-page {
    min-height: calc(100vh - 84px);
    padding: 72px 28px;
    background:
        radial-gradient(circle at 18% 34%, rgba(194, 233, 255, .68) 0, rgba(223, 243, 255, 0) 34%),
        linear-gradient(145deg, #fbfdff 0%, #eef7ff 100%);
    display: grid;
    place-items: center;
}

.auth-shell {
    width: min(1120px, 100%);
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    align-items: center;
    gap: clamp(60px, 7vw, 96px);
}

.auth-shell--register { align-items: start; }
.auth-intro { max-width: 590px; }

.auth-intro h1 {
    margin: 0 0 24px;
    color: #082b60;
    font-size: clamp(44px, 5vw, 64px);
    line-height: 1.08;
    letter-spacing: -.055em;
}

.auth-intro h1 strong { color: #0875ea; font-weight: 800; }

.auth-intro > p {
    max-width: 570px;
    margin: 0;
    color: #5f748b;
    font-size: 16px;
    line-height: 1.8;
}

.auth-features {
    margin-top: 30px;
    display: grid;
    gap: 14px;
    color: #3f607e;
    font-size: 14px;
}

.auth-features span { display: flex; align-items: center; gap: 10px; }
.auth-features i { color: #13a876; font-size: 16px; font-style: normal; }

.auth-card {
    width: 100%;
    padding: 44px;
    border: 1px solid #d2e1ef;
    border-radius: 26px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 28px 70px rgba(6, 51, 108, .13);
}

.auth-page--login .auth-card { max-width: 500px; justify-self: end; }
.auth-card--compact { width: min(500px, 100%); text-align: center; }
.auth-page--center { padding-block: 82px; }

.auth-card__icon {
    position: relative;
    width: 66px;
    height: 66px;
    margin: 0 auto 24px;
    border-radius: 19px;
    background: linear-gradient(145deg, #1186f3, #0754c7);
    box-shadow: 0 14px 28px rgba(7, 105, 222, .24);
}

.auth-card__icon::before {
    content: '';
    position: absolute;
    top: 19px;
    left: 22px;
    width: 20px;
    height: 17px;
    border: 2px solid #fff;
    border-radius: 4px;
}

.auth-card__icon::after {
    content: '';
    position: absolute;
    top: 11px;
    left: 26px;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.auth-card__icon--account {
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 29px;
}

.auth-card__icon--account::before,
.auth-card__icon--account::after { display: none; }

.auth-card__icon--key::before {
    width: 15px;
    height: 15px;
    top: 16px;
    left: 15px;
    border-radius: 50%;
}

.auth-card__icon--key::after {
    width: 21px;
    height: 3px;
    top: 37px;
    left: 27px;
    border: 0;
    border-radius: 3px;
    background: #fff;
    box-shadow: 7px 5px 0 -1px #fff;
    transform: rotate(-42deg);
}

.auth-card__icon--warning {
    color: #fff;
    background: linear-gradient(145deg, #f29b38, #df6b28);
    display: grid;
    place-items: center;
    font-size: 29px;
    font-weight: 800;
}

.auth-card__icon--warning::before,
.auth-card__icon--warning::after { display: none; }

.auth-card__heading { text-align: center; }

.auth-card__heading > span {
    color: #0870e1;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.auth-card__heading h1,
.auth-card__heading h2 {
    margin: 9px 0 9px;
    color: #092656;
    font-size: 30px;
    line-height: 1.25;
    letter-spacing: -.035em;
}

.auth-card__heading p {
    margin: 0;
    color: #66798f;
    font-size: 13px;
    line-height: 1.7;
}

.auth-card__heading p strong { color: #3d5875; overflow-wrap: anywhere; }

.auth-alert {
    margin: 22px 0 0;
    padding: 13px 15px;
    border-radius: 11px;
    font-size: 12px;
    line-height: 1.55;
    text-align: left;
}

.auth-alert--error { border: 1px solid #f0c6c6; color: #a23838; background: #fff3f3; }
.auth-alert--success { border: 1px solid #bfe4d5; color: #24765a; background: #effbf6; }

.auth-form { margin-top: 26px; display: grid; gap: 18px; }

.auth-field {
    display: grid;
    gap: 9px;
    color: #244767;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
}

.auth-field__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-field a, .auth-check a, .auth-switch a { color: #0870e1; text-decoration: none; }
.auth-field a { font-size: 11px; }
.auth-field a:hover, .auth-check a:hover, .auth-switch a:hover { text-decoration: underline; }

.auth-field input {
    width: 100%;
    height: 52px;
    padding: 0 15px;
    border: 1px solid #c8daeb;
    border-radius: 11px;
    color: #102f59;
    background: #fbfdff;
    outline: none;
    font-size: 14px;
    font-weight: 500;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.auth-field input:focus {
    border-color: #1681ed;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(8, 116, 239, .11);
}

.auth-field input::placeholder { color: #94a5b8; font-weight: 500; }
.auth-field small { color: #778a9e; font-size: 10px; font-weight: 600; }

.auth-input,
.auth-password { position: relative; display: block; }

.auth-input > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 16px;
    color: #6c88a4;
    font-size: 17px;
    transform: translateY(-50%);
    pointer-events: none;
}

.auth-input > input { padding-left: 46px; }
.auth-input.auth-password > input { padding-right: 54px; }
.auth-password:not(.auth-input) input { padding-right: 76px; }

.auth-password button {
    position: absolute;
    top: 50%;
    right: 7px;
    min-width: 60px;
    height: 38px;
    padding: 0 9px;
    border: 0;
    border-radius: 9px;
    color: #0870e1;
    background: #edf6ff;
    font-size: 10px;
    font-weight: 800;
    transform: translateY(-50%);
    cursor: pointer;
}

.auth-input.auth-password button {
    min-width: 40px;
    width: 40px;
    padding: 0;
    color: #426b94;
    background: transparent;
    font-size: 18px;
}

.auth-input.auth-password button:hover { color: #0870e1; background: #edf6ff; }

.auth-check {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: start;
    gap: 9px;
    color: #5f748a;
    font-size: 11px;
    line-height: 1.6;
    text-align: left;
}

.auth-check input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: #0872e5; }

.auth-submit {
    width: 100%;
    min-height: 52px;
    padding: 0 20px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, #075fd6, #0787f5);
    box-shadow: 0 13px 29px rgba(7, 100, 222, .24);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.auth-submit i { font-size: 16px; transition: transform .2s ease; }
.auth-submit:hover { transform: translateY(-2px); box-shadow: 0 17px 34px rgba(7, 100, 222, .3); }
.auth-submit:hover i { transform: translateX(3px); }

.auth-switch {
    margin: 23px 0 0;
    color: #65798e;
    font-size: 12px;
    text-align: center;
}

.auth-switch a { font-weight: 800; }
.auth-switch a i { margin-right: 3px; }

.auth-back {
    display: block;
    width: max-content;
    margin: 18px auto 0;
    color: #687b90;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.auth-back i { margin-right: 4px; transition: transform .2s ease; }
.auth-back:hover { color: #0870e1; }
.auth-back:hover i { display: inline-block; transform: translateX(-3px); }

@media (max-width: 860px) {
    .auth-page { padding: 58px 22px; }
    .auth-shell { grid-template-columns: 1fr; gap: 44px; }
    .auth-intro { max-width: 650px; margin: auto; text-align: center; }
    .auth-intro > p { margin-inline: auto; }
    .auth-features { width: max-content; max-width: 100%; margin-inline: auto; text-align: left; }
    .auth-card, .auth-page--login .auth-card { width: 100%; max-width: 540px; margin: auto; justify-self: center; }
    .auth-shell--register { align-items: center; }
}

@media (max-width: 520px) {
    .auth-page { padding: 42px 14px; }
    .auth-card { padding: 32px 22px; border-radius: 21px; }
    .auth-intro h1 { font-size: 39px; }
    .auth-intro > p { font-size: 14px; }
    .auth-features { font-size: 13px; }
    .auth-card__heading h1, .auth-card__heading h2 { font-size: 26px; }
    .auth-card__heading p { font-size: 12px; }
}