body { font-family: Arial, sans-serif; padding: 10px; background-color: #f0f2f5; margin: 0; transition: background 0.3s, color 0.3s; display: flex; flex-direction: column; min-height: 100vh;}
        
        /* LOGO */
        .logo-container { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px auto 25px auto; user-select: none; position: relative;}
        .logo-container.login-size { transform: scale(0.9); margin: 0 auto 20px auto; }
        .logo-icon { font-size: 50px; color: #ffb800; line-height: 1; }
        .logo-text-wrapper { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
        .logo-title { font-family: 'Montserrat', sans-serif; font-size: 44px; font-weight: 800; font-style: italic; letter-spacing: -1.5px; }
        .logo-no { color: #333; transition: color 0.3s; } 
        .logo-flop { color: #ffb800; }
        .logo-subtitle { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; font-style: italic; letter-spacing: 1.5px; color: #333; text-transform: uppercase; margin-top: 2px; margin-left: 2px; transition: color 0.3s; }

        body.dark-mode .logo-no { color: #ffffff; }
        body.dark-mode .logo-subtitle { color: #ffffff; }

        /* NOME DE USUARIO BEM-VINDO */
        #welcome-user {
            position: absolute;
            top: 15px;
            left: 15px;
            font-size: 12px;
            color: #666;
            z-index: 100;
            max-width: 30%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: none;
        }
        body.dark-mode #welcome-user { color: #aaa; }
        
        .card { background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 20px; transition: background 0.3s, color 0.3s; flex-grow: 1;}
        input, select, button, textarea { width: 100%; padding: 12px; margin: 8px 0; border-radius: 5px; border: 1px solid #ccc; box-sizing: border-box; font-size: 16px; font-family: inherit; transition: background 0.3s, color 0.3s; }
        button { color: white; border: none; font-weight: bold; cursor: pointer; border-radius: 5px; transition: background 0.3s; }
        button i { margin-right: 5px; }
        .btn-azul { background: #007bff; } .btn-verde { background: #28a745; } 
        .btn-roxo { background: #6f42c1; } .btn-vermelho { background: #dc3545; } .btn-amarelo { background: #f39c12; color: #fff;}
        
        .acoes-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
        .btn-acao { flex: 1 1 auto; min-width: 90px; padding: 10px 5px; font-size: 13px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 5px; text-decoration: none; border-radius: 5px; white-space: nowrap; }
        .btn-concluir-block { flex: 1 1 100%; width: 100%; padding: 12px; margin-top: 5px; font-size: 15px; font-weight: bold; background: #20c997; border-radius: 5px; color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: 0.3s; }
        .btn-concluir-block:hover { background: #17a2b8; }
        
        .btn-soft { background: #e2d9f3; color: #6f42c1; border: none; font-weight: bold; cursor: pointer; border-radius: 20px; padding: 8px 25px; transition: 0.2s; }
        .btn-soft:hover { background: #d1c4e9; }

        .menu-topo { display: flex; gap: 8px; margin-bottom: 20px; background: #343a40; padding: 10px; border-radius: 8px; justify-content: flex-start; flex-wrap: wrap; transition: background 0.3s; align-items: center;}
        .menu-topo button { padding: 8px 10px; margin: 0; font-size: 13px; white-space: normal; line-height: 1.3; width: auto; flex-grow: 1; text-align: center;}
        .btn-sair-menu { margin-left: auto !important; max-width: 90px; flex-grow: 0 !important; }

        .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; justify-content: center; align-items: flex-start; padding-top: 30px; overflow-y: auto; }
        .modal-content { background: white; padding: 20px; border-radius: 10px; width: 95%; max-width: 500px; position: relative; margin-bottom: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: background 0.3s, color 0.3s; }
        .modal-content.admin-wide { max-width: 1100px; } 
        .modal-close { position: absolute; top: 10px; right: 15px; background: none; color: #aaa; font-size: 28px; font-weight: bold; border: none; cursor: pointer; padding: 0; width: auto; }
        .modal-close:hover { color: #333; }
        
        /* CENTRAR TOUR */
        #modal-tour { align-items: center !important; padding-top: 0 !important; }

        .msg-sucesso { display: none; background: #28a745; color: white; padding: 12px; border-radius: 5px; margin-bottom: 15px; text-align: center; font-weight: bold; font-size: 14px; animation: fadeIn 0.3s; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

        .lista-pequena { max-height: 200px; overflow-y: auto; border: 1px solid #eee; border-radius: 5px; padding: 5px; margin-top: 15px; }
        .item-lista { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-bottom: 1px solid #eee; font-size: 14px; }
        .item-lista:last-child { border-bottom: none; }
        .btn-mini { padding: 5px 10px; font-size: 12px; width: auto; margin: 0 2px;}

        .filtro-visao { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; justify-content: center; }
        .filtro-visao button { background: #e9ecef; color: #333; margin: 0; border-radius: 20px; flex: 1; min-width: 70px; font-size: 13px; padding: 8px 5px;}
        .filtro-visao button.ativo { background: #343a40; color: white; }
        
        /* BOTÕES FILTRO FINANCEIRO */
        .filtro-visao button.filtro-fin-btn { background: transparent; color: #007bff; border: 2px solid #007bff !important; font-weight: bold; transition: 0.2s; }
        .filtro-visao button.filtro-fin-btn:hover, .filtro-visao button.filtro-fin-btn.ativo { background: #007bff; color: white; }
        body.dark-mode .filtro-visao button.filtro-fin-btn { border-color: #4da3ff !important; color: #4da3ff; }
        body.dark-mode .filtro-visao button.filtro-fin-btn:hover, body.dark-mode .filtro-visao button.filtro-fin-btn.ativo { background: #4da3ff; color: #121212; }
        
        .navegacao-meses { display: none; align-items: center; justify-content: space-between; background: #e9ecef; border-radius: 8px; padding: 5px 15px; margin-bottom: 15px; }
        .navegacao-meses button { width: auto; background: none; color: #333; font-size: 18px; padding: 5px 15px; border: none; font-weight: bold; margin: 0; }
        .navegacao-meses button:hover { background: #dee2e6; }
        .navegacao-meses span { font-weight: bold; font-size: 15px; text-transform: capitalize; color: #333;}

        .dia-card { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; margin-bottom: 15px; overflow: hidden; transition: border 0.3s, background 0.3s; }
        .dia-card.hoje-destaque { border: 2px solid #dc3545; box-shadow: 0 0 8px rgba(220, 53, 69, 0.4); }
        .dia-header { background: #343a40; color: #fff; padding: 10px 12px; font-weight: bold; cursor: pointer; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
        .dia-header.fds { background: #4a5568; } 

        .seta-toggle { transition: transform 0.3s ease; } .seta-toggle.fechado { transform: rotate(-90deg); }
        
        /* AGENDAMENTO - MINI CARDS E SERVIÇOS EVIDENTES */
        .agendamento-item { 
            padding: 15px; border: 1px solid #eee; border-radius: 8px; background: #fdfdfd; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.03); transition: 0.3s;
        }
        .agendamento-item:last-child { margin-bottom: 0; }
        .hora-badge { background: #f8f9fa; border: 1px solid #ccc; padding: 3px 8px; border-radius: 4px; font-weight: bold; display: inline-block; }
        .encaixe-badge { color: #dc3545; font-weight: bold; font-size: 12px; border: 1px solid #dc3545; padding: 2px 5px; border-radius: 3px; }
        
        .lista-servicos-agenda { list-style-type: none; padding: 0; margin: 5px 0 0 0; }
        .lista-servicos-agenda li { padding-left: 15px; position: relative; margin-bottom: 4px; font-size: 14px; font-weight: bold; color: #333; }
        .lista-servicos-agenda li::before { content: "•"; position: absolute; left: 0; color: #6f42c1; font-weight: bold; font-size: 16px; line-height: 1; top: 1px;}
        
        .telefone-badge { background: #e9ecef; color: #333; padding: 2px 8px; border-radius: 4px; font-size: 12px; border: 1px solid #ccc; margin-left: 5px; display: inline-block; font-weight: bold; }

        .agendamento-concluido { background-color: #f4fff6 !important; border: 1px solid #c3e6cb !important; border-left: 5px solid #28a745 !important; }
        .badge-concluido { background: #28a745; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; display: inline-block; margin-left: 5px;}
        
        .card-financeiro { background: #fff; padding: 20px; border-radius: 10px; border-left: 5px solid #28a745; box-shadow: 0 2px 5px rgba(0,0,0,0.1); flex: 1; min-width: 200px; }
        .valor-financeiro { font-size: 28px; font-weight: bold; color: #28a745; margin-top: 10px; }

        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .badge-qtd { background: #6c757d; color: white; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: normal; white-space: nowrap; display: inline-block; }
        .badge-qtd.tem-vaga { background: #28a745; font-weight: bold; }
        .info-veiculo { color: #555; font-size: 14px; background: #f4f4f9; padding: 6px; border-radius: 4px; border-left: 3px solid #ffc107; margin-top: 4px; transition: background 0.3s, color 0.3s; }
        .telefone-container { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
        .telefone-container input[type="tel"] { margin: 0; flex: 1; }
        .checkbox-label { display: flex; align-items: center; gap: 5px; font-size: 14px; color: #333; white-space: nowrap; transition: background 0.3s, color 0.3s, border-color 0.3s; }
        .checkbox-label input { width: auto; margin: 0; transform: scale(1.2); }

        .autocomplete-wrapper { position: relative; width: 100%; margin: 8px 0; }
        .autocomplete-input { width: 100%; padding: 12px; border-radius: 5px; border: 1px solid #ccc; box-sizing: border-box; font-size: 16px; margin: 0; }
        .autocomplete-input:focus { outline: none; border-color: #6f42c1; box-shadow: 0 0 5px rgba(111, 66, 193, 0.3); }
        .autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ccc; border-top: none; z-index: 1001; max-height: 200px; overflow-y: auto; border-radius: 0 0 5px 5px; display: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .autocomplete-item { padding: 10px; cursor: pointer; border-bottom: 1px solid #eee; font-size: 14px; text-align: left; transition: background 0.2s;}
        .autocomplete-item:hover { background-color: #f0f2f5; }
        .autocomplete-item:last-child { border-bottom: none; }
        .autocomplete-item-disabled { color: #b0b0b0; background-color: #f8f9fa; cursor: not-allowed; }
        
        #tags-servicos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
        .tag-servico { background: #e2d9f3; color: #6f42c1; padding: 6px 12px; border-radius: 15px; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; font-weight: bold; }
        .tag-remover { cursor: pointer; color: #dc3545; font-size: 16px; line-height: 1; padding: 0 4px; }
        .tag-remover:hover { color: #a71d2a; }

        .obs-encolhida { background: #fff3f3; border-left: 3px solid #dc3545; padding: 6px; border-radius: 4px; font-size: 13px; margin-top: 6px; transition: background 0.3s; }
        .obs-encolhida summary { color: #dc3545; font-weight: bold; cursor: pointer; outline: none; list-style: none; display: flex; align-items: center; gap: 5px;}
        .obs-encolhida summary::-webkit-details-marker { display: none; }
        .obs-texto { margin-top: 5px; color: #a71d2a; padding-left: 5px; white-space: pre-wrap; font-style: italic; }

        #aviso-assinatura { display: none; background: #dc3545; color: white; text-align: center; padding: 10px; font-weight: bold; border-radius: 5px; margin-bottom: 15px; }
        #overlay-bloqueio { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; background: rgba(0,0,0,0.9); justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; flex-direction: column; text-align: center; color: white; }
        
        #texto-copia-cola { background: #f8f9fa; color: #333; border: 1px solid #ccc; font-family: monospace; }
        .box-pix-recorrente { background: #e8f4f8; border-left: 4px solid #007bff; padding: 15px; margin-top: 15px; text-align: left; border-radius: 5px; }
        .box-pix-recorrente p { margin-top: 0; font-size: 14px; color: #333; line-height: 1.5; }

        table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 14px; }
        th, td { border: 1px solid #ddd; padding: 10px; text-align: left; vertical-align: middle; }
        th { background-color: #f8f9fa; user-select: none; }
        th.sortable:hover { background-color: #e2e6ea; cursor: pointer; }
        th.th-destaque { background-color: #e8f4f8; color: #333; }
        
        .search-wrapper { position: relative; margin-bottom: 15px; }
        .search-wrapper i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #888; }
        .search-wrapper input { padding-left: 40px; margin: 0; }

        .em-destaque { box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.5), 0 0 15px rgba(243, 156, 18, 0.8) !important; transform: scale(1.05); z-index: 9999; position: relative; animation: pulsarDestaque 1.5s infinite; pointer-events: none; }
        @keyframes pulsarDestaque { 0% { transform: scale(1.05); box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.7); } 70% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(243, 156, 18, 0); } 100% { transform: scale(1.05); box-shadow: 0 0 0 0 rgba(243, 156, 18, 0); } }

        /* DARK MODE - CORES APRIMORADAS DO GUIA RÁPIDO */
        body.dark-mode { background-color: #121212; color: #e0e0e0; }
        body.dark-mode .card { background: #1e1e1e; color: #e0e0e0; box-shadow: 0 2px 5px rgba(255,255,255,0.05); }
        body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background: #2c2c2c; border: 1px solid #444; color: #fff; }
        body.dark-mode .modal-content { background: #1e1e1e; color: #e0e0e0; border-color: #444; }
        body.dark-mode .modal-close { color: #888; } body.dark-mode .modal-close:hover { color: #fff; }
        body.dark-mode .lista-pequena, body.dark-mode .item-lista { border-color: #444; }
        body.dark-mode .filtro-visao button { background: #2c2c2c; color: #e0e0e0; }
        body.dark-mode .filtro-visao button.ativo { background: #007bff; color: white; }
        body.dark-mode .navegacao-meses { background: #2c2c2c; }
        body.dark-mode .navegacao-meses button, body.dark-mode .navegacao-meses span { color: #e0e0e0; }
        body.dark-mode .dia-card { background: #1e1e1e; border-color: #444; }
        body.dark-mode .dia-header { background: #2c3e50; }
        body.dark-mode .dia-header.fds { background: #1a252f; }
        
        body.dark-mode #tour-texto { color: #ccc !important; }
        body.dark-mode #tour-titulo { color: #f39c12 !important; }
        
        body.dark-mode .agendamento-item { background: #222; border-color: #333; box-shadow: none; }
        body.dark-mode .hora-badge { background: #333; border-color: #555; color: #e0e0e0; }
        body.dark-mode .lista-servicos-agenda li { color: #ccc; }
        body.dark-mode .lista-servicos-agenda li::before { color: #d1baff; }
        body.dark-mode .telefone-badge { background: #333; color: #ccc; border-color: #555; }
        
        body.dark-mode .agendamento-concluido { background-color: #1a2a1f !important; border-color: #28a745 !important; border-left: 5px solid #28a745 !important; }
        body.dark-mode .card-financeiro { background: #1e1e1e; box-shadow: none; border-color: #28a745; }

        body.dark-mode .info-veiculo { background: #2c2c2c; color: #ccc; border-left-color: #f39c12; }
        body.dark-mode .checkbox-label { color: #e0e0e0; background: #2c2c2c !important; border-color: #444 !important;}
        body.dark-mode .autocomplete-input { background: #2c2c2c; color: #fff; border-color: #444; }
        body.dark-mode .autocomplete-list { background: #1e1e1e; border-color: #444; }
        body.dark-mode .autocomplete-item { border-color: #444; color: #e0e0e0; }
        body.dark-mode .autocomplete-item:hover { background-color: #333; }
        body.dark-mode .autocomplete-item-disabled { color: #666; background-color: #252525; }
        body.dark-mode .obs-encolhida { background: #3a2222; border-left-color: #dc3545; }
        body.dark-mode .obs-texto { color: #ff9999; }
        body.dark-mode .tag-servico { background: #4a306d; color: #d1baff; }
        body.dark-mode #wa-cliente-nome { color: #ccc !important; }
        body.dark-mode .conteudo-dia > div[style*="background: inherit"] { background: #252525 !important; border-color: #444 !important;}
        body.dark-mode th { background-color: #333; border-color: #555;}
        body.dark-mode th.sortable:hover { background-color: #444; }
        body.dark-mode th.th-destaque { background-color: #1a252f; color: #66b2ff; border-left: 2px solid #007bff; border-right: 2px solid #007bff;}
        body.dark-mode td { border-color: #555; }
        body.dark-mode td.td-destaque { background-color: #1a252f; }
        body.dark-mode #texto-copia-cola { background: #252525; color: #e0e0e0; border-color: #555; }
        body.dark-mode .box-cupom { background: #2c2c2c !important; border-color: #444 !important; }
        body.dark-mode .box-pix-recorrente { background: #1a252f; border-left-color: #007bff; }
        body.dark-mode .box-pix-recorrente p { color: #ccc; }
        
        .btn-theme-toggle { position: absolute; top: 15px; right: 15px; width: 38px; height: 38px; padding: 0; margin: 0; border-radius: 50%; font-size: 16px; background: #343a40; color: white; border: 1px solid #555; display: flex; align-items: center; justify-content: center; z-index: 999; }
        .btn-theme-toggle i { margin: 0; }

        #overlay-login { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; backdrop-filter: blur(5px); }
        .login-box { width: 100%; max-width: 400px; text-align: center; }
        .link-acao { color: #007bff; cursor: pointer; text-decoration: underline; }

        .abas-admin { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid #eee; padding-bottom: 10px; }
        .abas-admin button { flex: 1; background: #e9ecef; color: #333; border-radius: 5px; margin: 0; font-size: 13px; }
        .abas-admin button.ativo { background: #343a40; color: white; }
        body.dark-mode .abas-admin { border-bottom-color: #444; }
        body.dark-mode .abas-admin button { background: #2c2c2c; color: #e0e0e0; }
        body.dark-mode .abas-admin button.ativo { background: #f39c12; color: white; }
        
        .termos-box { text-align: left; font-size: 13px; color: #555; max-height: 250px; overflow-y: auto; background: #f8f9fa; padding: 15px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; }
        body.dark-mode .termos-box { background: #2c2c2c; color: #ccc; border-color: #444; }

        .secao-titulo { font-weight: bold; margin-top: 15px; color: #555; border-bottom: 1px solid #ccc; padding-bottom: 5px; margin-bottom: 10px; }
        body.dark-mode .secao-titulo { color: #ccc; border-bottom-color: #444; }
        
        .box-filtro-financeiro { background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #dee2e6; }
        body.dark-mode .box-filtro-financeiro { background: #2c2c2c; border-color: #444; }
        
        /* FOOTER */
        footer { text-align: center; padding: 30px 10px 20px 10px; color: #888; font-size: 13px; border-top: 1px solid #e0e0e0; margin-top: auto; transition: border-color 0.3s; }
        body.dark-mode footer { border-top-color: #333; color: #666;}

        /* ADAPTAÇÕES MOBILE (BEM VINDO) */
        @media (max-width: 400px) {
            #welcome-user { max-width: 90px; font-size: 11px; }
        }

        /* ADAPTAÇÕES MOBILE DA AGENDA */
        @media (max-width: 600px) {
            .grid-2 { grid-template-columns: 1fr !important; gap: 5px; }
            .logo-title { font-size: 34px; }
            .menu-topo { gap: 5px; justify-content: center; }
            .menu-topo button { flex: 1 1 45%; font-size: 12px; padding: 10px 5px; }
            .btn-sair-menu { flex: 1 1 100% !important; max-width: 100% !important; }
            
            .card-financeiro { min-width: 100%; border-left: none; border-top: 5px solid; margin-bottom: 10px; padding: 15px;}
            .card-financeiro:nth-child(1) { border-top-color: #28a745; }
            .card-financeiro:nth-child(2) { border-top-color: #007bff; }
            .card-financeiro:nth-child(3) { border-top-color: #6f42c1; }
            .valor-financeiro { font-size: 24px; }
            
            input, select, textarea { font-size: 16px; padding: 12px; }
            .btn-acao { padding: 12px 5px; font-size: 14px; }
            .btn-concluir-block { padding: 14px; font-size: 16px; }
        }