body {font-family: "Segoe UI",sans-serif;}
.bfc-card {background: white;border-radius: 14px;padding: 20px;max-width: 500px;margin: 0 auto;box-shadow: 0 2px 12px rgba(0,0,0,.1);}
h2 {text-align: center;margin-bottom: 15px;}
.bfc-flex {display: flex;justify-content: space-between;gap: 10px;}
.bfc-group {margin-bottom: 12px;flex: 1;}
.bfc-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 10px;}
.bfc-inline input {width: 48%;margin-right: 4%;}
.bfc-inline input:last-child {margin-right: 0;}
input, select {width: 100%;padding: 6px 10px;border-radius: 8px;border: 1px solid #ccc;}
.bfc-toggle input {display: none;}
.bfc-toggle label {padding: 6px 12px;background: #eee;border-radius: 20px;cursor: pointer;margin-right: 5px;transition: all .3s ease;}
.bfc-toggle input:checked + label {background: #4caf50;color: white;}
.bfc-buttons {display: flex;justify-content: space-between;margin-top: 10px;}
button {flex: 1;margin-right: 8px;padding: 8px;border: none;border-radius: 6px;background: #3498db;color: white;cursor: pointer;transition: background .3s ease;}
button:last-child {margin-right: 0;background: #e74c3c;}
button:hover {opacity: .9;}
.bfc-result {margin-top: 20px;text-align: center;}
.bfc-bar-wrapper {background: #eee;height: 12px;border-radius: 20px;margin-bottom: 8px;overflow: hidden;}
.bfc-bar {height: 100%;width: 0%;background: #3498db;transition: width .5s ease;}
.bfc-stats {font-size: 14px;}
.tag {padding: 2px 8px;font-size: 12px;border-radius: 12px;color: white;background: gray;}
.tag.essential {background: #2ecc71;}
.tag.fitness {background: #27ae60;}
.tag.acceptable {background: #f39c12;}
.tag.obese {background: #e74c3c;}
.metric {display: none;}
@media (max-width: 480px) {.bfc-grid {grid-template-columns: 1fr;}}