:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;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}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{box-sizing:border-box;margin:0;padding:0}:root{--primary-color: #4ECDC4;--primary-dark: #3BA99C;--secondary-color: #95A5A6;--danger-color: #E74C3C;--success-color: #27AE60;--background-color: #1a1a2e;--surface-color: #16213e;--text-color: #ECEFF1;--text-secondary: #B0BEC5;--border-radius: 12px;--shadow: 0 4px 6px rgba(0, 0, 0, .3)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background-color:var(--background-color);color:var(--text-color);line-height:1.6}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{padding:1rem;text-align:center;background:var(--surface-color);border-bottom:1px solid rgba(255,255,255,.1)}.app-header h1{font-size:1.5rem;margin-bottom:.25rem}.app-header .subtitle{font-size:.875rem;color:var(--text-secondary);margin-bottom:.5rem}.status-badge{display:inline-block;padding:.25rem .75rem;border-radius:20px;font-size:.75rem;font-weight:600}.status-badge.healthy{background:#27ae6033;color:var(--success-color)}.status-badge.unhealthy{background:#e74c3c33;color:var(--danger-color)}.model-selector{margin-top:1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}.model-selector label{font-size:.875rem;color:var(--text-secondary)}.model-selector select{padding:.5rem 1rem;border-radius:var(--border-radius);border:1px solid rgba(255,255,255,.2);background:var(--surface-color);color:var(--text-color);font-size:1rem;cursor:pointer;min-width:200px}.model-selector select:hover{border-color:var(--primary-color)}.model-selector select:disabled{opacity:.5;cursor:not-allowed}.model-description{font-size:.75rem;color:var(--text-secondary);text-align:center;max-width:300px}.app-main{flex:1;padding:1rem;max-width:600px;margin:0 auto;width:100%}.app-footer{padding:1rem;text-align:center;font-size:.75rem;color:var(--text-secondary);background:var(--surface-color)}button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border:none;border-radius:var(--border-radius);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;background:var(--primary-color);color:#fff}button:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-1px)}button:disabled{opacity:.5;cursor:not-allowed}button.secondary{background:var(--secondary-color)}button.secondary:hover:not(:disabled){background:#7f8c8d}button.primary{background:var(--primary-color)}.reset-button{width:100%;margin-top:1rem;padding:1rem}.camera-capture{display:flex;flex-direction:column;gap:1rem}.webcam-container{position:relative;border-radius:var(--border-radius);overflow:hidden;background:#000;box-shadow:var(--shadow)}.webcam{width:100%;display:block}.frame-guide-overlay{position:absolute;inset:0;pointer-events:none;z-index:10}.frame-dim{position:absolute;background:#0009;pointer-events:none}.frame-dim-top{top:0;left:0;right:0}.frame-dim-left{left:0}.frame-dim-right{right:0}.frame-dim-bottom{left:0;right:0;bottom:0}.frame-guide-box{position:absolute;border:3px solid var(--primary-color);border-radius:8px;box-shadow:0 0 0 2px #00000080,inset 0 0 0 2px #4ecdc44d;cursor:move;pointer-events:auto;transition:border-color .2s}.frame-guide-box:hover{border-color:#ffe66d}.frame-handle{position:absolute;width:24px;height:24px;background:var(--primary-color);border:2px solid white;border-radius:50%;pointer-events:auto;z-index:11}.frame-handle:hover{background:#ffe66d;transform:scale(1.2)}.frame-handle-nw{top:-12px;left:-12px;cursor:nw-resize}.frame-handle-ne{top:-12px;right:-12px;cursor:ne-resize}.frame-handle-sw{bottom:-12px;left:-12px;cursor:sw-resize}.frame-handle-se{bottom:-12px;right:-12px;cursor:se-resize}.frame-handle-e{top:50%;right:-12px;transform:translateY(-50%);cursor:e-resize}.frame-handle-w{top:50%;left:-12px;transform:translateY(-50%);cursor:w-resize}.frame-label{position:absolute;bottom:-32px;left:50%;transform:translate(-50%);background:#000c;color:var(--primary-color);padding:4px 12px;border-radius:4px;font-size:.75rem;font-weight:600;white-space:nowrap;pointer-events:none}@media(max-width:768px){.frame-handle{width:32px;height:32px}.frame-handle-nw{top:-16px;left:-16px}.frame-handle-ne{top:-16px;right:-16px}.frame-handle-sw{bottom:-16px;left:-16px}.frame-handle-se{bottom:-16px;right:-16px}.frame-handle-e{right:-16px}.frame-handle-w{left:-16px}.frame-label{bottom:-36px}}.preview-container{border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow)}.preview-image{width:100%;display:block}.controls{display:flex;justify-content:center;align-items:center;gap:1rem}.capture-button{width:70px;height:70px;border-radius:50%;font-size:1.75rem;padding:0;background:var(--primary-color);box-shadow:0 0 0 4px #4ecdc44d}.capture-button:hover:not(:disabled){transform:scale(1.05)}.file-label{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:var(--secondary-color);border-radius:var(--border-radius);cursor:pointer;font-weight:600;transition:background .2s}.file-label:hover{background:#7f8c8d}.hidden-input{display:none}button.flash-active{background:#f39c12;box-shadow:0 0 10px #f39c1280}button.flash-active:hover:not(:disabled){background:#e67e22}.flash-indicator{position:absolute;top:10px;right:10px;background:#f39c12e6;color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.secondary-controls{margin-top:.5rem;justify-content:center}.detection-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}button.live-active{background:#e74c3c;box-shadow:0 0 15px #e74c3c80;animation:live-pulse 1s infinite}button.live-active:hover:not(:disabled){background:#c0392b}@keyframes live-pulse{0%,to{box-shadow:0 0 15px #e74c3c80}50%{box-shadow:0 0 25px #e74c3ccc}}.live-stats{position:absolute;top:10px;left:10px;display:flex;gap:.5rem;flex-wrap:wrap}.live-badge{background:#e74c3c;color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.7rem;font-weight:700;animation:blink 1s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.6}}.fps,.latency,.detections-count{background:#000000b3;color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.7rem;font-weight:600}.fps{color:#2ecc71}.latency{color:#f39c12}.detections-count{color:#3498db}.live-detections-list{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:.5rem}.live-detection-tag{padding:.25rem .75rem;border-radius:20px;font-size:.75rem;font-weight:600;color:#000;text-transform:capitalize}.more-detections{padding:.25rem .75rem;border-radius:20px;font-size:.75rem;font-weight:600;background:var(--secondary-color);color:#fff}.camera-error{text-align:center}.error-message{background:#e74c3c33;padding:1rem;border-radius:var(--border-radius);margin-bottom:1rem}.file-upload-section{margin-bottom:1rem}.file-input{width:100%;padding:.5rem;margin-top:.5rem}.button-group{display:flex;gap:1rem;margin-top:1rem}.button-group button{flex:1}.detection-results{display:flex;flex-direction:column;gap:1rem}.results-header{display:flex;justify-content:space-between;background:var(--surface-color);padding:.75rem 1rem;border-radius:var(--border-radius)}.stat{font-size:.875rem}.canvas-container{border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow);background:#000}.result-canvas{display:block;width:100%}.detection-list{background:var(--surface-color);border-radius:var(--border-radius);padding:1rem}.detection-list h3{font-size:1rem;margin-bottom:.75rem;color:var(--text-secondary)}.detection-list ul{list-style:none}.detection-item{display:flex;align-items:center;gap:.75rem;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.detection-item:last-child{border-bottom:none}.color-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.class-name{flex:1;text-transform:capitalize}.confidence{font-weight:600;color:var(--primary-color)}.no-detections{text-align:center;padding:2rem;background:var(--surface-color);border-radius:var(--border-radius)}.no-detections .hint{font-size:.875rem;color:var(--text-secondary);margin-top:.5rem}.loading-state{position:relative;border-radius:var(--border-radius);overflow:hidden}.loading-image{width:100%;display:block;filter:blur(2px)}.loading-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0009;gap:1rem}.spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-state{text-align:center}.error-image{width:100%;border-radius:var(--border-radius);margin-bottom:1rem;opacity:.7}.error-content{background:var(--surface-color);padding:1.5rem;border-radius:var(--border-radius)}.error-content .error-message{color:var(--danger-color);margin-bottom:1rem}@media(min-width:768px){.app-header h1{font-size:2rem}.app-main{padding:2rem}.controls{gap:1.5rem}}.mode-switcher{display:flex;gap:.5rem;margin-top:1rem;justify-content:center}.mode-switcher button{padding:.5rem 1rem;font-size:.875rem;border-radius:20px;transition:all .2s ease}.mode-switcher button.mode-active{background:var(--primary-color);color:#fff;box-shadow:0 0 10px #4ecdc466}.mode-switcher button.mode-inactive{background:transparent;border:1px solid var(--secondary-color);color:var(--text-secondary)}.mode-switcher button.mode-inactive:hover:not(:disabled){border-color:var(--primary-color);color:var(--primary-color);background:transparent}.water-meter-result{display:flex;flex-direction:column;gap:1rem}.meter-reading-display{background:var(--surface-color);border-radius:var(--border-radius);padding:2rem;text-align:center}.reading-value{font-size:3rem;font-weight:700;font-family:Courier New,monospace;letter-spacing:.2em;color:var(--primary-color);text-shadow:0 0 20px rgba(78,205,196,.3)}.reading-label{font-size:.875rem;color:var(--text-secondary);margin-top:.5rem}.confidence-badge{display:inline-block;padding:.25rem .75rem;border-radius:20px;font-size:.75rem;font-weight:600;margin-top:.75rem}.confidence-high{background:#27ae6033;color:var(--success-color)}.confidence-medium{background:#f39c1233;color:#f39c12}.confidence-low{background:#e74c3c33;color:var(--danger-color)}.reading-error{padding:1rem}.reading-error .error-icon{font-size:2rem;display:block;margin-bottom:.5rem}.reading-error .error-message{font-size:1.125rem;color:var(--danger-color);margin-bottom:.5rem}.reading-error .error-detail{font-size:.875rem;color:var(--text-secondary);margin-bottom:1rem}.reading-error .error-tips{background:var(--surface-color);padding:1rem;border-radius:var(--border-radius);text-align:left;font-size:.875rem}.reading-error .error-tips strong{display:block;margin-bottom:.5rem;color:var(--text-primary)}.reading-error .error-tips ul{margin:0;padding-left:1.25rem;color:var(--text-secondary)}.reading-error .error-tips li{margin-bottom:.25rem}.meter-image-container{border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow);background:#000}.meter-canvas{display:block;width:100%;height:auto}.meter-stats{display:flex;justify-content:center;gap:1.5rem;font-size:.875rem;color:var(--text-secondary)}.meter-actions{display:flex;gap:1rem;justify-content:center}.meter-actions button{flex:1;max-width:200px}@media(min-width:768px){.reading-value{font-size:4rem}}