body{

    font-family:
    'Outfit',
    sans-serif;

    margin:0;

    min-height:100vh;

background:
radial-gradient(
circle at 20% 40%,
rgba(152,161,114,.12),
transparent 40%
),

radial-gradient(
circle at 80% 25%,
rgba(152,161,114,.08),
transparent 35%
),

radial-gradient(
circle at 70% 80%,
rgba(70,90,140,.15),
transparent 45%
),

linear-gradient(
135deg,
#020817,
#051225,
#081830
);
    overflow-x:hidden;
    overflow-y:auto;

    color:white;

}

body::before{

    content:"";

    position:fixed;

    inset:0;

    z-index:1;

    background:
    radial-gradient(
        circle at var(--mouse-x) var(--mouse-y),
        rgba(120,170,255,.20),
        transparent 220px
    );

    pointer-events:none;

}

pointer-events:none;
}

body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

    linear-gradient(
        to bottom,
        rgba(152,161,114,.10),
        transparent 120px
    ),

    linear-gradient(
        to top,
        rgba(152,161,114,.08),
        transparent 120px
    );

}

.login-page{

    display:flex;

    min-height:100vh;

    align-items:center;

    justify-content:center;

    gap:100px;

    padding:40px;

}

.hero-panel{

    max-width:600px;

}

.cosmos-logo{

    width:180px;

    display:block;

    filter:
    drop-shadow(
        0 0px 20px
        rgba(152,161,114,.20)
    );

    animation:
    cosmosFloat 6s ease-in-out infinite;

}

.hero-panel h1{

    font-size:64px;

    font-weight:700;

    line-height:1;

    margin:0;

}

.hero-panel p{

    color:#9db7d8;

    margin-top:12px;

}

.status-card{

    margin-top:15px;

    padding:18px;

    border-radius:18px;

    backdrop-filter:blur(18px);

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

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

    position:relative;

    overflow:hidden;

}

.status-card::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.08),
    transparent
    );

    animation:
    shimmer 4s linear infinite;

}

@keyframes shimmer{

    100%{

        left:200%;

    }

}

.login-card{

    width:420px;

    padding:40px;

    border-radius:32px;

    backdrop-filter:blur(30px);

    background:
    rgba(8,12,25,.55);

    border:
    1px solid rgba(152,161,114,.15);

    box-shadow:
    0 0 60px rgba(152,161,114,.10);

    transition:.4s;

}

.login-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:32px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.08),
        transparent 40%
    );

    pointer-events:none;

}

.login-card:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 0 80px rgba(152,161,114,.20);

}

.sign-btn{

    background:
    linear-gradient(
    90deg,
    #7f8d4d,
    #98a172,
    #b2bc86
    );

    color:white;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.sign-btn:hover{

    transform:
    translateY(-2px);

    box-shadow:
    0 10px 35px
    rgba(152,161,114,.35);

}

.sign-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:120%;

    height:100%;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.2),
    transparent
    );

    animation:
    buttonShine 3s linear infinite;

}

@keyframes buttonShine{

    to{

        left:250%;

    }

}

.easy-login-logo{

    width:180px;

    display:block;

    margin:auto;

    margin-bottom:25px;

}

.login-card h2{

    text-align:center;

}

.login-card input{

    width:100%;

    box-sizing:border-box;

    padding:16px;

    margin-top:12px;

    border:none;

    border-radius:14px;

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

    color:white;

    transition:.3s;

}

.login-card input:focus{

    outline:none;

    border:
    1px solid rgba(152,161,114,.35);

    box-shadow:
    0 0 20px rgba(152,161,114,.20);

}

.login-card button{

    width:100%;

    margin-top:20px;

    padding:16px;

    border:none;

    border-radius:14px;


    background:
    linear-gradient(
        90deg,
        #7f8d4d,
        #98a172,
        #b2bc86

    );

    color:white;

    font-weight:700;

    cursor:pointer;

}

.cmpl{

    color:#98a172;

    text-shadow:
    0 0 30px rgba(152,161,114,.35);

}

.watch{

    color:#d8dee8;

    text-shadow:
    0 0 25px rgba(216,222,232,.15);

}

.enterprise{

    color:#e4e8ef;

    text-shadow:
    0 0 20px rgba(255,255,255,.08);

}

.hero-panel h1{

    font-size:72px;

    font-weight:700;

    line-height:.95;

    letter-spacing:-2px;

    margin:0;

}

.cosmos-wrap{

    display:inline-flex;

    padding:12px 18px;

    border-radius:22px;

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

    backdrop-filter:
    blur(12px);

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

    margin-bottom:20px;

}

.cosmos-logo{

    width:180px;

    display:block;

}

@keyframes cosmosFloat{

    0%,100%{

        translate:0 0;

    }

    50%{

        translate:0 -6px;

    }

}


.subtitle{

    color:#7d8696;

    letter-spacing:3px;

    font-size:16px;

    margin-top:10px;

    text-transform:uppercase;

}

@media(max-width:1200px){

    .login-page{

        flex-direction:column;

        gap:50px;

        padding:60px 20px;

    }

    .hero-panel{

        text-align:center;

    }

}

@media(max-width:900px){

    .hero-panel h1{

        font-size:48px;

    }

    .login-card{

        width:100%;

        max-width:420px;

    }

}

@media(max-width:768px){

    .machine-detail-modal{

        width:95vw !important;

        height:90vh !important;

        overflow-y:auto;

    }

    .grid{

        grid-template-columns:1fr !important;

    }

}

#starfield{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    z-index:-2;

}

.nebula{

    position:fixed;

    inset:-20%;

    z-index:-1;

    pointer-events:none;

    background:

    radial-gradient(
        circle at 25% 40%,
        rgba(90,110,255,.22),
        transparent 35%
    ),

    radial-gradient(
        circle at 70% 60%,
        rgba(152,161,114,.18),
        transparent 40%
    ),

    radial-gradient(
        circle at 50% 25%,
        rgba(255,255,255,.05),
        transparent 45%
    );

    filter:blur(80px);

    opacity:.9;

    animation:
    nebulaMove 70s linear infinite,
    nebulaPulse 12s ease-in-out infinite;
}

@keyframes nebulaPulse{

    0%,100%{
        opacity:.6;
    }

    50%{
        opacity:1;
    }

}

@keyframes nebulaMove{

    0%{

        transform:
        translateX(-5%)
        translateY(0);

    }

    50%{

        transform:
        translateX(5%)
        translateY(-3%);

    }

    100%{

        transform:
        translateX(-5%)
        translateY(0);

    }

}

/* ===== MFA UI Polish ===== */

.mfa-title{
    margin:0 0 10px;
    font-size:24px;
    font-weight:700;
    letter-spacing:.3px;
}

.mfa-subtitle{
    margin:0 0 22px;
    color:rgba(255,255,255,.78);
    line-height:1.6;
    font-size:14px;
}

.login-card{
    backdrop-filter:blur(28px);
    -webkit-backdrop-filter:blur(28px);
    border:1px solid rgba(255,255,255,.08);
    animation:mfaFade .45s ease;
}

.login-card input{
    transition:.25s ease;
}

.login-card input:focus{
    transform:scale(1.02);
    box-shadow:0 0 18px rgba(123,160,255,.30);
}

.sign-btn{
    transition:.25s ease;
}

.sign-btn:hover{
    transform:translateY(-2px);
}

.sign-btn:active{
    transform:scale(.98);
}

@keyframes mfaFade{

    from{
        opacity:0;
        transform:translateY(20px) scale(.96);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}