:root{
            --primary:#012C66;
            --secondary:#0d6efd;
            --light:#f8fafc;
            --border:#e5e7eb;
        }

        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }

        body{
            min-height:100vh;
            font-family:'Segoe UI',sans-serif;
            background:
                radial-gradient(circle at top right,
                rgba(13,110,253,.25),
                transparent 30%),
                linear-gradient(
                    135deg,
                    #0b1320 0%,
                    #012C66 60%,
                    #0d6efd 100%
                );

            display:flex;
            justify-content:center;
            align-items:center;
            padding:20px;
        }

        .login-card{

            width:100%;
            max-width:1050px;
            min-height:620px;

            background:#fff;

            border-radius:24px;

            overflow:hidden;

            box-shadow:
                0 25px 60px rgba(0,0,0,.25);

        }

        .left-panel{

            background:
                linear-gradient(
                    180deg,
                    #012C66,
                    #0d6efd
                );

            color:white;

            padding:60px 50px;

            height:100%;

            display:flex;
            flex-direction:column;
            justify-content:center;
        }

        .logo{

            width:120px;
            margin-bottom:30px;
        }

        .brand-title{

            font-size:2.6rem;
            font-weight:700;
            letter-spacing:2px;
        }

        .brand-subtitle{

            margin-top:10px;
            font-size:1.1rem;
            opacity:.9;
        }

        .brand-divider{

            width:70px;
            height:4px;
            border-radius:20px;
            background:white;

            margin:25px 0;
        }

        .feature-item{

            margin-bottom:15px;
            display:flex;
            align-items:center;
            gap:12px;
            font-size:1rem;
        }

        .feature-item i{

            width:24px;
            text-align:center;
        }

        .version{

            margin-top:40px;
            opacity:.8;
            font-size:.9rem;
        }

        .right-panel{

            padding:60px;
            display:flex;
            flex-direction:column;
            justify-content:center;
        }

        .welcome{

            color:#111827;
            font-size:2rem;
            font-weight:700;
            margin-bottom:5px;
        }

        .welcome-text{

            color:#6b7280;
            margin-bottom:35px;
        }

        .form-label{

            font-weight:600;
            color:#374151;
        }

        .input-group{

            margin-bottom:20px;
        }

        .input-group-text{

            background:white;
            border-right:none;
            border-radius:12px 0 0 12px;
        }

        .form-control{

            border-left:none;
            border-radius:0 12px 12px 0;

            height:52px;
        }

        .form-control:focus{

            box-shadow:none;
            border-color:#ced4da;
        }

        .input-group:focus-within .input-group-text{

            color:var(--secondary);
        }

        .password-toggle{

            cursor:pointer;
        }

        .btn-login{

            background:var(--primary);
            color:white;

            height:52px;

            border:none;
            border-radius:12px;

            font-weight:600;

            transition:.3s;
        }

        .btn-login:hover{

            background:var(--secondary);
            color:white;

            transform:translateY(-2px);
        }

        .copyright{

            text-align:center;
            margin-top:25px;
            color:#9ca3af;
            font-size:.85rem;
        }

        @media(max-width:991px){

            .left-panel{

                display:none;
            }

            .right-panel{

                padding:35px;
            }

            .welcome{

                text-align:center;
            }

            .welcome-text{

                text-align:center;
            }
        }

        @media(max-width:576px){

            body{

                padding:10px;
            }

            .login-card{

                border-radius:18px;
            }

            .right-panel{

                padding:25px;
            }

            .welcome{

                font-size:1.7rem;
            }
        }