.cc-calculator { max-width: 400px; margin: 20px auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; background: #fafafa; }
.cc-calculator h3 { text-align: center; }
#cc-form label { display: block; margin-bottom: 16px; }
#cc-form input[type="range"] { width: 80%; margin-right: 10px; }
.cc-slider-wrap { display: flex; align-items: center; gap: 10px; }
.cc-slider-value { display: inline-block; min-width: 32px; background: #0073aa; color: #fff; border-radius: 50%; text-align: center; font-weight: bold; padding: 6px 0; font-size: 16px; }
#cc-form input, #cc-form select { width: 100%; padding: 6px; margin-top: 4px; }
#cc-form input[type="number"] { width: 80px; display: inline-block; }
#cc-activity-group label { display: block; margin-bottom: 6px; font-weight: normal; }
#cc-activity-group input[type="radio"] { margin-right: 8px; }
#cc-calculate { background: #0073aa; color: #fff; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; margin-top: 10px; }
#cc-calculate:hover { background: #005177; }
#cc-result { margin-top: 15px; font-weight: bold; text-align: center; }
.cc-slider-ticks {
	position: relative;
	height: 24px;
	margin-top: 2px;
	width: 80%;
}
.cc-slider-tick {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	font-size: 12px;
	color: #333;
	background: #fff;
	padding: 0 2px;
}
#cc-gender-group label {
	display: inline-block;
	margin-right: 16px;
	font-weight: normal;
}
#cc-gender-group input[type="radio"] {
	margin-right: 8px;
}