:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;overflow-x:hidden}body{min-width:320px;min-height:100vh}#root{width:100%;height:100%;margin:0;padding:0}*{margin:0;padding:0;box-sizing:border-box}.home-container{min-height:100vh;width:100vw;margin:0;padding:0;background:linear-gradient(135deg,#667eea,#764ba2);position:relative;font-family:Inter,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#222;display:flex;justify-content:center;align-items:center;overflow-x:hidden}.home-container:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(255,255,255,.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(255,255,255,.1) 0%,transparent 50%);pointer-events:none}.mode-selection{width:90%;max-width:1100px;margin:40px auto;text-align:center;background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:64px 48px;border-radius:24px;box-shadow:0 20px 60px #0000004d,0 0 0 1px #fff3;animation:fadeIn .6s ease-in;position:relative;z-index:1}.mode-selection h1{font-size:56px;color:#667eea;margin-bottom:16px;letter-spacing:-1px;font-weight:800}.mode-selection p{font-size:20px;color:#64748b;margin-bottom:40px;font-weight:500}.button-group{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:12px}.content-section{width:90%;max-width:1200px;margin:40px auto;background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:40px;border-radius:24px;box-shadow:0 20px 60px #0000004d,0 0 0 1px #fff3;animation:slideUp .6s ease-out;position:relative;z-index:1}.content-section h2{color:#667eea;margin-bottom:28px;font-size:32px;display:flex;align-items:center;gap:12px;font-weight:700}.content-grid{display:grid;grid-template-columns:380px 1fr;gap:32px;align-items:start}.controls{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:16px;padding:24px;border:1px solid rgba(100,116,139,.1);box-shadow:0 4px 12px #0000000d}.controls .form-group{margin-bottom:20px}.btn{padding:14px 24px;font-size:15px;border:none;border-radius:12px;cursor:pointer;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);text-transform:none;letter-spacing:.3px;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,#ffffff1a,#fff0);transform:translate(-100%);transition:transform .6s}.btn:hover:before{transform:translate(100%)}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;min-width:200px;padding:16px 32px;font-size:16px;box-shadow:0 10px 25px #667eea66;transform:translateY(0)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 15px 35px #667eea80}.btn-secondary{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;min-width:200px;padding:16px 32px;font-size:16px;box-shadow:0 10px 25px #f5576c66;transform:translateY(0)}.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 15px 35px #f5576c80}.btn-back{background:#64748b1a;color:#475569;padding:10px 16px;font-size:14px;margin-bottom:16px;margin-top:15px;border-radius:10px;border:1px solid rgba(100,116,139,.2);font-weight:600}.btn-back:hover{background:#64748b26;border-color:#64748b4d;transform:translate(-2px)}.btn-action{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;width:100%;max-width:280px;padding:14px 28px;font-size:16px;margin-top:20px;align-self:center;box-shadow:0 10px 25px #667eea66;font-weight:600}.btn-action:hover{transform:translateY(-2px);box-shadow:0 15px 35px #667eea80}.btn-action:disabled{opacity:.6;cursor:not-allowed;transform:none}.select-model,.file-input{width:100%;padding:14px 16px;border:2px solid #e2e8f0;border-radius:12px;font-size:16px;transition:all .3s ease;font-family:inherit;background:#fff;color:#1e293b;font-weight:500}.select-model{margin-bottom:15px}.select-model:focus,.file-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a;background:#fafbff}.select-model:hover,.file-input:hover{border-color:#cbd5e1}.form-group label{display:block;margin-bottom:12px;font-weight:600;color:#334155;font-size:18px;letter-spacing:.3px}.upload-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}.btn-camera{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;padding:14px 24px;font-size:16px;box-shadow:0 10px 25px #f5576c66;white-space:nowrap}.btn-camera:hover{transform:translateY(-2px);box-shadow:0 15px 35px #f5576c80}.preview-section,.result-section{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:16px;padding:24px;border:1px solid rgba(100,116,139,.15);display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 12px #0000000d}.preview-image{max-width:100%;max-height:520px;border-radius:12px;box-shadow:0 15px 40px #00000026;margin-bottom:16px;transition:transform .3s ease}.preview-image:hover{transform:scale(1.02)}.result-section h3{color:#10b981;margin-bottom:16px;font-size:24px;font-weight:700}.legend{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:20px 0;padding:20px;background:#fff;border-radius:12px;width:100%;border:1px solid rgba(100,116,139,.15);box-shadow:0 2px 8px #0000000d}.legend p{display:flex;align-items:center;gap:12px;color:#1e293b;font-weight:600;font-size:14px}.legend-red{width:20px;height:20px;background:linear-gradient(135deg,#ef4444,#dc2626);border-radius:6px;box-shadow:0 2px 6px #ef44444d}.legend-orange{width:20px;height:20px;background:linear-gradient(135deg,#fb923c,#f97316);border-radius:6px;box-shadow:0 2px 6px #fb923c4d}.legend-green{width:20px;height:20px;background:linear-gradient(135deg,#10b981,#059669);border-radius:6px;box-shadow:0 2px 6px #10b9814d}.legend-cyan{width:20px;height:20px;background:linear-gradient(135deg,#06b6d4,#0891b2);border-radius:6px;box-shadow:0 2px 6px #06b6d44d}.error-message{background:linear-gradient(135deg,#fef2f2,#fee2e2);color:#991b1b;padding:16px 20px;border-radius:12px;margin-bottom:16px;border-left:4px solid #ef4444;font-weight:600;box-shadow:0 4px 12px #ef444426}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:900px){.home-container{padding:0}.mode-selection{width:95%;padding:32px 24px;margin:20px auto}.mode-selection h1{font-size:36px}.content-section{width:95%;padding:24px 20px;max-width:100%;margin:20px auto}.content-grid{grid-template-columns:1fr;gap:20px}.controls{order:2}.preview-column{order:1}.preview-image{max-height:420px}.btn-action{width:100%;max-width:100%}.button-group{flex-direction:column}.btn-primary,.btn-secondary{width:100%;min-width:auto}.legend{grid-template-columns:1fr;gap:12px}}.camera-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;border-radius:18px;background:#1e1e1e;box-shadow:0 8px 18px #00000040;max-width:420px;margin:30px auto 0}.camera-video{width:100%;max-width:380px;border-radius:16px;background:#000;overflow:hidden;box-shadow:0 6px 14px #0000004d}.buttons{display:flex;gap:1rem;margin-top:2rem}button.button{padding:.7rem 1.4rem;border-radius:12px;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.button.is-primary{background:#4a8cff;color:#fff;border:none;box-shadow:0 4px 10px #4a8cff66}.button.is-primary:hover{background:#3c78e0;transform:translateY(-2px)}.button:not(.is-primary){background:#333;color:#ddd;border:1px solid #444}.button:not(.is-primary):hover{background:#444;transform:translateY(-2px)}@media(max-width:480px){.camera-container{padding:1rem}.buttons{flex-direction:column;width:100%}button.button{width:100%}}