*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
}

body{

background:#000;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:20px;

}

.loginCard{

width:100%;
max-width:420px;

background:#000;
border:1px solid #1A2B47;

border-radius:24px;

padding:45px 35px;

text-align:center;

box-shadow:0 20px 60px rgba(0,0,0,.45);

}

.logo{

width:190px;

margin-bottom:1F29370px;

}

h2{

color:white;

font-size:34px;

margin-bottom:10px;

}

.tagline{

color:#94A3B8;

font-size:16px;

margin-bottom:35px;

line-height:1.5;

}

input{

width:100%;

margin-bottom:18px;

padding:18px;

border:none;

border-radius:14px;

background:#1F2937;

color:white;

font-size:17px;

outline:none;

}

.primary{

width:100%;

padding:18px;

border:none;

border-radius:14px;

background:#2563EB;

color:white;

font-size:18px;

font-weight:bold;

cursor:pointer;

}

.primary:hover{

background:#3B82F6;

}

.secondary{

display:block;

margin-top:22px;

color:#60A5FA;

text-decoration:none;

font-size:16px;

}

/* =========================================
   LOGIN MOBILE CLEANUP
========================================= */

html,
body{
    width:100%;
    min-height:100%;
    background:#000;
}

.loginScreen{
    min-height:100dvh !important;

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

    padding:40px 20px !important;

    box-sizing:border-box !important;
}


/* REMOVE CARD BORDER / BOX */

.loginCard{
    width:100% !important;
    max-width:430px !important;

    margin:0 auto !important;

    padding:0 !important;

    background:transparent !important;

    border:none !important;
    border-radius:0 !important;

    box-shadow:none !important;

    text-align:center !important;
}


/* BIGGER LOGO */

.loginCard .logo{
    display:block !important;

    width:260px !important;
    max-width:78vw !important;

    height:auto !important;

    margin:0 auto 28px !important;
}


/* TAGLINE */

.loginCard .tagline{
    margin:0 0 32px !important;

    color:#cbd5e1 !important;

    font-size:17px !important;
    line-height:1.45 !important;
}


/* FORM */

.loginCard form{
    width:100% !important;

    display:flex !important;
    flex-direction:column !important;

    gap:14px !important;
}


/* INPUTS */

.loginCard input[type="text"],
.loginCard input[type="password"]{
    width:100% !important;
    height:58px !important;

    box-sizing:border-box !important;

    margin:0 !important;

    padding:0 18px !important;

    border:none !important;
    border-radius:15px !important;

    background:#1f2937 !important;

    color:#fff !important;

    font-size:17px !important;

    outline:none !important;
}


/* LOGIN BUTTON */

.loginCard .primary{
    width:100% !important;
    height:58px !important;

    margin:2px 0 0 !important;

    border:none !important;
    border-radius:15px !important;

    background:#2563eb !important;
    color:#fff !important;

    font-size:17px !important;
    font-weight:700 !important;
}


/* CREATE ACCOUNT */

.loginCard .secondary{
    display:inline-block !important;

    margin-top:24px !important;

    color:#60a5fa !important;

    font-size:15px !important;

    text-decoration:none !important;
}

/* =========================================
   NOTRACE LOGIN — MOBILE FINAL
========================================= */

@media (max-width:700px){

    .loginScreen{
        width:100% !important;
        min-height:100dvh !important;

        padding:0 22px !important;

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

        box-sizing:border-box !important;
    }

    .loginCard{
        width:100% !important;
        max-width:390px !important;

        margin:0 auto !important;
        padding:0 !important;

        background:transparent !important;
        border:none !important;
        box-shadow:none !important;

        box-sizing:border-box !important;
    }

.loginCard .logo{
    display:block !important;

    width:340px !important;
    max-width:88% !important;

    height:auto !important;

    margin:0 auto 32px !important;
}
    }

    .loginCard .tagline{
        margin:0 0 28px !important;

        color:#d5dbea !important;

        font-size:18px !important;
        line-height:1.4 !important;

        text-align:center !important;
    }

    .loginCard form{
        width:100% !important;

        display:flex !important;
        flex-direction:column !important;

        gap:14px !important;
    }

    .loginCard input[type="text"],
    .loginCard input[type="password"]{
        width:100% !important;
        height:60px !important;

        margin:0 !important;
        padding:0 18px !important;

        box-sizing:border-box !important;

        background:#1f2937 !important;
        color:#fff !important;

        border:none !important;
        border-radius:15px !important;

        font-size:18px !important;
    }

    .loginCard .primary{
        width:100% !important;
        height:60px !important;

        margin:0 !important;

        border:none !important;
        border-radius:15px !important;

        background:#3568e8 !important;
        color:#fff !important;

        font-size:18px !important;
        font-weight:700 !important;
    }

    .loginCard .secondary{
        display:inline-block !important;

        margin-top:24px !important;

        color:#60a5fa !important;

        font-size:16px !important;
    }
}