.pae-mobile-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
}

.pae-mobile-row .pae-button {
    min-width: 142px;
    padding-inline: 18px;
}

.pae-mobile-row .pae-button[hidden] {
    display: none !important;
}

.pae-otp-box {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid #b8ddd8;
    border-radius: 14px;
    background: #f2fbf9;
}

.pae-otp-box[hidden],
.pae-mobile-verified[hidden] {
    display: none !important;
}

.pae-otp-box__heading,
.pae-mobile-verified {
    display: flex;
    align-items: center;
    gap: 9px;
}

.pae-otp-box__heading strong,
.pae-mobile-verified strong {
    color: #075f58;
}

.pae-otp-box__heading span,
.pae-mobile-verified span {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    flex: 0 0 28px;
    border-radius: 50%;
    color: #fff;
    background: #0b8b80;
    font-weight: 800;
}

.pae-otp-entry {
    display: grid;
    grid-template-columns: minmax(0, 220px) auto;
    gap: 10px;
    margin-top: 12px;
}

.pae-otp-entry input {
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: .28em;
    text-align: center;
}

.pae-otp-help {
    display: block;
    margin-top: 9px;
    color: #536d73;
    line-height: 1.5;
}

.pae-mobile-verified {
    margin-top: 10px;
    padding: 11px 13px;
    border: 1px solid #a9d9c9;
    border-radius: 12px;
    color: #075f58;
    background: #edf9f3;
}

.apotp-page {
    min-height: 100vh;
    background: #f2f7f8;
    color: #173b45;
}

.apotp-main {
    padding: 54px 20px 72px;
}

.apotp-card {
    width: min(620px, 100%);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #d5e1e3;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(14, 56, 66, .12);
}

.apotp-card__head {
    padding: 30px 32px;
    color: #fff;
    background: linear-gradient(135deg, #063f4b, #087d75);
}

.apotp-card__head p {
    margin: 0 0 7px;
    color: #9fe2d7;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.apotp-card__head h1 {
    margin: 0;
    font-size: clamp(1.55rem, 4vw, 2.1rem);
}

.apotp-card__body {
    padding: 30px 32px 34px;
}

.apotp-mobile {
    margin: 20px 0;
    padding: 17px 18px;
    border: 1px solid #c5ddda;
    border-radius: 14px;
    background: #f2fbf9;
}

.apotp-mobile span {
    display: block;
    margin-bottom: 5px;
    color: #5a747a;
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.apotp-mobile strong {
    color: #075f58;
    font-size: 1.35rem;
    letter-spacing: .04em;
}

.apotp-form {
    display: grid;
    gap: 14px;
}

.apotp-form label {
    font-weight: 750;
}

.apotp-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 15px;
    border: 1px solid #b8cdd1;
    border-radius: 11px;
    font: inherit;
}

.apotp-form input:focus {
    outline: 3px solid rgba(11, 139, 128, .16);
    border-color: #0b8b80;
}

.apotp-code {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    letter-spacing: .3em;
    text-align: center;
}

.apotp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.apotp-button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border: 1px solid #087d75;
    border-radius: 11px;
    color: #fff;
    background: #087d75;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.apotp-button--outline {
    color: #075f58;
    background: #fff;
}

.apotp-alert {
    margin: 0 0 18px;
    padding: 13px 15px;
    border-radius: 11px;
    line-height: 1.5;
}

.apotp-alert--danger {
    border: 1px solid #e8bab6;
    color: #87362f;
    background: #fff3f1;
}

.apotp-alert--success {
    border: 1px solid #a9d9c9;
    color: #075f58;
    background: #edf9f3;
}

.apotp-note {
    margin: 18px 0 0;
    color: #5a747a;
    font-size: .9rem;
    line-height: 1.55;
}

@media (max-width: 620px) {
    .pae-mobile-row,
    .pae-otp-entry {
        grid-template-columns: 1fr;
    }

    .pae-mobile-row .pae-button,
    .pae-otp-entry .pae-button {
        width: 100%;
    }

    .apotp-main {
        padding: 24px 12px 42px;
    }

    .apotp-card__head,
    .apotp-card__body {
        padding: 24px 20px;
    }

    .apotp-actions,
    .apotp-button {
        width: 100%;
    }
}