.calorie-calculator {font-family: Arial,sans-serif;border: 2px solid #ddd;border-radius: 12px;padding: 20px;max-width: 500px;background: white;}
.header-row {display: flex;justify-content: space-between;align-items: center;margin-bottom: 15px;}
.unit-toggle {display: flex;gap: 10px;align-items: center;}
.unit-toggle label {display: flex;align-items: center;gap: 4px;font-size: 14px;}
.calorie-calculator .input-row {display: flex;justify-content: space-between;margin-bottom: 15px;gap: 10px;flex-wrap: wrap;}
.calorie-calculator label {flex: 1;font-size: 14px;}
.calorie-calculator input, .calorie-calculator select {width: 100%;padding: 6px;margin-top: 4px;border-radius: 6px;border: 1px solid #ccc;}
.button-row {display: flex;justify-content: center;gap: 10px;margin-top: 10px;}
button.green {background-color: #4caf50;color: white;padding: 8px 16px;border: none;border-radius: 8px;cursor: pointer;}
button.gray {background-color: #a6acaf;color: white;padding: 8px 16px;border: none;border-radius: 8px;cursor: pointer;}
button:hover {opacity: .9;}
.result {margin-top: 20px;padding: 15px;background-color: #e8f5e9;border-radius: 10px;text-align: center;}
.result h3 {margin-bottom: 10px;}
.chart-container {margin-top: 10px;display: flex;justify-content: center;}
#calorieChart {width: 180px !important;height: 180px !important;}