/* ==========================================================
   WWMS LOGIN
========================================================== */

:root{

    --bg:#07111B;
    --card:#16293B;
    --border:#00D5FF;
    --primary:#00D5FF;
    --success:#66FF3F;
    --warning:#FFC107;
    --danger:#FF4D4D;
    --text:#FFFFFF;
    --text2:#9EB8C7;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    font-family:
        "Segoe UI",
        Tahoma,
        sans-serif;

    background:linear-gradient(
        180deg,
        #07111B,
        #0B1825,
        #102233
    );

}

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

.bg-grid{

    position:fixed;

    inset:0;

    background-image:

        linear-gradient(
            rgba(0,213,255,.05) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0,213,255,.05) 1px,
            transparent 1px
        );

    background-size:40px 40px;

    pointer-events:none;

}

.bg-glow{

    position:fixed;

    width:420px;
    height:420px;

    border-radius:50%;

    filter:blur(90px);

    opacity:.20;

}

.glow1{

    left:-120px;
    top:-120px;

    background:#00D5FF;

}

.glow2{

    right:-120px;
    bottom:-120px;

    background:#00FF88;

}

/* ==========================================================
LOGIN CONTAINER
========================================================== */

.login-container{

    width:100%;
    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:80px;

    padding:40px;

    position:relative;

    z-index:2;

}

/* ==========================================================
LEFT
========================================================== */

.login-left{

    width:420px;

}

.logo{

    width:95px;
    height:95px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:48px;

    color:var(--primary);

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

    box-shadow:0 0 25px rgba(0,213,255,.25);

    margin-bottom:30px;

}

.login-left h1{

    color:white;

    font-size:50px;

    margin-bottom:8px;

}

.login-left h2{

    color:var(--primary);

    font-size:24px;

    margin-bottom:15px;

}

.login-left p{

    color:#AAC3D2;

    font-size:18px;

    line-height:1.7;

}

.status{

    margin-top:40px;

    color:var(--success);

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:600;

}

.dot{

    width:12px;
    height:12px;

    border-radius:50%;

    background:var(--success);

    box-shadow:0 0 15px var(--success);

}

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

.login-card{

    width:420px;

    background:rgba(22,41,59,.90);

    backdrop-filter:blur(12px);

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

    border-radius:18px;

    padding:35px;

    box-shadow:
        0 0 35px rgba(0,213,255,.15);

}

.card-header{

    text-align:center;

    margin-bottom:30px;

}

.card-header h3{

    color:white;

    font-size:32px;

}

.card-header small{

    color:#8AA7B7;

}

/* ==========================================================
INPUT
========================================================== */

.input-group{

    display:flex;

    align-items:center;

    gap:12px;

    background:#0E1D2A;

    border:1px solid #284B62;

    border-radius:12px;

    padding:14px 16px;

    margin-bottom:18px;

    transition:.25s;

}

.input-group:focus-within{

    border-color:var(--primary);

    box-shadow:0 0 12px rgba(0,213,255,.25);

}

.input-group i{

    color:var(--primary);

    width:20px;

    text-align:center;

}

.input-group input{

    flex:1;

    border:none;

    outline:none;

    background:none;

    color:white;

    font-size:16px;

}

.input-group input::placeholder{

    color:#6D8797;

}

.toggle-password{

    border:none;

    background:none;

    cursor:pointer;

    color:#7EA0B2;

    font-size:18px;

}

/* ==========================================================
OPTION
========================================================== */

.option{

    margin:8px 0 25px;

    color:#BFD4DF;

    font-size:14px;

}

.option input{

    margin-right:8px;

}

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

.btn-login{

    width:100%;

    border:none;

    border-radius:12px;

    padding:16px;

    cursor:pointer;

    font-size:18px;

    font-weight:700;

    color:#07111B;

    background:linear-gradient(
        90deg,
        #00D5FF,
        #00FFA2
    );

    transition:.25s;

}

.btn-login:hover{

    transform:translateY(-2px);

    box-shadow:0 0 18px rgba(0,213,255,.45);

}

.btn-login:active{

    transform:scale(.98);

}

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

.login-message{

    margin-top:18px;

    text-align:center;

    color:#FF8080;

    min-height:20px;

}

/* ==========================================================
VERSION
========================================================== */

.version{

    text-align:center;

    margin-top:30px;

    color:#6E8797;

    font-size:13px;

}

/* ==========================================================
LOADING
========================================================== */

.loading-screen{

    position:fixed;

    inset:0;

    background:rgba(7,17,27,.96);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:999;

}

.loading-box{

    width:380px;

    text-align:center;

}

.loading-logo{

    font-size:52px;

    color:var(--primary);

    margin-bottom:20px;

}

.loading-box h2{

    color:white;

    margin-bottom:25px;

}

.progress{

    height:8px;

    background:#233949;

    border-radius:20px;

    overflow:hidden;

}

.progress-bar{

    width:0;

    height:100%;

    background:linear-gradient(
        90deg,
        #00D5FF,
        #00FF88
    );

}

.loading-step{

    margin-top:18px;

    color:#A8C0CF;

}

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

@media(max-width:768px){

body{

    overflow:auto;

}

.login-container{

    flex-direction:column;

    gap:30px;

    padding:25px;

}

.login-left{

    width:100%;

    text-align:center;

}

.logo{

    margin:0 auto 20px;

}

.login-left h1{

    font-size:38px;

}

.login-left h2{

    font-size:20px;

}

.login-left p{

    font-size:15px;

}

.status{

    justify-content:center;

    margin-top:20px;

}

.login-card{

    width:100%;

    padding:25px;

}

.card-header h3{

    font-size:28px;

}

.input-group{

    padding:13px;

}

.btn-login{

    padding:15px;

}

.loading-box{

    width:90%;

}

}


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

#network-bg{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:0;

    pointer-events:none;

}

.network-node{

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#00D8FF;

    box-shadow:
        0 0 8px #00D8FF,
        0 0 18px rgba(0,216,255,.5);

    opacity:.55;

}

.network-line{

    position:absolute;

    height:1px;

    background:rgba(0,216,255,.12);

    transform-origin:left center;

}

.network-pulse{

    position:absolute;

    width:5px;

    height:5px;

    border-radius:50%;

    background:#63FF3A;

    box-shadow:
        0 0 12px #63FF3A;

}


.login-container{

    position:relative;

    z-index:10;

}

#network-bg{

    z-index:1;

}

.bg-grid{

    z-index:2;

}

.bg-glow{

    z-index:3;

}