:root {
            --bg-color: #121212;
            --text-color: #ffffff;
            --primary: #00ff88;
            --primary-dark: #00cc6a;
            --secondary: #333333;
            --vip-color: #ffd700;
            --auto-color: #ff9900;
            --quente-color: #ff3333;
            --fria-color: #3388ff;
            --acerto-color: #00ff88;
            --erro-color: #555555;
            --zap-color: #25D366;
            --insta-color: #E1306C;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        body { background-color: var(--bg-color); color: var(--text-color); padding-bottom: 20px; }
        
        header { background-color: var(--secondary); padding: 15px; text-align: center; border-bottom: 2px solid var(--primary); }
        header h1 { font-size: 20px; letter-spacing: 0.5px; color: var(--text-color); }
        
        .app-container { padding: 15px; max-width: 600px; margin: 0 auto; }
        main { width: 100%; }
        .sidebar-desktop { display: none; }
        .sidebar-left-desktop { display: none; }

        @media (min-width: 950px) {
            .app-container { display: flex; max-width: 960px; gap: 20px; align-items: flex-start; justify-content: center; }
            main { max-width: 600px; flex: 1; }
            .sidebar-desktop { display: block; width: 320px; position: sticky; top: 20px; }
        }

        @media (min-width: 1250px) {
            .app-container { max-width: 1240px; }
            .sidebar-left-desktop { display: block; width: 280px; position: sticky; top: 20px; }
        }
        
        nav.nav-abas { display: flex; gap: 5px; margin-bottom: 15px; flex-wrap: wrap; }
        .btn-aba { flex: 1; min-width: 18%; padding: 12px 2px; font-weight: bold; font-size: 11px; background-color: var(--secondary); color: #ccc; border: none; border-radius: 6px; cursor: pointer; transition: 0.3s; text-align: center; text-transform: uppercase; }
        .btn-aba.ativa { background-color: var(--primary); color: #000; }

        .dashboard-loterias { background-color: var(--secondary); padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 5px solid var(--primary); box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
        .dashboard-loterias h3 { color: var(--primary); margin-bottom: 12px; font-size: 1.1em; text-transform: uppercase; text-align: center; }
        .info-concurso { font-size: 14px; text-align: center; margin-bottom: 10px; color: #ccc; }
        
        .resultado-bolinhas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 15px 0; }
        .bolinha { background-color: var(--primary); color: #000; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.5); transition: 0.3s; }
        .bolinha.inativa { background-color: #2a2a2a; color: #666; box-shadow: none; border: 1px dashed #555; }
        
        .proximo-sorteio { background-color: #1e1e1e; padding: 12px; border-radius: 6px; text-align: center; margin-top: 15px; }
        .proximo-sorteio p { font-size: 14px; margin-bottom: 5px; color: #aaa; }
        .proximo-sorteio strong { color: var(--text-color); }
        .valor-premio { color: var(--primary) !important; font-size: 1.4em; display: block; margin-top: 5px; }

        .info-texto { text-align: center; margin-bottom: 15px; font-size: 14px; color: #ccc; border-top: 1px solid #444; padding-top: 15px; }
        .legenda-termometro { font-size: 12px; background: #1e1e1e; padding: 10px; border-radius: 6px; margin-bottom: 15px; display: flex; justify-content: space-around; align-items: center; }
        .leg-item { display: flex; align-items: center; gap: 5px; }
        .leg-cor { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
        #status-termometro { font-size: 10px; color: var(--auto-color); text-transform: uppercase; font-weight: bold; }
        
        #grid-dezenas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
        .btn-dezena { position: relative; background-color: var(--secondary); color: white; border: none; padding: 15px 0; font-size: 18px; font-weight: bold; border-radius: 8px; cursor: pointer; transition: 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.4); }
        .btn-dezena.selected { background-color: var(--primary) !important; color: #000; box-shadow: 0 0 12px var(--primary); transform: scale(1.05); }
        .badge-freq { position: absolute; top: -8px; right: -8px; background-color: #555; color: #fff; font-size: 11px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--bg-color); font-weight: bold; opacity: 0; transition: opacity 0.5s; }
        .badge-freq.visible { opacity: 1; }
        .freq-quente { background-color: var(--quente-color); }
        .freq-fria { background-color: var(--fria-color); }
        .freq-media { background-color: #aaaaaa; color: #000; }

        .btn-acao { width: 100%; padding: 15px; font-size: 16px; font-weight: bold; border: none; border-radius: 8px; cursor: pointer; margin-bottom: 10px; transition: 0.3s; }
        .btn-auto { background-color: var(--auto-color); color: #000; text-transform: uppercase; }
        .btn-primary { background-color: var(--primary); color: #000; text-transform: uppercase; }
        .btn-vip { background-color: transparent; color: var(--vip-color); border: 2px solid var(--vip-color); }
        .btn-vip.desbloqueado { background-color: var(--vip-color); color: #000; pointer-events: none; }
        .btn-matriz { background-color: #ff3333; color: white; border: 2px solid #ff3333; animation: pulse 2s infinite; }
        .btn-danger { background-color: #ff3333; color: white; }
        .btn-secondary { background-color: var(--secondary); color: white; }
        
        @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 51, 51, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 51, 51, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 51, 51, 0); } }

        .acoes-card { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 15px; }
        .btn-acao-small { flex: 1; min-width: 90px; border: none; border-radius: 4px; padding: 10px; cursor: pointer; font-weight: bold; color: #fff; font-size: 11px; text-transform: uppercase; }
        .btn-salvar { background: var(--primary); color: #000; }
        .btn-remover { background: #ff4444; }
        .btn-zap { background: var(--zap-color); }
        .btn-story { background: var(--insta-color); }

        .hidden { display: none !important; }
        .spinner { width: 50px; height: 50px; border: 5px solid var(--secondary); border-top: 5px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px auto; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        
        #loading-text { font-size: 16px; color: var(--primary); min-height: 24px; text-align: center; }
        
        .jogo-card { background-color: var(--secondary); padding: 15px; margin-bottom: 15px; border-radius: 8px; position: relative; }
        .jogo-numeros { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 15px; justify-content: center; }
        .jogo-numeros span, .dezena-conferida { background-color: #1e1e1e; padding: 10px 0; border-radius: 6px; font-size: 16px; font-weight: bold; text-align: center; border: 1px solid #444; color: #fff; }

        .acerto { background-color: var(--acerto-color) !important; color: #000 !important; border-color: var(--acerto-color) !important; }
        .erro { background-color: var(--erro-color) !important; color: #aaa !important; opacity: 0.5; border-color: #444 !important; }
        
        .msg-premio { display: block; margin-top: 8px; font-size: 14px; font-weight: bold; text-align: center; }
        .prize-15 { color: #ffd700; font-size: 18px; text-transform: uppercase; }
        .prize-14 { color: #00ff88; }
        .prize-low { color: #55b7ff; }

        .banner-custo { background-color: #1e1e1e; padding: 15px; border-radius: 8px; border-left: 5px solid var(--auto-color); margin-bottom: 20px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
        .banner-custo span { display: block; font-size: 14px; color: #ccc; margin-bottom: 5px; }
        .banner-custo strong { font-size: 22px; color: var(--auto-color); }
        
        .flex-relatorio { display: flex; justify-content: space-around; margin-top: 10px; border-top: 1px solid #333; padding-top: 10px; }
        .flex-relatorio div { text-align: center; }
        .flex-relatorio small { font-size: 11px; color: #888; text-transform: uppercase; }
        .flex-relatorio strong { font-size: 16px; display: block; margin-top: 4px; }
        
        .secao-conferencia { background: #1e1e1e; padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #444; text-align: center; }
        .secao-conferencia select { width: 100%; padding: 12px; border-radius: 6px; background: #2a2a2a; color: #fff; border: 1px solid #555; margin-bottom: 15px; font-size: 14px; font-weight: bold; }

        .stat-box { background: #1e1e1e; padding: 12px; border-radius: 6px; margin-bottom: 12px; border-left: 4px solid var(--primary); }
        .stat-box strong { display: block; color: var(--auto-color); font-size: 13px; margin-bottom: 4px; text-transform: uppercase; }
        .stat-box span { color: #fff; font-size: 16px; font-weight: bold; }

        .lote-item { background-color: var(--secondary); border: 1px solid #444; border-radius: 8px; padding: 15px; margin-bottom: 15px; display: flex; flex-direction: column; gap: 10px; border-left: 5px solid var(--vip-color); }
        .lote-header { display: flex; justify-content: space-between; align-items: center; }
        .lote-nome { font-size: 16px; font-weight: bold; color: var(--primary); display: flex; align-items: center; gap: 8px; word-break: break-all; cursor: pointer; }
        .lote-info { font-size: 13px; color: #ccc; }
        .btn-edit-nome { background: none; border: none; color: #aaa; cursor: pointer; font-size: 16px; transition: 0.2s; padding: 5px; }
        .btn-edit-nome:hover { color: #fff; transform: scale(1.1); }

        .artigo-container { background-color: var(--secondary); padding: 20px; border-radius: 8px; line-height: 1.6; border: 1px solid #444; }
        .artigo-container h2 { color: var(--primary); margin-bottom: 15px; font-size: 1.5em; text-transform: uppercase; }
        .artigo-container h3 { color: var(--auto-color); margin-top: 25px; margin-bottom: 10px; font-size: 1.2em; border-bottom: 1px solid #444; padding-bottom: 5px;}
        .artigo-container h4 { color: #fff; margin-top: 15px; margin-bottom: 8px; font-size: 1.05em; }
        .artigo-container p { font-size: 15px; color: #ddd; margin-bottom: 15px; text-align: justify; }
        .artigo-container ul { margin-left: 20px; margin-bottom: 15px; color: #ddd; font-size: 15px; }
        .artigo-container li { margin-bottom: 5px; }
        
        #grid-blog { display: grid; gap: 15px; }
        .blog-card { background-color: var(--secondary); border: 1px solid #444; border-radius: 8px; padding: 15px; display: flex; flex-direction: column; gap: 10px; transition: 0.3s; border-left: 5px solid var(--auto-color); }
        .blog-card:hover { border-color: var(--primary); box-shadow: 0 4px 10px rgba(0,255,136,0.1); }
        .blog-meta { font-size: 11px; color: #888; text-transform: uppercase; font-weight: bold; }
        .blog-titulo { font-size: 18px; font-weight: bold; color: #fff; line-height: 1.3; }
        .blog-resumo { font-size: 14px; color: #ccc; line-height: 1.5; }
        .btn-ler-mais { background: transparent; color: var(--primary); border: 1px solid var(--primary); border-radius: 4px; padding: 10px; text-transform: uppercase; font-weight: bold; cursor: pointer; text-align: center; margin-top: 5px; transition: 0.2s; }
        .btn-ler-mais:hover { background: var(--primary); color: #000; }
        .blog-post-header { border-bottom: 1px solid #444; margin-bottom: 20px; padding-bottom: 15px; }

        .live-toast { position: fixed; bottom: 80px; left: 20px; background: rgba(18, 18, 18, 0.95); border: 1px solid var(--primary); color: #fff; padding: 10px 15px; border-radius: 50px; font-size: 13px; z-index: 1000; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); transition: opacity 0.5s ease, transform 0.5s ease; opacity: 0; transform: translateY(20px); pointer-events: none; }
        .live-toast.show { opacity: 1; transform: translateY(0); }
        .live-dot { width: 8px; height: 8px; background-color: var(--primary); border-radius: 50%; animation: blink 1s infinite; }
        @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }

        .banner-responsavel { background-color: var(--secondary); border: 1px solid #444; border-top: 4px solid #ff4444; border-radius: 8px; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); text-align: center; }
        .badge-18 { display: inline-block; background-color: #ff4444; color: #fff; font-weight: bold; font-size: 20px; padding: 8px 12px; border-radius: 50%; margin-bottom: 12px; }
        .banner-responsavel h3 { color: #fff; margin-bottom: 10px; text-transform: uppercase; }
        .banner-responsavel p, .banner-responsavel li { color: #ccc; font-size: 13px; margin-bottom: 10px; line-height: 1.4; text-align: left; }
        .banner-responsavel ul { padding-left: 20px; margin-bottom: 15px; }
        .btn-termos { display: block; background-color: transparent; color: var(--primary); border: 1px solid var(--primary); padding: 12px; border-radius: 6px; text-decoration: none; font-weight: bold; font-size: 12px; text-transform: uppercase; transition: 0.3s; margin-top: 10px; }
        .btn-termos:hover { background-color: var(--primary); color: #000; }

        /* ESTILOS ESPECÍFICOS DA NOVA BARRA ESQUERDA E TELA HISTÓRICO */
        .box-ultimos-resultados { background-color: var(--secondary); border: 1px solid #444; border-radius: 8px; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); text-align: center; }
        .box-ultimos-resultados h3 { color: var(--primary); font-size: 16px; text-transform: uppercase; border-bottom: 1px solid #444; padding-bottom: 10px; margin-bottom: 15px; }
        .box-ultimos-resultados p { font-size: 13px; color: #ccc; line-height: 1.5; margin-bottom: 20px; text-align: justify; }
        
        .tabela-premios td, .tabela-premios th { padding: 8px 4px; }
        .tabela-premios tr { border-bottom: 1px dashed #333; }
        .tabela-premios tr:last-child { border-bottom: none; }