:root{--primary:#007f8b;--primary-hover:#006069;--bg-color:#f8f9fa;--surface:#fff;--text-main:#202124;--text-secondary:#5f6368;--border-color:#e0e0e0;--sidebar-width:260px;--controls-width:320px;--radius-sm:8px;--radius-md:12px;--shadow-sm:0 1px 3px #0000001f;--shadow-md:0 4px 6px #0000001a;--header-height:64px;--secondary:#5f6368;--secondary-hover:#3c4043}*{box-sizing:border-box}.audio-viewport .results-container.active{display:block}html{height:100%}body{color:var(--text-main);background:var(--bg-color);-webkit-font-smoothing:antialiased;height:100vh;margin:0;font-family:Google Sans,Roboto,sans-serif;overflow:hidden}#app{width:100%;height:100%}.app-container{height:100%;display:flex}.sidebar{width:var(--sidebar-width);background:var(--surface);border-right:1px solid var(--border-color);z-index:10;flex-direction:column;flex-shrink:0;min-height:0;display:flex;overflow-y:auto;box-shadow:2px 0 5px #0000000d}.controls-panel{width:var(--controls-width);background:var(--surface);border-right:1px solid var(--border-color);flex-direction:column;flex-shrink:0;min-height:0;padding:24px;display:flex;overflow-y:auto}.sidebar-header{height:var(--header-height);border-bottom:1px solid var(--border-color);align-items:center;padding:0 24px;display:flex}.sidebar-logo-text{color:var(--text-secondary);align-items:center;gap:12px;font-size:1.25rem;font-weight:500;display:flex}.sidebar-nav ul{margin:0;padding:12px 16px;list-style:none}.nav-button{text-align:left;border-radius:var(--radius-sm);width:100%;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;margin-bottom:8px;padding:12px 16px;font-family:inherit;font-size:.95rem;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.nav-button:hover{color:var(--primary);background:#007f8b14;padding-left:20px}.nav-button.active{color:var(--primary);border-left:3px solid var(--primary);background:#007f8b1f;padding-left:13px;font-weight:600}.category-header{text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-top:8px;padding:16px 24px 8px;font-size:.75rem;font-weight:600}.main-content{flex:1;position:relative;overflow:hidden}.task-container{height:100%;display:flex}.controls-panel{width:var(--controls-width);background:var(--surface);border-right:1px solid var(--border-color);flex-direction:column;flex-shrink:0;padding:24px;display:flex;overflow-y:auto}.cam-container{background:0 0;flex-direction:column;flex:1;justify-content:center;align-items:center;width:100%;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}.section-title{text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-top:8px;margin-bottom:16px;font-size:.75rem;font-weight:600}.section-title:first-child{margin-top:0}.tabs-container{border-radius:var(--radius-sm);background:#f1f3f4;gap:4px;margin-bottom:16px;padding:4px;display:flex}.tab-button{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;flex:1;justify-content:center;align-items:center;gap:6px;padding:8px;font-size:.85rem;font-weight:500;transition:all .2s;display:flex}.tab-button:hover{color:var(--text-main)}.tab-button.active{background:var(--surface);color:var(--primary);box-shadow:0 1px 2px #0000000d}.tab-content{display:none}.tab-content.active{animation:.3s fadeIn;display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.select-wrapper{margin-bottom:16px;position:relative}.select-wrapper:after{content:"expand_more";color:var(--text-secondary);pointer-events:none;font-family:Material Icons;font-size:1.2rem;position:absolute;top:50%;right:12px;transform:translateY(-50%)}select{border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--surface);width:100%;color:var(--text-main);appearance:none;cursor:pointer;padding:10px 36px 10px 12px;font-family:inherit;font-size:.9rem;transition:border-color .2s}select:focus{border-color:var(--primary);outline:none}.control-group{margin-bottom:20px}.control-label{color:var(--text-main);justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.9rem;font-weight:500;display:flex}.value-badge{color:var(--text-secondary);background:#f1f3f4;border-radius:12px;padding:2px 8px;font-family:Roboto Mono,monospace;font-size:.8rem}.range-slider{-webkit-appearance:none;background:#e0e0e0;border-radius:2px;outline:none;width:100%;height:4px;transition:background .2s}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--primary);cursor:pointer;border-radius:50%;width:16px;height:16px;transition:transform .1s;box-shadow:0 2px 4px #0003}.file-upload-btn{border:1px dashed var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;text-align:center;background:#fafafa;justify-content:center;align-items:center;padding:12px;font-size:.9rem;transition:all .2s;display:flex}.file-upload-btn input{display:none}.status-text{color:var(--text-secondary);text-align:center;margin-top:4px;font-size:.8rem}.divider{background:var(--border-color);height:1px;margin:24px 0}.status-message{color:var(--text-main);margin-bottom:4px;font-size:.9rem;font-weight:500}.inference-time{color:var(--text-secondary);font-family:Roboto Mono,monospace;font-size:.85rem}.output-panel{background:#f0f2f5;flex-direction:column;flex:1;min-width:0;min-height:0;padding:24px;display:flex;overflow:hidden}.output-header{height:var(--header-height);justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.output-header h2{color:var(--text-main);margin:0;font-size:1.5rem;font-weight:400}.view-tabs{background:var(--surface);box-shadow:var(--shadow-sm);border-radius:24px;padding:4px;display:flex}.view-tab{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:20px;padding:8px 20px;font-size:.9rem;font-weight:500;transition:all .2s}.view-tab.active{background:var(--primary);color:#fff}.viewport{background:var(--surface);border-radius:var(--radius-md);min-width:0;min-height:0;box-shadow:var(--shadow-sm);flex-direction:column;flex:1;justify-content:flex-start;align-items:center;padding:24px 0;display:flex;position:relative;overflow:hidden auto}.view-content{width:100%;display:none}.view-content.active{flex-direction:column;flex:none;justify-content:flex-start;align-items:center;min-width:0;min-height:0;display:flex}.audio-visualizer-container{border-radius:var(--radius-sm);border:1px solid var(--border-color);background:#f8f9fa;width:100%;height:120px;margin-top:20px;position:relative;overflow:hidden;box-shadow:inset 0 1px 3px #0000000d}#waveform-canvas{width:100%;height:100%;display:block}.video-wrapper{aspect-ratio:auto;border-radius:var(--radius-md);background:0 0;place-items:center;width:100%;min-width:0;max-width:640px;height:auto;min-height:0;max-height:480px;margin-bottom:1rem;display:grid;position:relative;overflow:hidden}video{object-fit:contain;grid-area:1/1;width:100%;height:100%;display:block;transform:rotateY(180deg)}.video-wrapper canvas{object-fit:contain;pointer-events:none;opacity:1;grid-area:1/1;width:100%;height:100%;transition:opacity .2s;position:relative;transform:rotateY(180deg)}#output_canvas{z-index:10}#output_overlay{z-index:20}.action-button{background:var(--primary);color:#fff;cursor:pointer;box-shadow:var(--shadow-md);z-index:20;border:none;border-radius:30px;align-items:center;gap:8px;margin-top:10px;padding:12px 24px;font-size:1rem;font-weight:500;transition:all .2s;display:flex}.cam-container>.action-button,.cam-container .webcam-controls{z-index:10;margin:20px auto 0;position:relative}.cam-container .webcam-controls .action-button{margin:0;position:relative;bottom:auto;left:auto;transform:none}.audio-viewport .cam-container .action-button{margin:20px auto;display:flex;position:relative;bottom:auto;left:auto;transform:none}.audio-viewport .cam-container{background:0 0;flex-direction:column;justify-content:center;align-items:center;padding:24px}.audio-viewport .cam-container .action-button:hover{box-shadow:var(--shadow-md);transform:none}.action-button:disabled{cursor:not-allowed;background:#ccc;transform:none}.canvas-wrapper{max-width:100%;display:inline-block;position:relative}.preview-container .canvas-wrapper img{border-radius:var(--radius-md);width:auto;max-width:100%;height:auto;max-height:480px;display:block}.preview-container .canvas-wrapper canvas{pointer-events:none;border-radius:var(--radius-md);width:100%;height:100%;position:absolute;top:0;left:0}.preview-container{flex-direction:column;justify-content:center;align-items:center;width:100%;margin-bottom:1rem;display:flex;position:relative}.upload-dropzone{border-radius:var(--radius-md);background:0 0;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:640px;margin:0 auto 1rem;display:flex;position:relative}.upload-dropzone:hover .dropzone-content{border-color:var(--primary);background:#e3f2fd}.dropzone-content{text-align:center;border-radius:var(--radius-md);box-sizing:border-box;cursor:pointer;background:#f8f9fa;border:2px dashed #ccc;flex-direction:column;align-items:center;gap:16px;width:100%;padding:40px 20px;transition:all .2s;display:flex}.large-icon{color:#aaa;font-size:64px}.upload-dropzone input[type=file]{display:none}.preview-container audio{border-radius:30px;outline:none;width:100%}.legend-container{border-radius:var(--radius-md);background:#fffc;flex-wrap:wrap;justify-content:center;gap:8px;min-height:30px;margin-top:10px;padding:10px;display:flex}.legend-item{color:var(--text-main);background:var(--surface);box-shadow:var(--shadow-sm);border-radius:4px;align-items:center;gap:6px;padding:4px 8px;font-size:.9rem;display:flex}.legend-color{border:1px solid #0000001a;border-radius:4px;width:16px;height:16px}.material-icons{text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga";direction:ltr;font-family:Material Icons;font-size:24px;font-style:normal;font-weight:400;line-height:1;display:inline-block}.mobile-header,.menu-toggle{display:none}.re-upload{z-index:20;margin-top:15px;display:flex;position:relative}.re-upload:hover{background:var(--primary-hover)}.action-button:hover{background:var(--primary-hover);box-shadow:var(--shadow-md)}.cam-container>.action-button:hover{transform:translate(-50%)}.viewport.loading-model:after{content:"Loading Model...";color:var(--primary);z-index:100;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#ffffffd9;justify-content:center;align-items:center;font-size:1.5rem;font-weight:500;display:flex;position:absolute;inset:0}@media (width<=900px){.controls-panel{width:260px}}@media (width<=768px){.app-container{flex-direction:column}.sidebar{display:none!important}.controls-panel{border-right:none;border-bottom:1px solid var(--border-color);width:100%;height:auto;padding:16px}.output-panel{overflow-y:visible}.app-container{height:auto;overflow-y:auto}.sidebar.open{z-index:1000;height:100%;position:fixed;display:flex!important}.mobile-header{background-color:var(--surface);border-bottom:1px solid var(--border-color);height:var(--header-height);z-index:100;justify-content:space-between;align-items:center;padding:10px 16px;position:sticky;top:0;display:flex!important}.mobile-task-select{border-radius:var(--radius-sm);border:1px solid var(--border-color);background-color:#fff;flex-grow:1;max-width:250px;margin-left:10px;padding:8px 12px;font-size:16px}.main-content{height:auto;min-height:calc(100vh - var(--header-height));padding:16px;overflow-y:auto}.task-container{flex-direction:column!important}.controls-panel{border-right:none;border-bottom:1px solid var(--border-color);flex-shrink:0;width:100%;height:auto;max-height:40vh}.output-panel{height:60vh}.sidebar-header .menu-toggle,.mobile-header .menu-toggle{display:block}.preview-container{aspect-ratio:4/3;width:100%;height:auto}}.audio-viewport{padding-top:40px;justify-content:flex-start!important}.audio-viewport .view-content.active{flex:none;height:auto;margin-bottom:20px}.audio-viewport .results-container{box-sizing:border-box;width:100%;max-width:600px;margin-top:20px;padding:0 10px}.progress-container{background:#e0e0e0;border-radius:2px;width:100%;margin-top:12px;overflow:hidden}.progress-bar{background:var(--primary);border-radius:2px;width:0%;height:4px;transition:width .2s}.progress-text{color:var(--text-secondary);text-align:center;margin-top:4px;font-size:.75rem}.classification-results{flex-direction:column;gap:12px;width:100%;max-width:600px;margin:10px auto 0;display:flex}.classification-row{background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);justify-content:space-between;align-items:center;padding:12px 16px;transition:transform .2s;display:flex}.category-name{color:var(--text-main);text-transform:capitalize;flex:1;font-size:.95rem;font-weight:500}.score-container{align-items:center;gap:12px;width:140px;display:flex}.score-bar{background:#e0e0e0;border-radius:4px;flex:1;height:8px;position:relative;overflow:hidden}.score-bar:after{content:"";width:var(--width,0%);background:var(--primary);border-radius:4px;transition:width .4s ease-out;position:absolute;top:0;bottom:0;left:0}.score-text{color:var(--text-secondary);text-align:right;width:40px;font-family:Roboto Mono,monospace;font-size:.85rem}.classification-results{flex-direction:column;flex-shrink:0;gap:12px;width:100%;min-height:160px;margin-top:10px;display:flex}.classification-row{background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);align-items:center;gap:16px;padding:12px 16px;transition:all .2s;display:flex}.classification-row:hover{box-shadow:var(--shadow-md);border-color:var(--primary);transform:translateY(-2px)}.category-name{color:var(--text-main);text-transform:capitalize;white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:.95rem;font-weight:500;overflow:hidden}.score-container{flex-shrink:0;align-items:center;gap:12px;width:160px;display:flex}.score-track{background:#e0e0e0;border-radius:4px;flex:1;height:8px;overflow:hidden}.score-fill{background:var(--primary);border-radius:4px;height:100%;transition:width .3s cubic-bezier(.4,0,.2,1)}.score-text{text-align:right;width:40px;color:var(--text-secondary);font-family:Roboto Mono,monospace;font-size:.85rem;font-weight:500}.no-results{text-align:center;color:var(--text-secondary);border-radius:var(--radius-sm);border:1px dashed var(--border-color);background:#f8f9fa;padding:20px;font-style:italic}.webcam-capture,.webcam-overlay{width:100%;height:100%;position:absolute;top:0;left:0}.webcam-overlay{pointer-events:auto;z-index:10}.video-wrapper{position:relative}.action-button.secondary{background-color:var(--secondary);color:#fff}.action-button.secondary:hover{background-color:var(--secondary-hover)}.action-button.secondary:disabled{cursor:not-allowed;background-color:#ccc}.webcam-controls{justify-content:center;gap:12px;margin-top:12px;display:flex}.upload-dropzone.active{background:0 0;border:none;padding:0}.upload-dropzone.active .dropzone-content{display:none}.webcam-overlay.clickable{cursor:crosshair}.webcam-placeholder{aspect-ratio:4/3;z-index:5;pointer-events:none;box-sizing:border-box;background-color:#f1f5f9;border:2px dashed #94a3b8;border-radius:12px;flex-direction:column;grid-area:1/1;justify-content:center;align-items:center;width:100%;min-height:240px;transition:opacity .3s;display:flex}.webcam-placeholder.hidden{opacity:0!important;display:none!important}.webcam-placeholder .material-icons{color:var(--primary);margin-bottom:12px;font-size:48px}.webcam-placeholder p{color:var(--primary);margin:0;font-size:1.1rem;font-weight:500}.classification-item{background:var(--surface,#fff);border:1px solid var(--border-color,#eee);border-radius:12px;align-items:center;margin-bottom:16px;padding:16px;display:flex;box-shadow:0 2px 4px #00000005}.class-name{width:100px;color:var(--text-main,#333);text-transform:capitalize;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.class-bar-container{background:#f0f2f5;border-radius:5px;flex-grow:1;height:10px;margin:0 15px;overflow:hidden}.class-bar{background:var(--primary,#007f8b);border-radius:5px;height:100%;transition:width .5s cubic-bezier(.4,0,.2,1)}.class-score{text-align:right;width:45px;color:var(--primary,#007f8b);font-family:Roboto Mono,monospace;font-size:14px;font-weight:500}