.auth-page {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 142px 24px 100px;
    overflow: hidden;
    color: #172b4d;
    background:
        radial-gradient(circle at 4% 4%, rgba(199, 224, 255, .75), transparent 32%),
        radial-gradient(circle at 96% 92%, rgba(219, 229, 252, .78), transparent 35%),
        linear-gradient(126deg, #f4f9ff 0%, #f8fbff 52%, #f0f5fd 100%);
}
.auth-page::before,
.auth-page::after { position: absolute; z-index: -1; border: 1px solid rgba(108, 152, 217, .15); border-radius: 50%; content: ''; pointer-events: none; }
.auth-page::before { top: -250px; right: -190px; width: 610px; height: 610px; }
.auth-page::after { bottom: -310px; left: -230px; width: 660px; height: 660px; }

.auth-page [hidden] { display: none !important; }
.utheme-login-page .site-footer-cta { display: none; }

.auth-panel {
    position: relative;
    z-index: 1;
    width: min(480px, 100%);
    min-width: 0;
    margin: 0 auto;
    padding: 46px 40px 42px;
    border: 1px solid rgba(192, 210, 234, .8);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 22px 68px rgba(32, 67, 118, .12), 0 4px 14px rgba(32, 67, 118, .04);
}
.auth-heading h1 {
    margin: 0;
    color: #172b4d;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.3;
}
.auth-page .auth-heading p {
    margin: 13px 0 0;
    color: #7487a2;
    font-size: 13px !important;
    line-height: 1.6;
}

.auth-form { display: grid; gap: 18px; margin-top: 34px; }
.auth-field { min-width: 0; }
.auth-phone-input,
.auth-code-input {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    height: 52px;
    overflow: hidden;
    border: 1px solid #dbe5f1;
    border-radius: 11px;
    background: #fbfdff;
    transition: border-color .2s, box-shadow .2s;
}
.auth-phone-input:focus-within,
.auth-code-input:focus-within { border-color: #3983ee; box-shadow: 0 0 0 3px rgba(38, 115, 236, .11); }
.auth-phone-input__prefix {
    display: grid;
    place-items: center;
    flex: 0 0 62px;
    margin: 10px 0;
    border-right: 1px solid #e1e9f3;
    color: #40516e;
    font-size: 14px;
}
.auth-phone-input input,
.auth-code-input input {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 0 14px;
    border: 0;
    outline: 0;
    color: #172b4d;
    background: transparent;
    font-size: 14px;
}
.auth-phone-input input::placeholder,
.auth-code-input input::placeholder { color: #a5afbf; }
.auth-code-input button {
    flex: 0 0 auto;
    min-width: 102px;
    margin: 6px;
    padding: 0 10px;
    border-radius: 7px;
    color: #2269d7;
    background: #ebf3ff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.auth-code-input button:hover:not(:disabled) { background: #dceaff; }
.auth-code-input button:disabled { color: #92a4bc; background: #f0f4fa; cursor: not-allowed; }

.auth-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 3px;
    color: #6b7a90;
    font-size: 12px;
    line-height: 1.7;
    cursor: pointer;
}
.auth-consent input { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 3px; accent-color: #2673ec; }
.auth-consent a { color: #2673ec; text-decoration: none; }
.auth-consent a:hover { text-decoration: underline; text-underline-offset: 2px; }

.auth-submit {
    width: 100%;
    min-height: 52px;
    margin-top: 4px;
    border-radius: 11px;
    color: #fff;
    background: #112b4f;
    font-size: 15px;
    font-weight: 700;
    transition: background .2s;
}
.auth-submit:hover:not(:disabled) { background: #1e467e; }
.auth-submit:disabled { color: #eef4ff; background: #a7bddc; cursor: not-allowed; }
.auth-feedback { margin-top: 18px; color: #bc3b3b; font-size: 13px; line-height: 1.6; }
.auth-feedback.is-success { color: #23805d; }
.auth-page button:focus-visible,
.auth-page a:focus-visible,
.auth-page input:focus-visible { outline: 3px solid #77adff; outline-offset: 3px; }
.auth-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

#main-header.glass-nav { border-bottom: 1px solid #e7edf5; background: rgba(255, 255, 255, .93); backdrop-filter: blur(16px); }

@media (max-width: 600px) {
    .auth-page { align-items: flex-start; min-height: 100svh; padding: 143px 20px 64px; }
    .auth-panel { width: 100%; max-width: 480px; padding: 35px 27px 36px; border-radius: 23px; }
    .auth-heading h1 { font-size: 25px; }
}

@media (max-width: 360px) {
    .auth-page { padding-right: 16px; padding-left: 16px; }
    .auth-panel { padding-right: 19px; padding-left: 19px; }
    .auth-code-input button { min-width: 89px; padding: 0 7px; font-size: 11px; }
    .auth-phone-input__prefix { flex-basis: 55px; }
    .auth-phone-input input,
    .auth-code-input input { padding-right: 9px; padding-left: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-page * { transition-duration: .01ms !important; }
}