:root{--primary-color: #0052cc;--success-color: #00875a;--warning-color: #ff8b00;--error-color: #de350b;--neutral-50: #f4f5f7;--neutral-100: #ebecf0;--neutral-200: #dfe1e6;--neutral-300: #c1c7d0;--neutral-400: #97a0af;--neutral-500: #6b778c;--neutral-600: #42526e;--neutral-700: #253858;--neutral-800: #172b4d;--neutral-900: #091e42}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--neutral-50);color:var(--neutral-800);line-height:1.6}.header{background:#fff;padding:1rem 2rem;box-shadow:0 2px 4px #0000001a;text-align:center}.header h1{color:var(--primary-color);font-size:1.5rem;font-weight:600;margin-bottom:1rem}.progress-bar{max-width:600px;margin:0 auto}.progress-steps{display:flex;justify-content:space-between;margin-bottom:1rem}.step{display:flex;flex-direction:column;align-items:center;position:relative;flex:1}.step-number{width:32px;height:32px;border-radius:50%;background:var(--neutral-200);color:var(--neutral-600);display:flex;align-items:center;justify-content:center;font-weight:600;margin-bottom:.5rem;transition:all .3s ease}.step.active .step-number{background:var(--primary-color);color:#fff}.step.completed .step-number{background:var(--success-color);color:#fff}.step-label{font-size:.8rem;color:var(--neutral-600);text-align:center;transition:color .3s ease}.step.active .step-label{color:var(--primary-color);font-weight:600}.progress-line{height:2px;background:var(--neutral-200);position:relative;margin:0 16px}.progress-fill{height:100%;background:var(--primary-color);transition:width .5s ease;width:0%}.main{padding:1.5rem;max-width:800px;margin:0 auto}.step-screen{display:none;animation:fadeIn .5s ease-in-out}.step-screen.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.step-instructions{background:#fff;padding:1.5rem;border-radius:8px;box-shadow:0 2px 8px #0000001a;margin-top:1rem;text-align:center}.step-instructions h3{color:var(--primary-color);margin-bottom:.5rem;font-size:1.2rem}.step-instructions p{color:var(--neutral-600);margin:0}.camera-section{background:#fff;border-radius:8px;padding:1rem;box-shadow:0 2px 8px #0000001a}.camera-view{position:relative;width:100%;height:400px;background:var(--neutral-100);border-radius:8px;overflow:hidden;margin-bottom:1rem}#video{width:100%;height:100%;object-fit:cover}.detection-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.detection-box{position:absolute;border:2px solid var(--success-color);background:#00875a1a;border-radius:4px}.camera-controls{display:flex;gap:.5rem;justify-content:center}.result-section{background:#fff;border-radius:8px;padding:1rem;box-shadow:0 2px 8px #0000001a}.result-panel h3{color:var(--neutral-700);margin-bottom:1rem;font-size:1.1rem}.result-content{background:var(--neutral-50);padding:1rem;border-radius:6px;margin-bottom:1rem;min-height:100px}.result-item{margin-bottom:.5rem}.result-label{font-weight:600;color:var(--neutral-700)}.result-value{color:var(--neutral-600);word-break:break-all}.upload-section{background:#fff;border-radius:8px;padding:1rem;box-shadow:0 2px 8px #0000001a;transition:all .3s ease}.completion-section{background:#fff;border-radius:8px;padding:2rem;box-shadow:0 2px 8px #0000001a;text-align:center}.completion-content h3{color:var(--success-color);font-size:1.5rem;margin-bottom:1.5rem}.final-result{background:var(--neutral-50);padding:1rem;border-radius:6px;margin-bottom:1rem;text-align:left}.final-image{margin-bottom:1.5rem}.final-image img{max-width:100%;max-height:200px;border-radius:6px;box-shadow:0 2px 8px #0000001a}.completion-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.image-upload h3{color:var(--neutral-700);margin-bottom:1rem;font-size:1.1rem}.upload-area{text-align:center;padding:2rem;border:2px dashed var(--neutral-300);border-radius:8px;margin-bottom:1rem;transition:all .3s ease;background:var(--neutral-50)}.upload-area:hover{border-color:var(--primary-color);background:#f8fbff;transform:translateY(-2px)}.upload-area.show{border-color:var(--primary-color);background:#f0f8ff;animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 #0052cc66}70%{box-shadow:0 0 0 10px #0052cc00}to{box-shadow:0 0 #0052cc00}}.image-preview{text-align:center}.image-preview img{max-width:100%;max-height:200px;border-radius:6px;box-shadow:0 2px 8px #0000001a}.btn{padding:.75rem 1.5rem;border:none;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-block;text-align:center}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:var(--primary-color);color:#fff}.btn-primary:hover:not(:disabled){background:#0065ff;transform:translateY(-1px)}.btn-secondary{background:var(--neutral-200);color:var(--neutral-700)}.btn-secondary:hover:not(:disabled){background:var(--neutral-300)}.btn-outline{background:transparent;color:var(--primary-color);border:1px solid var(--primary-color)}.btn-outline:hover:not(:disabled){background:var(--primary-color);color:#fff}.error-message{position:fixed;top:20px;right:20px;background:var(--error-color);color:#fff;padding:1rem 1.5rem;border-radius:6px;box-shadow:0 4px 12px #de350b4d;z-index:1000;max-width:400px}@media (max-width: 768px){.main{padding:1rem}.camera-view{height:300px}.header{padding:1rem}.header h1{font-size:1.25rem}.progress-steps{flex-wrap:wrap;gap:.5rem}.step-label{font-size:.7rem}.completion-actions{flex-direction:column;align-items:center}}