/* ==========================================
            NEBULA PASSWORD PAGES
========================================== */

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

:root{

    --bg:#EEF4EA;

    --surface:#FFFFFF;

    --pistachio:#B7D3A8;

    --fern:#4F7942;

    --emerald:#2E7D5B;

    --text:#203126;

    --muted:#6F7F73;

    --radius:28px;

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

    font-family:Inter,sans-serif;

    background:linear-gradient(

        135deg,

        #EEF4EA,

        #F7F6F2

    );

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

/* ==========================================
                BACKGROUND
========================================== */

body::before{

    content:"";

    position:fixed;

    width:520px;

    height:520px;

    background:var(--pistachio);

    border-radius:50%;

    filter:blur(90px);

    top:-180px;

    left:-120px;

    opacity:.45;

}

body::after{

    content:"";

    position:fixed;

    width:420px;

    height:420px;

    background:var(--emerald);

    border-radius:50%;

    filter:blur(90px);

    bottom:-160px;

    right:-120px;

    opacity:.25;

}

/* ==========================================
                CARD
========================================== */

.auth-wrapper{

    width:100%;

    display:flex;

    justify-content:center;

    padding:25px;

}

.auth-card{

    width:100%;

    max-width:470px;

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(25px);

    border-radius:32px;

    padding:45px;

    box-shadow:

        0 25px 70px rgba(0,0,0,.10);

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

    animation:appear .5s ease;

}

@keyframes appear{

from{

opacity:0;

transform:

translateY(30px)

scale(.96);

}

to{

opacity:1;

transform:none;

}

}

/* ==========================================
                LOGO
========================================== */

.logo{

    text-align:center;

    margin-bottom:30px;

}

.logo-image{

    width:72px;

    margin-bottom:15px;

}

.logo h1{

    font-size:46px;

    color:var(--emerald);

    font-weight:800;

}

/* ==========================================
            HEADER
========================================== */

.auth-header{

    text-align:center;

    margin-bottom:35px;

}

.auth-header p{

    color:var(--muted);

    line-height:1.7;

    font-size:16px;

}

/* ==========================================
            INPUTS
========================================== */

.input-group{

    margin-bottom:20px;

}

.input-group input{

    width:100%;

    height:60px;

    border:none;

    border-radius:18px;

    background:#F7F8F6;

    padding:0 20px;

    font-size:15px;

    transition:.3s;

}

.input-group input:focus{

    outline:none;

    background:white;

    box-shadow:

        0 0 0 4px rgba(46,125,91,.10);

}

/* ==========================================
            BUTTON
========================================== */

.auth-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    color:white;

    font-size:16px;

    font-weight:700;

    background:

    linear-gradient(

        135deg,

        var(--emerald),

        var(--fern)

    );

    transition:.3s;

}

.auth-btn:hover{

    transform:translateY(-3px);

    box-shadow:

        0 20px 40px rgba(46,125,91,.25);

}

/* ==========================================
            LINK
========================================== */

.bottom-text{

    margin-top:30px;

    text-align:center;

    color:var(--muted);

}

.bottom-text a{

    color:var(--emerald);

    text-decoration:none;

    font-weight:700;

}

/* ==========================================
            MESSAGE
========================================== */

#message{

    margin-bottom:18px;

}

/* ==========================================
            MOBILE
========================================== */

@media(max-width:600px){

.auth-card{

padding:30px 25px;

}

.logo h1{

font-size:36px;

}

}