/* Pet Breed Identifier Styles */
.pet-btn { text-transform: none !important; }
.pet-btn.active { background: var(--gradient-primary) !important; color: white !important; border: none !important; }
.drop-zone { border: 2px dashed var(--color-border); border-radius: var(--radius-lg); padding: var(--space-12); 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); }
.pet-preview { max-width: 300px; max-height: 300px; border-radius: var(--radius-lg); margin: 0 auto; display: block; border: 3px solid var(--color-border); }
.breed-badge { display: inline-block; font-size: var(--text-2xl); font-weight: 800; padding: var(--space-2) var(--space-6); border-radius: var(--radius-full); background: var(--gradient-accent); color: var(--color-bg); }
.confidence-text { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.breed-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-accent); transition: width 0.8s ease; }
.bar-item .bar-fill.top { background: var(--gradient-primary); }
.info-row { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.info-row:last-child { border: none; }
.info-label { min-width: 120px; font-weight: 600; color: var(--color-text-secondary); }
.tips-list { list-style: none; padding: 0; }
.tips-list li { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-secondary); }
.tips-list li:last-child { border: none; }
.tips-list li::before { content: '🐾 '; }