:root{
            /* ─────────────────────────────────────────────
               GERUAPP BRAND COLORS - Cashback/Fintech Palette
               ───────────────────────────────────────────── */
            /* Primary: Cyan Blue - associada a dinheiro, crescimento, cashback */
            --sticker-primary: #00B5D4;
            --sticker-primary-dark: #009AB5;
            --sticker-primary-light: #00C9E8;
            
            /* Secondary: Deep Cyan - para profundidade e confiança */
            --sticker-secondary: #008A9E;
            --sticker-secondary-dark: #007485;
            
            /* System Colors - Light Mode */
            --sticker-bg: #f8fafc;
            --sticker-surface: #ffffff;
            --sticker-border: #e2e8f0;
            --sticker-text: #0f172a;
            --sticker-text-muted: #64748b;
            --sticker-text-inverse: #ffffff;
            
            /* Status Colors - Financial Context */
            --sticker-success: #22c55e;      /* Cashback recebido, ganhos */
            --sticker-success-dark: #16a34a;
            --sticker-warning: #f59e0b;      /* Expiração próxima, atenção */
            --sticker-danger: #ef4444;       /* Erros, remoções */
            --sticker-info: #3b82f6;         /* Info, notificações */
            
            /* Cashback Specific */
            --sticker-cashback: #00B5D4;
            --sticker-cashback-glow: rgba(0, 181, 212, 0.15);
            
            /* Dimensions & Effects */
            --sticker-radius: 16px;
            --sticker-radius-sm: 12px;
            --sticker-radius-lg: 24px;
            --sticker-shadow-lg: 0 20px 60px -10px rgba(0,0,0,0.25);
            --sticker-safe-top: env(safe-area-inset-top);
            --sticker-safe-bottom: env(safe-area-inset-bottom);
            --sticker-transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
            
            /* Gradient: Cyan → Deep Cyan para sensação premium financeira */
            --sticker-gradient: linear-gradient(135deg, var(--sticker-primary) 0%, var(--sticker-secondary) 50%, var(--sticker-primary-dark) 100%);
        }
        
        /* Dark Mode - Adjusted for Financial App */
        [data-bs-theme="dark"]{
            --sticker-bg: #0f172a;
            --sticker-surface: #1e293b;
            --sticker-border: #334155;
            --sticker-text: #f1f5f9;
            --sticker-text-muted: #94a3b8;
            --sticker-shadow-lg: 0 20px 60px -10px rgba(0,0,0,0.5);
            --sticker-cashback-glow: rgba(0, 181, 212, 0.25);
        }
        
        /* Base Reset */
        *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
        html,body{height:100%;overflow-x:hidden;background:var(--sticker-bg);color:var(--sticker-text);font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5}
        a{text-decoration:none;color:inherit}img{max-width:100%;height:auto;display:block}button{font:inherit;cursor:pointer;border:none;background:none}
        body{padding-top:var(--sticker-safe-top);padding-bottom:var(--sticker-safe-bottom)}
        
        /* ─────────────────────────────────────────────
           FULL-SCREEN BACKGROUND - GeruApp Brand Gradient
           ───────────────────────────────────────────── */
        .signin-bg{
            position:fixed;inset:0;z-index:0;
            background:var(--sticker-gradient);
            display:flex;align-items:flex-start;justify-content:center;
            overflow:hidden;padding-top:calc(var(--sticker-safe-top) + 1rem)
        }
        /* Animated glow orbs - subtle financial premium feel */
        .signin-bg::before, .signin-bg::after{
            content:"";position:absolute;border-radius:50%;
            background:radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
            animation:float 20s infinite ease-in-out
        }
        .signin-bg::before{width:600px;height:600px;top:-200px;left:-100px}
        .signin-bg::after{width:400px;height:400px;bottom:-100px;right:-50px;animation-delay:-10s;opacity:0.7}
        @keyframes float{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(30px,-20px) scale(1.05)}50%{transform:translate(-20px,30px) scale(0.95)}75%{transform:translate(20px,20px) scale(1.02)}}
        
        /* Subtle pattern overlay */
        .signin-bg .pattern{
            position:absolute;inset:0;opacity:0.08;
            background-image:radial-gradient(circle at 2px 2px, rgba(255,255,255,0.4) 1px, transparent 0);
            background-size:32px 32px;pointer-events:none
        }
        
        /* ─────────────────────────────────────────────
           LOGIN CARD - Full Width Mobile / Centered Desktop
           ───────────────────────────────────────────── */
        .signin-card{
            position:relative;z-index:1;
            width:100%;max-width:100%;
            margin:0;padding:0;
            background:var(--sticker-surface);
            border-radius:0;
            box-shadow:none;
            overflow:hidden;
            animation:fadeInUp 0.5s ease;
            display:flex;flex-direction:column;
            min-height:calc(88vh - var(--sticker-safe-top) - var(--sticker-safe-bottom))
        }
        @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
        
        @media (min-width:768px){
            .signin-bg{align-items:center;padding-top:0}
            .signin-card{
                width:100%;max-width:480px;
                margin:5% auto;
                border-radius:var(--sticker-radius-lg);
                box-shadow:var(--sticker-shadow-lg);
                min-height:auto
            }
        }
        
        /* Brand Header */
        .signin-header{
            padding:2rem 1.5rem 1.5rem;text-align:center;
            background:linear-gradient(180deg, var(--sticker-surface), transparent);
            border-bottom:1px solid var(--sticker-border);
            flex-shrink:0
        }
        .signin-header .logo{
            display:flex;align-items:center;justify-content:center;
            color:var(--sticker-text-inverse);font-weight:700;font-size:1.75rem;
            margin:0 auto 1rem;
        }
        .signin-header .brand{font-weight:700;font-size:1.35rem;margin-bottom:0.25rem;color:var(--sticker-text)}
        .signin-header .tagline{font-size:0.9rem;color:var(--sticker-text-muted);max-width:280px;margin:0 auto}
        
        /* Form Body */
        .signin-body{padding:1.5rem;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
        
        /* Alerts */
        .alert{
            border-radius:var(--sticker-radius-sm);border:none;padding:0.875rem 1rem;
            margin-bottom:1.25rem;display:flex;align-items:flex-start;gap:0.75rem;
            font-size:0.9rem;animation:slideIn 0.3s ease
        }
        @keyframes slideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
        .alert i{font-size:1.1rem;margin-top:0.125rem;flex-shrink:0}
        .alert .message{flex:1}.alert .btn-close{background:none;border:none;color:currentColor;opacity:0.7;font-size:1.25rem;padding:0;cursor:pointer}
        .alert-danger{background:rgba(239,68,68,0.12);color:var(--sticker-danger)}
        .alert-success{background:rgba(34,197,94,0.12);color:var(--sticker-success-dark)}
        
        /* Floating Label Inputs */
        .form-floating-group{position:relative;margin-bottom:1.25rem}
        .form-floating-group .form-control{
            width:100%;padding:1.125rem 1rem 0.5rem;
            border-radius:var(--sticker-radius-sm);
            border:2px solid var(--sticker-border);
            background:var(--sticker-bg);
            color:var(--sticker-text);font-size:1rem;
            transition:var(--sticker-transition)
        }
        .form-floating-group .form-control:focus{
            border-color:var(--sticker-primary);
            box-shadow:0 0 0 4px var(--sticker-cashback-glow);
            outline:none
        }
        .form-floating-group .form-control::placeholder{color:transparent}
        .form-floating-group label{
            position:absolute;left:1rem;top:1rem;
            color:var(--sticker-text-muted);font-size:1rem;
            pointer-events:none;transition:var(--sticker-transition);
            background:var(--sticker-surface);padding:0 0.375rem;z-index:1
        }
        .form-floating-group .form-control:focus ~ label,
        .form-floating-group .form-control:not(:placeholder-shown) ~ label{
            top:-0.625rem;font-size:0.75rem;color:var(--sticker-primary);font-weight:600
        }
        .form-floating-group .form-control.is-invalid{border-color:var(--sticker-danger)}
        .form-floating-group .form-control.is-invalid:focus{box-shadow:0 0 0 4px rgba(239,68,68,0.15)}
        .form-floating-group .invalid-feedback{
            display:none;font-size:0.8rem;color:var(--sticker-danger);
            margin-top:0.375rem;align-items:center;gap:0.25rem
        }
        .form-floating-group .form-control.is-invalid.touched + .invalid-feedback{display:flex}
        
        /* Password Toggle */
        .password-toggle{
            position:absolute;right:0.5rem;top:50%;transform:translateY(-50%);
            width:36px;height:36px;border-radius:10px;
            background:transparent;color:var(--sticker-text-muted);
            display:flex;align-items:center;justify-content:center;
            transition:var(--sticker-transition);z-index:2
        }
        .password-toggle:active{background:var(--sticker-primary-light);color:var(--sticker-primary-dark);transform:translateY(-50%) scale(0.95)}
        
        /* Remember & Forgot */
        .signin-options{display:flex;justify-content:space-between;align-items:center;margin:1rem 0 1.5rem;font-size:0.9rem}
        .form-check{display:flex;align-items:center;gap:0.5rem}
        .form-check-input{
            width:18px;height:18px;border-radius:5px;
            border:2px solid var(--sticker-border);cursor:pointer;
            appearance:none;background:var(--sticker-bg);transition:var(--sticker-transition)
        }
        .form-check-input:checked{
            background:var(--sticker-primary);border-color:var(--sticker-primary);
            background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
            background-size:12px;background-position:center;background-repeat:no-repeat
        }
        .form-check-label{color:var(--sticker-text);cursor:pointer}
        .forgot-link{color:var(--sticker-primary);font-weight:600;transition:var(--sticker-transition)}
        .forgot-link:active{color:var(--sticker-primary-dark)}
        
        /* Submit Button - Full Width with Cashback Glow */
        .btn-signin{
            width:100%;padding:1rem;border-radius:var(--sticker-radius-sm);
            background:var(--sticker-gradient);color:var(--sticker-text-inverse);
            border:none;font-weight:700;font-size:1.05rem;letter-spacing:0.25px;
            display:flex;align-items:center;justify-content:center;gap:0.5rem;
            transition:var(--sticker-transition);position:relative;overflow:hidden
        }
        .btn-signin::before{
            content:"";position:absolute;inset:0;
            background:linear-gradient(135deg, transparent, rgba(255,255,255,0.25), transparent);
            transform:translateX(-100%);transition:transform 0.6s ease
        }
        .btn-signin:hover::before{transform:translateX(100%)}
        .btn-signin:active{transform:translateY(2px);box-shadow:0 8px 32px var(--sticker-cashback-glow)}
        .btn-signin:disabled{opacity:0.7;cursor:not-allowed}
        .btn-signin .spinner{
            display:none;width:20px;height:20px;border:2.5px solid rgba(255,255,255,0.3);
            border-top-color:#fff;border-radius:50%;animation:spin 0.8s linear infinite
        }
        .btn-signin.loading .spinner{display:inline-block}
        .btn-signin.loading .btn-text{opacity:0.95}
        @keyframes spin{to{transform:rotate(360deg)}}
        
        /* Divider */
        .divider{
            display:flex;align-items:center;gap:1rem;
            margin:1.5rem 0;color:var(--sticker-text-muted);font-size:0.85rem;font-weight:500
        }
        .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--sticker-border)}
        
        /* Sign Up Prompt */
        .signup-prompt{
            text-align:center;padding:1.25rem 1.5rem 1.5rem;
            border-top:1px solid var(--sticker-border);
            background:linear-gradient(180deg, transparent, var(--sticker-bg));
            font-size:0.95rem;flex-shrink:0
        }
        .signup-prompt a{color:var(--sticker-primary);font-weight:700;transition:var(--sticker-transition)}
        .signup-prompt a:active{color:var(--sticker-primary-dark)}
        
        /* Security Badge - Cashback Theme */
        .security-badge{
            display:flex;align-items:center;justify-content:center;gap:0.5rem;
            color:var(--sticker-text-muted);font-size:0.8rem;
            padding:0.75rem 1.5rem 1.5rem;background:var(--sticker-bg);flex-shrink:0
        }
        .security-badge i{color:var(--sticker-success);font-size:1rem}
        
        /* App Version - Over Background */
        .app-version{
            position:fixed;bottom:calc(var(--sticker-safe-bottom) + 0.5rem);
            left:0;right:0;text-align:center;
            color:rgba(255,255,255,0.95);font-size:0.75rem;z-index:10;
            text-shadow:0 2px 4px rgba(0,0,0,0.3);pointer-events:none;
            font-weight:500
        }
        
        /* Dark Mode Adjustments */
        [data-bs-theme="dark"] .form-floating-group label{background:var(--sticker-surface)}
        [data-bs-theme="dark"] .signin-header{background:linear-gradient(180deg, var(--sticker-surface), transparent)}
        [data-bs-theme="dark"] .signup-prompt,.security-badge{background:var(--sticker-bg)}
        
        /* Reduced Motion */
        @media (prefers-reduced-motion:reduce){
            *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
            .signin-bg::before,.signin-bg::after{animation:none}
        }
        
        /* Mobile Adjustments */
        @media (max-width:480px){
            .signin-header{padding:1.75rem 1.25rem 1.25rem}
            .signin-header .logo{width:200px;font-size:1.5rem}
            .signin-header .brand{font-size:1.25rem}
            .signin-body{padding:1.25rem}
            .signup-prompt{padding:1rem 1.25rem 1.25rem}
            .security-badge{padding:0.5rem 1.25rem 1rem}
        }