.verification-card{max-width:620px}.verification-icon{display:grid;width:58px;height:58px;margin:0 auto 18px;place-items:center;border-radius:18px;background:#f4eafd;color:#9844c5}.verification-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.verification-icon.is-success{background:#e9f8ef;color:#267b4b}.verification-icon.is-warning{background:#fff4e4;color:#a76318}.verification-email{display:block;margin:-5px 0 12px;color:#703094;font-size:1rem;overflow-wrap:anywhere}.verification-spam{display:grid;gap:4px;margin:20px 0;padding:14px 16px;border:1px solid #eadff3;border-radius:12px;background:#fbf9fd;color:#62586c;font-size:.875rem;line-height:1.45}.verification-spam strong{color:#2e2438}.verification-actions .button{width:100%;min-height:46px}.verification-change{margin-top:14px;border-top:1px solid #ece5f1;padding-top:14px}.verification-change summary{cursor:pointer;color:#703094;font-weight:700;text-align:center;list-style-position:inside;min-height:42px;line-height:42px}.verification-change .auth-form{margin-top:12px}.verification-change .button{width:100%}.verification-links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 22px;margin-top:20px;font-size:.9rem}.verification-result{text-align:center}.verification-result>.button{width:100%;margin-top:20px}.verification-back{display:inline-block;margin-top:16px}.verification-card .notice,.verification-card .form-alert{margin-top:18px}
@media(max-width:640px){.verification-card{width:100%}.verification-icon{width:52px;height:52px;margin-bottom:14px}.verification-spam{padding:12px 14px}.verification-links{display:grid;text-align:center}}

/* Compact email-change panel inside the verification card. */
.verification-change {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid #e8dfe5;
}

.verification-change summary {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #7f354a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
}

.verification-change summary::-webkit-details-marker {
    display: none;
}

.verification-change summary::after {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: translateY(-2px) rotate(45deg);
    transition: transform 160ms ease;
}

.verification-change[open] summary::after {
    transform: translateY(2px) rotate(225deg);
}

.verification-change summary:hover,
.verification-change summary:focus-visible {
    color: #68283a;
}

.verification-change summary:focus-visible {
    border-radius: 8px;
    outline: 3px solid rgba(127, 53, 74, 0.13);
    outline-offset: 2px;
}

.verification-change-body {
    display: grid;
    gap: 14px;
    margin-top: 8px;
}

.verification-current-email {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    padding: 9px 11px;
    border-radius: 9px;
    color: #776b72;
    background: #faf7f7;
    font-size: 12px;
    line-height: 1.4;
}

.verification-current-email strong {
    min-width: 0;
    color: #4b3e45;
    font-weight: 650;
    overflow-wrap: anywhere;
}

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

.verification-change-field {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.verification-change-field > span:first-child {
    color: #3a2e33;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
}

.verification-change-field > input,
.verification-password-control > input {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid #ded4d8;
    border-radius: 10px;
    outline: none;
    color: #342a2f;
    background: #fffdfc;
    box-shadow: 0 1px 2px rgba(54, 35, 42, 0.025);
    font: inherit;
    font-size: 14px;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.verification-change-field > input:hover,
.verification-password-control > input:hover {
    border-color: #cdbfc5;
}

.verification-change-field > input:focus,
.verification-password-control > input:focus {
    border-color: #9a5d66;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(154, 93, 102, 0.12);
}

.verification-change-field > input[aria-invalid="true"],
.verification-password-control > input[aria-invalid="true"] {
    border-color: #b85a57;
    box-shadow: 0 0 0 3px rgba(184, 90, 87, 0.09);
}

.verification-password-control {
    position: relative;
    display: block;
    min-width: 0;
}

.verification-password-control > input {
    padding-right: 76px;
}

.verification-password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    min-width: 58px;
    min-height: 32px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    color: #7f354a;
    background: #f7eff1;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.verification-password-toggle:hover,
.verification-password-toggle:focus-visible,
.verification-password-toggle.is-visible {
    color: #68283a;
    background: #f0e1e5;
}

.verification-password-toggle:focus-visible {
    outline: 2px solid rgba(127, 53, 74, 0.22);
    outline-offset: 1px;
}

.verification-change-field .field-error {
    margin: 0;
    color: #9c403b;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
}

.verification-change .verification-change-submit {
    width: 100%;
    min-height: 46px;
    margin: 1px 0 0;
    border-radius: 10px;
    box-shadow: 0 5px 14px rgba(127, 53, 74, 0.14);
    font-size: 14px;
    cursor: pointer;
}

.verification-change .verification-change-submit:hover {
    filter: brightness(1.05);
}

@media (max-width: 520px) {
    .verification-change {
        margin-top: 16px;
        padding-top: 10px;
    }

    .verification-change-body {
        gap: 12px;
        margin-top: 6px;
    }

    .verification-current-email {
        display: grid;
        gap: 2px;
    }

    .verification-change-form {
        gap: 13px;
    }

    .verification-change-field > input,
    .verification-password-control > input,
    .verification-change .verification-change-submit {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .verification-change summary::after,
    .verification-change-field > input,
    .verification-password-control > input {
        transition: none;
    }
}