/* Baby Face Generator Styles */
.parent-uploads { display: flex; align-items: center; gap: var(--space-4); justify-content: center; }
.upload-slot { width: 220px; text-align: center; }
.drop-zone { border: 2px dashed var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); cursor: pointer; transition: all var(--transition-base); }
.drop-zone:hover { border-color: var(--color-primary); background: var(--color-surface); }
.drop-icon { font-size: 2.5rem; margin-bottom: var(--space-2); }
.plus-sign { font-size: var(--text-4xl); color: var(--color-primary); font-weight: 800; }
.preview-canvas { width: 100%; max-height: 200px; border-radius: var(--radius-md); object-fit: contain; margin-top: var(--space-4); }
.baby-preview { max-width: 300px; max-height: 300px; border-radius: var(--radius-lg); margin: 0 auto; display: block; border: 4px solid var(--color-accent); box-shadow: 0 0 30px var(--color-accent-glow); }
.baby-traits { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.trait-chip { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); }
@media (max-width: 600px) { .parent-uploads { flex-direction: column; } .plus-sign { font-size: var(--text-2xl); } .upload-slot { width: 100%; } }