*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#f5f5f5}#root{height:100%;display:flex;flex-direction:column}.app-shell{height:100vh;display:flex;flex-direction:column;max-width:100vw;overflow:hidden}.top-bar{background:#fff;border-bottom:1px solid #e0e0e0;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;min-height:64px;position:relative;z-index:10}.app-title{font-size:20px;font-weight:600;color:#1a1a1a}.status-chip{padding:6px 12px;border-radius:16px;font-size:12px;font-weight:500;text-transform:uppercase}.status-chip.ready{background:#e8f5e8;color:#2e7d32}.status-chip.blocked{background:#fff3e0;color:#f57c00}.status-chip.captured{background:#e3f2fd;color:#1976d2}.status-chip.analyzing{background:#f3e5f5;color:#7b1fa2}.status-chip.results{background:#e8f5e8;color:#2e7d32}.status-chip.error{background:#ffebee;color:#d32f2f}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.panel{flex:1;display:flex;flex-direction:column;padding:20px;overflow:auto}.setup-panel{justify-content:center;max-width:400px;margin:0 auto;width:100%}.form-group{margin-bottom:24px}.form-label{display:block;margin-bottom:8px;font-weight:500;color:#333}.form-select,.form-input{width:100%;padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px;font-size:16px;background:#fff;transition:border-color .2s}.form-select:focus,.form-input:focus{outline:none;border-color:#2196f3}.toggle-group{display:flex;align-items:center;gap:12px}.toggle{position:relative;width:48px;height:24px;background:#ccc;border-radius:12px;cursor:pointer;transition:background .2s}.toggle.checked{background:#2196f3}.toggle-thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s}.toggle.checked .toggle-thumb{transform:translate(24px)}.accordion{border:1px solid #e0e0e0;border-radius:8px;margin-bottom:24px}.accordion-header{padding:16px;background:#f9f9f9;border:none;width:100%;text-align:left;font-size:16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.accordion-content{padding:16px;border-top:1px solid #e0e0e0;display:none}.accordion.expanded .accordion-content{display:block}.accordion-arrow{transform:rotate(0);transition:transform .2s}.accordion.expanded .accordion-arrow{transform:rotate(180deg)}.btn{padding:16px 24px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center;text-decoration:none;display:inline-block;min-height:56px}.btn-primary{background:#2196f3;color:#fff}.btn-primary:hover{background:#1976d2}.btn-secondary{background:#f5f5f5;color:#333;border:2px solid #e0e0e0}.btn-secondary:hover{background:#eee}.btn-danger{background:#f44336;color:#fff}.btn-danger:hover{background:#d32f2f}.btn:disabled{opacity:.6;cursor:not-allowed}.camera-panel-fullscreen{position:fixed;inset:0;background:#000;overflow:hidden;z-index:100}.camera-video-fullscreen{width:100vw;height:100vh;object-fit:cover;position:absolute;top:0;left:0}.back-chevron{position:absolute;top:20px;left:20px;background:#00000080;border:none;color:#fff;width:44px;height:44px;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;cursor:pointer;z-index:200;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s}.back-chevron:hover{background:#000000b3}.camera-overlay-fullscreen{position:absolute;inset:0;z-index:102;-webkit-user-select:none;user-select:none}.adjustable-frame{position:absolute;pointer-events:auto;z-index:102}.adjustable-frame .frame-border{position:absolute;inset:0;border:2px solid rgba(255,255,255,.8);border-radius:8px;cursor:move;pointer-events:auto;background:#ffffff05}.adjustable-frame .frame-border:hover{border-color:#fff;background:#ffffff0d}.adjustable-frame .center-line{position:absolute;background-color:#fff9}.adjustable-frame .center-line.horizontal{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}.adjustable-frame .center-line.vertical{left:50%;top:0;bottom:0;width:1px;transform:translate(-50%)}.corner-handle{position:absolute;width:24px;height:24px;background:#ffffffe6;border:2px solid #007AFF;border-radius:50%;cursor:nw-resize;pointer-events:auto;z-index:103;box-shadow:0 2px 8px #0000004d;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .2s ease}.corner-handle.bottom-right{bottom:-12px;right:-12px}.corner-handle:active{transform:scale(1.2);background:#fff;box-shadow:0 4px 12px #0006}.camera-controls-fullscreen{position:absolute;bottom:40px;left:50%;transform:translate(-50%);z-index:200}.shutter-button-large{width:80px;height:80px;background:#fff;border:4px solid rgba(255,255,255,.3);border-radius:50%;cursor:pointer;box-shadow:0 4px 20px #0000004d;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.shutter-button-large:active{transform:scale(.95);background:#ffffffe6}.camera-panel-fullscreen .camera-panel,.camera-panel-fullscreen .camera-container,.camera-panel-fullscreen .camera-video{display:none}.camera-panel{padding:0;position:relative}.camera-container{position:relative;flex:1;background:#000;overflow:hidden}.camera-video{width:100%;height:100%;object-fit:cover}.camera-overlay{position:absolute;inset:0;pointer-events:none}.shelf-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;height:60%;border:2px solid rgba(255,255,255,.8);border-radius:8px}.shelf-frame:before,.shelf-frame:after{content:"";position:absolute;width:20px;height:20px;border:3px solid #ffffff}.shelf-frame:before{top:-3px;left:-3px;border-right:none;border-bottom:none}.shelf-frame:after{top:-3px;right:-3px;border-left:none;border-bottom:none}.shelf-frame-corner-br,.shelf-frame-corner-bl{position:absolute;width:20px;height:20px;border:3px solid #ffffff}.shelf-frame-corner-br{bottom:-3px;right:-3px;border-left:none;border-top:none}.shelf-frame-corner-bl{bottom:-3px;left:-3px;border-right:none;border-top:none}.center-line{position:absolute;top:50%;left:10%;right:10%;height:1px;background:#fffc;transform:translateY(-50%)}.camera-tips{position:absolute;bottom:120px;left:20px;right:20px;color:#fff;text-align:center;font-size:14px;text-shadow:0 1px 3px rgba(0,0,0,.8)}.camera-controls{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);display:flex;justify-content:center;align-items:center;gap:20px}.shutter-button{width:80px;height:80px;border-radius:50%;background:#fff;border:4px solid #2196f3;cursor:pointer;transition:transform .1s;display:flex;align-items:center;justify-content:center}.shutter-button:active{transform:scale(.95)}.shutter-button:before{content:"";width:60px;height:60px;background:#2196f3;border-radius:50%}.back-button{background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.5);padding:12px 20px;border-radius:8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.camera-error{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;background:#f5f5f5}.camera-error-icon{font-size:48px;margin-bottom:16px;opacity:.5}.camera-error h3{margin-bottom:12px;color:#333}.camera-error p{color:#666;margin-bottom:24px;max-width:300px}.camera-troubleshooting{background:#fff;border-radius:8px;padding:20px;margin:20px 0;text-align:left;max-width:400px;box-shadow:0 2px 4px #0000001a}.camera-troubleshooting h4{margin-bottom:12px;color:#333;font-size:16px}.camera-troubleshooting ol{margin:0;padding-left:20px}.camera-troubleshooting li{margin-bottom:8px;color:#555;font-size:14px;line-height:1.4}.camera-error-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.captured-panel{align-items:center;justify-content:center;gap:20px}.captured-preview{max-width:100%;max-height:70vh;border-radius:8px;box-shadow:0 4px 12px #0000001a}.captured-controls{display:flex;gap:20px;width:100%;max-width:400px;padding:0 16px}.captured-controls .btn{flex:1;padding:18px 24px;font-size:16px}.analyzing-panel{align-items:center;justify-content:center;text-align:center}.spinner{width:48px;height:48px;border:4px solid #f3f3f3;border-top:4px solid #2196f3;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:24px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.results-panel{overflow:auto}.annotated-image{width:100%;max-height:40vh;object-fit:contain;border-radius:8px;margin-bottom:24px;box-shadow:0 2px 8px #0000001a}.kpi-section{text-align:center;margin-bottom:24px;padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.kpi-number{font-size:48px;font-weight:700;color:#2196f3;display:block}.kpi-label{font-size:14px;color:#666;margin-top:8px}.results-table{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 4px #0000001a;margin-bottom:24px}.results-table th,.results-table td{padding:12px 16px;text-align:left;border-bottom:1px solid #f0f0f0}.results-table th{background:#f9f9f9;font-weight:600;color:#333}.results-table tr:last-child td{border-bottom:none}.osa-status{font-size:18px}.osa-available{color:#4caf50}.osa-unavailable{color:#f44336}.results-controls{display:flex;gap:20px;width:100%;max-width:400px;padding:0 16px}.results-controls .btn{flex:1;padding:18px 24px;font-size:16px}.image-preview-modal{position:fixed;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;cursor:pointer}.image-preview-container{position:relative;max-width:95vw;max-height:95vh;display:flex;align-items:center;justify-content:center}.image-preview-full{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 8px 32px #0000004d;cursor:default}.image-preview-close{position:absolute;top:-10px;right:-10px;width:40px;height:40px;background:#ffffffe6;border:none;border-radius:50%;font-size:24px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#333;box-shadow:0 2px 8px #0000004d;transition:all .2s ease}.image-preview-close:hover{background:#fff;transform:scale(1.1)}.annotated-image.clickable{transition:all .2s ease}.annotated-image.clickable:hover{opacity:.9;transform:scale(1.02)}.error-panel{align-items:center;justify-content:center;text-align:center;max-width:400px;margin:0 auto}.error-card{background:#ffebee;border:1px solid #ffcdd2;border-radius:8px;padding:24px;margin-bottom:24px}.error-title{color:#d32f2f;margin-bottom:12px;font-size:18px}.error-message{color:#666;margin-bottom:16px}.error-details{border-top:1px solid #ffcdd2;padding-top:16px;margin-top:16px}.error-details summary{cursor:pointer;color:#d32f2f;font-weight:500}.error-details pre{background:#fafafa;padding:12px;border-radius:4px;margin-top:12px;font-size:12px;overflow-x:auto;text-align:left}.error-controls{display:flex;flex-direction:column;gap:12px;width:100%}@media(max-width:480px){.top-bar{padding:12px 16px}.app-title{font-size:18px}.panel{padding:16px}.btn{padding:14px 20px;font-size:14px;min-height:48px}.error-controls{gap:8px}.camera-controls{padding:16px}.shutter-button{width:70px;height:70px}.shutter-button:before{width:50px;height:50px}}