*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --blue:#229ed9;
    --blue2:#0088cc;
    --bg:#050914;
    --card:rgba(12,20,35,.82);
    --border:rgba(255,255,255,.09);
    --text:#fff;
    --muted:#8995a8;
}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    font-family:"Inter",sans-serif;
    background:
        radial-gradient(circle at 50% 0%,#102d45 0%,transparent 35%),
        #050914;
    color:var(--text);
    overflow-x:hidden;
}


/* BACKGROUND */

.background-grid{
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.15;

    background-image:
        linear-gradient(
            rgba(255,255,255,.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.05) 1px,
            transparent 1px
        );

    background-size:45px 45px;
}

.stars{
    position:fixed;
    inset:0;
    pointer-events:none;

    background-image:
        radial-gradient(#fff 1px,transparent 1px);

    background-size:100px 100px;
    opacity:.15;
}

.bg-glow{
    position:fixed;
    width:420px;
    height:420px;
    border-radius:50%;
    filter:blur(100px);
    pointer-events:none;
    opacity:.2;
}

.glow-blue{
    background:#0088cc;
    top:-200px;
    left:-100px;
}

.glow-purple{
    background:#7c3aed;
    right:-150px;
    top:20%;
}

.glow-pink{
    background:#ec4899;
    left:20%;
    bottom:-250px;
}


/* BACK */

.back-home{
    position:fixed;
    top:25px;
    left:30px;

    display:flex;
    align-items:center;
    gap:10px;

    color:#aeb8c8;
    text-decoration:none;

    font-size:14px;
    font-weight:600;

    transition:.3s;

    z-index:10;
}

.back-home:hover{
    color:#fff;
    transform:translateX(-3px);
}


/* WRAPPER */

.auth-wrapper{
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:80px 20px 40px;
}

.auth-container{
    width:100%;
    max-width:480px;
}


/* BRAND */

.auth-brand{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:13px;

    margin-bottom:25px;
}

.auth-logo{
    width:52px;
    height:52px;

    border-radius:17px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #229ed9,
            #0077b5
        );

    box-shadow:
        0 10px 35px rgba(34,158,217,.3);

    font-size:27px;
}

.auth-brand strong{
    display:block;

    font-family:"Poppins",sans-serif;
    font-size:27px;
    letter-spacing:-1px;
}

.auth-brand strong span{
    color:#229ed9;
}

.auth-brand small{
    display:block;

    margin-top:2px;

    color:#718096;

    font-size:9px;
    letter-spacing:.5px;
}


/* CARD */

.auth-card{
    position:relative;

    background:
        linear-gradient(
            145deg,
            rgba(20,31,51,.9),
            rgba(7,13,25,.9)
        );

    border:1px solid var(--border);

    border-radius:28px;

    padding:35px;

    box-shadow:
        0 30px 100px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.05);

    backdrop-filter:blur(20px);

    overflow:hidden;
}

.auth-card::before{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    background:#229ed9;

    filter:blur(100px);

    opacity:.12;

    top:-100px;
    right:-80px;

    pointer-events:none;
}


/* HEADER */

.auth-header{
    text-align:center;
    margin-bottom:28px;
}

.auth-icon{
    width:58px;
    height:58px;

    margin:0 auto 17px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:rgba(34,158,217,.1);

    border:1px solid rgba(34,158,217,.2);

    color:#229ed9;

    font-size:22px;
}

.auth-header h1{
    font-family:"Poppins",sans-serif;

    font-size:27px;

    margin-bottom:8px;
}

.auth-header p{
    color:#7f8ba0;

    font-size:13px;

    line-height:1.7;
}


/* SOCIAL */

.social-login{
    width:100%;

    height:50px;

    border:1px solid var(--border);

    border-radius:13px;

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

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:11px;

    font-size:13px;
    font-weight:600;

    cursor:pointer;

    transition:.3s;
}

.social-login:hover{
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.16);

    transform:translateY(-2px);
}

.social-login i{
    font-size:17px;
}


/* DIVIDER */

.divider{
    display:flex;
    align-items:center;

    gap:15px;

    margin:25px 0;

    color:#68758a;

    font-size:12px;
}

.divider::before,
.divider::after{
    content:"";
    height:1px;
    flex:1;

    background:rgba(255,255,255,.08);
}


/* FORM */

.form-group{
    margin-bottom:18px;
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.form-group label{
    display:block;

    margin-bottom:8px;

    color:#c7d0df;

    font-size:12px;
    font-weight:700;
}

.form-group label i{
    color:#229ed9;
    margin-right:6px;
}

.label-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.label-row a{
    color:#229ed9;
    text-decoration:none;

    font-size:11px;
}

.form-group input{
    width:100%;

    height:50px;

    padding:0 15px;

    border-radius:13px;

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

    outline:none;

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

    color:#fff;

    font-family:inherit;
    font-size:13px;

    transition:.3s;
}

.form-group input::placeholder{
    color:#59667a;
}

.form-group input:focus{
    border-color:#229ed9;

    background:rgba(34,158,217,.045);

    box-shadow:
        0 0 0 3px rgba(34,158,217,.08);
}

.input-wrapper{
    position:relative;
}

.input-wrapper input{
    padding-right:50px;
}

.password-toggle{
    position:absolute;

    right:14px;
    top:50%;

    transform:translateY(-50%);

    background:none;
    border:0;

    color:#68758a;

    cursor:pointer;

    transition:.2s;
}

.password-toggle:hover{
    color:#229ed9;
}

.input-help{
    display:block;

    margin-top:6px;

    color:#657287;

    font-size:10px;
}


/* REMEMBER */

.remember,
.terms{
    display:flex;
    align-items:center;

    gap:9px;

    color:#7f8ba0;

    font-size:11px;

    line-height:1.6;

    cursor:pointer;

    margin:5px 0 20px;
}

.remember input,
.terms input{
    display:none;
}

.remember span,
.terms span{
    width:17px;
    height:17px;

    border-radius:5px;

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

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

    position:relative;

    flex-shrink:0;
}

.remember input:checked + span,
.terms input:checked + span{
    background:#229ed9;
    border-color:#229ed9;
}

.remember input:checked + span::after,
.terms input:checked + span::after{
    content:"✓";

    position:absolute;

    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    font-size:11px;
    font-weight:900;
}

.terms{
    align-items:flex-start;
}

.terms a{
    color:#229ed9;
    text-decoration:none;
}


/* SUBMIT */

.auth-submit{
    width:100%;
    height:52px;

    border:0;
    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #229ed9,
            #0077b5
        );

    color:#fff;

    display:flex;
    justify-content:center;
    align-items:center;

    gap:12px;

    font-family:inherit;

    font-size:13px;
    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 12px 30px rgba(34,158,217,.22);

    transition:.3s;
}

.auth-submit:hover{
    transform:translateY(-2px);

    box-shadow:
        0 17px 40px rgba(34,158,217,.32);
}

.auth-submit i{
    transition:.3s;
}

.auth-submit:hover i{
    transform:translateX(4px);
}


/* REGISTER */

.auth-register{
    text-align:center;

    margin-top:25px;

    color:#68758a;

    font-size:12px;
}

.auth-register a{
    color:#229ed9;

    text-decoration:none;

    font-weight:700;
}

.auth-register a:hover{
    text-decoration:underline;
}


/* SECURITY */

.auth-security{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:20px;

    margin:20px 0 13px;

    color:#59667a;

    font-size:9px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.5px;
}

.auth-security div{
    display:flex;
    align-items:center;
    gap:5px;
}

.auth-security i{
    color:#229ed9;
}


/* COPYRIGHT */

.copyright{
    text-align:center;

    color:#414d60;

    font-size:9px;
}


/* MOBILE */

@media(max-width:600px){

    .auth-wrapper{
        padding:
            80px 15px
            30px;
    }

    .back-home{
        left:18px;
        top:18px;
    }

    .auth-card{
        padding:25px 20px;
        border-radius:23px;
    }

    .auth-brand strong{
        font-size:24px;
    }

    .auth-header h1{
        font-size:24px;
    }

    .form-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .auth-security{
        gap:10px;
        flex-wrap:wrap;
    }

}