body{background:linear-gradient(135deg,#667eea,#764ba2);margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f8f9fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;min-height:100vh}.App{margin:0 auto;max-width:1400px;padding:20px}.header{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000d;margin-bottom:30px;padding:40px 20px;text-align:center}.header h1{color:#1a202c;font-size:2.5rem;font-weight:700;margin-bottom:8px}.header p{color:#718096;font-size:1.1rem;font-weight:400}.container{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(500px,1fr))}.section{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000d;padding:28px}.section h2{color:#1a202c;font-size:1.5rem;font-weight:600;margin-bottom:24px}.form-group{margin-bottom:20px}.form-group label{color:#4a5568;display:block;font-size:.9rem;font-weight:500;margin-bottom:8px}.form-group input{border:1px solid #e2e8f0;border-radius:6px;font-size:.95rem;padding:10px 14px;transition:border-color .2s;width:100%}.form-group input:focus{border-color:#3182ce;outline:none}.file-input-wrapper{display:inline-block;overflow:hidden;position:relative;width:100%}.file-input-wrapper input[type=file]{left:-9999px;position:absolute}.file-input-label{align-items:center;background:#f7fafc;border:2px dashed #cbd5e0;border-radius:8px;color:#718096;cursor:pointer;display:flex;font-weight:500;gap:8px;justify-content:center;padding:32px 20px;transition:all .2s}.file-input-label:hover{background:#edf2f7;border-color:#3182ce;color:#3182ce}.preview-image{border-radius:8px;margin-top:12px;max-height:280px;object-fit:contain;width:100%}.button{background:#3182ce;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.95rem;font-weight:600;margin-top:8px;padding:12px 20px;transition:background .2s;width:100%}.button:hover:not(:disabled){background:#2c5aa0}.button:disabled{cursor:not-allowed;opacity:.5}.button-secondary{background:#718096}.button-secondary:hover:not(:disabled){background:#4a5568}.loading{color:#3182ce;font-weight:500;padding:16px;text-align:center}.error{background:#fff5f5;border-left:4px solid #fc8181;color:#c53030}.error,.message{border-radius:4px;font-size:.9rem;margin-top:12px;padding:12px 14px}.message{background:#f0fff4;border-left:4px solid #68d391;color:#276749}.results{margin-top:24px}.results h3{color:#1a202c;font-size:1.2rem;font-weight:600;margin-bottom:16px}.result-item{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:16px;padding:18px}.result-item h3{color:#1a202c;font-size:1.1rem;margin-bottom:10px}.result-item p{color:#4a5568;font-size:.9rem;margin:6px 0}.result-item strong{color:#1a202c}.similarity{color:#3182ce;font-size:1rem;font-weight:700}.match-image{margin-bottom:12px;text-align:center}.match-image img{border:2px solid #e2e8f0;border-radius:8px;max-height:180px;max-width:180px}.webcam-container{margin:16px 0;position:relative;width:100%}.video-wrapper{border-radius:8px;margin:0 auto;max-width:640px;overflow:hidden;position:relative;width:100%}.webcam-video{background:#000;border-radius:8px;display:block;height:auto;width:100%}.webcam-canvas{height:100%!important;left:0;pointer-events:none;position:absolute;top:0;width:100%!important}.capture-buttons{display:flex;gap:8px;margin-top:12px}.tab-buttons{display:flex;gap:8px;margin-bottom:20px}.tab-button{background:#f7fafc;border:1px solid #e2e8f0;border-radius:6px;color:#4a5568;cursor:pointer;flex:1 1;font-size:.9rem;font-weight:600;padding:10px;transition:all .2s}.tab-button.active{background:#3182ce;border-color:#3182ce;color:#fff}.tab-button:hover:not(.active){background:#edf2f7}@media (max-width:768px){.container{grid-template-columns:1fr}.header h1{font-size:2rem}}