/* Face Shape Detector Styles */
.drop-zone { border: 2px dashed var(--color-border); border-radius: var(--radius-lg); padding: var(--space-16); text-align: center; cursor: pointer; transition: all var(--transition-base); }
.drop-zone:hover { border-color: var(--color-primary); background: var(--color-surface); }
.drop-icon { font-size: 3rem; margin-bottom: var(--space-4); }
.drop-zone .hint { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); }
.face-preview { max-width: 300px; max-height: 300px; border-radius: var(--radius-lg); margin: 0 auto var(--space-4); display: block; border: 3px solid var(--color-border); }
.shape-badge { display: inline-block; font-size: var(--text-3xl); font-weight: 800; padding: var(--space-2) var(--space-6); border-radius: var(--radius-full); background: var(--gradient-primary); color: white; }
.confidence { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.shape-bars .bar-item { margin-bottom: var(--space-3); }
.bar-item .bar-label { display: flex; justify-content: space-between; font-size: var(--text-sm); margin-bottom: 4px; }
.bar-item .bar-name { font-weight: 600; }
.bar-item .bar-pct { font-family: var(--font-mono); color: var(--color-text-muted); }
.bar-item .bar-track { height: 8px; background: var(--color-surface); border-radius: var(--radius-full); overflow: hidden; }
.bar-item .bar-fill { height: 100%; border-radius: var(--radius-full); background: var(--gradient-primary); transition: width 0.8s ease; }
.bar-item .bar-fill.top { background: var(--gradient-accent); }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.rec-card { text-align: center; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.rec-card .icon { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.rec-card .name { font-size: var(--text-sm); font-weight: 600; }