:root{
    --fl-navy:#102a43;
    --fl-navy-2:#163b61;
    --fl-blue:#3157c8;
    --fl-blue-2:#4775dd;
    --fl-text:#17253a;
    --fl-muted:#718096;
    --fl-line:#e2e8f0;
    --fl-bg:#f3f6fa;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
    margin:0;
    color:var(--fl-text);
    background:
        radial-gradient(circle at 10% 10%,rgba(49,87,200,.08),transparent 26%),
        radial-gradient(circle at 92% 90%,rgba(22,59,97,.07),transparent 24%),
        var(--fl-bg);
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}
button,input{font:inherit}

.fl-login-page{
    min-height:100vh;
    min-height:100dvh;
    display:grid;
    place-items:center;
    padding:32px;
}

.fl-login-shell{
    width:min(1080px,100%);
    min-height:620px;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);
    overflow:hidden;
    border:1px solid rgba(216,225,236,.92);
    border-radius:28px;
    background:#fff;
    box-shadow:0 28px 75px rgba(19,39,67,.14);
}

.fl-brand-panel{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding:42px 44px 38px;
    color:#fff;
    background:
        linear-gradient(145deg,rgba(16,42,67,.97),rgba(22,59,97,.96) 58%,rgba(49,87,200,.92));
}
.fl-brand-top{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}
.fl-logo-wrap{
    height:58px;
    min-width:170px;
    display:flex;
    align-items:center;
    padding:9px 15px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:15px;
    background:rgba(255,255,255,.96);
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}
.fl-logo-wrap img{display:block;max-width:180px;max-height:40px}
.fl-internal-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 11px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.9);
    font-size:11px;
    font-weight:750;
    backdrop-filter:blur(8px);
}
.fl-brand-content{
    position:relative;
    z-index:2;
    margin:auto 0;
    padding:52px 0 40px;
    max-width:455px;
}
.fl-eyebrow,.fl-form-kicker{
    display:block;
    margin-bottom:13px;
    font-size:10px;
    font-weight:850;
    letter-spacing:.13em;
}
.fl-eyebrow{color:#bcd2ff}
.fl-brand-content h2{
    margin:0;
    max-width:430px;
    font-size:43px;
    line-height:1.08;
    font-weight:750;
    letter-spacing:-.045em;
}
.fl-brand-content p{
    max-width:420px;
    margin:22px 0 0;
    color:rgba(255,255,255,.72);
    font-size:15px;
    line-height:1.65;
}
.fl-brand-footer{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:9px;
    color:rgba(255,255,255,.68);
    font-size:11px;
}
.fl-status-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#67d4a0;
    box-shadow:0 0 0 5px rgba(103,212,160,.12);
}
.fl-decor{position:absolute;border-radius:50%;pointer-events:none}
.fl-decor-one{
    width:330px;height:330px;right:-135px;bottom:-95px;
    border:1px solid rgba(255,255,255,.11);
    box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.018);
}
.fl-decor-two{
    width:150px;height:150px;right:72px;top:165px;
    background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,0));
    border:1px solid rgba(255,255,255,.06);
}

.fl-form-panel{
    display:grid;
    place-items:center;
    padding:54px 58px;
    background:linear-gradient(180deg,#fff 0%,#fcfdff 100%);
}
.fl-form-wrap{width:min(390px,100%)}
.fl-mobile-logo{display:none}
.fl-form-head{margin-bottom:31px}
.fl-form-kicker{margin-bottom:8px;color:var(--fl-blue)}
.fl-form-head h1{
    margin:0;
    color:#17253a;
    font-size:35px;
    line-height:1.12;
    font-weight:780;
    letter-spacing:-.04em;
}
.fl-form-head p{
    margin:10px 0 0;
    color:var(--fl-muted);
    font-size:14px;
    line-height:1.5;
}
.fl-alert{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:20px;
    padding:12px 13px;
    border:1px solid #f2cccc;
    border-radius:12px;
    color:#a43f3f;
    background:#fff5f5;
    font-size:12px;
    font-weight:650;
}
.fl-alert i{margin-top:2px}
.fl-field{margin-bottom:18px}
.fl-field label{
    display:block;
    margin-bottom:7px;
    color:#34445c;
    font-size:12px;
    font-weight:750;
}
.fl-label-row{display:flex;align-items:center;justify-content:space-between}
.fl-control{position:relative}
.fl-control input{
    width:100%;
    height:51px;
    padding:0 46px;
    border:1px solid #dce3ec;
    border-radius:13px;
    outline:none;
    color:#17253a;
    background:#fff;
    font-size:13px;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.fl-control input::placeholder{color:#a1acbc}
.fl-control input:hover{border-color:#cbd6e4}
.fl-control input:focus{
    border-color:#7898e6;
    box-shadow:0 0 0 4px rgba(49,87,200,.10);
    background:#fff;
}
.fl-control-icon{
    position:absolute;
    top:50%;left:16px;
    transform:translateY(-50%);
    display:grid;
    place-items:center;
    width:18px;
    color:#8190a4;
    font-size:14px;
    pointer-events:none;
}
.fl-password-toggle{
    position:absolute;
    top:50%;right:9px;
    transform:translateY(-50%);
    width:35px;height:35px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:9px;
    color:#8190a4;
    background:transparent;
    cursor:pointer;
    transition:.18s ease;
}
.fl-password-toggle:hover{color:#3157c8;background:#f1f5ff}
.fl-remember{
    display:flex;
    align-items:center;
    gap:9px;
    margin:1px 0 23px;
    color:#69798e;
    font-size:11px;
    cursor:pointer;
    user-select:none;
}
.fl-remember input{
    width:16px;height:16px;
    accent-color:var(--fl-blue);
}
.fl-submit{
    width:100%;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border:0;
    border-radius:13px;
    color:#fff;
    background:linear-gradient(135deg,var(--fl-blue),var(--fl-blue-2));
    box-shadow:0 10px 22px rgba(49,87,200,.22);
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.fl-submit:hover{
    transform:translateY(-1px);
    box-shadow:0 13px 27px rgba(49,87,200,.27);
    filter:saturate(1.05);
}
.fl-submit:active{transform:translateY(0)}
.fl-submit:disabled{cursor:wait;opacity:.86;transform:none}
.fl-submit i{font-size:11px}
.fl-form-footer{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    margin-top:26px;
    padding-top:21px;
    border-top:1px solid #edf1f5;
    color:#92a0b2;
    font-size:10px;
    font-weight:650;
}
.fl-form-footer i{color:#6f8bcf}

@media(max-width:900px){
    .fl-login-page{padding:20px}
    .fl-login-shell{grid-template-columns:1fr;min-height:auto;max-width:540px}
    .fl-brand-panel{display:none}
    .fl-form-panel{padding:43px 42px 45px}
    .fl-mobile-logo{display:flex;margin-bottom:35px}
    .fl-mobile-logo img{max-width:185px;max-height:48px}
}
@media(max-width:520px){
    body{background:#fff}
    .fl-login-page{display:block;padding:0}
    .fl-login-shell{min-height:100vh;min-height:100dvh;border:0;border-radius:0;box-shadow:none}
    .fl-form-panel{display:flex;align-items:center;padding:34px 24px}
    .fl-form-wrap{margin:auto}
    .fl-mobile-logo{margin-bottom:42px}
    .fl-form-head h1{font-size:31px}
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}


/* =========================================================
   FLEXO v5.0 · Login polish
   ========================================================= */

body{
    background:
        radial-gradient(circle at 12% 12%,rgba(49,87,200,.10),transparent 28%),
        radial-gradient(circle at 88% 86%,rgba(22,59,97,.08),transparent 26%),
        linear-gradient(135deg,#eef3f8 0%,#f7f9fc 52%,#eef4fa 100%);
}

.fl-login-shell{
    border-color:rgba(202,215,230,.82);
    box-shadow:0 30px 85px rgba(19,39,67,.16);
}

.fl-brand-mark{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    color:rgba(255,255,255,.86);
    font-size:11px;
    font-weight:850;
    letter-spacing:.14em;
}

.fl-form-panel{
    background:
        radial-gradient(circle at 100% 0%,rgba(49,87,200,.035),transparent 34%),
        linear-gradient(180deg,#fbfcfe 0%,#f7f9fc 100%);
}

.fl-form-wrap{
    width:min(400px,100%);
}

.fl-login-logo{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-height:66px;
    margin-bottom:30px;
}

.fl-login-logo img{
    display:block;
    width:auto;
    max-width:220px;
    max-height:58px;
    object-fit:contain;
}

.fl-form-head{
    margin-bottom:30px;
}

.fl-form-head h1{
    font-size:36px;
}

.fl-control input{
    background:rgba(255,255,255,.9);
}

.fl-submit{
    min-height:54px;
}

@media(max-width:900px){
    .fl-login-logo{
        justify-content:center;
        margin-bottom:38px;
    }

    .fl-login-logo img{
        max-width:210px;
        max-height:56px;
    }

    .fl-form-panel{
        background:
            radial-gradient(circle at 85% 5%,rgba(49,87,200,.06),transparent 30%),
            linear-gradient(180deg,#f9fbfd 0%,#f3f7fb 100%);
    }
}

@media(max-width:520px){
    body{
        background:linear-gradient(180deg,#f5f8fb 0%,#eef3f8 100%);
    }

    .fl-login-shell{
        background:transparent;
    }

    .fl-form-panel{
        background:transparent;
    }

    .fl-login-logo{
        justify-content:flex-start;
        margin-bottom:34px;
    }

    .fl-login-logo img{
        max-width:190px;
        max-height:50px;
    }
}


/* FLEXO v5.1 · Logo Transfer Gomma centrato */
.fl-login-logo{
    justify-content:center;
    text-align:center;
}
.fl-login-logo img{
    margin-left:auto;
    margin-right:auto;
}

@media(max-width:520px){
    .fl-login-logo{
        justify-content:center;
        text-align:center;
    }
}