.auth-public-page {
    background: #fff9f1;
    color: #2b150a;
}

.auth-hero {
    min-height: 650px;
    padding: 82px 24px 96px;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #f0e2d5;
    background: linear-gradient(118deg, #fffaf4 0%, #fff8ed 58%, #fff0d9 100%);
}

.auth-hero__glow {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(2px);
}

.auth-hero__glow--one {
    width: 310px;
    height: 310px;
    right: -85px;
    top: -110px;
    background: rgba(255, 111, 31, .12);
}

.auth-hero__glow--two {
    width: 190px;
    height: 190px;
    left: 42%;
    bottom: -105px;
    background: rgba(255, 184, 78, .15);
}

.auth-shell {
    width: min(1240px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .78fr);
    align-items: center;
    gap: 100px;
    position: relative;
    z-index: 1;
}

.auth-copy {
    max-width: 650px;
}

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border-radius: 999px;
    background: #fff0d9;
    color: #e95412;
    font: 800 13px/1.2 "Nunito Sans", sans-serif;
    letter-spacing: .02em;
}

.auth-eyebrow span { color: #ffad32; }

.auth-copy h1 {
    margin: 25px 0 22px;
    font: 800 clamp(48px, 5vw, 72px)/.98 "Baloo 2", sans-serif;
    letter-spacing: -.035em;
}

.auth-copy h1 span { color: #f36b22; }

.auth-copy > p {
    max-width: 585px;
    margin: 0;
    color: #6f707b;
    font: 500 19px/1.65 "Nunito Sans", sans-serif;
}

.auth-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 13px 24px;
    padding: 0;
    margin: 33px 0 0;
    list-style: none;
    font: 800 14px/1.3 "Nunito Sans", sans-serif;
}

.auth-benefits li { display: flex; align-items: center; gap: 8px; }
.auth-benefits span {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    color: #2d8b4e;
    background: #e5f3e8;
}

.auth-card {
    padding: 45px;
    border: 1px solid #eadbce;
    border-radius: 24px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 24px 70px rgba(66, 33, 13, .14);
}

.auth-card__label {
    color: #f36b22;
    font: 900 12px/1.2 "Nunito Sans", sans-serif;
    letter-spacing: .11em;
}

.otp-heading { display: flex; align-items: flex-start; gap: 14px; }
.otp-heading__icon { display: none; }

.auth-card h2 {
    margin: 8px 0 7px;
    font: 800 39px/1.1 "Baloo 2", sans-serif;
}

.auth-card__intro {
    margin: 0 0 26px;
    color: #6f707b;
    font: 500 16px/1.55 "Nunito Sans", sans-serif;
}

.auth-field label {
    display: block;
    margin-bottom: 8px;
    font: 800 14px/1.2 "Nunito Sans", sans-serif;
}

.auth-field input {
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    padding: 0 17px;
    border: 1px solid #ddcfc3;
    border-radius: 11px;
    outline: none;
    background: #fffdfa;
    color: #2b150a;
    font: 500 16px/1 "Nunito Sans", sans-serif;
    transition: border-color .2s, box-shadow .2s;
}

.auth-field input:focus { border-color: #ff6b22; box-shadow: 0 0 0 4px rgba(255, 107, 34, .12); }
.auth-field input.is-invalid { border-color: #c9322c; background: #fff8f7; }
.auth-error { margin: 8px 0 0; color: #b42318; font: 700 13px/1.4 "Nunito Sans", sans-serif; }

.auth-submit {
    width: 100%;
    height: 54px;
    margin-top: 18px;
    border: 0;
    border-radius: 11px;
    background: #ff681f;
    color: #fff;
    cursor: pointer;
    font: 900 16px/1 "Nunito Sans", sans-serif;
    box-shadow: 0 12px 25px rgba(255, 104, 31, .22);
    transition: transform .2s, background .2s;
}

.auth-submit:hover { background: #eb5712; transform: translateY(-2px); }
.auth-submit span { margin-left: 8px; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 25px 0 18px; color: #969098; font: 700 12px/1 "Nunito Sans", sans-serif; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #eee2d8; }
.auth-links { display: flex; justify-content: center; gap: 25px; }
.auth-links a { color: #35180a; font: 800 14px/1.3 "Nunito Sans", sans-serif; text-decoration: none; }
.auth-links a:hover { color: #f15f18; }
.auth-notice { margin: 22px 0 0; padding: 12px; border-radius: 9px; color: #796c64; background: #faf5ef; text-align: center; font: 600 12px/1.45 "Nunito Sans", sans-serif; }
.otp-destination { display: flex; align-items: center; gap: 11px; margin: -10px 0 20px; padding: 13px 14px; border: 1px solid #eadfd6; border-radius: 13px; background: linear-gradient(135deg, #fffaf6, #fff); color: #2b150a; }
.otp-destination > span:first-child { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #fff0e4; color: #ef6220; }
.otp-destination > span:first-child svg { width: 18px; height: 18px; }
.otp-destination > div { display: grid; min-width: 0; gap: 2px; }
.otp-destination small { color: #897971; font: 700 10px/1.2 "Nunito Sans", sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.otp-destination strong { overflow: hidden; font-size: 14px; letter-spacing: .02em; text-overflow: ellipsis; }
.otp-destination__check { display: grid; flex: 0 0 26px; width: 26px; height: 26px; margin-left: auto; place-items: center; border-radius: 50%; background: #ddf5e4; color: #23834a; }
.otp-destination__check svg { width: 17px; height: 17px; }
.otp-status { display: flex; align-items: center; gap: 11px; margin: 0 0 18px; padding: 12px 13px; border: 1px solid #ccebd5; border-radius: 12px; background: linear-gradient(135deg, #effaf2, #e7f7ec); color: #176b39; font: 750 13px/1.4 "Nunito Sans", sans-serif; display: none;}
.otp-status__check { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #269654; color: #fff; box-shadow: 0 5px 12px rgba(38, 150, 84, .2); }
.otp-status__check svg { width: 19px; height: 19px; }
.otp-status > div { display: grid; gap: 1px; }
.otp-status strong { font-size: 13px; }
.otp-status small { color: #47805d; font: 600 11px/1.35 "Nunito Sans", sans-serif; }
.auth-field--otp input { height: 68px; text-align: center; font: 900 29px/1 "Nunito Sans", sans-serif; letter-spacing: .75em; padding-left: calc(17px + .75em); }
.auth-field--otp small { display: block; margin-top: 8px; color: #81766f; font-size: 12px; line-height: 1.4; }
.otp-actions { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 22px; color: #7c726c; font-size: 13px; }
.otp-actions form { margin: 0; }
.otp-actions button,.otp-cancel button { padding: 0; border: 0; background: transparent; color: #e95c19; font: 850 13px "Nunito Sans", sans-serif; cursor: pointer; }
.otp-actions button:disabled { color: #9d9691; cursor: not-allowed; }
.otp-cancel { margin-top: 18px; padding-top: 17px; border-top: 1px solid #eee2d8; text-align: center; }
.otp-cancel button { color: #3c261b; }

@media (max-width: 960px) {
    .auth-shell { grid-template-columns: 1fr; gap: 48px; }
    .auth-copy { text-align: center; margin: 0 auto; }
    .auth-benefits { justify-content: center; }
    .auth-card-wrap { width: min(520px, 100%); margin: 0 auto; }
}

@media (max-width: 560px) {
    .auth-hero { padding: 55px 17px 70px; }
    .auth-copy h1 { font-size: 45px; }
    .auth-copy > p { font-size: 17px; }
    .auth-benefits { align-items: flex-start; flex-direction: column; width: max-content; margin-left: auto; margin-right: auto; }
    .auth-card { padding: 31px 23px; border-radius: 18px; }
    .auth-links { flex-direction: column; align-items: center; gap: 12px; }
}
