/* ── Reset mínimo ── */
            *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

            /* ── Design Tokens Bio ── */
            :root {
                --navy:       #1A0631;
                --navy-light: #2D1650;
                --pink:       #FF4D9D;
                --pink-light: #FF7AB8;
                --lemon:      #F0FF71;
                --purple:     #682FA8;
                --lavender:   #B595EB;
                --cyan:       #01B1FF;
                --white:      #FFFFFF;
                --gray-400:   #9E9EAD;
                --font:       'Outfit', sans-serif;
                --r-sm:       10px;
                --r-lg:       20px;
                --r-xl:       24px;
            }

            body {
                font-family: var(--font);
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(140deg, var(--navy) 0%, var(--navy-light) 40%, var(--purple) 100%);
                position: relative;
                overflow: hidden;
            }

            /* ── Grafismos decorativos (SVG circles) ── */
            body::before,
            body::after {
                content: '';
                position: fixed;
                border-radius: 50%;
                pointer-events: none;
            }
            body::before {
                width: 500px; height: 500px;
                top: -120px; left: -80px;
                border: 28px solid var(--pink);
                opacity: 0.06;
            }
            body::after {
                width: 600px; height: 600px;
                bottom: -100px; right: -60px;
                border: 22px solid var(--lemon);
                opacity: 0.04;
            }

            .deco-circle {
                position: fixed;
                top: 40%; right: 20%;
                width: 300px; height: 300px;
                border-radius: 50%;
                border: 16px solid var(--cyan);
                opacity: 0.05;
                pointer-events: none;
            }

            /* ── Card glassmorphism ── */
            .login-glass {
                position: relative;
                z-index: 1;
                width: 100%;
                max-width: 420px;
                padding: 48px 44px;
                background: rgba(255, 255, 255, 0.04);
                border-radius: var(--r-xl);
                backdrop-filter: blur(24px);
                -webkit-backdrop-filter: blur(24px);
                border: 1px solid rgba(255, 255, 255, 0.08);
                animation: fadeUp 0.5s ease both;
            }

            @keyframes fadeUp {
                from { opacity: 0; transform: translateY(20px); }
                to   { opacity: 1; transform: translateY(0); }
            }

            /* ── Logo area ── */
            .login-logo {
                text-align: center;
                margin-bottom: 32px;
            }
            .login-logo img {
                height: 40px;
                width: auto;
            }
            .login-logo-label {
                margin-top: 10px;
                font-size: 10px;
                font-weight: 500;
                color: var(--lavender);
                letter-spacing: 0.15em;
                text-transform: uppercase;
            }
            .login-subtitle {
                margin-top: 6px;
                font-size: 13px;
                color: rgba(255,255,255,0.45);
                line-height: 1.5;
            }

            /* ── Divider ── */
            .login-divider {
                border: none;
                border-top: 1px solid rgba(255,255,255,0.08);
                margin: 24px 0;
            }

            /* ── Form fields ── */
            .field-group {
                margin-bottom: 16px;
            }
            .field-label {
                display: block;
                font-size: 12px;
                font-weight: 500;
                color: var(--lavender);
                margin-bottom: 8px;
            }
            .field-wrap {
                position: relative;
            }
            .field-input {
                width: 100%;
                padding: 12px 44px 12px 16px;
                border-radius: var(--r-sm);
                border: 1px solid rgba(255,255,255,0.12);
                background: rgba(255,255,255,0.06);
                color: var(--white);
                font-family: var(--font);
                font-size: 14px;
                outline: none;
                transition: border-color 0.2s, background 0.2s;
            }
            .field-input::placeholder { color: rgba(255,255,255,0.3); }
            .field-input:focus {
                border-color: rgba(255,77,157,0.5);
                background: rgba(255,255,255,0.09);
            }
            .field-icon {
                position: absolute;
                right: 14px;
                top: 50%;
                transform: translateY(-50%);
                cursor: pointer;
                color: var(--gray-400);
                display: flex;
                align-items: center;
            }
            .field-icon svg { pointer-events: none; }

            /* ── Checkbox ── */
            .checkbox-row {
                display: flex;
                align-items: center;
                gap: 10px;
                margin: 20px 0;
            }
            .checkbox-row input[type="checkbox"] {
                appearance: none;
                -webkit-appearance: none;
                width: 16px; height: 16px;
                border-radius: 4px;
                border: 1.5px solid var(--pink);
                background: transparent;
                cursor: pointer;
                position: relative;
                flex-shrink: 0;
                transition: background 0.15s;
            }
            .checkbox-row input[type="checkbox"]:checked {
                background: var(--pink);
            }
            .checkbox-row input[type="checkbox"]:checked::after {
                content: '';
                position: absolute;
                left: 4px; top: 1px;
                width: 5px; height: 9px;
                border: 2px solid #fff;
                border-top: none;
                border-left: none;
                transform: rotate(45deg);
            }
            .checkbox-label {
                font-size: 13px;
                color: rgba(255,255,255,0.55);
                cursor: pointer;
            }

            /* ── Botão entrar ── */
            .btn-login {
                width: 100%;
                padding: 14px;
                border-radius: var(--r-sm);
                border: none;
                background: linear-gradient(135deg, var(--pink) 0%, #d63880 100%);
                color: var(--white);
                font-family: var(--font);
                font-size: 15px;
                font-weight: 600;
                letter-spacing: 0.02em;
                cursor: pointer;
                transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
                box-shadow: 0 4px 20px rgba(255,77,157,0.35);
                margin-top: 8px;
            }
            .btn-login:hover:not(:disabled) {
                opacity: 0.92;
                transform: translateY(-1px);
                box-shadow: 0 6px 28px rgba(255,77,157,0.45);
            }
            .btn-login:active:not(:disabled) { transform: translateY(0); }
            .btn-login:disabled { opacity: 0.65; cursor: not-allowed; }

            /* ── Footer ── */
            .login-footer {
                margin-top: 32px;
                text-align: center;
                font-size: 11px;
                color: rgba(255,255,255,0.2);
            }

            /* ── Eye toggle ── */
            #toggle-pw { background: none; border: none; padding: 0; }