/* ============================================= TEMA CLARO - Light Theme Override Aplicado via classe .light-theme no ============================================= */ /* ---- Botão de toggle (tema escuro - padrão) ---- */ .theme-toggle-btn { background: rgba(0, 255, 255, 0.1); border: 1.5px solid rgba(0, 255, 255, 0.4); color: #00ffff; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.05em; transition: all 0.25s ease; flex-shrink: 0; position: relative; z-index: 999; } .theme-toggle-btn:hover { background: rgba(0, 255, 255, 0.2); box-shadow: 0 0 14px rgba(0, 255, 255, 0.4); transform: scale(1.1); } /* ============================================= LIGHT THEME - Base ============================================= */ body.light-theme { background: #ffffff !important; color: #1a2035 !important; /* Override CSS variables (landing page) */ --color-bg: #ffffff; --color-bg-dark: #f0f4ff; --color-card: #ffffff; --color-text: #1a2035; --color-text-secondary: #4a6080; --color-border: rgba(0, 100, 220, 0.2); --color-primary: #0058cc; } /* Elimina completamente o grid animado */ body.light-theme::before, body.light-theme::after { display: none !important; } /* Grid background da landing (div separado) */ body.light-theme .grid-background { display: none !important; } /* Scan line */ body.light-theme .scan-line { display: none !important; } /* ---- Botão toggle no tema claro ---- */ body.light-theme .theme-toggle-btn { background: rgba(0, 100, 220, 0.1) !important; border-color: rgba(0, 100, 220, 0.35) !important; color: #0058cc !important; } body.light-theme .theme-toggle-btn:hover { background: rgba(0, 100, 220, 0.18) !important; box-shadow: 0 0 12px rgba(0, 100, 220, 0.2) !important; } /* ============================================= CONTAINERS PRINCIPAIS ============================================= */ body.light-theme .header, body.light-theme .top-bar { background: #ffffff !important; border-color: rgba(0, 100, 220, 0.2) !important; box-shadow: 0 2px 16px rgba(0, 80, 200, 0.08) !important; } body.light-theme .container, body.light-theme .container-custom { background: transparent !important; } /* ============================================= SELETOR ABRANGENTE - Pega pela substring da classe Cobre todos os "-card", "-item", "-box", "-panel", etc. ============================================= */ /* Cards genéricos — inclui etc. */ body.light-theme [class*="-card"]:not([class*="badge"]):not([class*="btn"]):not(button), body.light-theme [class*="card-"]:not([class*="badge"]):not([class*="btn"]):not(button) { background: #ffffff !important; border-color: rgba(0, 100, 220, 0.15) !important; color: #1a2035 !important; } /* Items / boxes */ body.light-theme [class*="-item"]:not([class*="badge"]):not([class*="btn"]):not(button):not(a):not(li), body.light-theme [class*="-box"]:not([class*="badge"]):not([class*="btn"]):not(button):not(a), body.light-theme [class*="-block"]:not([class*="badge"]):not([class*="btn"]):not(button):not(a), body.light-theme [class*="-panel"]:not([class*="badge"]):not([class*="btn"]):not(button):not(a) { background: #ffffff !important; border-color: rgba(0, 100, 220, 0.15) !important; color: #1a2035 !important; } /* Containers de conteúdo */ body.light-theme [class*="-container"]:not([class*="badge"]):not([class*="btn"]):not(button):not(a), body.light-theme [class*="-section"]:not([class*="badge"]):not([class*="btn"]):not(button):not(a), body.light-theme [class*="-row"]:not([class*="badge"]):not([class*="btn"]):not(button):not(a):not(tr), body.light-theme [class*="-grid"]:not([class*="badge"]):not([class*="btn"]):not(button):not(a), body.light-theme [class*="-wrapper"]:not([class*="badge"]):not([class*="btn"]):not(button):not(a) { background: #ffffff !important; border-color: rgba(0, 100, 220, 0.15) !important; color: #1a2035 !important; } /* Stats / controls */ body.light-theme [class*="stats"]:not([class*="badge"]):not([class*="btn"]):not(button):not(a), body.light-theme [class*="controls"]:not([class*="badge"]):not([class*="btn"]):not(button):not(a), body.light-theme .filters-bar, body.light-theme .filter-bar, body.light-theme .controls { background: #ffffff !important; border-color: rgba(0, 100, 220, 0.15) !important; color: #1a2035 !important; } /* ============================================= CLASSES ESPECÍFICAS POR PÁGINA ============================================= */ /* --- Painel / Controle Operações --- */ body.light-theme .kpi-card, body.light-theme .chart-card, body.light-theme .calendar-card, body.light-theme .calendar-container, body.light-theme .calendar-day, body.light-theme .calendar-header, body.light-theme .day-op-card, body.light-theme .day-ops-container, body.light-theme .day-ops-header, body.light-theme .exchange-card, body.light-theme .exchange-card-header, body.light-theme .exchange-card-fields, body.light-theme .exchange-cards-row, body.light-theme .resumo-item, body.light-theme .form-group, body.light-theme .chart-container, body.light-theme .chart-date-filter, body.light-theme .chart-preset-btns, body.light-theme .charts-row, body.light-theme .coin-autocomplete-container, body.light-theme .coin-dropdown, body.light-theme .coin-dropdown-item { background: #ffffff !important; border-color: rgba(0, 100, 220, 0.15) !important; color: #1a2035 !important; } /* --- Funding DayTrade / Scalp --- */ body.light-theme .coin-card, body.light-theme .card-body, body.light-theme .card-header, body.light-theme .card-fees-summary, body.light-theme .card-actions, body.light-theme .cards-grid, body.light-theme .exchange-header, body.light-theme .exchange-dropdown, body.light-theme .exchange-dropdown-item, body.light-theme .consistent-pairs-section, body.light-theme .blacklist-modal, body.light-theme .bl-item, body.light-theme .payments-stat-card, body.light-theme .payment-history-item, body.light-theme .profit-input-row, body.light-theme .bl-add-row, body.light-theme .stat-item, body.light-theme .stats-container, body.light-theme .pair-details-row, body.light-theme .exchange-row { background: #ffffff !important; border-color: rgba(0, 100, 220, 0.15) !important; color: #1a2035 !important; } /* --- Painel Index - cards de operações --- */ body.light-theme .operation-card, body.light-theme .module-card, body.light-theme .menu-card, body.light-theme .card, body.light-theme .tech-card, body.light-theme .card-content, body.light-theme .card-header-section, body.light-theme .card-icon-wrapper, body.light-theme .info-card, body.light-theme .alert-card, body.light-theme .system-card, body.light-theme .info-banner { background: #ffffff !important; border-color: rgba(0, 100, 220, 0.15) !important; color: #1a2035 !important; } /* Glow decorativo - esconder no tema claro */ body.light-theme .card-glow { display: none !important; } /* Hexágono do ícone — fundo hardcoded #0a0e27 */ body.light-theme .icon-hexagon { background: linear-gradient(135deg, rgba(0, 100, 220, 0.15), rgba(0, 180, 255, 0.15)) !important; } body.light-theme .icon-hexagon::before { background: #f0f6ff !important; } /* tech-card hover no tema claro */ body.light-theme .tech-card:hover { box-shadow: 0 8px 30px rgba(0, 100, 220, 0.15) !important; } body.light-theme .tech-card::before { background: rgba(0, 100, 220, 0.1) !important; } body.light-theme .tech-card.active { border-color: rgba(0, 100, 220, 0.4) !important; } /* --- Price Arbitrage / Spread --- */ body.light-theme .stat-badge, body.light-theme .filters-bar, body.light-theme .filter-group, body.light-theme .blacklist-header { background: rgba(0, 100, 220, 0.05) !important; border-color: rgba(0, 100, 220, 0.15) !important; color: #1a2035 !important; } /* ============================================= CONTRASTE - Textos cyan/neon → cores legíveis #00ffff → #0064dc (azul) #00ff88 → #057a55 (verde escuro) ============================================= */ /* Ícones de card (gradiente cyan→magenta → azul→roxo legível) */ body.light-theme .card-icon { background: linear-gradient(135deg, #0064dc, #7c3aed) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: none !important; } /* Ícone dentro do label stat */ body.light-theme .stat-label i { color: #0064dc !important; -webkit-text-fill-color: #0064dc !important; } /* Valor do KPI (números dos cards dashboard) */ body.light-theme .stat-value { color: #1a2035 !important; -webkit-text-fill-color: #1a2035 !important; } /* Títulos com cor cyan */ body.light-theme .title, body.light-theme .page-title, body.light-theme .section-title, body.light-theme .card-title { color: #1a2035 !important; -webkit-text-fill-color: #1a2035 !important; } /* Botões de ação com cor neon (Registrar Operação, etc.) */ body.light-theme .register-op-btn, body.light-theme .register-op-btn:hover { background: linear-gradient(135deg, rgba(5, 122, 85, 0.1), rgba(0, 100, 220, 0.1)) !important; border-color: #057a55 !important; color: #057a55 !important; box-shadow: none !important; } /* Botões de blacklist e similares com cor #00ff88 */ body.light-theme .bl-item button { color: #057a55 !important; } /* Bordas e accents cyan */ body.light-theme input, body.light-theme select, body.light-theme textarea { accent-color: #0064dc !important; color: #1a2035 !important; background: #ffffff !important; border-color: rgba(0, 100, 220, 0.25) !important; } /* Textos positivos/negativos - manter mas tornar legíveis */ body.light-theme .positive, body.light-theme .value-positive, body.light-theme [class*="positive"], body.light-theme .text-green { color: #057a55 !important; -webkit-text-fill-color: #057a55 !important; } body.light-theme .negative, body.light-theme .value-negative, body.light-theme [class*="negative"], body.light-theme .text-red { color: #b91c1c !important; -webkit-text-fill-color: #b91c1c !important; } /* Funding rate values (Long/Short) */ body.light-theme .long-value, body.light-theme .funding-long, body.light-theme .rate-positive { color: #057a55 !important; -webkit-text-fill-color: #057a55 !important; } body.light-theme .short-value, body.light-theme .funding-short, body.light-theme .rate-negative { color: #b91c1c !important; -webkit-text-fill-color: #b91c1c !important; } /* Coin name / par no topo dos cards */ body.light-theme .coin-name, body.light-theme .pair-name, body.light-theme .symbol-name, body.light-theme .coin-symbol { color: #1a2035 !important; -webkit-text-fill-color: #1a2035 !important; } /* Status ONLINE badge - manter cor mas mais escura */ body.light-theme .status-active, body.light-theme .status-online { background: rgba(5, 122, 85, 0.12) !important; color: #057a55 !important; border-color: rgba(5, 122, 85, 0.25) !important; } /* EM BREVE badge */ body.light-theme .status-coming-soon, body.light-theme [class*="coming-soon"] .card-status { background: rgba(161, 100, 0, 0.1) !important; color: #92400e !important; border-color: rgba(161, 100, 0, 0.25) !important; } /* Textos pequenos de label (Taxa, Pagamentos, etc.) */ body.light-theme .taxa-label, body.light-theme .taxa-value, body.light-theme .payment-label, body.light-theme .countdown-label, body.light-theme .countdown-value { color: #4a6080 !important; -webkit-text-fill-color: #4a6080 !important; } /* Nav tabs ativos */ body.light-theme .nav-tab.active, body.light-theme .tab-btn.active, body.light-theme .filter-btn.active { background: rgba(0, 100, 220, 0.12) !important; color: #0064dc !important; border-color: rgba(0, 100, 220, 0.4) !important; } /* ============================================= TEXTOS E CORES ============================================= */ body.light-theme h1, body.light-theme h2, body.light-theme h3, body.light-theme h4, body.light-theme h5, body.light-theme p, body.light-theme span:not([class*="badge"]):not([class*="btn"]):not([class*="tag"]), body.light-theme label, body.light-theme td, body.light-theme th, body.light-theme .label, body.light-theme .stat-label, body.light-theme .subtitle { color: #1a2035 !important; text-shadow: none !important; } body.light-theme .header h1, body.light-theme .header .title, body.light-theme .header .glitch, body.light-theme .top-bar .page-title { color: #0a3069 !important; text-shadow: none !important; } /* Textos cyan → azul escuro */ body.light-theme .stat-value, body.light-theme .stat-label, body.light-theme .value, body.light-theme .page-title { color: #0058cc !important; text-shadow: none !important; } /* ============================================= INPUTS / SELECTS / FORM ELEMENTS ============================================= */ body.light-theme input, body.light-theme select, body.light-theme textarea, body.light-theme .filter-select, body.light-theme .search-input, body.light-theme .filter-input, body.light-theme .coin-autocomplete-input, body.light-theme .coin-dropdown-search input { background: #ffffff !important; border: 1px solid rgba(0, 100, 220, 0.3) !important; color: #1a2035 !important; } body.light-theme input::placeholder, body.light-theme select::placeholder, body.light-theme textarea::placeholder { color: #8898aa !important; } body.light-theme select option { background: #ffffff !important; color: #1a2035 !important; } /* ============================================= TABELAS ============================================= */ body.light-theme table { background: #ffffff !important; } body.light-theme thead tr, body.light-theme .table-header, body.light-theme th { background: rgba(0, 80, 200, 0.07) !important; color: #1a2035 !important; border-color: rgba(0, 100, 220, 0.2) !important; } body.light-theme tbody tr:nth-child(even) { background: rgba(0, 80, 200, 0.03) !important; } body.light-theme tbody tr:hover { background: rgba(0, 80, 200, 0.06) !important; } body.light-theme td { border-color: rgba(0, 100, 220, 0.1) !important; } /* ============================================= BOTÕES ============================================= */ body.light-theme .back-btn, body.light-theme .admin-btn { background: rgba(0, 80, 200, 0.07) !important; border-color: rgba(0, 100, 220, 0.3) !important; color: #0058cc !important; } body.light-theme .back-btn:hover, body.light-theme .admin-btn:hover { background: rgba(0, 80, 200, 0.13) !important; } body.light-theme .register-op-btn { background: rgba(0, 180, 100, 0.1) !important; border-color: rgba(0, 180, 100, 0.4) !important; color: #006b3a !important; } /* Botões de filtro/nav */ body.light-theme .nav-tab, body.light-theme .profit-range-btn, body.light-theme .filter-btn, body.light-theme .chart-preset-btn, body.light-theme .btn-tech { background: rgba(0, 80, 200, 0.06) !important; border-color: rgba(0, 100, 220, 0.25) !important; color: #0058cc !important; } body.light-theme .nav-tab.active, body.light-theme .profit-range-btn.active, body.light-theme .btn-tech.active { background: rgba(0, 80, 200, 0.15) !important; color: #0058cc !important; } /* ============================================= FLOATING MENU / NAV ============================================= */ body.light-theme .floating-menu { background: rgba(255, 255, 255, 0.97) !important; border-color: rgba(0, 100, 220, 0.2) !important; box-shadow: 0 4px 20px rgba(0, 60, 180, 0.1) !important; } body.light-theme .menu-item { color: #4a6080 !important; } body.light-theme .menu-item.active, body.light-theme .menu-item:hover { color: #0058cc !important; background: rgba(0, 80, 200, 0.08) !important; } /* ============================================= MODAIS / POPUPS ============================================= */ body.light-theme .modal-container, body.light-theme .modal-content, body.light-theme .modal-body, body.light-theme .modal-header, body.light-theme .popup-container, body.light-theme .payments-popup-header, body.light-theme .payments-popup-body, body.light-theme .exchanges-popup-header, body.light-theme .exchanges-popup-body, body.light-theme .tv-modal-body { background: #ffffff !important; border-color: rgba(0, 100, 220, 0.2) !important; color: #1a2035 !important; } body.light-theme .modal-overlay { background: rgba(0, 20, 80, 0.5) !important; } /* ============================================= TOAST / NOTIFICAÇÕES ============================================= */ body.light-theme .toast { background: #ffffff !important; border-color: rgba(0, 100, 220, 0.3) !important; color: #1a2035 !important; box-shadow: 0 4px 16px rgba(0, 60, 180, 0.12) !important; } /* ============================================= SCROLLBAR ============================================= */ body.light-theme ::-webkit-scrollbar-track { background: #f0f4ff !important; } body.light-theme ::-webkit-scrollbar-thumb { background: rgba(0, 80, 200, 0.3) !important; } body.light-theme ::-webkit-scrollbar-thumb:hover { background: rgba(0, 80, 200, 0.5) !important; } /* ============================================= SUBSCRIPTION BADGE ============================================= */ body.light-theme .subscription-badge { background: rgba(0, 80, 200, 0.08) !important; border-color: rgba(0, 100, 220, 0.3) !important; color: #0058cc !important; } /* ============================================= VALORES POSITIVOS/NEGATIVOS - mantêm cor ============================================= */ body.light-theme .positive, body.light-theme [style*="color: #00ff88"], body.light-theme [style*="color:#00ff88"], body.light-theme [style*="color: #00c878"], body.light-theme [style*="color: rgb(0, 255, 136)"] { color: #007a3d !important; } body.light-theme .negative, body.light-theme [style*="color: #ff4757"], body.light-theme [style*="color:#ff4757"], body.light-theme [style*="color: #ff6b6b"], body.light-theme [style*="color:#ff6b6b"] { color: #cc1f1f !important; } /* ============================================= GLITCH EFFECT - desabilita no light ============================================= */ body.light-theme .glitch::before, body.light-theme .glitch::after { display: none !important; } /* ============================================= LANDING PAGE - Específico ============================================= */ body.light-theme .header { background: rgba(255, 255, 255, 0.98) !important; border-bottom-color: rgba(0, 100, 220, 0.15) !important; backdrop-filter: blur(20px); } body.light-theme .nav-link { color: #4a6080 !important; } body.light-theme .nav-link:hover { color: #0058cc !important; } body.light-theme .lang-btn { background: rgba(0, 80, 200, 0.07) !important; border-color: rgba(0, 100, 220, 0.25) !important; color: #4a6080 !important; } body.light-theme .lang-btn.active { background: rgba(0, 80, 200, 0.15) !important; color: #0058cc !important; } body.light-theme .hero { background: linear-gradient(135deg, #f0f5ff 0%, #ffffff 50%, #f0f5ff 100%) !important; } body.light-theme .feature-card, body.light-theme .pricing-card, body.light-theme .product-card, body.light-theme .step-card, body.light-theme .faq-item, body.light-theme .stat-card, body.light-theme .testimonial-card { background: #ffffff !important; border-color: rgba(0, 100, 220, 0.18) !important; color: #1a2035 !important; } body.light-theme section { background: transparent !important; } body.light-theme footer, body.light-theme .footer { background: #f0f4ff !important; border-top-color: rgba(0, 100, 220, 0.15) !important; color: #4a6080 !important; }