/* Height Comparison Styles */
.form-group { display: flex; flex-direction: column; min-width: 140px; }
.preset-btn { font-size: var(--text-xs) !important; padding: var(--space-2) var(--space-3) !important; text-transform: none !important; }

.comparison-area { position: relative; min-height: 400px; padding: var(--space-8); overflow: hidden; }

.ruler {
  position: absolute; left: 0; top: var(--space-8); bottom: var(--space-8); width: 50px;
  border-right: 2px solid var(--color-border); display: flex; flex-direction: column-reverse;
}
.ruler-mark { position: absolute; left: 0; width: 100%; font-size: 10px; color: var(--color-text-muted); text-align: right; padding-right: 8px; border-bottom: 1px solid var(--color-border); }

.figures-row { display: flex; align-items: flex-end; gap: var(--space-6); padding-left: 60px; min-height: 350px; }

.figure {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  animation: slideUp 0.5s ease forwards; position: relative;
}
.figure-body {
  width: 60px; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-sm);
  position: relative; transition: height 0.5s ease;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 8px;
}
.figure-head {
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: -4px;
  border: 2px solid rgba(255,255,255,0.3); position: relative; z-index: 1;
}
.figure-name { font-size: var(--text-xs); font-weight: 600; color: var(--color-text); max-width: 80px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.figure-height { font-size: var(--text-xs); color: var(--color-text-muted); font-family: var(--font-mono); }

.empty-state { color: var(--color-text-muted); text-align: center; width: 100%; padding: var(--space-16) 0; font-size: var(--text-lg); }

.people-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
.person-card { display: flex; align-items: center; gap: var(--space-3); }
.person-card .color-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.person-card .info { flex: 1; }
.person-card .name { font-weight: 600; font-size: var(--text-sm); }
.person-card .height { font-size: var(--text-xs); color: var(--color-text-muted); font-family: var(--font-mono); }
.person-card .remove-btn { cursor: pointer; color: var(--color-error); background: none; border: none; font-size: var(--text-lg); }

@media (max-width: 768px) { .figures-row { gap: var(--space-3); } .figure-body { width: 40px; } }