@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

.portal-login {
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 10% 10%, rgba(6, 174, 212, .16), transparent 28%),
        radial-gradient(circle at 90% 80%, rgba(105, 56, 239, .16), transparent 30%),
        linear-gradient(145deg, #f6f9ff, #f8f6ff) !important;
    font-family: 'Manrope', system-ui, sans-serif;
}

.portal-login::before,
.portal-login::after {
    content: "";
    position: fixed;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}

.portal-login::before {
    top: -190px;
    right: -150px;
    width: 460px;
    height: 460px;
    border: 1px solid rgba(37, 99, 235, .11);
    box-shadow: 0 0 0 55px rgba(37, 99, 235, .025);
}

.portal-login::after {
    bottom: -160px;
    left: -140px;
    width: 360px;
    height: 360px;
    background: rgba(105, 56, 239, .045);
}

.portal-login > div {
    position: relative;
    z-index: 2;
}

.portal-login > div > div:nth-child(2) {
    border-color: rgba(218, 225, 238, .85) !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 25px 70px rgba(28, 53, 105, .13);
    backdrop-filter: blur(18px);
}

.portal-login h1 {
    letter-spacing: -.65px;
}

.portal-login input {
    border-color: #e0e6f0 !important;
    background: #f8faff !important;
}

.portal-login input:focus {
    background: #fff !important;
}

.portal-login button[type="submit"] {
    background-image: linear-gradient(135deg, #175cd3, #6938ef) !important;
    box-shadow: 0 13px 28px rgba(54, 67, 203, .24);
}

.portal-login-staff button[type="submit"] {
    background-image: linear-gradient(135deg, #6938ef, #8f56df) !important;
}

.portal-login-student button[type="submit"] {
    background-image: linear-gradient(135deg, #07966b, #12b886) !important;
}

@media (max-width: 520px) {
    .portal-login {
        padding: 22px !important;
    }

    .portal-login > div > div:nth-child(2) {
        padding: 25px !important;
        border-radius: 25px !important;
    }
}

/* Premium glass portal treatment */
.portal-login {
    color: #f6f9ff;
    background:
        radial-gradient(circle at 12% 12%, rgba(37, 99, 235, .28), transparent 30%),
        radial-gradient(circle at 88% 78%, rgba(124, 58, 237, .24), transparent 31%),
        radial-gradient(circle at 65% 15%, rgba(6, 182, 212, .12), transparent 22%),
        linear-gradient(145deg, #050917, #0a1430) !important;
}

.portal-login::before {
    border-color: rgba(103, 232, 249, .16);
    box-shadow: 0 0 0 55px rgba(37, 99, 235, .04), 0 0 90px rgba(59, 130, 246, .12);
}

.portal-login::after {
    background: rgba(124, 58, 237, .08);
    filter: blur(20px);
}

.portal-login > div > div:first-child > div {
    border: 1px solid rgba(255, 255, 255, .2);
    background-image: linear-gradient(145deg, #2563eb, #7c3aed, #06b6d4) !important;
    box-shadow: 0 18px 45px rgba(67, 62, 220, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.portal-login h1,
.portal-login h2 {
    color: #f7faff !important;
}

.portal-login > div > div:first-child p,
.portal-login > div > div:nth-child(2) p,
.portal-login label {
    color: #8999b6 !important;
}

.portal-login > div > div:nth-child(2) {
    border-color: rgba(255, 255, 255, .15) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .045)) !important;
    box-shadow: 0 35px 85px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .14);
    backdrop-filter: blur(28px) saturate(150%);
}

.portal-login input {
    color: #f4f8ff !important;
    border-color: rgba(255, 255, 255, .12) !important;
    background: rgba(4, 10, 27, .48) !important;
}

.portal-login input::placeholder {
    color: #53627e !important;
}

.portal-login input:focus {
    border-color: rgba(103, 232, 249, .4) !important;
    background: rgba(5, 13, 34, .78) !important;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, .08) !important;
}

.portal-login button[type="submit"] {
    border: 1px solid rgba(255, 255, 255, .18);
    background-image: linear-gradient(115deg, #2563eb, #7c3aed, #0891b2) !important;
    background-size: 220% 220%;
    box-shadow: 0 15px 35px rgba(54, 67, 203, .3);
    animation: portalGradient 5s ease infinite;
}

.portal-login > div > div:last-child a {
    color: #8091af !important;
}

.portal-login > div > div:last-child a:hover {
    color: #67e8f9 !important;
}

.portal-login .portal-whatsapp-link {
    color: #45e7a8 !important;
    padding: 9px 14px;
    border: 1px solid rgba(69, 231, 168, .2);
    border-radius: 999px;
    background: rgba(16, 185, 129, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.portal-login .portal-whatsapp-link:hover {
    color: #9af7d2 !important;
    border-color: rgba(69, 231, 168, .4);
    background: rgba(16, 185, 129, .14);
}

.portal-recovery-note {
    color: #a7b5ce;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.65;
}

.portal-recovery-note strong {
    color: #d8f9ff;
}

.portal-login .portal-recovery-select {
    width: 100%;
    padding: 14px 16px;
    color: #f4f8ff;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    outline: none;
    background: rgba(4, 10, 27, .48);
}

.portal-login .portal-recovery-select:focus {
    border-color: rgba(103, 232, 249, .4);
    box-shadow: 0 0 0 4px rgba(34, 211, 238, .08);
}

.portal-login .portal-recovery-select option {
    color: #081321;
    background: #ffffff;
}

@keyframes portalGradient {
    0%, 100% { background-position: 0 50%; }
    50% { background-position: 100% 50%; }
}

/* Role-specific bouncing glass login cards */
.portal-login-card {
    transform-origin: center center;
    animation: portalPopupBounce 760ms cubic-bezier(.2, .9, .28, 1.18) both;
}

@keyframes portalPopupBounce {
    0% {
        opacity: 0;
        transform: translateY(54px) scale(.72);
    }
    58% {
        opacity: 1;
        transform: translateY(-10px) scale(1.035);
    }
    78% {
        transform: translateY(4px) scale(.985);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.portal-login-student {
    background:
        radial-gradient(circle at 16% 14%, rgba(16, 185, 129, .28), transparent 31%),
        radial-gradient(circle at 87% 82%, rgba(45, 212, 191, .2), transparent 31%),
        linear-gradient(145deg, #031810, #06261c 58%, #061323) !important;
}

.portal-login-student .portal-login-card {
    border-color: rgba(110, 231, 183, .28) !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(190, 255, 225, .18), transparent 36%),
        linear-gradient(145deg, rgba(13, 103, 78, .58), rgba(5, 43, 37, .8)) !important;
    box-shadow: 0 34px 90px rgba(0, 0, 0, .42), 0 0 42px rgba(16, 185, 129, .13), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.portal-login-staff {
    background:
        radial-gradient(circle at 14% 12%, rgba(56, 189, 248, .3), transparent 30%),
        radial-gradient(circle at 88% 82%, rgba(37, 99, 235, .25), transparent 32%),
        linear-gradient(145deg, #041323, #061f3d 58%, #08132d) !important;
}

.portal-login-staff .portal-login-card {
    border-color: rgba(125, 211, 252, .3) !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(191, 234, 255, .2), transparent 36%),
        linear-gradient(145deg, rgba(12, 93, 143, .62), rgba(8, 42, 82, .82)) !important;
    box-shadow: 0 34px 90px rgba(0, 0, 0, .42), 0 0 42px rgba(37, 153, 245, .14), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.portal-login-staff button[type="submit"] {
    background-image: linear-gradient(115deg, #0ea5e9, #2563eb, #06b6d4) !important;
}

.portal-login-teacher {
    background:
        radial-gradient(circle at 15% 12%, rgba(255, 255, 255, .2), transparent 30%),
        radial-gradient(circle at 88% 80%, rgba(148, 163, 184, .18), transparent 31%),
        linear-gradient(145deg, #172033, #26354a 56%, #101827) !important;
}

.portal-login-teacher .portal-login-card {
    color: #0f172a;
    border-color: rgba(255, 255, 255, .74) !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(255, 255, 255, .98), transparent 42%),
        linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(226, 236, 244, .86)) !important;
    box-shadow: 0 34px 90px rgba(0, 0, 0, .34), 0 0 42px rgba(255, 255, 255, .12), inset 0 1px 0 #ffffff;
}

.portal-login-teacher .portal-login-card h2,
.portal-login-teacher .portal-login-card label {
    color: #101827 !important;
}

.portal-login-teacher .portal-login-card p {
    color: #475569 !important;
}

.portal-login-teacher .portal-login-card input {
    color: #0f172a !important;
    border-color: rgba(100, 116, 139, .24) !important;
    background: rgba(255, 255, 255, .78) !important;
}

.portal-login-teacher button[type="submit"] {
    color: #ffffff !important;
    background-image: linear-gradient(115deg, #334155, #2563eb, #64748b) !important;
}

.portal-login-admin {
    background:
        radial-gradient(circle at 14% 12%, rgba(99, 102, 241, .2), transparent 29%),
        radial-gradient(circle at 88% 82%, rgba(15, 23, 42, .5), transparent 34%),
        linear-gradient(145deg, #020308, #090b13 56%, #02030a) !important;
}

.portal-login-admin .portal-login-card {
    border-color: rgba(148, 163, 184, .18) !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(255, 255, 255, .1), transparent 38%),
        linear-gradient(145deg, rgba(3, 7, 18, .94), rgba(13, 17, 28, .88)) !important;
    box-shadow: 0 38px 100px rgba(0, 0, 0, .72), 0 0 42px rgba(99, 102, 241, .1), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.portal-login-admin button[type="submit"] {
    background-image: linear-gradient(115deg, #111827, #312e81, #030712) !important;
}

.portal-login-recovery {
    background:
        radial-gradient(circle at 14% 12%, rgba(34, 211, 238, .22), transparent 30%),
        radial-gradient(circle at 88% 82%, rgba(99, 102, 241, .2), transparent 32%),
        linear-gradient(145deg, #07111f, #0b2034 58%, #0b1223) !important;
}

.portal-login-recovery .portal-login-card {
    border-color: rgba(165, 243, 252, .28) !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(255, 255, 255, .18), transparent 38%),
        linear-gradient(145deg, rgba(15, 81, 111, .72), rgba(14, 32, 62, .86)) !important;
}

.portal-login-recovery .portal-recovery-success {
    color: #d6fff1;
    border: 1px solid rgba(110, 231, 183, .25);
    background: rgba(16, 185, 129, .13);
}

.portal-login .portal-reset-login-link {
    color: #071522 !important;
    background: linear-gradient(120deg, #67e8f9, #34d399);
}

@media (prefers-reduced-motion: reduce) {
    .portal-login-card {
        animation-duration: 1ms;
    }
}

/* Final monochrome password-recovery treatment */
.portal-forgot-modal,
.portal-success-modal {
    color: #050505;
    border-color: rgba(255, 255, 255, .94);
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 1), transparent 36%),
        radial-gradient(circle at 96% 88%, rgba(15, 23, 42, .08), transparent 36%),
        linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(238, 241, 245, .88)) !important;
    box-shadow:
        0 36px 105px rgba(0, 0, 0, .36),
        0 0 0 1px rgba(255, 255, 255, .42),
        inset 0 1px 0 #ffffff;
}

.portal-forgot-modal::before {
    background: linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(15, 23, 42, .09));
}

.portal-modal-close {
    color: #050505 !important;
    border-color: rgba(15, 23, 42, .12);
    background: rgba(255, 255, 255, .72);
}

.portal-modal-close:hover {
    color: #000000 !important;
    background: #ffffff;
}

.portal-modal-icon,
.portal-success-icon {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .92);
    background: linear-gradient(145deg, #0f172a, #000000);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.portal-success-badge {
    color: #050505;
    border-color: #ffffff;
    background: #ffffff;
    box-shadow: 0 7px 16px rgba(0, 0, 0, .2);
}

.portal-modal-kicker,
.portal-modal-copy,
.portal-success-message,
.portal-success-thanks,
.portal-modal-form label {
    color: #050505 !important;
}

.portal-forgot-modal h1 {
    color: #000000 !important;
    background: none;
    -webkit-text-fill-color: currentColor;
    animation: none;
}

.portal-login .portal-modal-form .portal-recovery-select,
.portal-login .portal-modal-input input {
    color: #050505 !important;
    border-color: rgba(15, 23, 42, .17) !important;
    background: rgba(255, 255, 255, .82) !important;
}

.portal-login .portal-modal-form .portal-recovery-select:focus,
.portal-login .portal-modal-input input:focus {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, .48) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(15, 23, 42, .08) !important;
}

.portal-modal-input > i {
    color: #050505;
}

.portal-modal-submit,
.portal-glass-ok-button {
    color: #ffffff !important;
    border-color: #000000 !important;
    background: #050505 !important;
    background-image: none !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
    animation: none !important;
    transition: background 160ms ease !important;
}

.portal-modal-submit::before,
.portal-modal-submit::after,
.portal-glass-ok-button::before,
.portal-glass-ok-button::after {
    display: none !important;
    animation: none !important;
}

.portal-modal-submit:hover,
.portal-glass-ok-button:hover {
    color: #ffffff !important;
    background: #1f2937 !important;
    filter: none;
    transform: none;
}

/* Compact forgot-password and confirmation modals */
.portal-modal-page {
    min-height: 100vh;
    padding: 0 !important;
    overflow: hidden;
}

.portal-modal-stage {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 20px;
}

.portal-modal-scrim {
    position: fixed;
    z-index: 0;
    inset: 0;
    background: rgba(1, 8, 18, .54);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.portal-forgot-modal {
    position: relative;
    z-index: 2;
    width: min(390px, calc(100vw - 32px));
    padding: 25px;
    color: #eaf9ff;
    border: 1px solid rgba(165, 243, 252, .28);
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 0%, rgba(207, 250, 254, .18), transparent 34%),
        linear-gradient(145deg, rgba(13, 72, 99, .92), rgba(9, 25, 48, .94));
    box-shadow:
        0 35px 100px rgba(0, 0, 0, .58),
        0 0 46px rgba(34, 211, 238, .12),
        inset 0 1px 0 rgba(255, 255, 255, .18);
    backdrop-filter: blur(30px) saturate(145%);
    -webkit-backdrop-filter: blur(30px) saturate(145%);
    animation: portalModalBounce 720ms cubic-bezier(.2, .9, .28, 1.16) both;
}

.portal-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #d9f8ff !important;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    transition: transform 180ms ease, background 180ms ease;
}

.portal-modal-close:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .16);
    transform: rotate(7deg) scale(1.06);
}

.portal-modal-icon,
.portal-success-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    color: #062131;
    font-size: 20px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 19px;
    background: linear-gradient(145deg, #b8f5ff, #4fd1e8);
    box-shadow: 0 14px 34px rgba(34, 211, 238, .24), inset 0 1px 0 #ffffff;
}

.portal-modal-kicker {
    margin: 0 0 6px;
    color: #79e8fb !important;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .18em;
    text-align: center;
}

.portal-forgot-modal h1 {
    margin: 0;
    color: #ffffff !important;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.035em;
    text-align: center;
}

.portal-modal-copy {
    max-width: 320px;
    margin: 10px auto 18px;
    color: #b4cddd !important;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.65;
    text-align: center;
}

.portal-modal-error {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 15px;
    padding: 11px 12px;
    color: #ffdbe1;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.45;
    border: 1px solid rgba(251, 113, 133, .22);
    border-radius: 14px;
    background: rgba(190, 24, 93, .12);
}

.portal-modal-form {
    display: grid;
    gap: 9px;
}

.portal-modal-form label {
    margin: 4px 0 0 2px;
    color: #d9ecf7 !important;
    font-size: 11px;
    font-weight: 800;
}

.portal-login .portal-modal-form .portal-recovery-select,
.portal-modal-input input {
    min-height: 45px;
    font-size: 13px !important;
    border-radius: 14px !important;
}

.portal-modal-input {
    position: relative;
}

.portal-modal-input > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 14px;
    color: #8ddff0;
    transform: translateY(-50%);
}

.portal-login .portal-modal-input input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    outline: none;
    background: rgba(2, 12, 29, .58) !important;
}

.portal-modal-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 47px;
    margin-top: 8px;
    overflow: hidden;
    color: #071522 !important;
    font-weight: 900 !important;
    border: 1px solid rgba(255, 255, 255, .36) !important;
    border-radius: 15px !important;
    background: linear-gradient(120deg, #67e8f9, #34d399, #7dd3fc) !important;
    background-size: 180% 180% !important;
    box-shadow: 0 14px 30px rgba(34, 211, 238, .2), inset 0 1px 0 rgba(255, 255, 255, .72);
    animation: portalGradient 4s ease infinite !important;
}

.portal-modal-support {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
    color: #79edbd !important;
    font-size: 11px;
    font-weight: 800;
}

.portal-success-modal {
    width: min(360px, calc(100vw - 32px));
    padding: 30px 26px 26px;
    text-align: center;
    border-color: rgba(110, 231, 183, .34);
    background:
        radial-gradient(circle at 50% -10%, rgba(167, 243, 208, .25), transparent 38%),
        linear-gradient(145deg, rgba(7, 79, 70, .94), rgba(6, 31, 47, .96));
    animation: portalSuccessPop 760ms cubic-bezier(.16, 1, .3, 1.18) both;
}

.portal-success-icon {
    width: 68px;
    height: 68px;
    margin-bottom: 16px;
    color: #04362c;
    font-size: 27px;
    border-radius: 24px;
    background: linear-gradient(145deg, #d1fae5, #34d399);
    box-shadow: 0 0 0 10px rgba(52, 211, 153, .08), 0 18px 42px rgba(16, 185, 129, .28);
    animation: portalSuccessPulse 2.2s ease-in-out infinite;
}

.portal-success-message {
    margin: 12px auto 0;
    color: #c8e7df !important;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.65;
}

.portal-success-thanks {
    margin: 9px 0 20px;
    color: #8df3cb !important;
    font-size: 14px;
    font-weight: 900;
}

.portal-glass-ok-button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    overflow: hidden;
    color: #061823 !important;
    font-size: 13px;
    font-weight: 950;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 16px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .86), transparent 38%),
        linear-gradient(120deg, rgba(165, 243, 252, .96), rgba(52, 211, 153, .94), rgba(125, 211, 252, .96));
    box-shadow: 0 16px 36px rgba(16, 185, 129, .22), inset 0 1px 0 #ffffff;
    animation: portalOkFloat 2.2s ease-in-out infinite;
}

.portal-glass-ok-button::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 34%;
    height: 240%;
    top: -70%;
    left: -65%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
    transform: rotate(20deg);
    animation: portalOkShine 2.8s ease-in-out infinite;
}

.portal-glass-ok-button:hover {
    color: #02080d !important;
    filter: brightness(1.06);
    transform: translateY(-2px) scale(1.015);
}

@keyframes portalModalBounce {
    0% { opacity: 0; transform: translateY(48px) scale(.78); }
    58% { opacity: 1; transform: translateY(-8px) scale(1.03); }
    80% { transform: translateY(3px) scale(.99); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes portalSuccessPop {
    0% { opacity: 0; transform: scale(.58) rotate(-4deg); }
    62% { opacity: 1; transform: scale(1.055) rotate(1deg); }
    82% { transform: scale(.985) rotate(0); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes portalSuccessPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(52, 211, 153, .08), 0 18px 42px rgba(16, 185, 129, .28); }
    50% { transform: scale(1.055); box-shadow: 0 0 0 15px rgba(52, 211, 153, .04), 0 20px 48px rgba(16, 185, 129, .34); }
}

@keyframes portalOkFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes portalOkShine {
    0%, 22% { left: -65%; opacity: 0; }
    40% { opacity: .9; }
    68%, 100% { left: 135%; opacity: 0; }
}

@media (max-width: 480px) {
    .portal-forgot-modal {
        padding: 22px 20px;
        border-radius: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal-forgot-modal,
    .portal-success-icon,
    .portal-glass-ok-button,
    .portal-glass-ok-button::before {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* White transparent liquid-glass recovery treatment */
.portal-forgot-modal,
.portal-success-modal {
    isolation: isolate;
    overflow: hidden;
    color: #8f1025;
    border-color: rgba(255, 255, 255, .82);
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .94), transparent 34%),
        radial-gradient(circle at 96% 88%, rgba(255, 210, 220, .3), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(255, 245, 248, .6)) !important;
    box-shadow:
        0 36px 105px rgba(17, 24, 39, .34),
        0 0 0 1px rgba(255, 255, 255, .26),
        0 0 46px rgba(244, 63, 94, .1),
        inset 0 1px 0 rgba(255, 255, 255, .96);
    backdrop-filter: blur(34px) saturate(170%);
    -webkit-backdrop-filter: blur(34px) saturate(170%);
    animation: portalModalBounce 720ms cubic-bezier(.2, .9, .28, 1.16) both, portalWhiteGlassGlow 4.8s ease-in-out infinite 800ms;
}

.portal-forgot-modal::before {
    content: "";
    position: absolute;
    z-index: -2;
    width: 210px;
    height: 210px;
    top: -145px;
    right: -92px;
    border-radius: 43% 57% 60% 40% / 48% 38% 62% 52%;
    background: linear-gradient(145deg, rgba(255, 255, 255, .74), rgba(251, 113, 133, .16));
    box-shadow: inset 0 0 45px rgba(255, 255, 255, .72);
    animation: portalWhiteLiquidDrift 7s ease-in-out infinite;
}

.portal-forgot-modal::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 170px;
    height: 170px;
    left: -105px;
    bottom: -120px;
    border-radius: 58% 42% 45% 55% / 46% 55% 45% 54%;
    background: rgba(255, 255, 255, .32);
    border: 1px solid rgba(255, 255, 255, .62);
    animation: portalWhiteLiquidDrift 8.5s ease-in-out infinite reverse;
}

.portal-modal-close {
    color: #a3132c !important;
    border-color: rgba(190, 24, 93, .14);
    background: rgba(255, 255, 255, .52);
}

.portal-modal-close:hover {
    color: #7f1024 !important;
    background: rgba(255, 255, 255, .84);
}

.portal-modal-icon,
.portal-success-icon {
    position: relative;
    color: #ffffff;
    border-color: rgba(255, 255, 255, .84);
    background: linear-gradient(145deg, #fb7185, #be123c, #ef4444);
    background-size: 180% 180%;
    box-shadow: 0 15px 36px rgba(190, 18, 60, .26), inset 0 1px 0 rgba(255, 255, 255, .62);
    animation: portalRedIconFlow 3.2s ease-in-out infinite;
}

.portal-success-icon {
    width: 70px;
    height: 70px;
    font-size: 26px;
    box-shadow: 0 0 0 10px rgba(244, 63, 94, .07), 0 18px 42px rgba(190, 18, 60, .24);
}

.portal-success-badge {
    position: absolute;
    right: -5px;
    bottom: -4px;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    color: #ffffff;
    font-size: 10px;
    border: 3px solid rgba(255, 255, 255, .92);
    border-radius: 50%;
    background: #dc2626;
    box-shadow: 0 7px 16px rgba(153, 27, 27, .28);
}

.portal-modal-kicker {
    color: #c21637 !important;
}

.portal-forgot-modal h1 {
    color: transparent !important;
    background: linear-gradient(90deg, #7f1d1d, #e11d48, #991b1b, #ef4444);
    background-size: 240% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: portalRedTextFlow 4s linear infinite;
}

.portal-modal-copy,
.portal-success-message {
    color: #9f1239 !important;
}

.portal-success-thanks {
    color: #be123c !important;
}

.portal-modal-form label {
    color: #991b1b !important;
}

.portal-login .portal-modal-form .portal-recovery-select,
.portal-login .portal-modal-input input {
    color: #631224 !important;
    border-color: rgba(190, 24, 93, .18) !important;
    background: rgba(255, 255, 255, .58) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
}

.portal-login .portal-modal-form .portal-recovery-select:focus,
.portal-login .portal-modal-input input:focus {
    color: #4c0519 !important;
    border-color: rgba(225, 29, 72, .42) !important;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 0 0 4px rgba(244, 63, 94, .08) !important;
}

.portal-modal-input > i {
    color: #be123c;
}

.portal-modal-submit {
    color: #6b0f22 !important;
    border-color: rgba(255, 255, 255, .72) !important;
    background:
        radial-gradient(circle at 16% 0%, rgba(255, 255, 255, .84), transparent 38%),
        linear-gradient(120deg, rgba(255, 228, 232, .94), rgba(253, 164, 175, .9), rgba(255, 241, 243, .94)) !important;
    background-size: 190% 190% !important;
    box-shadow: 0 14px 32px rgba(190, 18, 60, .16), inset 0 1px 0 #ffffff;
}

.portal-modal-support {
    color: #b31332 !important;
}

.portal-glass-ok-button {
    color: #07111f !important;
    border-color: rgba(255, 255, 255, .72);
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .56), transparent 36%),
        linear-gradient(120deg, #9f1239, #f43f5e, #be123c, #fb7185) !important;
    background-size: 260% 260% !important;
    box-shadow:
        0 16px 38px rgba(190, 18, 60, .28),
        0 0 28px rgba(244, 63, 94, .12),
        inset 0 1px 0 rgba(255, 255, 255, .58);
    animation: portalOkFloat 2.2s ease-in-out infinite, portalLiquidButtonFlow 5s ease-in-out infinite;
}

.portal-glass-ok-button::after {
    content: "";
    position: absolute;
    z-index: -2;
    width: 185%;
    height: 230%;
    left: -42%;
    top: -145%;
    border-radius: 44%;
    background: rgba(255, 255, 255, .14);
    animation: portalOkLiquidOrbit 6s linear infinite;
}

.portal-glass-ok-button:hover {
    color: #07111f !important;
    filter: brightness(1.08) saturate(1.08);
}

@keyframes portalWhiteGlassGlow {
    0%, 100% { box-shadow: 0 36px 105px rgba(17, 24, 39, .34), 0 0 0 1px rgba(255, 255, 255, .26), 0 0 38px rgba(244, 63, 94, .07), inset 0 1px 0 rgba(255, 255, 255, .96); }
    50% { box-shadow: 0 40px 112px rgba(17, 24, 39, .38), 0 0 0 1px rgba(255, 255, 255, .42), 0 0 54px rgba(244, 63, 94, .14), inset 0 1px 0 #ffffff; }
}

@keyframes portalWhiteLiquidDrift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(-16px, 18px, 0) rotate(18deg); }
}

@keyframes portalRedTextFlow {
    to { background-position: 240% center; }
}

@keyframes portalRedIconFlow {
    0%, 100% { background-position: 0% 50%; transform: translateY(0); }
    50% { background-position: 100% 50%; transform: translateY(-3px); }
}

@keyframes portalLiquidButtonFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes portalOkLiquidOrbit {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .portal-forgot-modal,
    .portal-forgot-modal::before,
    .portal-forgot-modal::after,
    .portal-modal-icon,
    .portal-success-icon,
    .portal-glass-ok-button,
    .portal-glass-ok-button::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
    }
}