/* 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;
            }
        }

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