html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #F4F4F5;
            overflow-x: hidden;
        }

        h1,
        h2,
        h3,
        h4,
        .font-marca {
            font-family: 'Montserrat', sans-serif;
        }

        .kpi-card {
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }

        .kpi-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
        }

        /* Grades de cards com até 4 por linha: linhas incompletas (2 ou 3) esticam pra preencher o espaço;
           quando sobra só 1 card na linha, ele fica menor (metade) e centralizado em vez de esticar 100%.
           O tamanho "solo" é calculado em JS (updateSoloKpiCards), pois depende de quantos cards
           realmente caem em cada linha após ocultar/exibir via Personalização de Layout. */
        .kpi-flex-grid {
            display: flex;
            flex-wrap: wrap;
        }

        .kpi-flex-grid>.kpi-flex-item {
            flex: 1 1 100%;
        }

        @media (min-width: 640px) {
            .kpi-flex-grid>.kpi-flex-item {
                flex-basis: calc(50% - 0.5rem);
            }
        }

        @media (min-width: 768px) {
            .kpi-flex-grid>.kpi-flex-item {
                flex-basis: calc(50% - 0.75rem);
            }
        }

        @media (min-width: 1024px) {
            .kpi-flex-grid>.kpi-flex-item {
                flex-basis: calc(25% - 1.125rem);
            }

            /* Variante para seções limitadas a 3 por linha (ex: Performance de Campanha) */
            .kpi-flex-grid.kpi-flex-grid--3col>.kpi-flex-item {
                flex-basis: calc(33.3333% - 1rem);
            }
        }

        .kpi-flex-grid>.kpi-flex-item.kpi-flex-item--solo {
            flex-grow: 0;
            flex-shrink: 0;
            margin-left: auto;
            margin-right: auto;
        }

        @media (min-width: 640px) {
            .kpi-flex-grid>.kpi-flex-item.kpi-flex-item--solo {
                flex-basis: calc(50% - 0.5rem);
                max-width: calc(50% - 0.5rem);
            }
        }

        @media (min-width: 768px) {
            .kpi-flex-grid>.kpi-flex-item.kpi-flex-item--solo {
                flex-basis: calc(50% - 0.75rem);
                max-width: calc(50% - 0.75rem);
            }
        }

        .fade-in {
            animation: fadeIn 0.4s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #D4D4D8;
            border-radius: 0px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #A1A1AA;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #3f3f46;
        }

        .flatpickr-day.selected,
        .flatpickr-day.startRange,
        .flatpickr-day.endRange {
            background: #e30d68 !important;
            border-color: #e30d68 !important;
        }

        .flatpickr-day.inRange {
            box-shadow: -5px 0 0 #fde7f0, 5px 0 0 #fde7f0 !important;
            background: #fde7f0 !important;
        }

        /* Quill Custom Styles */
        .ql-toolbar.ql-snow {
            border-color: #e5e7eb !important;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            background: white;
        }

        .ql-container.ql-snow {
            border-color: #e5e7eb !important;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            background: white;
            font-family: 'Inter', sans-serif;
        }

        .ql-editor {
            min-height: 120px;
            font-size: 0.875rem;
        }

        .ql-editor p {
            margin-bottom: 0.5rem;
        }

        /* List Styles for Dashboard View */
        .rich-text-content ul {
            list-style-type: disc;
            padding-left: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .rich-text-content ol {
            list-style-type: decimal;
            padding-left: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .rich-text-content li {
            margin-bottom: 0.25rem;
        }

        /* Restaura o Negrito e Itálico que o Tailwind CSS remove por padrão */
        .rich-text-content strong,
        .rich-text-content b {
            font-weight: 700 !important;
            color: #111111;
        }

        .rich-text-content em,
        .rich-text-content i {
            font-style: italic !important;
        }

        .rich-text-content p {
            margin-bottom: 0.75rem;
            line-height: 1.6;
        }

        .rich-text-content p:last-child {
            margin-bottom: 0;
        }

        /* Collapse/Expand for Otimizações */
        .collapsed-content {
            max-height: 180px;
            overflow: hidden;
            position: relative;
        }

        .collapsed-content::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 80px;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
            pointer-events: none;
        }

        .expanded-content {
            max-height: none;
            overflow: visible;
        }

        /* Quill Custom Styles */
        .ql-toolbar.ql-snow {
            border-color: #e5e7eb !important;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            background: white;
        }

        .ql-container.ql-snow {
            border-color: #e5e7eb !important;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            background: white;
            font-family: 'Inter', sans-serif;
        }

        .ql-editor {
            min-height: 120px;
            font-size: 0.875rem;
        }

        .ql-editor p {
            margin-bottom: 0.5rem;
        }

        /* List Styles for Dashboard View */
        .rich-text-content ul {
            list-style-type: disc;
            padding-left: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .rich-text-content ol {
            list-style-type: decimal;
            padding-left: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .rich-text-content li {
            margin-bottom: 0.25rem;
        }

        /* Restaura o Negrito e Itálico que o Tailwind CSS remove por padrão */
        .rich-text-content strong,
        .rich-text-content b {
            font-weight: 700 !important;
            color: #111111;
        }

        .rich-text-content em,
        .rich-text-content i {
            font-style: italic !important;
        }

        .rich-text-content p {
            margin-bottom: 0.75rem;
            line-height: 1.6;
        }

        .rich-text-content p:last-child {
            margin-bottom: 0;
        }

        /* Collapse/Expand for Otimizações */

        /* Animação da Barra de Progresso */
        .progress-bar-inner {
            transition: width 1s cubic-bezier(0.25, 0.1, 0.25, 1);
        }

        /* Animação de Fade-in ao rolar a página */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        }

        .animate-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Efeito Bounce Sutil e Intermitente para a Logo */
        @keyframes logoBounceIntermittent {
            0%, 85%, 100% { transform: translateY(0); }
            90% { transform: translateY(-8px); }
            95% { transform: translateY(-3px); }
        }
        .animate-logo-bounce {
            animation: logoBounceIntermittent 6s ease-in-out infinite;
        }