:root { 
            --primary: #4f46e5; 
            --primary-hover: #4338ca; 
            --bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); 
        }

        [data-bs-theme="dark"] {
            --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg-gradient);
            min-height: 100vh;
            display: flex;
            align-items: center; 
            justify-content: center;
            margin: 0;
            padding: 20px;
        }

        .main-container {
            width: 100%;
            max-width: 400px;
            perspective: 1000px;
        }

        .auth-card {
            background: var(--bs-body-bg);
            border: 1px solid var(--bs-border-color-translucent);
            border-radius: 24px;
            padding: 28px 24px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .logo-area {
            text-align: center;
            margin-bottom: 20px;
        }

        /* Melhoria: Efeito de hover suave no logo */
        .logo-area a:hover .logo-icon {
            transform: scale(1.05);
            background: var(--primary-hover);
        }

        .logo-icon {
            width: 48px;
            height: 48px;
            background: var(--primary);
            color: white;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 12px;
            box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4);
            transition: all 0.2s ease;
        }

        .logo-area h4 {
            font-size: 1.1rem;
            margin-bottom: 2px;
        }

        /* Restante do seu CSS mantido... */
        .nav-pills-custom {
            background: var(--bs-tertiary-bg);
            padding: 4px;
            border-radius: 12px;
            margin-bottom: 20px;
            display: flex;
        }

        .nav-pills-custom .nav-link {
            flex: 1;
            border-radius: 10px;
            color: var(--bs-secondary-color);
            font-weight: 600;
            font-size: 14px;
            padding: 8px;
            border: none;
            background: none;
            transition: 0.2s;
        }

        .nav-pills-custom .nav-link.active {
            background: var(--bs-body-bg);
            color: var(--primary);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .form-label {
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--bs-heading-color);
        }

        .input-group-custom {
            position: relative;
            margin-bottom: 14px;
        }

        .input-group-custom i {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--bs-secondary-color);
            pointer-events: none;
            transition: 0.2s;
        }

        .form-control-custom {
            width: 100%;
            padding: 10px 14px 10px 44px;
            background: var(--bs-tertiary-bg);
            border: 1.5px solid transparent;
            border-radius: 12px;
            font-size: 15px;
            transition: all 0.2s;
        }

        .form-control-custom:focus {
            outline: none;
            background: var(--bs-body-bg);
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
        }

        .form-control-custom:focus + i {
            color: var(--primary);
        }

        .btn-primary-custom {
            width: 100%;
            padding: 12px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 12px;
            font-weight: 700;
            font-size: 15px;
            margin-top: 6px;
            transition: all 0.2s;
        }

        .btn-primary-custom:hover {
            background: var(--primary-hover);
            transform: translateY(-1px);
        }

        .theme-toggle {
            position: fixed;
            bottom: 24px;
            right: 24px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--bs-body-bg);
            border: 1px solid var(--bs-border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }