/* =========================================================
   LUMEXA.SIGN
   LOGIN PAGE
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root{

    --login-bg:#050505;

    --login-panel:#080808;

    --login-surface:#1a1a1a;

    --login-border:#323232;

    --login-text:#ffffff;

    --login-muted:#9696a0;

    --login-primary:#facc15;

}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after{

    box-sizing:border-box;

}


html,
body{

    width:100%;
    height:100%;

    margin:0;
    padding:0;

}


body{

    overflow:hidden;

    background:
    var(--login-bg);

    color:
    var(--login-text);

    font-family:
    "JetBrains Mono",
    monospace;

}


/* =========================================================
   PAGE
========================================================= */

.login-page{

    width:100vw;
    height:100vh;

    display:grid;

    grid-template-columns:
    minmax(0,60%)
    minmax(480px,40%);

    overflow:hidden;

    background:#050505;

}


/* =========================================================
   HERO
========================================================= */

.login-hero{

    position:relative;

    min-width:0;
    height:100vh;

    overflow:hidden;

    background:#070707;

}


/* =========================================================
   HERO IMAGE
========================================================= */

.login-hero-bg{

    position:absolute;

    inset:0;

    background-image:
    url("../img/login-bg.jpeg");

    background-repeat:no-repeat;

    background-position:center;

    background-size:cover;

    transform:
    scale(1.02);

}


/* =========================================================
   HERO DARK OVERLAY
========================================================= */

.login-hero-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:

    linear-gradient(
        90deg,
        rgba(0,0,0,.34) 0%,
        rgba(0,0,0,.40) 45%,
        rgba(0,0,0,.78) 100%
    ),

    linear-gradient(
        180deg,
        rgba(0,0,0,.15) 0%,
        rgba(0,0,0,.28) 50%,
        rgba(0,0,0,.88) 100%
    );

}


/* =========================================================
   HERO BRAND
========================================================= */

.login-hero-brand{

    position:absolute;

    top:68px;
    left:70px;

    z-index:5;

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

    min-width:0;

}


.login-hero-brand img{

    display:block;

    width:auto;

    object-fit:contain;

    object-position:left center;

}


.login-hero-brand .login-brand-mark{

    height:48px;
    max-width:58px;

    flex:0 0 auto;

}


.login-hero-brand .login-brand-wordmark{

    width:172px;
    max-width:min(172px, 42vw);
    max-height:44px;

    flex:0 1 auto;

}


/* =========================================================
   HERO CONTENT
========================================================= */

.login-hero-content{

    position:absolute;

    left:70px;
    right:70px;

    bottom:72px;

    z-index:5;

    max-width:720px;

}


/* =========================================================
   EYEBROW
========================================================= */

.login-eyebrow{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:22px;

    color:
    var(--login-primary);

    font-family:
    "JetBrains Mono",
    monospace;

    font-size:12px;

    font-weight:700;

    line-height:1;

    letter-spacing:4px;

}


.login-eyebrow span{

    font-size:18px;

}


/* =========================================================
   HERO TITLE
========================================================= */

.login-hero-content h1{

    margin:0;

    color:#ffffff;

    font-size:
    clamp(
        52px,
        4.2vw,
        78px
    );

    font-weight:700;

    line-height:.98;

    letter-spacing:-3px;

}


.login-hero-content h1 strong{

    color:#ffffff;

    font-weight:700;

}


.login-hero-content h1 > span{

    color:#92929c;

    font-weight:600;

}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.login-hero-content > p{

    max-width:650px;

    margin:
    32px
    0
    0;

    color:#a2a2aa;

    font-size:17px;

    line-height:1.55;

}


/* =========================================================
   HERO STATS
========================================================= */

.login-hero-stats{

    display:flex;

    align-items:center;

    gap:30px;

    margin-top:42px;

    color:#a8a8b2;

    font-family:
    "JetBrains Mono",
    monospace;

    font-size:11px;

    letter-spacing:2px;

}


.login-hero-stats > div{

    display:flex;

    align-items:center;

    gap:9px;

}


.login-hero-stats i{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#22c55e;

    box-shadow:
    0
    0
    0
    4px
    rgba(34,197,94,.15);

}


.login-hero-stats
.material-icons-outlined{

    font-size:16px;

}


/* =========================================================
   RIGHT PANEL
========================================================= */

.login-panel{

    position:relative;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:
    60px
    70px;

    overflow:hidden;

    background:#050505;

    border-left:
    1px solid
    rgba(255,255,255,.04);

}


/* =========================================================
   INNER
========================================================= */

.login-panel-inner{

    width:100%;

    max-width:560px;

}


/* =========================================================
   HEADING
========================================================= */

.login-panel-heading{

    margin-bottom:48px;

}


.login-panel-label{

    margin-bottom:20px;

    color:
    var(--login-primary);

    font-family:
    "JetBrains Mono",
    monospace;

    font-size:12px;

    font-weight:700;

    letter-spacing:4px;

}


.login-panel-heading h2{

    margin:0;

    color:#ffffff;

    font-size:
    clamp(
        34px,
        3vw,
        46px
    );

    font-weight:700;

    line-height:1.05;

    letter-spacing:-1.8px;

}


.login-panel-heading p{

    margin:
    15px
    0
    0;

    color:#96969f;

    font-size:16px;

    line-height:1.5;

}


/* =========================================================
   ERROR
========================================================= */

.login-error{

    display:flex;

    align-items:center;

    gap:9px;

    margin-bottom:22px;

    padding:
    12px
    14px;

    border:
    1px solid
    rgba(239,68,68,.28);

    background:
    rgba(239,68,68,.08);

    color:#fca5a5;

    border-radius:5px;

    font-size:12px;

}


/* =========================================================
   FORM
========================================================= */

.login-form{

    width:100%;

}


/* =========================================================
   FIELD
========================================================= */

.login-field{

    margin-bottom:30px;

}


.login-field label{

    display:block;

    margin-bottom:12px;

    color:#9999a4;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;

}


.login-field input{

    width:100%;
    height:56px;

    padding:
    0
    16px;

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

    border-radius:5px;

    outline:0;

    background:
    #1b1b1b;

    color:#ffffff;

    font-family:
    "JetBrains Mono",
    monospace;

    font-size:15px;

    transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;

}


.login-field input:hover{

    border-color:#454545;

}


.login-field input:focus{

    border-color:
    var(--login-primary);

    box-shadow:
    0
    0
    0
    3px
    rgba(250,204,21,.08);

}


.login-field input::placeholder{

    color:#62626c;

}


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

.login-submit{

    width:100%;
    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:4px;

    border:0;

    border-radius:999px;

    outline:0;

    background:
    var(--login-primary);

    color:#090909;

    font-family:
    "JetBrains Mono",
    monospace;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:
    background .18s ease,
    transform .15s ease;

}


.login-submit:hover{

    background:#ffe033;

}


.login-submit:active{

    transform:
    scale(.995);

}


/* =========================================================
   SYSTEM INFO
========================================================= */

.login-info{

    margin-top:40px;

    padding:
    20px
    20px;

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

    border-radius:5px;

    background:#1a1a1a;

}


.login-info-label{

    margin-bottom:12px;

    color:#8b8b95;

    font-family:
    "JetBrains Mono",
    monospace;

    font-size:10px;

    letter-spacing:2px;

}


.login-info strong{

    display:block;

    color:#ffffff;

    font-family:
    "JetBrains Mono",
    monospace;

    font-size:13px;

    letter-spacing:1px;

}


.login-info span{

    display:block;

    margin-top:5px;

    color:#797983;

    font-size:11px;

}


/* =========================================================
   FOOTER
========================================================= */

.login-panel-footer{

    position:absolute;

    left:70px;
    right:70px;
    bottom:24px;

    color:#55555f;

    font-family:
    "JetBrains Mono",
    monospace;

    font-size:9px;

    letter-spacing:.8px;

}


/* =========================================================
   1400
========================================================= */

@media(max-width:1400px){

    .login-page{

        grid-template-columns:
        56%
        44%;

    }


    .login-panel{

        padding:
        50px;

    }


    .login-hero-brand{

        left:50px;

    }


    .login-hero-content{

        left:50px;
        right:50px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

    body{

        overflow:auto;

    }


    .login-page{

        min-height:100vh;
        height:auto;

        grid-template-columns:
        1fr;

    }


    .login-hero{

        min-height:470px;
        height:55vh;

    }


    .login-panel{

        min-height:650px;
        height:auto;

        padding:
        60px
        40px
        80px;

    }


    .login-panel-inner{

        max-width:600px;

    }


    .login-panel-footer{

        left:40px;
        right:40px;

    }

}


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

@media(max-width:600px){

    .login-hero{

        min-height:390px;

    }


    .login-hero-brand{

        top:35px;
        left:28px;

    }


    .login-hero-brand img{

        max-width:170px;

    }


    .login-hero-content{

        left:28px;
        right:28px;
        bottom:34px;

    }


    .login-eyebrow{

        margin-bottom:16px;

        font-size:9px;

        letter-spacing:2.5px;

    }


    .login-hero-content h1{

        font-size:43px;

        letter-spacing:-2px;

    }


    .login-hero-content > p{

        margin-top:20px;

        font-size:13px;

    }


    .login-hero-stats{

        display:none;

    }


    .login-panel{

        min-height:620px;

        padding:
        50px
        24px
        75px;

    }


    .login-panel-heading{

        margin-bottom:35px;

    }


    .login-panel-heading h2{

        font-size:34px;

    }


    .login-panel-heading p{

        font-size:13px;

    }


    .login-field{

        margin-bottom:22px;

    }


    .login-panel-footer{

        left:24px;
        right:24px;

        text-align:center;

    }

}

/* =========================================================
   LUMEXA.SIGN 1.62
   GLOBAL TYPOGRAPHY — JETBRAINS MONO
   Original dark colors restored; typography retained.
========================================================= */

html,
body,
button,
input,
select,
textarea,
option,
table,
th,
td,
a,
label,
small,
strong,
span,
p,
h1,
h2,
h3,
h4,
h5,
h6{
    font-family:
    "JetBrains Mono",
    monospace;
}

/* Preserve icon glyph fonts. */
.material-icons,
.material-icons-outlined{
    font-family:"Material Icons Outlined" !important;
}

.material-symbols-rounded,
.material-symbols-outlined{
    font-family:"Material Symbols Rounded" !important;
}