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

        body{
            font-family:'Inter', sans-serif;
            background:#f4f7fb;
            min-height:100vh;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:20px;
            overflow:hidden;
            position:relative;
        }

        /* =========================
           FUNDO
        ========================= */

        .background-shape{
            position:absolute;
            width:700px;
            height:700px;
            border-radius:50%;
            background:rgba(37,99,235,0.08);
            top:-250px;
            right:-200px;
            z-index:0;
        }

        .background-shape-2{
            position:absolute;
            width:500px;
            height:500px;
            border-radius:50%;
            background:rgba(15,23,42,0.05);
            bottom:-180px;
            left:-150px;
            z-index:0;
        }

        /* =========================
           CARD LOGIN
        ========================= */

        .login-wrapper{
            position:relative;
            z-index:2;
            width:100%;
            max-width:1100px;
            background:white;
            border-radius:28px;
            overflow:hidden;
            display:grid;
            grid-template-columns:1fr 1fr;
            box-shadow:0 20px 50px rgba(15,23,42,0.12);
        }

        /* =========================
           BANNER
        ========================= */

        .login-banner{
            position:relative;
            overflow:hidden;
            padding:0;
            min-height:650px;

            background:#001a8c;
        }

        .login-banner img{
            width:100%;
            height:100%;
            object-fit:cover;
            object-position:center;
            display:block;
        }

        .login-banner::before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(
                135deg,
                rgba(255,255,255,0.06),
                rgba(255,255,255,0)
            );
        }

        /* =========================
           FORMULÁRIO
        ========================= */

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

        .login-header{
            margin-bottom:35px;
        }

        .login-header h1{
            font-size:38px;
            font-weight:700;
            color:#0f172a;
            margin-bottom:10px;
        }

        .login-header p{
            color:#64748b;
            font-size:15px;
            line-height:1.5;
        }

        .login-form{
            display:flex;
            flex-direction:column;
            gap:18px;
            width:100%;
        }

        .form-group{
            display:flex;
            flex-direction:column;
            gap:8px;
            width:100%;
        }

        .form-group label{
            font-size:13px;
            font-weight:600;
            color:#334155;
        }

        .form-control{
            width:100%;
            height:52px;
            border:1px solid #dbe2ea;
            border-radius:14px;
            padding:0 16px;
            font-size:15px;
            transition:0.2s;
            background:#fff;
            display:block;
        }

        .form-control:focus{
            outline:none;
            border-color:#2563eb;
            box-shadow:0 0 0 4px rgba(37,99,235,0.10);
        }

        /* =========================
           BOTÃO
        ========================= */

        .btn-login{
            width:100%;
            height:54px;
            border:none;
            border-radius:14px;
            background:#2563eb;
            color:white;
            font-size:15px;
            font-weight:700;
            cursor:pointer;
            transition:0.2s;
            margin-top:10px;
        }

        .btn-login:hover{
            background:#1d4ed8;
            transform:translateY(-1px);
        }

        /* =========================
           ALERTAS
        ========================= */

        #flash-messages{
            list-style:none;
            margin-top:22px;
            display:flex;
            flex-direction:column;
            gap:10px;
        }

        #flash-messages li{
            background:#fee2e2;
            color:#991b1b;
            border:1px solid #fecaca;
            padding:14px 16px;
            border-radius:12px;
            font-size:14px;
            font-weight:600;
        }

        /* =========================
           RESPONSIVO
        ========================= */

        @media(max-width:900px){

            .login-wrapper{
                grid-template-columns:1fr;
            }

            .login-banner{
                min-height:280px;
            }

            .login-content{
                padding:40px 28px;
            }

            .login-header h1{
                font-size:30px;
            }

        }

        @media(max-width:500px){

            body{
                padding:12px;
            }

            .login-content{
                padding:30px 22px;
            }

            .login-banner{
                padding:25px;
                min-height:220px;
            }

        }