/* BMI Calculator Specific Styles */

.bmi-gauge-container { position: relative; height: 180px; margin-bottom: var(--space-4); }
.bmi-score-overlay {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.bmi-score-overlay .score { font-size: 3rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.bmi-score-overlay .category { font-size: 1rem; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; }

.status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.status-item { background: var(--surface); padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--border); }
.status-label { display: block; font-size: var(--font-size-xs); color: var(--text-light); text-transform: uppercase; margin-bottom: 4px; }
.status-value { font-size: var(--font-size-lg); font-weight: 700; color: var(--primary-600); }

.unit-toggle {
  display: flex;
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  padding: 4px;
  margin-bottom: var(--space-6);
}
.unit-toggle-btn {
  flex: 1;
  border: none;
  background: none;
  padding: 8px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: all 0.2s;
  white-space: nowrap;
}
.unit-toggle-btn.active { background: white; color: var(--primary-600); box-shadow: var(--shadow-sm); }

@media (max-width: 480px) {
  .unit-toggle-btn {
    padding: 6px 4px;
    font-size: 0.75rem;
  }
  .status-grid {
      grid-template-columns: 1fr;
  }
}