*{box-sizing:border-box}
:root{
    --navy:#061b3d;
    --navy2:#0a2f66;
    --blue:#087cf0;
    --blue2:#19a9ff;
    --text:#0a214a;
    --muted:#6d7c98;
    --border:#d9e3ef;
    --bg:#f4f7fb;
}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--text)}
body{background:var(--bg)}
.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(420px,46%) 1fr}
.brand-panel{
    min-height:100vh;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 75% 20%,rgba(25,169,255,.25),transparent 26%),
        radial-gradient(circle at 20% 85%,rgba(8,124,240,.25),transparent 30%),
        linear-gradient(145deg,#04142f 0%,#062451 55%,#083878 100%);
    color:#fff;
}
.brand-panel:before{
    content:"";
    position:absolute;
    width:520px;height:520px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:50%;
    right:-240px;top:-170px;
    box-shadow:0 0 0 80px rgba(255,255,255,.025),0 0 0 160px rgba(255,255,255,.02);
}
.brand-panel:after{
    content:"";
    position:absolute;
    left:-80px;bottom:-140px;
    width:390px;height:390px;
    border-radius:50%;
    background:linear-gradient(145deg,rgba(15,130,255,.22),rgba(20,170,255,.04));
}
.brand-content{
    position:relative;z-index:2;
    min-height:100vh;
    display:flex;flex-direction:column;
    padding:54px clamp(40px,6vw,90px) 38px;
}
.brand-logo{width:250px;max-width:75%;height:auto}
.brand-copy{margin-top:auto;margin-bottom:40px;max-width:600px}
.eyebrow{
    display:inline-block;
    font-size:12px;
    letter-spacing:2.2px;
    font-weight:800;
    color:#8fd5ff;
    margin-bottom:17px;
}
.brand-copy h1{
    margin:0 0 18px;
    font-size:clamp(38px,4vw,62px);
    line-height:1.02;
    letter-spacing:-1.8px;
}
.brand-copy h1 strong{color:#24b5ff}
.brand-copy>p{
    margin:0;
    max-width:540px;
    color:#cad9ee;
    font-size:17px;
    line-height:1.65;
}
.brand-features{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:36px}
.brand-features>div{
    min-height:112px;
    border:1px solid rgba(255,255,255,.11);
    background:rgba(255,255,255,.055);
    backdrop-filter:blur(8px);
    border-radius:15px;
    padding:15px;
}
.brand-features>div>span{
    display:grid;place-items:center;
    width:34px;height:34px;
    border-radius:9px;
    background:linear-gradient(135deg,#087cf0,#19a9ff);
    margin-bottom:10px;
    font-size:18px;
}
.brand-features p{margin:0}
.brand-features strong{display:block;font-size:13px;color:#fff;margin-bottom:4px}
.brand-features small{display:block;color:#aebfd6;font-size:11px;line-height:1.4}
.brand-footer{
    border-top:1px solid rgba(255,255,255,.10);
    padding-top:18px;
    color:#8fa8c8;
    font-size:12px;
    letter-spacing:1.1px;
}
.login-panel{min-height:100vh;display:grid;place-items:center;padding:40px 32px}
.login-card{width:min(470px,100%)}
.mobile-logo{display:none}
.welcome{
    font-size:11px;
    font-weight:800;
    letter-spacing:1.8px;
    color:var(--blue);
}
.login-card h2{
    margin:10px 0 8px;
    font-size:36px;
    letter-spacing:-1px;
}
.subtitle{margin:0 0 32px;color:var(--muted);font-size:15px}
label{display:block;margin:17px 0 8px;font-size:13px;font-weight:800;color:#254267}
.input-wrap{position:relative}
.input-wrap input{
    width:100%;
    height:54px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    padding:0 48px 0 46px;
    color:var(--text);
    font-size:15px;
    outline:none;
    transition:.18s ease;
    box-shadow:0 3px 12px rgba(24,57,96,.035);
}
.input-wrap input:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 4px rgba(8,124,240,.09),0 7px 18px rgba(24,57,96,.06);
}
.input-icon{
    position:absolute;
    left:16px;top:50%;transform:translateY(-50%);
    color:#6481a7;
    font-size:15px;
}
.toggle-pass{
    position:absolute;
    right:13px;top:50%;transform:translateY(-50%);
    width:34px;height:34px;
    border:0;background:transparent;
    color:#6e86a8;
    cursor:pointer;
    border-radius:8px;
    font-size:17px;
}
.toggle-pass:hover{background:#eef5fd;color:var(--blue)}
.login-btn{
    margin-top:25px;
    width:100%;height:55px;
    border:0;
    border-radius:12px;
    color:#fff;
    font-size:15px;
    font-weight:800;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:10px;
    background:linear-gradient(90deg,#066fe4,#12a8ff);
    box-shadow:0 12px 28px rgba(8,124,240,.24);
    transition:.18s ease;
}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 15px 32px rgba(8,124,240,.30)}
.login-btn span{font-size:20px}
.alert,.setup-alert{
    border-radius:11px;
    padding:12px 14px;
    margin-bottom:18px;
    font-size:13px;
}
.alert{background:#fff0f1;border:1px solid #ffc9ce;color:#b42332}
.setup-alert{background:#edf7ff;border:1px solid #badfff;color:#215b91}
.setup-alert a{color:#086fd6;font-weight:800}
.security-note{
    display:flex;align-items:center;gap:9px;
    margin-top:20px;
    background:#eef8f4;
    color:#537269;
    border-radius:10px;
    padding:11px 13px;
}
.security-note>span{
    display:grid;place-items:center;
    width:22px;height:22px;
    border-radius:50%;
    background:#d5f3e5;color:#11884a;font-weight:800;
}
.security-note p{margin:0;font-size:11px;line-height:1.4}
.login-card footer{
    margin-top:28px;
    text-align:center;
    color:#95a2b6;
    font-size:11px;
}
@media(max-width:1000px){
    .login-page{grid-template-columns:1fr}
    .brand-panel{display:none}
    .login-panel{padding:28px 20px}
    .mobile-logo{display:block;margin-bottom:30px}
    .mobile-logo img{width:190px}
}
@media(max-width:520px){
    .login-card h2{font-size:30px}
    .login-panel{place-items:start center;padding-top:30px}
}


/* ALVO LOGIN MOBILE */
@media(max-width:700px){
    html,body{min-height:100%;overflow-x:hidden}
    body{padding:0!important}
    .login-page,.login-shell,.login-wrapper{
        min-height:100dvh!important;
        width:100%!important;
        padding:18px 12px!important;
    }
    .login-card,.login-box,.login-panel{
        width:100%!important;
        max-width:430px!important;
        margin:auto!important;
        border-radius:18px!important;
        padding:22px 18px!important;
    }
    input,select,textarea{font-size:16px!important;min-height:48px!important}
    button,.btn{min-height:46px!important;width:100%}
    img{max-width:100%;height:auto}
}