body{
    background:#050816;
    overflow-x:hidden;
}

.jarvis-main{
    min-height:100vh;
    position:relative;
    background:
    radial-gradient(circle at left,
    rgba(255,23,68,.15),
    transparent 35%),

    radial-gradient(circle at right,
    rgba(0,176,255,.15),
    transparent 35%),

    #050816;
}

.jarvis-overlay{
    position:absolute;
    inset:0;

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

    background-size:40px 40px;
}

.jarvis-header{
    position:absolute;
    top:20px;
    right:30px;
    z-index:10;
}

.jarvis-header a{
    color:#fff;
}

.jarvis-login-wrapper{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}

.jarvis-login-card{
    width:500px;
    max-width:90%;
    padding:40px;

    border-radius:20px;

    background:rgba(10,15,35,.85);

    border:1px solid rgba(0,176,255,.3);

    backdrop-filter:blur(12px);

    box-shadow:
    0 0 30px rgba(0,176,255,.3),
    0 0 50px rgba(255,23,68,.2);

    position:relative;
    z-index:5;
}

.jarvis-logo{
    text-align:center;
    margin-bottom:20px;
}

.jarvis-login-card h2{
    text-align:center;
    color:#00b0ff;
    margin-bottom:5px;
}

.subtitle{
    text-align:center;
    color:#ff1744;
    margin-bottom:25px;
}

.jarvis-input{
    width:100%;
    height:55px;
    margin-bottom:15px;

    border-radius:10px;

    border:1px solid rgba(0,176,255,.3);

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

    color:#fff;

    padding:0 15px;
}

.jarvis-input:focus{
    outline:none;

    box-shadow:
    0 0 10px #00b0ff;
}

.forgot{
    text-align:right;
    margin-bottom:20px;
}

.forgot a{
    color:#ddd;
}

.btn-jarvis-login{
    width:100%;
    height:55px;

    border:none;

    border-radius:10px;

    color:white;

    font-weight:bold;

    background:
    linear-gradient(
    90deg,
    #00b0ff,
    #ff1744
    );
}

.btn-jarvis-google{
    display:block;

    margin-top:10px;

    text-align:center;

    padding:15px;

    border-radius:10px;

    border:1px solid #ff1744;

    color:white;
}

.hud-left,
.hud-right{
    position:absolute;

    top:100px;

    width:260px;

    z-index:5;
}

.hud-left{
    left:30px;
}

.hud-right{
    right:30px;
}

.hud-box{
    padding:20px;

    border:1px solid rgba(0,176,255,.3);

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

    color:#8fdcff;
}

#clock{
    font-size:32px;
    color:#00b0ff;
    font-weight:bold;
}
/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width: 768px){

    .hud-left,
    .hud-right{
        display:none !important;
    }

    .jarvis-login-wrapper{
        padding:20px;
        min-height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .jarvis-login-card{
        width:100%;
        max-width:420px;
        padding:25px;
        margin-top:30px;
    }

    .jarvis-logo img{
        height:50px !important;
    }

    .jarvis-login-card h2{
        font-size:32px;
    }

    .jarvis-input{
        height:50px;
        font-size:16px;
    }

    .btn-jarvis-login,
    .btn-jarvis-google{
        height:50px;
        font-size:14px;
    }

    .jarvis-header{
        top:15px;
        right:15px;
    }
	.mobile-clock{
    display:none;
}

@media (max-width:768px){

    .mobile-clock{
        display:block;
        text-align:center;
        color:#00b0ff;
        font-size:28px;
        font-weight:bold;
        margin-bottom:15px;
    }

}