/* Camera Capture Styles */
.camera-container { position: relative; width: 100%; max-width: 480px; margin: 0 auto; animation: fadeIn 0.3s ease; }
.camera-title { text-align: center; font-size: var(--font-lg); font-weight: 600; margin-bottom: 16px; }
.camera-instruction { text-align: center; color: var(--text-secondary); font-size: var(--font-sm); margin-bottom: 16px; }
.camera-viewfinder { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-xl); overflow: hidden; background: #000000; border: 2px solid var(--border-color); }
.camera-viewfinder video { width: 100%; height: 100%; object-fit: cover; }
.camera-viewfinder.selfie { aspect-ratio: 3/4; }
.camera-viewfinder.selfie video { transform: scaleX(-1); }
.camera-guide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; }
.guide-card-frame { width: 85%; height: 65%; border: 2px dashed rgba(59, 130, 246, 0.6); border-radius: 12px; position: relative; animation: glow 2s ease-in-out infinite; }
.guide-card-frame::before, .guide-card-frame::after { content: ''; position: absolute; width: 24px; height: 24px; border-color: var(--accent-primary); border-style: solid; }
.guide-card-frame::before { top: -2px; left: -2px; border-width: 3px 0 0 3px; border-radius: 4px 0 0 0; }
.guide-card-frame::after { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; border-radius: 0 0 4px 0; }
.guide-face-oval { width: 65%; height: 75%; border: 2px dashed rgba(59, 130, 246, 0.6); border-radius: 50%; animation: glow 2s ease-in-out infinite; }
.camera-controls { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 24px; }
.capture-btn { width: 72px; height: 72px; border-radius: 50%; border: 4px solid var(--accent-primary); background: transparent; cursor: pointer; position: relative; transition: all var(--transition-normal); }
.capture-btn::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--accent-primary); transition: all var(--transition-normal); }
.capture-btn:hover { border-color: #ffffff; transform: scale(1.05); }
.capture-btn:hover::before { background: #ffffff; }
.capture-btn:active { transform: scale(0.95); }
.capture-btn:active::before { background: var(--accent-secondary); }
.camera-preview { position: relative; width: 100%; border-radius: var(--radius-xl); overflow: hidden; border: 2px solid var(--border-color); }
.camera-preview img { width: 100%; display: block; }
.camera-preview.selfie img { transform: scaleX(-1); }
.preview-actions { display: flex; gap: 16px; padding: 20px; justify-content: center; }
.upload-progress { margin-top: 16px; }
.upload-bar { width: 100%; height: 6px; background: var(--bg-tertiary); border-radius: 3px; overflow: hidden; }
.upload-fill { height: 100%; background: var(--accent-gradient); border-radius: 3px; transition: width var(--transition-normal); }
.upload-status { text-align: center; font-size: var(--font-sm); color: var(--text-secondary); margin-top: 8px; }
.capture-steps { display: flex; justify-content: center; gap: 16px; margin-bottom: 24px; }
.capture-step { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-full); font-size: var(--font-xs); font-weight: 500; color: var(--text-tertiary); transition: all var(--transition-normal); }
.capture-step.active { border-color: var(--accent-primary); color: var(--accent-primary); background: rgba(59, 130, 246, 0.1); }
.capture-step.completed { border-color: var(--success); color: var(--success); background: var(--success-bg); }
.capture-step-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
@media (max-width: 768px) {
  .camera-container { max-width: 100%; }
  .capture-steps { flex-wrap: wrap; gap: 8px; }
  .capture-btn { width: 64px; height: 64px; }
}