/* assets/css/variables.css */

:root {
    /* ==================== CORES PRIMÁRIAS ==================== */
    --primary-green: #ffc107; /* Amarelo principal */
    --primary-green-light: #ffeb3b; /* Amarelo claro */
    --primary-green-dark: #ff8f00; /* Amarelo escuro */
    --primary-green-darker: #f57c00; /* Amarelo mais escuro */
    --primary-green-darkest: #e65100; /* Amarelo mais profundo */
    
    --primary-yellow: #ffc107;
    --primary-yellow-light: #ffeb3b;
    
    /* ==================== CORES PERSONALIZÁVEIS DOS BOTÕES ==================== */
    /* Botão Amarelo (ACHE 3 IGUAIS) */
    --btn-custom-yellow-bg: #ffc107;
    --btn-custom-yellow-bg-hover: #ff8f00;
    --btn-custom-yellow-text: #1a1a1a;
    --btn-custom-yellow-text-hover: #000000;
    
    /* Botão Vermelho (GANHE NA HORA) */
    --btn-custom-red-bg: #e53e3e;
    --btn-custom-red-bg-hover: #c53030;
    --btn-custom-red-text: #ffffff;
    --btn-custom-red-text-hover: #ffffff;
    
    /* Badge HOT Personalizado */
    --hot-badge-custom-bg: #ff6b35; /* Laranja vibrante */
    --hot-badge-custom-text: #ffffff;
    --hot-badge-custom-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
    
    /* ALTERNATIVAS PARA O HOT BADGE (descomente a que desejar) */
    /* Azul: */
    /* --hot-badge-custom-bg: #3182ce; */
    /* --hot-badge-custom-text: #ffffff; */
    
    /* Verde: */
    /* --hot-badge-custom-bg: #38a169; */
    /* --hot-badge-custom-text: #ffffff; */
    
    /* Roxo: */
    /* --hot-badge-custom-bg: #805ad5; */
    /* --hot-badge-custom-text: #ffffff; */
    
    /* Dourado: */
    /* --hot-badge-custom-bg: linear-gradient(45deg, #d4af37, #ffd700); */
    /* --hot-badge-custom-text: #1a1a1a; */
    
    /* ==================== BACKGROUNDS ==================== */
    --bg-primary: linear-gradient(135deg, #1a2332 0%, #2a3441 100%);
    --bg-header: rgba(26, 35, 50, 0.95);
    --bg-footer: rgba(26, 35, 50, 0.95);
    --bg-card: rgba(255, 255, 255, 0.08);
    --bg-card-hover: linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 50%);
    --bg-modal: #111;
    --bg-modal-overlay: rgba(0, 0, 0, 0.7);
    --bg-input: #222;
    --bg-instant-win: linear-gradient(135deg, #2d1b01 0%, #4a2c02 100%); /* Gradiente amarelo escuro */
    --bg-feature-card: rgba(255, 255, 255, 0.08);
    
    /* ==================== TEXTOS ==================== */
    --text-primary: #fff;
    --text-secondary: #cccccc;
    --text-muted: #999999;
    --text-dark: #000000;
    --text-accent: #ffc107; /* Amarelo para acentos */
    --text-warning: #FFC107;
    --text-error: #f44336;
    --text-success: #ffc107; /* Amarelo para sucesso */
    
    /* ==================== BOTÕES ==================== */
    /* Botão Principal (Amarelo) */
    --btn-primary-bg: linear-gradient(90deg, var(--primary-green), var(--primary-green-dark));
    --btn-primary-bg-hover: linear-gradient(90deg, var(--primary-green-darker), var(--primary-green-darkest));
    --btn-primary-text: #1a1a1a; /* Texto escuro para contraste */
    --btn-primary-text-hover: var(--text-primary);
    --btn-primary-border: var(--primary-green);
    --btn-primary-border-hover: var(--primary-green-darker);
    
    /* Botão Raspadinha (mesmo estilo do primary) */
    --btn-raspadinha-bg: var(--btn-primary-bg);
    --btn-raspadinha-bg-hover: linear-gradient(90deg, #f57c00, #e65100);
    --btn-raspadinha-text: var(--btn-primary-text);
    --btn-raspadinha-text-hover: white;
    --btn-raspadinha-border: var(--btn-primary-border);
    --btn-raspadinha-border-hover: #f57c00;
    
    /* Botão Outline */
    --btn-outline-bg: transparent;
    --btn-outline-bg-hover: rgba(255, 255, 255, 0.1);
    --btn-outline-text: var(--text-primary);
    --btn-outline-border: rgba(255, 255, 255, 0.3);
    --btn-outline-border-hover: rgba(255, 255, 255, 0.5);
    
    /* Botões Instant Win */
    --btn-win-green-bg: linear-gradient(90deg, var(--primary-green-light), var(--primary-green-dark));
    --btn-win-green-text: #1a1a1a; /* Texto escuro */
    --btn-win-green-shadow: rgba(255, 193, 7, 0.5);
    
    --btn-win-red-bg: linear-gradient(90deg, #ff1744, #d50000);
    --btn-win-red-text: var(--text-primary);
    --btn-win-red-shadow: rgba(255, 23, 68, 0.4);
    
    /* Botão Submit Modal */
    --btn-submit-bg: linear-gradient(90deg, #ffc107, #ff8f00);
    --btn-submit-text: #1a1a1a; /* Texto escuro */
    
    /* ==================== ÍCONES ==================== */
    --icon-primary: var(--text-primary);
    --icon-accent: var(--primary-green);
    --icon-muted: #aaaaaa;
    --icon-feature: var(--text-primary);
    --icon-nav: var(--text-primary);
    --icon-nav-hover: var(--primary-green);
    --icon-game-prize: var(--primary-green);
    --icon-winners: var(--text-primary);
    
    /* ==================== BORDAS E DIVISORES ==================== */
    --border-light: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.3);
    --border-strong: rgba(255, 255, 255, 0.5);
    --divider: rgba(255, 255, 255, 0.1);
    
    /* ==================== SOMBRAS ==================== */
    --shadow-light: 0 5px 20px rgba(0, 0, 0, 0.2);
    --shadow-medium: 0 6px 16px rgba(0, 0, 0, 0.2);
    --shadow-strong: 0 10px 30px rgba(0, 0, 0, 0.3);
    --shadow-heavy: 0 15px 35px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 10px 30px rgba(0, 0, 0, 0.3);
    
    /* ==================== ESTADOS HOVER ==================== */
    --hover-overlay: rgba(255, 255, 255, 0.1);
    --hover-overlay-light: rgba(255, 255, 255, 0.05);
    --hover-transform: translateY(-5px);
    
    /* ==================== COMPONENTES ESPECÍFICOS ==================== */
    
    /* Header/Navegação */
    --nav-link: var(--text-primary);
    --nav-link-hover: var(--primary-green);
    
    /* Cards de Jogo */
    --game-card-bg: var(--bg-card-hover);
    --game-prize-text: var(--primary-green);
    --game-details-text: var(--primary-yellow);
    --game-name-text: var(--text-primary);
    
    /* Winners Section */
    --winners-title-text: var(--text-primary);
    --winners-distributed-label: var(--text-primary);
    --winners-distributed-value: var(--primary-green);
    --winner-avatar-default: linear-gradient(135deg, #4338ca, #3730a3);
    --winner-name-text: var(--text-primary);
    --winner-time-text: var(--text-secondary);
    --winner-prize-value: var(--primary-green);
    --winner-prize-type: var(--text-secondary);
    
    /* Features */
    --feature-card-bg: var(--bg-feature-card);
    --feature-icon-bg: var(--primary-green);
    --feature-title-text: var(--text-primary);
    --feature-description-text: var(--text-secondary);
    
    /* Footer */
    --footer-bg: var(--bg-footer);
    --footer-title-text: var(--primary-green);
    --footer-text: var(--text-secondary);
    --footer-link: var(--text-secondary);
    --footer-link-hover: var(--primary-green);
    --footer-bottom-text: var(--text-muted);
    --footer-divider: var(--divider);
    
    /* Modal */
    --modal-bg: var(--bg-modal);
    --modal-overlay: var(--bg-modal-overlay);
    --modal-text: var(--text-primary);
    --modal-close-btn: #cccccc;
    --modal-input-bg: var(--bg-input);
    --modal-input-text: var(--text-primary);
    --modal-input-icon: var(--icon-muted);
    --modal-link: var(--text-secondary);
    --modal-link-accent: #ffeb3b; /* Amarelo claro */
    --modal-error-text: var(--text-error);
    --modal-success-text: var(--text-success);
    
    /* Instant Win Section */
    --instant-win-bg: var(--bg-instant-win);
    --instant-win-title-text: var(--text-primary);
    --instant-win-subtitle-text: var(--primary-yellow);
    --instant-win-prize-icon-bg: rgba(255, 193, 7, 0.15); /* Amarelo transparente */
    --instant-win-prize-text: #fff;
    --instant-win-light-sweep: rgba(255, 193, 7, 0.09); /* Sweep amarelo */
    
    /* User Menu */
    --user-menu-btn-bg: transparent;
    --user-menu-btn-text: var(--text-primary);
    --user-menu-btn-border: var(--border-medium);
    --user-menu-btn-hover-bg: var(--hover-overlay);
    --user-menu-btn-hover-border: var(--border-strong);
    
    --user-dropdown-bg: rgba(26, 35, 50, 0.98);
    --user-dropdown-border: var(--border-light);
    --user-dropdown-shadow: var(--shadow-strong);
    
    --user-balance-text: var(--primary-green);
    --user-balance-bg: rgba(255, 193, 7, 0.1); /* Fundo amarelo suave */
    
    --dropdown-item-text: var(--text-primary);
    --dropdown-item-hover-text: var(--primary-green);
    --dropdown-item-hover-bg: var(--hover-overlay);
    --dropdown-divider-bg: rgba(255, 255, 255, 0.1);
    
    /* CTA Section */
    --cta-title-text: var(--text-primary);
    --cta-subtitle-text: #ccc;
    
    /* PIX Logo */
    --pix-logo-text: var(--text-secondary);
    
    /* ==================== GRADIENTES PARA AVATARES ==================== */
    --avatar-gradient-1: linear-gradient(135deg, #4338ca, #3730a3);
    --avatar-gradient-2: linear-gradient(135deg, #7c3aed, #6d28d9);
    --avatar-gradient-3: linear-gradient(135deg, #f59e0b, #d97706);
    --avatar-gradient-4: linear-gradient(135deg, #06b6d4, #0891b2);
    --avatar-gradient-5: linear-gradient(135deg, #ec4899, #db2777);
    --avatar-gradient-6: linear-gradient(135deg, #ffc107, #ff8f00); /* Avatar amarelo */
    --avatar-gradient-7: linear-gradient(135deg, #ef4444, #dc2626);
    --avatar-gradient-8: linear-gradient(135deg, #8b5cf6, #7c3aed);
    
    /* ============================================================
       PÁGINA DE SAQUE
       ============================================================ */
    
    /* Page Header */
    --page-title-text: var(--text-primary);
    --page-subtitle-text: #aaaaaa;
    
    /* User Balance Inline */
    --user-balance-label: #888888;
    --user-balance-value: #ffd54f; /* Amarelo dourado */
    
    /* Balance Card */
    --balance-card-bg: var(--instant-win-bg);
    --balance-label-text: var(--text-secondary);
    --balance-amount-text: var(--primary-green);
    --balance-description-text: var(--text-secondary);
    
    /* Warning Card */
    --warning-card-bg: rgba(255, 152, 0, 0.12);
    --warning-card-border: rgba(255, 152, 0, 0.3);
    --warning-card-overlay: rgba(0, 0, 0, 0.05);
    --warning-icon-bg: rgba(255, 152, 0, 0.2);
    --warning-icon-color: #ff9800;
    --warning-text-color: #f1f5f9;
    --warning-title-color: var(--text-primary);
    --warning-subtitle-color: #e2e8f0;
    
    /* Benefits List */
    --benefits-list-bg: rgba(15, 23, 42, 0.4);
    --benefit-item-text: #f1f5f9;
    --benefit-checkmark-color: #ffc107; /* Check amarelo */
    
    /* Warning Button */
    --btn-warning-bg: var(--btn-primary-bg);
    --btn-warning-bg-hover: var(--btn-primary-bg-hover);
    --btn-warning-text: var(--btn-primary-text);
    --btn-warning-text-hover: var(--btn-primary-text-hover);
    
    /* Form Section */
    --form-section-bg: rgba(255, 255, 255, 0.08);
    --form-section-border: rgba(255, 255, 255, 0.1);
    --form-section-title-text: var(--text-primary);
    --form-section-subtitle-text: var(--text-secondary);
    
    /* Form Elements */
    --form-label-text: var(--text-secondary);
    --form-input-bg: rgba(255, 255, 255, 0.1);
    --form-input-border: rgba(255, 255, 255, 0.2);
    --form-input-focus-bg: rgba(255, 255, 255, 0.15);
    --form-input-focus-border: var(--primary-green);
    --form-input-text: var(--text-primary);
    --form-input-placeholder: #888888;
    --min-value-info-text: var(--text-secondary);
    
    /* Info Section */
    --info-section-bg: rgba(255, 255, 255, 0.05);
    --info-section-border: rgba(255, 255, 255, 0.08);
    --info-title-text: var(--text-primary);
    --info-list-text: var(--text-secondary);
    --info-list-bullet: var(--primary-green);
    
    /* Success/Error Messages */
    --success-message-bg: rgba(255, 193, 7, 0.1); /* Fundo amarelo suave */
    --success-message-border: rgba(255, 193, 7, 0.3); /* Borda amarela */
    --success-message-text: var(--primary-green);
    
    --error-message-bg: rgba(244, 67, 54, 0.1);
    --error-message-border: rgba(244, 67, 54, 0.3);
    --error-message-text: #f44336;
    
    /* ============================================================
       PÁGINA DE PERFIL
       ============================================================ */
    
    /* Profile Section */
    --profile-section-bg: rgba(255, 255, 255, 0.05);
    --profile-section-border: rgba(255, 255, 255, 0.08);
    
    /* Section Headers */
    --section-icon-color: var(--primary-green);
    --section-title-text: var(--text-primary);
    --section-subtitle-text: rgba(255, 255, 255, 0.7);
    
    /* Profile Form - Reutilizando variáveis existentes */
    --form-input-icon: var(--modal-input-icon);
    
    /* Profile Message */
    --profile-msg-error: var(--text-error);
    --profile-msg-success: var(--text-success);
    
    /* Account Info */
    --info-item-border: rgba(255, 255, 255, 0.1);
    --info-icon-color: var(--primary-green);
    --info-label-text: rgba(255, 255, 255, 0.7);
    --info-value-text: var(--text-primary);
    
    /* Balance Section */
    --balance-section-bg: var(--instant-win-bg);
    --balance-section-overlay: rgba(255, 193, 7, 0.09); /* Overlay amarelo */
    --balance-title-text: var(--text-primary);
    --balance-subtitle-text: rgba(255, 255, 255, 0.9);
    
    /* Quick Links */
    --quick-links-bg: rgba(255, 255, 255, 0.05);
    --quick-links-border: rgba(255, 255, 255, 0.08);
    --quick-links-title: var(--text-primary);
    --quick-link-bg: rgba(255, 255, 255, 0.08);
    --quick-link-hover-bg: rgba(255, 255, 255, 0.15);
    --quick-link-text: var(--text-primary);
    
     /* ============================================================
       PÁGINA DE JOGO - MODAL E INTERFACE
       ============================================================ */
    
    /* Game Modal */
    --game-modal-overlay: rgba(0, 0, 0, 0.85);
    --game-modal-bg: rgba(58, 74, 92, 0.95);
    --game-modal-border: rgba(255, 255, 255, 0.1);
    --game-modal-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    
    /* Game Modal Header */
    --game-modal-header-bg: rgba(58, 74, 92, 0.95);
    --game-modal-header-text: var(--text-primary);
    --game-modal-title: var(--text-primary);
    
    /* Game Status */
    --game-status-found-bg: linear-gradient(90deg, #ffeb3b, #ff8f00); /* Amarelo para vitória */
    
    /* Game Close Button */
    --game-close-btn-color: #888888;
    --game-close-btn-hover: var(--text-primary);
    --game-close-btn-bg-hover: rgba(255, 255, 255, 0.1);
    
    /* Game Scratch Area */
    --game-scratch-area-bg: rgba(74, 90, 108, 0.8);
    --game-scratch-area-border: rgba(255, 255, 255, 0.1);
    
    /* Game Grid */
    --game-grid-cell-bg: rgba(240, 240, 240, 0.95);
    --game-grid-cell-border: rgba(255, 255, 255, 0.3);
    --game-grid-cell-winning-bg: rgba(255, 248, 220, 0.95); /* Fundo amarelo suave */
    --game-grid-cell-winning-border: var(--primary-green);
    
    /* Game Messages */
    --game-message-text: var(--text-primary);
    --game-prize-text: var(--primary-green);
    --game-instruction-text: #bbbbbb;
    
    /* Game Balance Section */
    --game-balance-section-bg: rgba(255, 255, 255, 0.05);
    --game-balance-label: #bbbbbb;
    --game-balance-amount: var(--primary-green);
    
    /* Game Play Button */
    --game-play-btn-bg: var(--btn-primary-bg);
    --game-play-btn-text: var(--btn-primary-text);
    --game-play-btn-hover-bg: var(--btn-primary-bg-hover);
    --game-play-btn-hover-text: var(--btn-primary-text-hover);
    --game-play-btn-disabled: #666666;
    
    /* Game Shortcuts */
    --game-shortcuts-border: rgba(255, 255, 255, 0.1);
    --game-shortcuts-title: #bbbbbb;
    
    /* Game Notifications */
    --game-notification-bg: rgba(240, 240, 240, 0.95);
    --game-notification-text: #333333;
    --game-notification-border: rgba(255, 255, 255, 0.2);
    --game-notification-celebration-bg: linear-gradient(135deg, var(--primary-green) 0%, #f57c00 100%);
    --game-notification-celebration-text: var(--text-primary);
    
    /* Game Progress Indicator */
    --game-progress-bg: rgba(0, 0, 0, 0.7);
    --game-progress-text: var(--text-primary);
    
    /* ============================================================
       PÁGINA DE HISTÓRICO
       ============================================================ */
    
    /* Back Button */
    --history-back-btn-bg: rgba(255, 255, 255, 0.1);
    --history-back-btn-text: var(--text-primary);
    --history-back-btn-hover-bg: rgba(255, 255, 255, 0.2);
    
    /* Section */
    --history-section-bg: rgba(255, 255, 255, 0.05);
    --history-section-border: rgba(255, 255, 255, 0.08);
    
    /* Count Text */
    --history-count-text: rgba(255, 255, 255, 0.7);
    
    /* Filter Tabs */
    --history-filter-tab-bg: rgba(255, 255, 255, 0.1);
    --history-filter-tab-text: var(--text-primary);
    --history-filter-tab-active-bg: var(--text-accent);
    --history-filter-tab-active-text: #1a1a1a; /* Texto escuro para contraste */
    --history-filter-tab-hover-bg: rgba(255, 255, 255, 0.15);
    
    /* Transaction Items */
    --history-transaction-item-bg: rgba(255, 255, 255, 0.05);
    --history-transaction-item-border: rgba(255, 255, 255, 0.1);
    --history-transaction-item-hover-bg: rgba(255, 255, 255, 0.08);
    --history-transaction-item-hover-border: rgba(255, 255, 255, 0.2);
    
    /* Transaction Icons */
    --history-icon-prize-bg: linear-gradient(135deg, #ffc107, #f57c00); /* Prêmios em amarelo */
    --history-icon-deposit-bg: linear-gradient(135deg, #2196F3, #1976D2);
    --history-icon-withdraw-bg: linear-gradient(135deg, #FF9800, #F57C00);
    --history-icon-game-bg: linear-gradient(135deg, #9C27B0, #7B1FA2);
    
    /* Status Colors */
    --history-status-complete-bg: #ffc107; /* Completo em amarelo */
    --history-status-complete-text: #1a1a1a; /* Texto escuro */
    --history-status-pending-bg: #FF9800;
    --history-status-pending-text: var(--text-primary);
    --history-status-failed-bg: #f44336;
    --history-status-failed-text: var(--text-primary);
    
    /* Transaction Details */
    --history-transaction-description: rgba(255, 255, 255, 0.7);
    --history-transaction-date: rgba(255, 255, 255, 0.5);
    
    /* Amount Colors */
    --history-amount-positive: #ffc107; /* Valores positivos em amarelo */
    --history-amount-negative: #f44336;
    --history-amount-label: rgba(255, 255, 255, 0.5);
    
    /* Empty State */
    --history-empty-text: rgba(255, 255, 255, 0.6);
    --history-empty-title: rgba(255, 255, 255, 0.8);
    
    /* Load More Button */
    --history-load-more-bg: rgba(255, 255, 255, 0.1);
    --history-load-more-border: rgba(255, 255, 255, 0.2);
    --history-load-more-text: var(--text-primary);
    --history-load-more-hover-bg: rgba(255, 255, 255, 0.15);
    --history-load-more-hover-border: rgba(255, 255, 255, 0.3);
    
    /* ============================================================
       PÁGINA DE DEPÓSITO
       ============================================================ */
    
    /* Deposit Card */
    --deposit-card-bg: rgba(255, 255, 255, 0.05);
    --deposit-card-border: rgba(255, 255, 255, 0.08);
    
    /* Payment Section */
    --deposit-payment-label: #a0a0a0;
    --deposit-payment-method-bg: var(--bg-instant-win);
    --deposit-payment-method-overlay: radial-gradient(circle, rgba(255, 193, 7, 0.09) 0%, transparent 70%);
    --deposit-payment-icon-bg: rgba(255, 193, 7, 0.15);
    --deposit-payment-title: var(--text-primary);
    --deposit-payment-desc: var(--text-primary);
    --deposit-payment-check-bg: rgba(255, 193, 7, 0.2);
    --deposit-payment-check-text: var(--text-primary);
    
    /* Form Elements */
    --deposit-form-label: var(--text-primary);
    --deposit-currency-symbol: #a0a0a0;
    --deposit-form-input-bg: linear-gradient(135deg, #374151 0%, #1f2937 100%);
    --deposit-form-input-border: #4b5563;
    --deposit-form-input-text: var(--text-primary);
    --deposit-form-input-focus-border: var(--text-accent);
    --deposit-form-input-focus-shadow: rgba(255, 193, 7, 0.1);
    --deposit-form-help: #6b7280;
    
    /* Quick Values */
    --deposit-quick-values-title: var(--text-primary);
    --deposit-value-btn-bg: linear-gradient(135deg, #374151 0%, #1f2937 100%);
    --deposit-value-btn-border: #4b5563;
    --deposit-value-btn-text: var(--text-primary);
    --deposit-value-btn-hover-border: var(--text-accent);
    --deposit-value-btn-hover-bg: linear-gradient(135deg, var(--primary-green) 0%, #f57c00 100%);
    --deposit-value-btn-selected-border: var(--text-accent);
    --deposit-value-btn-selected-bg: linear-gradient(135deg, var(--primary-green) 0%, #f57c00 100%);
    
    /* Hot Badge - PERSONALIZADO */
    --deposit-hot-badge-bg: var(--hot-badge-custom-bg);
    --deposit-hot-badge-text: var(--hot-badge-custom-text);
    --deposit-hot-badge-shadow: var(--hot-badge-custom-shadow);
    
    /* Deposit Button */
    --deposit-btn-shadow: 0 6px 20px rgba(255, 193, 7, 0.2); /* Sombra amarela */
    --deposit-btn-hover-shadow: 0 8px 25px rgba(255, 193, 7, 0.3);
    
    /* Security Alert */
    --deposit-security-alert-bg: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%);
    --deposit-security-alert-border: rgba(255, 193, 7, 0.2);
    --deposit-security-icon-bg: linear-gradient(135deg, var(--primary-green), #f57c00);
    --deposit-security-icon-text: #1a1a1a; /* Texto escuro */
    --deposit-security-content: #a0a0a0;
    --deposit-security-title: var(--text-accent);
    --deposit-security-highlight: var(--primary-green-light);
    
    /* Loading */
    --deposit-loading-spinner-border: rgba(255, 193, 7, 0.3);
    
    /* QR Modal */
    --deposit-qr-modal-overlay: rgba(0, 0, 0, 0.9);
    --deposit-qr-content-bg: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    --deposit-qr-content-border: #404040;
    --deposit-qr-content-shadow: 0 25px 50px rgba(0, 0, 0, 0.8);
    
    /* QR Header */
    --deposit-qr-header-bg: var(--bg-instant-win);
    --deposit-qr-header-overlay: radial-gradient(circle, rgba(255, 193, 7, 0.09) 0%, transparent 70%);
    --deposit-qr-close-bg: rgba(255, 255, 255, 0.1);
    --deposit-qr-close-text: var(--text-primary);
    --deposit-qr-pix-icon-bg: rgba(255, 193, 7, 0.2);
    --deposit-qr-title: var(--text-primary);
    
    /* QR Body */
    --deposit-qr-value: var(--text-accent);
    --deposit-qr-label: #a0a0a0;
    
    /* QR Input */
    --deposit-qr-input-bg: #374151;
    --deposit-qr-input-border: #4b5563;
    --deposit-qr-input-text: var(--text-primary);
    --deposit-qr-copy-icon-bg: rgba(255, 255, 255, 0.08);
    --deposit-qr-copy-btn-bg: linear-gradient(135deg, var(--primary-green) 0%, #f57c00 100%);
    --deposit-qr-copy-btn-text: #1a1a1a; /* Texto escuro */
    
    /* QR Timer */
    --deposit-qr-timer-bg: rgba(255, 255, 255, 0.05);
    --deposit-qr-timer-border: rgba(255, 255, 255, 0.08);
    --deposit-qr-timer-title: var(--text-accent);
    --deposit-qr-timer-value: var(--text-primary);
    --deposit-qr-progress-bg: rgba(255, 193, 7, 0.2);
    --deposit-qr-progress-bar: linear-gradient(90deg, var(--primary-green), #f57c00);
    
    /* QR Status */
    --deposit-qr-status-badge-bg: rgba(255, 193, 7, 0.1);
    --deposit-qr-status-badge-border: rgba(255, 193, 7, 0.2);
    --deposit-qr-status-text: var(--text-accent);
    
    /* QR Code Display */
    --deposit-qr-code-display-bg: var(--text-primary);
    --deposit-qr-code-title: var(--text-accent);
    --deposit-qr-code-image-bg: #f0f0f0;
    --deposit-qr-code-image-text: #666;
    
    /* ============================================================
       PÁGINA DE HISTÓRICO - VARIÁVEIS ADICIONAIS
       ============================================================ */
    
    /* Main Tabs (Abas principais: Jogadas/Saques) */
    --history-main-tabs-bg: rgba(255, 255, 255, 0.05);
    --history-main-tab-text: rgba(255, 255, 255, 0.7);
    --history-main-tab-active-bg: linear-gradient(90deg, var(--primary-green), var(--primary-green-dark));
    --history-main-tab-active-text: var(--btn-primary-text); /* Texto escuro para contraste */
    --history-main-tab-hover-bg: rgba(255, 255, 255, 0.1);
    --history-main-tab-hover-text: var(--text-primary);
}

/* ==================== CLASSES UTILITÁRIAS ==================== */

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--text-accent); }
.text-warning { color: var(--text-warning); }
.text-error { color: var(--text-error); }
.text-success { color: var(--text-success); }

.bg-card { background: var(--bg-card); }
.bg-modal { background: var(--bg-modal); }
.bg-primary { background: var(--bg-primary); }

.border-light { border: 1px solid var(--border-light); }
.border-medium { border: 1px solid var(--border-medium); }
.border-strong { border: 1px solid var(--border-strong); }

.shadow-light { box-shadow: var(--shadow-light); }
.shadow-medium { box-shadow: var(--shadow-medium); }
.shadow-strong { box-shadow: var(--shadow-strong); }
.shadow-heavy { box-shadow: var(--shadow-heavy); }