:root {
            --primary: #003B60;
            --primary-dark: #00304E;
            --primary-light: #1A5981;
            --blue: #2872B7;
            --blue-light: #4A90D9;
            --secondary: #0077B6;
            --secondary-dark: #005E91;
            --g50: #F8F9FA;
            --g100: #F1F3F5;
            --g200: #E9ECEF;
            --g300: #DEE2E6;
            --g500: #ADB5BD;
            --g600: #6C757D;
            --g700: #495057;
            --g800: #343A40;
            --g900: #212529;
            --ff: 'Heavitas', sans-serif;
            --ff-body: 'Outfit', sans-serif;
            --r-sm: 6px;
            --r-md: 12px;
            --r-lg: 18px;
            --r-xl: 24px;
            --r-full: 9999px;
            --tr: .28s ease;
        }

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

        body {
            font-family: var(--ff-body);
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            position: relative;
            overflow: hidden;
        }

        /* Decoração de fundo */
        body::before {
            content: 'ATIVA';
            position: fixed;
            font-size: clamp(90px, 18vw, 220px);
            font-weight: 900;
            color: transparent;
            -webkit-text-stroke: 1.5px rgba(74, 144, 217, .12);
            white-space: nowrap;
            letter-spacing: -6px;
            pointer-events: none;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 0;
            user-select: none;
        }

        .login-wrap {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 460px;
        }

        /* Branding topo */
        .login-brand {
            text-align: center;
            margin-bottom: 28px;
        }

        .login-brand-logo {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: #fff;
            text-decoration: none;
        }

        .login-brand-logo .logo-icon {
            width: 44px;
            height: 44px;
            background: linear-gradient(135deg, var(--blue), var(--blue-light));
            border-radius: var(--r-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            box-shadow: 0 4px 20px rgba(40, 114, 183, .4);
        }

        .login-brand-logo span {
            font-size: 1.6rem;
            font-weight: 900;
            letter-spacing: -1px;
        }

        /* Card principal */
        .login-card {
            background: rgba(255, 255, 255, .07);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, .14);
            border-radius: var(--r-xl);
            padding: 40px 36px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
        }

        .login-card-title {
            font-size: 1.6rem;
            font-weight: 800;
            color: #fff;
            letter-spacing: -.5px;
            margin-bottom: 4px;
        }

        .login-card-sub {
            font-size: .9rem;
            color: rgba(255, 255, 255, .55);
            margin-bottom: 28px;
        }

        /* Toggle Admin/Cliente */
        .role-toggle {
            display: flex;
            background: rgba(0, 0, 0, .25);
            border-radius: var(--r-full);
            padding: 4px;
            margin-bottom: 28px;
            gap: 4px;
        }

        .role-btn {
            flex: 1;
            padding: 9px 16px;
            border: none;
            background: transparent;
            color: rgba(255, 255, 255, .5);
            font-family: var(--ff);
            font-size: .88rem;
            font-weight: 600;
            border-radius: var(--r-full);
            cursor: pointer;
            transition: all var(--tr);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .role-btn.active {
            background: rgba(255, 255, 255, .15);
            color: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
        }

        /* Formulário */
        .form-group {
            margin-bottom: 16px;
        }

        .form-label {
            display: block;
            font-size: .82rem;
            font-weight: 600;
            color: rgba(255, 255, 255, .7);
            margin-bottom: 7px;
        }

        .form-input {
            width: 100%;
            font-family: var(--ff);
            font-size: 1rem;
            padding: 13px 18px;
            background: rgba(255, 255, 255, .08);
            border: 1.5px solid rgba(255, 255, 255, .15);
            border-radius: var(--r-full);
            color: #fff;
            outline: none;
            transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
        }

        .form-input::placeholder {
            color: rgba(255, 255, 255, .3);
        }

        .form-input:focus {
            border-color: var(--blue-light);
            background: rgba(255, 255, 255, .12);
            box-shadow: 0 0 0 3px rgba(74, 144, 217, .2);
        }

        /* Tabs de modo */
        .mode-tabs {
            display: flex;
            background: rgba(0, 0, 0, .2);
            border-radius: var(--r-md);
            padding: 3px;
            margin-bottom: 24px;
            gap: 3px;
        }

        .mode-tab {
            flex: 1;
            padding: 8px;
            border: none;
            background: transparent;
            color: rgba(255, 255, 255, .45);
            font-family: var(--ff);
            font-size: .82rem;
            font-weight: 600;
            border-radius: 9px;
            cursor: pointer;
            transition: all var(--tr);
        }

        .mode-tab.active {
            background: rgba(255, 255, 255, .12);
            color: #fff;
        }

        /* Botões */
        .btn-login {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px;
            border: none;
            border-radius: var(--r-full);
            font-family: var(--ff);
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all var(--tr);
        }

        .btn-login-primary {
            background: linear-gradient(135deg, var(--blue), var(--blue-light));
            color: #fff;
            box-shadow: 0 4px 20px rgba(40, 114, 183, .4);
        }

        .btn-login-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(40, 114, 183, .55);
        }

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

        .btn-login-admin {
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: #fff;
            box-shadow: 0 4px 20px rgba(27, 41, 82, .5);
        }

        .btn-login-admin:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(27, 41, 82, .6);
        }

        /* Divisor */
        .or-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 20px 0;
            color: rgba(255, 255, 255, .3);
            font-size: .82rem;
        }

        .or-divider::before,
        .or-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(255, 255, 255, .15);
        }

        /* Botão Google */
        .btn-google {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 13px;
            border: 1.5px solid rgba(255, 255, 255, .2);
            border-radius: var(--r-full);
            background: rgba(255, 255, 255, .07);
            color: rgba(255, 255, 255, .85);
            font-family: var(--ff);
            font-size: .95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--tr);
        }

        .btn-google:hover {
            background: rgba(255, 255, 255, .14);
            border-color: rgba(255, 255, 255, .35);
            color: #fff;
            transform: translateY(-1px);
        }

        .btn-google svg {
            flex-shrink: 0;
        }

        /* Rodapé do card */
        .login-footer {
            margin-top: 24px;
            text-align: center;
            font-size: .82rem;
            color: rgba(255, 255, 255, .4);
        }

        .login-footer a {
            color: var(--blue-light);
            text-decoration: none;
            font-weight: 600;
            transition: color var(--tr);
        }

        .login-footer a:hover {
            color: #fff;
        }

        /* Mensagem de erro/sucesso */
        .msg-box {
            padding: 12px 16px;
            border-radius: var(--r-md);
            font-size: .88rem;
            font-weight: 600;
            margin-bottom: 16px;
            display: none;
        }

        .msg-box.error {
            background: rgba(220, 53, 69, .18);
            border: 1px solid rgba(220, 53, 69, .35);
            color: #ff8fa3;
        }

        .msg-box.success {
            background: rgba(37, 211, 102, .15);
            border: 1px solid rgba(37, 211, 102, .3);
            color: #6fffa8;
        }

        /* Loading spinner */
        .spinner {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 2.5px solid rgba(255, 255, 255, .3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin .7s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* Campos de registro */
        #register-extra {
            display: none;
        }

        @media(max-width: 480px) {
            .login-card {
                padding: 32px 24px;
            }
        }