* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { background-color: #f5f7fb; color: #2d3748; padding: 20px; }
.container { max-width: 1200px; margin: 0 auto; }
header { margin-bottom: 30px; text-align: center; }
header h1 { color: #1a202c; margin-bottom: 8px; }
header p { color: #718096; }

.workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 768px) { .workspace { grid-template-columns: 1fr; } }

.card { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); margin-bottom: 24px; }
h3 { margin-bottom: 16px; font-size: 1.1rem; color: #4a5568; border-bottom: 1px solid #edf2f7; padding-bottom: 8px; }

.tab-system { display: flex; gap: 10px; margin-bottom: 16px; }
.tab-btn { flex: 1; padding: 10px; background: #e2e8f0; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }
.tab-btn.active { background: #4a5568; color: white; }

.video-container { position: relative; width: 100%; background: #000; border-radius: 8px; overflow: hidden; aspect-ratio: 4/5; }
video { width: 100%; height: 100%; object-fit: cover; }
.overlay-guide { position: absolute; top: 10%; left: 15%; width: 70%; height: 80%; border: 2px dashed rgba(255,255,255,0.5); border-radius: 50% 50% 40% 40%; pointer-events: none; }

.camera-controls { display: flex; gap: 12px; margin-top: 12px; }
button { padding: 12px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; border: none; transition: background 0.2s; width: 100%; }
.primary-btn { background: #3182ce; color: white; }
.secondary-btn { background: #edf2f7; color: #4a5568; }
.danger-btn { background: #fed7d7; color: #c53030; margin-top: 10px; }
.action-btn { background: #48bb78; color: white; font-size: 1.1rem; padding: 16px; margin-top: 10px; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.form-group { margin-bottom: 16px; }
label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.9rem; }
select, input[type="file"] { width: 100%; padding: 10px; border: 1px solid #cbd5e0; border-radius: 6px; background: white; }

.preview-box img, .result-display-area img { width: 100%; border-radius: 8px; object-fit: contain; max-height: 500px; }
.result-display-area { background: #edf2f7; min-height: 400px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; }

.spinner-container { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.spinner { width: 50px; height: 50px; border: 5px solid #e2e8f0; border-top-color: #3182ce; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }
select, input[type="file"], input[type="text"] { 
    width: 100%; 
    padding: 10px; 
    border: 1px solid #cbd5e0; 
    border-radius: 6px; 
    background: white; 
}