html, body { height: 100%; }
        body {
            font-family: 'Inter', sans-serif;
            background-color: #1E2428; 
            color: #f3f4f6;
            display: flex;
            flex-direction: column;
        }
        .mono { font-family: 'Roboto Mono', monospace; }

        .chart-container {
            position: relative;
            width: 100%;
            min-height: 320px;
            aspect-ratio: 16 / 10;
            max-height: 500px;
        }
        .metabolic-chart-container {
            position: relative;
            width: 100%;
            min-height: 320px;
            aspect-ratio: 16 / 10;
            max-height: 500px;
        }
        .intensity-chart-container {
            position: relative;
            width: 100%;
            min-height: 320px;
            aspect-ratio: 16 / 10;
            max-height: 500px;
        }

        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type=number] { -moz-appearance: textfield; }

        .lang-btn { transition: background-color 0.2s, color 0.2s; }
        .lang-btn-active { background-color: #2dd4bf; color: #1A202C; }
        .lang-btn-inactive { background-color: #374151; color: #d1d5db; }
        
        #cookie-consent-banner { transition: transform 0.3s ease-in-out; }

        @media (max-width: 1279px) and (orientation: portrait) {
            .main-layout-grid {
                grid-template-columns: repeat(1, minmax(0, 1fr));
            }
            .main-layout-grid > * {
                grid-column: 1 / -1;
            }
        }
		.grid .flex > span, .grid .flex > label {
            white-space: nowrap;
        }
        
        #calculate-btn:disabled {
            background-color: #374151;
            color: #9ca3af;
            cursor: not-allowed;
        }
        /* Estilos para as Abas */
        .tab-btn {
            border-bottom: 3px solid transparent;
            transition: all 0.2s ease-in-out;
        }
        .tab-btn-active {
            border-bottom-color: #2dd4bf; /* Teal color */
            color: #f3f4f6; /* White text */
        }
        .tab-btn-inactive {
            color: #6b7280; /* Gray text */
        }

        /* --- ESTILOS PARA A ABA DE CLASSIFICAÇÃO --- */
        .classification-card {
            background-color: #282E33; /* Mesma cor de fundo do painel */
            padding: 24px;
            width: 100%;
        }
        .classification-card .card-title {
            font-size: 1.125rem;
            font-weight: 700;
            margin: 0 0 24px 0;
            color: #ffffff;
            text-align: center;
        }
        #category-bar-tooltip {
            position: absolute;
            top: 100%; /* Posiciona abaixo da barra */
            left: 50%;
            transform: translateX(-50%);
            margin-top: 12px; /* Espaçamento entre a barra e o tooltip */
            transition: opacity 0.2s;
            white-space: nowrap;
            z-index: 10;
        }
        #user-wkg-marker {
            box-shadow: 0 0 5px rgba(255, 255, 255, 0.7), 0 0 10px rgba(255, 255, 0.5);
            z-index: 5;
        }
        #user-wkg-marker > div {
             box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
        }
        
        /* NOVOS ESTILOS PARA FEEDBACK DE DADOS OBSOLETOS */
        #results-panel.stale {
            opacity: 0.6;
            filter: blur(1px);
        }

        @keyframes glow {
            0%, 100% {
                box-shadow: 0 0 4px rgba(45, 212, 191, 0.6);
            }
            50% {
                box-shadow: 0 0 16px rgba(45, 212, 191, 1);
            }
        }
        .glow-on-recalc {
            animation: glow 2s ease-in-out infinite;
        }

        /* --- NOVOS ESTILOS PARA OS CARDS E POPOVERS ---
        Esta seção foi adicionada para controlar a aparência dos novos cards e
        garantir que os popovers se comportem bem em telas menores.
        */
        .metric-card-new .truncate {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 90%; /* Garante que o texto não estoure o card */
        }

        /* Estilo base para todos os popovers para garantir consistência e responsividade */
        [id$="-popover"], [id$="-popover-new"] {
            max-width: 90vw; /* Impede que o popover seja maior que 90% da tela */
            width: 256px; /* Define uma largura padrão */
        }