.portal-login{
    min-height:calc(100vh - 80px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px 0;
}

.portal-login__wrap{
    width:min(520px, 100%);
    margin:0 auto;
}

.portal-login__card{
    padding:30px;
    border-radius:28px;
    border:1px solid var(--portal-line);
    background:linear-gradient(180deg, rgba(8,18,36,.84), rgba(5,16,34,.90));
    box-shadow:var(--portal-shadow-xl);
    backdrop-filter:blur(14px);
}

.portal-login__head{
    text-align:center;
    margin-bottom:20px;
}

.portal-login__crest{
    margin-bottom:16px;
    display:flex;
    justify-content:center;
}

.portal-login__crest-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    border-radius:20px;
    background:linear-gradient(180deg, #9fc7f6 0%, #7ca8de 100%);
    color:#fff;
    font-size:28px;
    font-weight:900;
    box-shadow:
        0 18px 34px rgba(63,122,207,.22),
        inset 0 1px 0 rgba(255,255,255,.45);
}

.portal-login__head .eyebrow{
    margin-bottom:14px;
}

.portal-login__head h1{
    margin:0 0 10px;
    font-size:42px;
    line-height:1.02;
    letter-spacing:-.04em;
}

.portal-login__head p{
    margin:0;
    color:var(--portal-muted);
    line-height:1.7;
    font-size:16px;
}

.portal-login__form{
    margin-top:18px;
}

.portal-login__footer{
    display:flex;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    margin-top:20px;
    color:var(--portal-muted);
    font-size:13px;
    line-height:1.6;
}

@media (max-width: 700px){
    .portal-login{
        min-height:auto;
        padding:18px 0 28px;
    }

    .portal-login__card{
        padding:22px 18px;
        border-radius:24px;
    }

    .portal-login__crest-icon{
        width:58px;
        height:58px;
        border-radius:18px;
        font-size:26px;
    }

    .portal-login__head h1{
        font-size:34px;
    }

    .portal-login__footer{
        flex-direction:column;
        text-align:center;
    }
}

html[data-theme="light"] .portal-login__card,
body.light .portal-login__card{
    background:rgba(255,255,255,.82);
    border-color:rgba(69,120,188,.12);
    box-shadow:
        0 16px 34px rgba(48,88,135,.10),
        inset 0 1px 0 rgba(255,255,255,.62);
}

html[data-theme="light"] .portal-login__head h1,
body.light .portal-login__head h1{
    color:#17365a;
}

html[data-theme="light"] .portal-login__head p,
html[data-theme="light"] .portal-login__footer,
body.light .portal-login__head p,
body.light .portal-login__footer{
    color:#4a698a;
}