.login-overlay{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    opacity:1;

    transition:.3s;

    z-index:99999;

}

.login-overlay.hidden{

    opacity:0;

    pointer-events:none;

}

.login-modal{

    width:min(460px,92vw);

    padding:48px;

    border-radius:24px;

    background:rgba(8,26,44,.92);

    border:1px solid rgba(255,255,255,.08);

    text-align:center;

    box-shadow:0 30px 80px rgba(0,0,0,.45);

    animation:loginAppear .35s ease;

}

@keyframes loginAppear{

    from{

        opacity:0;

        transform:translateY(25px) scale(.96);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.login-logo{

    width:90px;

    margin-bottom:24px;

}

.login-modal h2{

    margin-bottom:18px;

}

.login-modal p{

    color:var(--text-muted);

    line-height:1.7;

    margin-bottom:36px;

}

.login-google{

    width:100%;

    padding:16px;

    border:none;

    border-radius:999px;

    background:var(--primary);

    color:white;

    font:inherit;

    font-size:17px;

    cursor:pointer;

    transition:.25s;

}

.login-google:hover{

    transform:translateY(-2px);

}

.login-close{

    margin-top:18px;

    background:none;

    border:none;

    color:var(--text-muted);

    cursor:pointer;

}

.login-modal small{

    display:block;

    margin-top:32px;

    color:var(--text-muted);

    line-height:1.6;

}