/* FECAVOLLEY login — typography via typography.css */
:root {
    --fec-blue: #0b3b8f;
    --fec-red: #d7262e;
    --focus: #60a5fa;
    --blue: var(--fec-blue);
    --cyan: #22d3ee;
    --orange: #f97316;
}
.submit-btn, .logo-fallback { background: linear-gradient(135deg, var(--fec-blue), #1d4ed8) !important; }
.brand-pill .dot { background: #22c55e; }
:root {
            --bg-1:#070b14;
            --bg-2:#0c1424;
            --bg-3:#101b31;
            --line:rgba(255,255,255,.08);
            --line-2:rgba(255,255,255,.12);
            --text:#f8fafc;
            --muted:rgba(226,232,240,.72);
            --muted-2:rgba(226,232,240,.52);
            --card:rgba(10,15,29,.72);
            --card-2:rgba(255,255,255,.05);
            --input-bg:rgba(255,255,255,.04);
            --input-border:rgba(255,255,255,.10);
            --focus:#60a5fa;
            --blue:var(--fec-blue);
            --cyan:#22d3ee;
            --orange:#f97316;
            --green:#22c55e;
            --danger-bg:rgba(127,29,29,.32);
            --danger-border:rgba(248,113,113,.30);
            --danger-text:#fecaca;
            --shadow-main:0 25px 80px rgba(0,0,0,.45);
            --shadow-soft:0 10px 35px rgba(0,0,0,.25);
            --radius-xl:32px;
            --radius-lg:24px;
            --radius-md:18px;
        }

        *{
            box-sizing:border-box;
        }

        html, body{
            min-height:100%;
        }

        body{
            margin:0;
            color:var(--text);
            background:
                radial-gradient(circle at 15% 20%, rgba(34,211,238,.10), transparent 18%),
                radial-gradient(circle at 85% 18%, rgba(37,99,235,.14), transparent 18%),
                radial-gradient(circle at 75% 85%, rgba(249,115,22,.10), transparent 22%),
                linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%);
            overflow-x:hidden;
        }

        .bg-lines,
        .bg-glow,
        .bg-orb{
            position:fixed;
            inset:0;
            pointer-events:none;
        }

        .bg-lines{
            opacity:.06;
            background-image:
                linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
            background-size:42px 42px;
            mask-image:radial-gradient(circle at center, black 40%, transparent 88%);
            -webkit-mask-image:radial-gradient(circle at center, black 40%, transparent 88%);
        }

        .bg-glow::before,
        .bg-glow::after{
            content:"";
            position:absolute;
            border-radius:999px;
            filter:blur(80px);
            opacity:.55;
        }

        .bg-glow::before{
            width:340px;
            height:340px;
            top:8%;
            left:6%;
            background:rgba(34,211,238,.16);
        }

        .bg-glow::after{
            width:420px;
            height:420px;
            right:3%;
            bottom:4%;
            background:rgba(37,99,235,.18);
        }

        .bg-orb::before,
        .bg-orb::after{
            content:"";
            position:absolute;
            border-radius:50%;
            border:1px solid rgba(255,255,255,.04);
        }

        .bg-orb::before{
            width:520px;
            height:520px;
            top:-140px;
            right:-140px;
        }

        .bg-orb::after{
            width:300px;
            height:300px;
            bottom:-70px;
            left:-70px;
        }

        .login-page{
            min-height:100vh;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:28px;
            position:relative;
            z-index:1;
        }

        .login-shell{
            width:100%;
            max-width:1260px;
            min-height:720px;
            border-radius:var(--radius-xl);
            overflow:hidden;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            backdrop-filter:blur(18px);
            -webkit-backdrop-filter:blur(18px);
            box-shadow:var(--shadow-main);
            display:grid;
            grid-template-columns:1.15fr .85fr;
        }

        .visual-side{
            position:relative;
            padding:42px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            background:
                linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
                linear-gradient(135deg, rgba(255,255,255,.02), rgba(255,255,255,0));
        }

        .visual-side::before{
            content:"";
            position:absolute;
            inset:20px;
            border-radius:28px;
            border:1px solid rgba(255,255,255,.04);
            pointer-events:none;
        }

        .visual-side > *{
            position:relative;
            z-index:2;
        }

        .top-brand{
            display:flex;
            align-items:center;
            gap:16px;
        }

        .logo-box{
            width:78px;
            height:78px;
            border-radius:22px;
            overflow:hidden;
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.10);
            display:grid;
            place-items:center;
            flex:0 0 78px;
            box-shadow:var(--shadow-soft);
        }

        .logo-box img{
            width:100%;
            height:100%;
            object-fit:cover;
            display:block;
        }

        .logo-fallback{
            width:100%;
            height:100%;
            display:grid;
            place-items:center;
            font-size:1.55rem;
            font-weight:900;
            color:#fff;
            background:linear-gradient(135deg, var(--blue), var(--cyan));
        }

        .brand-pill{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 14px;
            border-radius:999px;
            background:rgba(255,255,255,.06);
            border:1px solid rgba(255,255,255,.08);
            font-size:.74rem;
            font-weight:900;
            letter-spacing:.06em;
            text-transform:uppercase;
            margin-bottom:10px;
        }

        .brand-pill .dot{
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--green);
            box-shadow:0 0 0 0 rgba(34,197,94,.35);
            animation:pulse 1.8s infinite;
        }

        @keyframes pulse{
            0%{ box-shadow:0 0 0 0 rgba(34,197,94,.28); }
            70%{ box-shadow:0 0 0 10px rgba(34,197,94,0); }
            100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
        }

        .brand-name{
            margin:0;
            font-size:2rem;
            font-weight:900;
            line-height:1.02;
            letter-spacing:-.03em;
        }

        .brand-tagline{
            margin:.35rem 0 0;
            color:var(--muted);
            font-size:.96rem;
        }

        .hero-block{
            max-width:690px;
            margin-top:18px;
        }

        .hero-title{
            margin:0 0 16px;
            font-size:clamp(2.2rem, 4.5vw, 4.3rem);
            line-height:.98;
            letter-spacing:-.06em;
            font-weight:900;
        }

        .hero-title .accent{
            background:linear-gradient(135deg, #93c5fd, #67e8f9, #fdba74);
            -webkit-background-clip:text;
            background-clip:text;
            color:transparent;
        }

        .hero-text{
            margin:0;
            max-width:600px;
            font-size:1rem;
            line-height:1.9;
            color:var(--muted);
        }

        .hero-panels{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:14px;
            margin-top:32px;
        }

        .hero-panel{
            padding:18px;
            border-radius:20px;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.08);
            box-shadow:var(--shadow-soft);
        }

        .hero-panel .icon{
            width:46px;
            height:46px;
            display:grid;
            place-items:center;
            border-radius:15px;
            margin-bottom:12px;
            background:linear-gradient(135deg, rgba(37,99,235,.28), rgba(34,211,238,.16));
            border:1px solid rgba(255,255,255,.08);
            font-size:1.1rem;
        }

        .hero-panel h6{
            margin:0 0 6px;
            font-size:.96rem;
            font-weight:800;
        }

        .hero-panel p{
            margin:0;
            font-size:.86rem;
            line-height:1.65;
            color:var(--muted);
        }

        .stats-row{
            display:flex;
            gap:14px;
            flex-wrap:wrap;
            margin-top:24px;
        }

        .stat-chip{
            display:inline-flex;
            align-items:center;
            gap:10px;
            padding:12px 15px;
            border-radius:16px;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.08);
            font-weight:800;
            color:#fff;
        }

        .stat-chip .value{
            font-size:1rem;
            color:#fff;
        }

        .stat-chip .label{
            color:var(--muted);
            font-size:.83rem;
            font-weight:700;
        }

        .footer-row{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:14px;
            flex-wrap:wrap;
            padding-top:24px;
            border-top:1px solid rgba(255,255,255,.08);
        }

        .footer-note{
            color:var(--muted-2);
            font-size:.84rem;
        }

        .footer-badges{
            display:flex;
            gap:10px;
            flex-wrap:wrap;
        }

        .footer-badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:9px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.08);
            font-size:.78rem;
            font-weight:800;
            color:#fff;
        }

        .footer-badge .mini-dot{
            width:7px;
            height:7px;
            border-radius:50%;
            background:#60a5fa;
        }

        .form-side{
            position:relative;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:42px 34px;
        }

        .form-card{
            width:100%;
            max-width:430px;
            border-radius:28px;
            padding:28px;
            background:var(--card);
            border:1px solid var(--line-2);
            backdrop-filter:blur(16px);
            -webkit-backdrop-filter:blur(16px);
            box-shadow:var(--shadow-soft);
        }

        .mobile-brand{
            display:none;
            align-items:center;
            gap:12px;
            margin-bottom:20px;
        }

        .mobile-logo{
            width:54px;
            height:54px;
            border-radius:16px;
            overflow:hidden;
            display:grid;
            place-items:center;
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.10);
            flex:0 0 54px;
        }

        .mobile-logo img{
            width:100%;
            height:100%;
            object-fit:cover;
        }

        .mobile-fallback{
            width:100%;
            height:100%;
            display:grid;
            place-items:center;
            font-weight:900;
            color:#fff;
            background:linear-gradient(135deg, var(--blue), var(--cyan));
        }

        .form-badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 14px;
            border-radius:999px;
            background:rgba(249,115,22,.12);
            border:1px solid rgba(249,115,22,.22);
            color:#fdba74;
            font-size:.74rem;
            font-weight:900;
            letter-spacing:.06em;
            text-transform:uppercase;
            margin-bottom:14px;
        }

        .form-title{
            margin:0;
            font-size:2.2rem;
            line-height:1.02;
            letter-spacing:-.05em;
            font-weight:900;
            color:#fff;
        }

        .form-subtitle{
            margin:12px 0 22px;
            color:var(--muted);
            line-height:1.8;
            font-size:.96rem;
        }

        .custom-alert{
            display:flex;
            gap:12px;
            align-items:flex-start;
            padding:14px 16px;
            border-radius:16px;
            background:var(--danger-bg);
            border:1px solid var(--danger-border);
            color:var(--danger-text);
            font-size:.92rem;
            line-height:1.6;
            margin-bottom:18px;
        }

        .form-label{
            font-weight:800;
            color:#fff;
            font-size:.92rem;
            margin-bottom:.5rem;
        }

        .input-wrap{
            position:relative;
            margin-bottom:18px;
        }

        .field-icon{
            position:absolute;
            top:50%;
            left:15px;
            transform:translateY(-50%);
            color:rgba(255,255,255,.45);
            font-size:1rem;
            z-index:2;
        }

        .custom-input{
            min-height:58px;
            background:var(--input-bg);
            border:1px solid var(--input-border);
            color:#fff;
            border-radius:16px;
            padding-left:46px;
            box-shadow:none;
            font-size:.96rem;
            transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
        }

        .custom-input::placeholder{
            color:rgba(255,255,255,.34);
        }

        .custom-input:focus{
            background:rgba(255,255,255,.06);
            border-color:rgba(96,165,250,.60);
            color:#fff;
            box-shadow:0 0 0 .24rem rgba(59,130,246,.14);
            transform:translateY(-1px);
        }

        .password-input{
            padding-right:56px !important;
        }

        .toggle-password{
            position:absolute;
            top:50%;
            right:8px;
            transform:translateY(-50%);
            width:42px;
            height:42px;
            border:none;
            border-radius:12px;
            background:transparent;
            color:rgba(255,255,255,.58);
            display:grid;
            place-items:center;
            z-index:2;
            transition:all .2s ease;
        }

        .toggle-password:hover{
            background:rgba(255,255,255,.07);
            color:#fff;
        }

        .caps-lock{
            display:none;
            margin-top:-6px;
            margin-bottom:14px;
            padding:10px 12px;
            border-radius:12px;
            background:rgba(249,115,22,.10);
            border:1px solid rgba(249,115,22,.18);
            color:#fdba74;
            font-size:.78rem;
            font-weight:800;
        }

        .caps-lock.show{
            display:block;
        }

        .meta-row{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:12px;
            flex-wrap:wrap;
            margin-bottom:18px;
        }

        .meta-note{
            color:var(--muted);
            font-size:.84rem;
            font-weight:700;
        }

        .help-link{
            text-decoration:none;
            color:#93c5fd;
            font-size:.84rem;
            font-weight:800;
        }

        .help-link:hover{
            text-decoration:underline;
            color:#bfdbfe;
        }

        .submit-btn{
            width:100%;
            min-height:60px;
            border:none;
            border-radius:16px;
            background:linear-gradient(135deg, var(--blue) 0%, #1d4ed8 55%, var(--cyan) 100%);
            color:#fff;
            font-weight:900;
            letter-spacing:.02em;
            box-shadow:0 16px 40px rgba(37,99,235,.28);
            transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
            position:relative;
            overflow:hidden;
        }

        .submit-btn::before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(110deg, transparent 25%, rgba(255,255,255,.18) 50%, transparent 75%);
            transform:translateX(-140%);
        }

        .submit-btn:hover{
            transform:translateY(-2px);
            box-shadow:0 22px 44px rgba(37,99,235,.34);
            filter:saturate(1.06);
        }

        .submit-btn:hover::before{
            animation:shine 1.2s ease;
        }

        @keyframes shine{
            from{ transform:translateX(-140%); }
            to{ transform:translateX(140%); }
        }

        .submit-btn:disabled{
            opacity:.96;
            cursor:not-allowed;
        }

        .btn-loading{
            display:none;
        }

        .submit-btn.is-loading .btn-label{
            display:none !important;
        }

        .submit-btn.is-loading .btn-loading{
            display:inline-flex !important;
            align-items:center;
            justify-content:center;
            gap:10px;
        }

        .spinner{
            width:18px;
            height:18px;
            border-radius:50%;
            border:2px solid rgba(255,255,255,.32);
            border-top-color:#fff;
            animation:spin .7s linear infinite;
        }

        @keyframes spin{
            to{ transform:rotate(360deg); }
        }

        .bottom-row{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:14px;
            flex-wrap:wrap;
            margin-top:18px;
        }

        .secure-note{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--muted);
            font-size:.83rem;
            font-weight:800;
        }

        .status-chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(34,197,94,.10);
            border:1px solid rgba(34,197,94,.16);
            color:#bbf7d0;
            font-size:.78rem;
            font-weight:900;
        }

        .status-chip .dot{
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--green);
        }

        .bottom-copy{
            margin-top:18px;
            text-align:center;
            color:var(--muted-2);
            font-size:.77rem;
            line-height:1.7;
        }

        @media (max-width: 991.98px){
            .login-shell{
                grid-template-columns:1fr;
                min-height:auto;
            }

            .visual-side{
                display:none;
            }

            .form-side{
                padding:22px 16px;
            }

            .form-card{
                max-width:520px;
            }

            .mobile-brand{
                display:flex;
            }
        }

        @media (max-width: 575.98px){
            .login-page{
                padding:14px;
            }

            .form-card{
                padding:22px 16px;
                border-radius:22px;
            }

            .form-title{
                font-size:1.85rem;
            }

            .custom-input{
                min-height:54px;
            }

            .submit-btn{
                min-height:56px;
            }
        }

        .login-public-link{
            position:fixed;
            top:18px;
            left:18px;
            z-index:6;
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:10px 14px;
            border-radius:999px;
            text-decoration:none;
            font-size:.86rem;
            font-weight:800;
            color:#fff;
            background:rgba(255,255,255,.10);
            border:1px solid rgba(255,255,255,.16);
            backdrop-filter:blur(10px);
            -webkit-backdrop-filter:blur(10px);
            box-shadow:0 8px 24px rgba(0,0,0,.18);
        }
        .login-public-link:hover{
            color:#fff;
            background:rgba(255,255,255,.18);
        }

/* ——— Connexion FECAVOLLEY (login-fed) ——— */
body.login-fed{
    --text:#0f172a;
    --muted:#64748b;
    --muted-2:#94a3b8;
    --card:#ffffff;
    --line:rgba(11,61,145,.12);
    --line-2:rgba(11,61,145,.08);
    --input-bg:#f8fafc;
    --input-border:#e2e8f0;
    --danger-bg:#fef2f2;
    --danger-border:#fecaca;
    --danger-text:#991b1b;
    --shadow-main:0 24px 60px rgba(11,61,145,.12);
    color:var(--text);
    background:#fff;
}
body.login-fed .bg-lines,
body.login-fed .bg-glow,
body.login-fed .bg-orb{
    display:none !important;
}
body.login-fed .login-page{
    padding:0;
    min-height:100vh;
}
body.login-fed .login-shell{
    max-width:none;
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    border-radius:0;
    border:0;
    box-shadow:none;
    grid-template-columns:minmax(0, 1.65fr) minmax(300px, 0.78fr);
}
body.login-fed .login-hero{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
    min-height:100vh;
    min-height:100dvh;
    padding:56px 48px;
    overflow:hidden;
    background:
        radial-gradient(ellipse 80% 60% at 20% 15%, rgba(34,211,238,.18), transparent 55%),
        radial-gradient(ellipse 70% 50% at 90% 90%, rgba(215,38,46,.22), transparent 50%),
        linear-gradient(155deg, #0a2f73 0%, #0b3b8f 42%, #12284f 100%);
    color:#fff;
}
body.login-fed .login-hero.has-image{
    background:#0b3b8f;
    padding:0;
}
body.login-fed .login-hero.has-image .login-hero-shade,
body.login-fed .login-hero.has-image .login-hero-pattern,
body.login-fed .login-hero.has-image .login-hero-inner{
    display:none !important;
}
body.login-fed .login-hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}
body.login-fed .login-form-brand{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:28px;
}
body.login-fed .login-form-brand img{
    width:56px;
    height:56px;
    border-radius:14px;
    object-fit:contain;
    background:#fff;
    border:1px solid var(--line);
    flex:0 0 56px;
}
body.login-fed .login-form-brand strong{
    display:block;
    font-size:1.05rem;
    font-weight:800;
    color:var(--fec-blue);
    letter-spacing:-.02em;
}
body.login-fed .login-form-brand span{
    display:block;
    margin-top:2px;
    font-size:.86rem;
    color:var(--muted);
    line-height:1.35;
}
body.login-fed .login-form-brand .login-form-fullname{
    font-size:.9rem;
    font-weight:600;
    color:#334155;
    margin-top:3px;
}
body.login-fed .login-mobile-brand{
    display:none;
}
body.login-fed .form-title{
    margin:0 0 22px;
}
body.login-fed .login-hero-shade{
    position:absolute;
    inset:0;
    background:
        linear-gradient(115deg, rgba(8,28,70,.55) 0%, rgba(11,59,143,.42) 45%, rgba(8,24,56,.72) 100%);
    pointer-events:none;
}
body.login-fed .login-hero-pattern{
    position:absolute;
    inset:0;
    opacity:.22;
    background-image:
        linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(circle at 30% 40%, black 20%, transparent 75%);
    -webkit-mask-image:radial-gradient(circle at 30% 40%, black 20%, transparent 75%);
    pointer-events:none;
}
body.login-fed .login-hero-inner{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:20px;
    max-width:440px;
}
body.login-fed .login-hero-brand{
    display:flex;
    align-items:center;
    gap:18px;
    color:#fff;
    text-decoration:none;
}
body.login-fed .login-hero-brand:hover{
    color:#fff;
}
body.login-fed .login-hero-logo{
    width:96px;
    height:96px;
    border-radius:24px;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(255,255,255,.4);
    flex:0 0 96px;
    box-shadow:0 16px 40px rgba(0,0,0,.28);
}
body.login-fed .login-hero-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    background:#fff;
}
body.login-fed .login-hero-copy{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}
body.login-fed .login-hero-copy strong{
    font-size:2rem;
    font-weight:800;
    letter-spacing:-.03em;
    line-height:1.05;
}
body.login-fed .login-hero-copy span{
    font-size:.98rem;
    line-height:1.4;
    color:rgba(255,255,255,.88);
}
body.login-fed .login-hero-product{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin:0;
}
body.login-fed .login-hero-product strong{
    font-size:1.55rem;
    font-weight:800;
    letter-spacing:.18em;
    text-indent:.18em;
    line-height:1.1;
}
body.login-fed .login-hero-product span{
    font-size:.95rem;
    font-weight:500;
    color:rgba(255,255,255,.86);
    letter-spacing:.01em;
}
body.login-fed .login-hero-slogan{
    margin:4px 0 0;
    font-size:1.15rem;
    line-height:1.45;
    font-weight:600;
    color:#fff;
    max-width:26ch;
}
body.login-fed .form-subtitle strong{
    color:var(--fec-blue);
    font-weight:700;
}
body.login-fed .login-hero-lead{
    margin:0;
    font-size:.98rem;
    line-height:1.5;
    color:rgba(255,255,255,.78);
    font-weight:500;
}
body.login-fed .login-hero-back{
    display:none;
}
body.login-fed .form-side{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 32px;
    background:#fff;
    min-width:0;
}
body.login-fed .form-card{
    width:100%;
    max-width:380px;
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
    backdrop-filter:none;
}
body.login-fed .login-mobile-brand{
    display:none;
    align-items:center;
    gap:12px;
    margin-bottom:22px;
}
body.login-fed .login-mobile-brand img{
    width:52px;
    height:52px;
    border-radius:14px;
    object-fit:contain;
    background:#fff;
    border:1px solid var(--line);
}
body.login-fed .login-mobile-brand strong{
    display:block;
    font-size:1rem;
    color:var(--fec-blue);
}
body.login-fed .login-mobile-brand span{
    display:block;
    font-size:.8rem;
    color:var(--muted);
    line-height:1.35;
}
body.login-fed .form-title{
    margin:0;
    font-size:1.75rem;
    font-weight:800;
    letter-spacing:-.03em;
    color:#0f172a;
}
body.login-fed .form-subtitle{
    margin:8px 0 22px;
    color:var(--muted);
    font-size:.95rem;
    line-height:1.55;
}
body.login-fed .form-label{
    font-weight:600;
    color:#334155;
    font-size:.88rem;
}
body.login-fed .field-icon{
    color:#94a3b8;
}
body.login-fed .custom-input{
    min-height:50px;
    background:var(--input-bg);
    border-color:var(--input-border);
    color:#0f172a;
    border-radius:14px;
}
body.login-fed .custom-input::placeholder{
    color:#94a3b8;
}
body.login-fed .custom-input:focus{
    background:#fff;
    color:#0f172a;
    border-color:var(--fec-blue);
    box-shadow:0 0 0 .2rem rgba(11,61,145,.15);
    transform:none;
}
body.login-fed .help-link{
    color:var(--fec-blue);
    font-weight:600;
    text-decoration:none;
}
body.login-fed .help-link:hover{
    color:var(--fec-red);
}
body.login-fed .meta-row{
    margin:4px 0 18px;
    justify-content:flex-end;
}
body.login-fed .toggle-password{
    color:#94a3b8;
}
body.login-fed .toggle-password:hover{
    background:#f1f5f9;
    color:var(--fec-blue);
}
body.login-fed .caps-lock{
    background:#fff7ed;
    border-color:#fed7aa;
    color:#9a3412;
}
body.login-fed .submit-btn,
body.login-fed .custom-btn{
    width:100%;
    min-height:50px;
    border:none;
    border-radius:14px;
    font-weight:700;
    color:#fff;
    background:var(--fec-blue) !important;
    box-shadow:0 12px 24px rgba(11,61,145,.22);
}
body.login-fed .submit-btn:hover,
body.login-fed .custom-btn:hover{
    filter:brightness(1.05);
    transform:translateY(-1px);
}
body.login-fed .login-public-link{
    position:static;
    top:auto;
    left:auto;
    z-index:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    margin-top:16px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--fec-blue);
    text-decoration:none;
    font-weight:600;
    font-size:.92rem;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
body.login-fed .login-public-link:hover{
    border-color:var(--fec-blue);
    background:#f8fafc;
    color:var(--fec-blue);
}
body.login-fed .login-help{
    margin-top:22px;
    padding-top:16px;
    border-top:1px solid var(--line);
}
body.login-fed .login-help-label{
    margin:0 0 10px;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted-2);
}
body.login-fed .login-help-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
    align-items:center;
}
body.login-fed .login-help-list a,
body.login-fed .login-help-version{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.82rem;
    font-weight:600;
    color:var(--muted);
    text-decoration:none;
    line-height:1.3;
}
body.login-fed .login-help-list a:hover{
    color:var(--fec-blue);
}
body.login-fed .login-help-version{
    color:var(--muted-2);
    cursor:default;
}
body.login-fed .login-card,
body.login-fed .login-form-side{
    width:100%;
    max-width:400px;
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
}
body.login-fed .form-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:12px;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(11,61,145,.08);
    border:1px solid rgba(11,61,145,.14);
    color:var(--fec-blue);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}
@media (max-width: 1100px){
    body.login-fed .login-shell{
        grid-template-columns:minmax(0, 1.35fr) minmax(280px, 0.9fr);
    }
    body.login-fed .form-side{
        padding:36px 24px;
    }
}
@media (max-width: 900px){
    body.login-fed .login-shell{
        max-width:none;
        min-height:100vh;
        min-height:100dvh;
        grid-template-columns:1fr;
        grid-template-rows:auto 1fr;
    }
    body.login-fed .login-hero{
        min-height:0;
        height:38vh;
        max-height:320px;
        padding:24px 20px;
        justify-content:flex-end;
        order:0;
    }
    body.login-fed .login-hero.has-image{
        height:42vh;
        max-height:360px;
        min-height:180px;
        padding:0;
    }
    body.login-fed .login-hero.has-image .login-hero-bg{
        object-position:center top;
    }
    body.login-fed .login-hero-slogan,
    body.login-fed .login-hero-lead{
        display:none;
    }
    body.login-fed .login-hero-product strong{
        font-size:1.15rem;
        letter-spacing:.12em;
        text-indent:.12em;
    }
    body.login-fed .login-hero-logo{
        width:52px;
        height:52px;
        flex-basis:52px;
        border-radius:14px;
    }
    body.login-fed .login-hero-copy strong{
        font-size:1.15rem;
    }
    body.login-fed .form-side{
        padding:24px 20px 32px;
        align-items:flex-start;
        order:1;
    }
    body.login-fed .form-card{
        max-width:440px;
        margin:0 auto;
    }
    body.login-fed .login-form-brand{
        margin-bottom:20px;
    }
}
@media (max-width: 480px){
    body.login-fed .login-hero,
    body.login-fed .login-hero.has-image{
        height:32vh;
        max-height:240px;
        min-height:140px;
    }
    body.login-fed .form-side{
        padding:20px 16px 28px;
    }
    body.login-fed .login-form-brand{
        gap:10px;
        margin-bottom:18px;
    }
    body.login-fed .login-form-brand img{
        width:48px;
        height:48px;
        flex-basis:48px;
        border-radius:12px;
    }
    body.login-fed .login-form-brand strong{
        font-size:.98rem;
    }
    body.login-fed .login-form-brand .login-form-fullname{
        font-size:.82rem;
    }
    body.login-fed .login-form-brand span{
        font-size:.8rem;
    }
    body.login-fed .form-title{
        font-size:1.45rem;
        margin-bottom:18px;
    }
    body.login-fed .custom-input{
        min-height:48px;
    }
    body.login-fed .login-help-list{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }
}

.auth-nav{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    margin-top:18px;
}

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }
}