:root {
            --deep-blue: #0D2A5A;
            --institutional-blue: #185FA5;
            --communication-blue: #378ADD;

            --dark-green: #0F6E56;
            --primary-green: #1D9E75;
            --medium-green: #5DCAA5;
            --green-tint: #E1F5EE;

            --dark: #0E1A2B;
            --text: #333333;
            --medium-gray: #888888;
            --neutral-bg: #F5F8FC;
            --white: #FFFFFF;
            --border: #D9E1EA;
            --danger: #C62828;
        }

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

        body {
            min-height: 100vh;
            font-family: "DM Sans", sans-serif;
            color: var(--text);
            background:
                radial-gradient(circle at 10% 10%, rgba(55, 138, 221, 0.10), transparent 28%),
                radial-gradient(circle at 90% 90%, rgba(29, 158, 117, 0.10), transparent 30%),
                var(--neutral-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px 20px;
            position: relative;
            overflow-x: hidden;
        }

        body::before {
            content: "";
            position: fixed;
            width: 520px;
            height: 520px;
            border-radius: 50%;
            background: rgba(181, 212, 244, 0.16);
            top: -260px;
            right: -180px;
            pointer-events: none;
        }

        body::after {
            content: "";
            position: fixed;
            width: 420px;
            height: 420px;
            border-radius: 50%;
            background: rgba(159, 225, 203, 0.12);
            bottom: -220px;
            left: -180px;
            pointer-events: none;
        }

        .login-wrapper {
            width: 100%;
            max-width: 1080px;
            min-height: 650px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            background: var(--white);
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 24px 70px rgba(13, 42, 90, 0.12);
            position: relative;
            z-index: 1;
        }

        /* =====================================================
           LADO ESQUERDO
           ===================================================== */

        .login-brand {
            position: relative;
            padding: 58px;
            background:
                linear-gradient(
                    145deg,
                    var(--deep-blue) 0%,
                    var(--institutional-blue) 58%,
                    var(--communication-blue) 100%
                );
            color: var(--white);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
        }

        .login-brand::before {
            content: "";
            position: absolute;
            width: 430px;
            height: 430px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 50%;
            right: -230px;
            top: -160px;
        }

        .login-brand::after {
            content: "";
            position: absolute;
            width: 330px;
            height: 330px;
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 50%;
            left: -210px;
            bottom: -160px;
        }

        .brand-content {
            position: relative;
            z-index: 2;
        }

        .brand-logo {
            width: 190px;
            height: auto;
            display: block;
            margin-bottom: 70px;
            filter: brightness(0) invert(1);
        }

        .brand-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 13px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.10);
            border: 1px solid rgba(255, 255, 255, 0.18);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.04em;
            margin-bottom: 22px;
        }

        .brand-badge-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--medium-green);
        }

        .login-brand h1 {
            max-width: 420px;
            font-size: clamp(34px, 4vw, 48px);
            line-height: 1.08;
            letter-spacing: -0.04em;
            margin-bottom: 22px;
        }

        .login-brand h1 span {
            color: var(--light-green, #9FE1CB);
        }

        .brand-description {
            max-width: 430px;
            color: rgba(255, 255, 255, 0.78);
            font-size: 16px;
            line-height: 1.7;
        }

        .brand-footer {
            position: relative;
            z-index: 2;
            color: rgba(255, 255, 255, 0.58);
            font-size: 13px;
        }

        /* =====================================================
           LADO DIREITO
           ===================================================== */

        .login-panel {
            padding: 58px 64px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .login-form-wrapper {
            width: 100%;
            max-width: 390px;
        }

        .login-heading {
            margin-bottom: 34px;
        }

        .login-heading h2 {
            color: var(--deep-blue);
            font-size: 32px;
            line-height: 1.15;
            letter-spacing: -0.035em;
            margin-bottom: 10px;
        }

        .login-heading p {
            color: var(--medium-gray);
            font-size: 15px;
            line-height: 1.6;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            color: var(--dark);
            font-size: 14px;
            font-weight: 700;
        }

        .input-wrapper {
            position: relative;
        }

        .form-input {
            width: 100%;
            height: 52px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--white);
            color: var(--dark);
            font-family: inherit;
            font-size: 15px;
            padding: 0 15px;
            outline: none;
            transition:
                border-color 0.2s ease,
                box-shadow 0.2s ease;
        }

        .form-input.password-input {
            padding-right: 50px;
        }

        .form-input::placeholder {
            color: #A6AFBA;
        }

        .form-input:focus {
            border-color: var(--communication-blue);
            box-shadow: 0 0 0 4px rgba(55, 138, 221, 0.10);
        }

        .password-toggle {
            position: absolute;
            right: 13px;
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 30px;
            border: 0;
            background: transparent;
            color: var(--medium-gray);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
        }

        .password-toggle:hover {
            color: var(--institutional-blue);
        }

        .login-options {
            display: flex;
            justify-content: flex-end;
            margin-top: -4px;
            margin-bottom: 25px;
        }

        .forgot-password {
            color: var(--institutional-blue);
            text-decoration: none;
            font-size: 13px;
            font-weight: 600;
        }

        .forgot-password:hover {
            text-decoration: underline;
        }

        .login-button {
            width: 100%;
            height: 54px;
            border: 0;
            border-radius: 10px;
            background: var(--primary-green);
            color: var(--white);
            font-family: inherit;
            font-size: 15px;
            font-weight: 800;
            cursor: pointer;
            transition:
                background 0.2s ease,
                transform 0.2s ease,
                box-shadow 0.2s ease;
            box-shadow: 0 8px 20px rgba(29, 158, 117, 0.20);
        }

        .login-button:hover {
            background: var(--dark-green);
            transform: translateY(-1px);
            box-shadow: 0 10px 24px rgba(15, 110, 86, 0.22);
        }

        .login-button:active {
            transform: translateY(0);
        }

        .back-link {
            display: flex;
            justify-content: center;
            margin-top: 27px;
        }

        .back-link a {
            color: var(--medium-gray);
            text-decoration: none;
            font-size: 13px;
            font-weight: 600;
            transition: color 0.2s ease;
        }

        .back-link a:hover {
            color: var(--institutional-blue);
        }

        .login-security {
            margin-top: 35px;
            padding-top: 20px;
            border-top: 1px solid #EDF0F4;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            color: #9AA4AF;
            font-size: 11px;
        }

        .security-icon {
            font-size: 13px;
        }

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

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

            .login-brand {
                padding: 38px 40px;
                min-height: 330px;
            }

            .brand-logo {
                margin-bottom: 35px;
            }

            .brand-footer {
                margin-top: 45px;
            }

            .login-panel {
                padding: 45px 40px 50px;
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 15px;
            }

            .login-wrapper {
                border-radius: 18px;
            }

            .login-brand {
                padding: 32px 27px;
                min-height: 300px;
            }

            .brand-logo {
                width: 160px;
                margin-bottom: 32px;
            }

            .login-brand h1 {
                font-size: 32px;
            }

            .login-panel {
                padding: 38px 27px 42px;
            }

            .login-heading h2 {
                font-size: 28px;
            }
        }