.macro-card {
            background: #f8fafc;
            border-radius: 16px;
            padding: 1rem;
            text-align: center;
            transition: all 0.2s;
            border: 1px solid #e2e8f0;
        }
        .macro-value {
            font-size: 2rem;
            font-weight: 700;
            color: #2c3e66;
        }
        .macro-unit {
            font-size: 0.9rem;
            color: #5b6e8c;
        }
        .slider-label {
            font-weight: 500;
            margin-top: 0.5rem;
        }
        .nutrition-badge {
            background: #eef2ff;
            border-radius: 40px;
            padding: 0.2rem 0.8rem;
            font-size: 0.8rem;
        }
        .legend-color.protein { background-color: #3b82f6; }
        .legend-color.fat { background-color: #f59e0b; }
        .legend-color.carbs { background-color: #10b981; }
        canvas#macroChart {
            max-height: 220px;
            width: 100%;
        }
        @media (max-width: 768px) {
            .macro-value { font-size: 1.6rem; }
        }