.spectrogram-view{width:100%;height:100%;display:flex;flex-direction:column}.spectrogram-container{position:relative;width:100%;height:100%;flex:1;overflow:auto}.spectrogram-canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.spectrogram-annotations{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spectrogram-annotations text,.spectrogram-annotations line,.spectrogram-annotations rect,.spectrogram-annotations g,.spectrogram-annotations circle{pointer-events:all}.controls-panel{padding:var(--spacing-lg) var(--spacing-md);background:var(--pastel-surface);overflow-y:auto;height:100%;flex:1;position:relative}.controls-panel h2{margin-top:0;margin-bottom:var(--spacing-lg);font-size:18px;font-weight:600;color:var(--pastel-text);letter-spacing:-.5px;padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--pastel-border);position:relative}.controls-panel h2:after{content:"";position:absolute;bottom:-2px;left:0;width:40px;height:2px;background:var(--pastel-primary);border-radius:2px}.control-group{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-xl);padding:var(--spacing-lg);background:var(--pastel-background);border-radius:var(--radius-md);border:1px solid var(--pastel-border);box-shadow:0 2px 8px var(--pastel-shadow-soft)}.control-group label{display:flex;flex-direction:column;gap:var(--spacing-sm);font-size:13px;color:var(--pastel-text);font-weight:500}.control-group input[type=number],.control-group select{padding:12px 14px;border:1px solid var(--pastel-border);border-radius:var(--radius-sm);font-size:14px;background:var(--pastel-surface);color:var(--pastel-text);transition:all .3s cubic-bezier(.4,0,.2,1)}.control-group input[type=number]:focus,.control-group select:focus{outline:none;border-color:var(--pastel-primary);box-shadow:0 0 0 3px #e6d5c433}.control-group input[type=range]{width:100%;height:6px;border-radius:3px;background:var(--pastel-border);outline:none;-webkit-appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--pastel-primary);cursor:pointer;border:2px solid var(--pastel-surface);box-shadow:0 2px 4px var(--pastel-shadow)}.control-group input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--pastel-primary);cursor:pointer;border:2px solid var(--pastel-surface);box-shadow:0 2px 4px var(--pastel-shadow)}.control-group input[type=checkbox]{width:18px;height:18px;margin-right:8px;cursor:pointer;accent-color:var(--pastel-primary)}.control-group label:has(input[type=checkbox]){flex-direction:row;align-items:center}.recompute-button{width:100%;padding:12px;background:var(--pastel-primary);color:var(--pastel-text);border:none;border-radius:var(--radius-md);font-size:14px;font-weight:600;cursor:pointer;margin-bottom:var(--spacing-lg);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px var(--pastel-shadow-soft);position:relative;overflow:hidden}.recompute-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.recompute-button:hover:before{left:100%}.recompute-button:hover{background:var(--pastel-primary-hover);transform:translateY(-2px);box-shadow:0 4px 16px var(--pastel-shadow)}.recompute-button:active{transform:translateY(0);box-shadow:0 2px 6px var(--pastel-shadow-soft)}.annotation-editor{padding:var(--spacing-lg) var(--spacing-md);background:var(--pastel-surface);overflow-y:auto;height:100%;flex:1}.annotation-editor h2{margin-top:0;margin-bottom:var(--spacing-lg);font-size:18px;font-weight:600;color:var(--pastel-text);letter-spacing:-.5px;padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--pastel-border);position:relative}.annotation-editor h2:after{content:"";position:absolute;bottom:-2px;left:0;width:40px;height:2px;background:var(--pastel-primary);border-radius:2px}.annotation-form{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-xl);padding:var(--spacing-lg);background:var(--pastel-background);border-radius:var(--radius-md);border:1px solid var(--pastel-border);box-shadow:0 2px 8px var(--pastel-shadow-soft)}.annotation-form label{display:flex;flex-direction:column;gap:var(--spacing-sm);font-size:13px;color:var(--pastel-text);font-weight:500}.annotation-form input,.annotation-form select{padding:12px 14px;border:1px solid var(--pastel-border);border-radius:var(--radius-sm);font-size:14px;background:var(--pastel-surface);color:var(--pastel-text);transition:all .3s cubic-bezier(.4,0,.2,1)}.annotation-form input:focus,.annotation-form select:focus{outline:none;border-color:var(--pastel-primary);box-shadow:0 0 0 3px #e6d5c433}.annotation-form input[type=color]{width:100%;height:40px;border:1px solid var(--pastel-border);border-radius:6px;cursor:pointer}.annotation-form button{padding:12px 20px;background:var(--pastel-secondary);color:var(--pastel-text);border:none;border-radius:var(--radius-md);font-size:14px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px var(--pastel-shadow-soft)}.annotation-form button:hover{background:var(--pastel-secondary-hover);transform:translateY(-1px);box-shadow:0 4px 8px var(--pastel-shadow)}.annotation-form button:active{transform:translateY(0)}.annotation-form button:disabled{opacity:.5;cursor:not-allowed;transform:none}.annotations-list h3{font-size:16px;margin-bottom:var(--spacing-md);color:var(--pastel-text);font-weight:600}.annotations-empty{text-align:center;padding:var(--spacing-xl);color:var(--pastel-text-light)}.annotations-empty p{margin:0;font-size:14px}.annotations-empty-hint{font-size:12px!important;margin-top:var(--spacing-sm)!important;opacity:.7}.annotations-grid{display:flex;flex-direction:column;gap:var(--spacing-sm)}.annotation-card{background:var(--pastel-background);border:1px solid var(--pastel-border);border-radius:var(--radius-md);padding:var(--spacing-md);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px var(--pastel-shadow-soft)}.annotation-card:hover{background:var(--pastel-background-hover);border-color:var(--pastel-primary);box-shadow:0 4px 12px var(--pastel-shadow);transform:translateY(-2px)}.annotation-card.editing{border-color:var(--pastel-primary);background:var(--pastel-accent);box-shadow:0 0 0 2px var(--pastel-primary),0 4px 12px var(--pastel-shadow)}.annotation-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm)}.annotation-type-badge{display:flex;align-items:center;gap:var(--spacing-xs);font-size:12px;font-weight:600;color:var(--pastel-text);text-transform:capitalize}.annotation-type-badge i{font-size:14px;opacity:.8}.annotation-color-badge{width:20px;height:20px;border-radius:50%;border:2px solid var(--pastel-border);box-shadow:0 1px 3px var(--pastel-shadow-soft);flex-shrink:0}.annotation-card-content{margin-bottom:var(--spacing-sm);min-height:20px}.annotation-text-preview{font-size:13px;color:var(--pastel-text);font-style:italic;padding:var(--spacing-xs) 0;word-break:break-word}.annotation-details{font-size:12px;color:var(--pastel-text-light);padding:var(--spacing-xs) 0}.annotation-card-actions{display:flex;gap:var(--spacing-xs);margin-top:var(--spacing-sm);padding-top:var(--spacing-sm);border-top:1px solid var(--pastel-border)}.annotation-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:8px 12px;border:none;border-radius:var(--radius-sm);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px var(--pastel-shadow-soft)}.annotation-action-btn i{font-size:11px}.annotation-action-btn.edit-btn{background:var(--pastel-primary);color:var(--pastel-text)}.annotation-action-btn.edit-btn:hover{background:var(--pastel-primary-hover);transform:translateY(-1px);box-shadow:0 2px 6px var(--pastel-shadow)}.annotation-action-btn.delete-btn{background:var(--pastel-error-bg);color:var(--pastel-error-text)}.annotation-action-btn.delete-btn:hover{background:var(--pastel-error-border);transform:translateY(-1px);box-shadow:0 2px 6px var(--pastel-shadow)}.color-picker{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.color-option{width:32px;height:32px;border:2px solid var(--pastel-border);border-radius:8px;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px var(--pastel-shadow);position:relative}.color-option:hover{transform:scale(1.1);box-shadow:0 4px 8px var(--pastel-shadow)}.color-option.selected{border:3px solid var(--pastel-text);box-shadow:0 0 0 2px var(--pastel-primary),0 4px 8px var(--pastel-shadow);transform:scale(1.05)}.annotation-center-hint{font-size:12px;color:var(--pastel-text-light);margin:var(--spacing-xs) 0;font-style:italic}.annotation-form-actions{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.export-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#e4d5c466;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.export-dialog{background:var(--pastel-surface);padding:var(--spacing-xl);border-radius:var(--radius-lg);min-width:480px;max-width:90vw;box-shadow:0 12px 40px var(--pastel-shadow-strong);border:1px solid var(--pastel-border);animation:slideUp .3s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.export-dialog h2{margin-top:0;margin-bottom:var(--spacing-lg);font-size:20px;font-weight:600;color:var(--pastel-text);letter-spacing:-.5px;padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--pastel-border);position:relative}.export-dialog h2:after{content:"";position:absolute;bottom:-2px;left:0;width:40px;height:2px;background:var(--pastel-primary);border-radius:2px}.export-form{display:flex;flex-direction:column;gap:var(--spacing-md)}.export-form label{display:flex;flex-direction:column;gap:var(--spacing-sm);font-size:13px;color:var(--pastel-text);font-weight:500}.export-form input,.export-form select{padding:12px 14px;border:1px solid var(--pastel-border);border-radius:var(--radius-sm);font-size:14px;background:var(--pastel-background);color:var(--pastel-text);transition:all .3s cubic-bezier(.4,0,.2,1)}.export-form input:focus,.export-form select:focus{outline:none;border-color:var(--pastel-primary);box-shadow:0 0 0 3px #e6d5c433}.export-buttons{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-lg)}.export-buttons button{flex:1;padding:14px;border:none;border-radius:var(--radius-md);font-size:15px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px var(--pastel-shadow-soft);position:relative;overflow:hidden}.export-buttons button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.export-buttons button:hover:before{left:100%}.export-buttons button:first-child{background:var(--pastel-primary);color:var(--pastel-text)}.export-buttons button:first-child:hover{background:var(--pastel-primary-hover);transform:translateY(-2px);box-shadow:0 4px 16px var(--pastel-shadow)}.export-buttons button:last-child{background:var(--pastel-background);color:var(--pastel-text);border:1px solid var(--pastel-border)}.export-buttons button:last-child:hover{background:var(--pastel-background-hover);transform:translateY(-2px);box-shadow:0 4px 16px var(--pastel-shadow)}.export-buttons button:active{transform:translateY(0);box-shadow:0 2px 6px var(--pastel-shadow-soft)}.app{display:flex;flex-direction:column;height:100vh;width:100vw;background:var(--pastel-background);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;overflow:hidden}.app-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg) var(--spacing-xl);background:var(--pastel-surface);border-bottom:1px solid var(--pastel-border);box-shadow:0 1px 3px var(--pastel-shadow-soft);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100}.app-header h1{margin:0;font-size:24px;font-weight:600;color:var(--pastel-text);letter-spacing:-.8px;background:linear-gradient(135deg,var(--pastel-text) 0%,var(--pastel-text-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-actions{display:flex;gap:var(--spacing-md);align-items:center}.upload-button,.header-actions button{padding:12px 24px;background:var(--pastel-primary);color:var(--pastel-text);border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;line-height:1.4;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px var(--pastel-shadow-soft);position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-width:140px;height:44px;box-sizing:border-box}.upload-button:before,.header-actions button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.upload-button:hover:before,.header-actions button:hover:before{left:100%}.upload-button:hover,.header-actions button:hover{background:var(--pastel-primary-hover);transform:translateY(-2px);box-shadow:0 4px 12px var(--pastel-shadow)}.upload-button:active,.header-actions button:active{transform:translateY(0);box-shadow:0 2px 6px var(--pastel-shadow-soft)}.file-input-hidden{display:none}.app-content{display:flex;flex:1;overflow:hidden;position:relative;gap:var(--spacing-sm);padding:var(--spacing-sm)}.sidebar-container-left,.sidebar-container-right{display:flex;align-items:stretch;position:relative;height:100%;max-height:100%}.sidebar-left,.sidebar-right{background:var(--pastel-surface);border:1px solid var(--pastel-border);transition:width .4s cubic-bezier(.4,0,.2,1);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 12px var(--pastel-shadow-soft);border-radius:var(--radius-md);height:100%;max-height:100%;min-height:0}.sidebar-left{min-width:340px;width:340px}.sidebar-left.collapsed{width:0;min-width:0;border:none;box-shadow:none}.sidebar-right{min-width:320px;width:320px}.sidebar-right.collapsed{width:0;min-width:0;border:none;box-shadow:none}.sidebar-toggle{width:40px;height:40px;background:var(--pastel-accent);border:1px solid var(--pastel-border);border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--pastel-text);z-index:10;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px var(--pastel-shadow-soft);padding:0;flex-shrink:0;align-self:flex-start;margin-top:var(--spacing-md)}.sidebar-toggle i{font-size:16px;transition:transform .3s ease}.sidebar-toggle-left{margin-right:var(--spacing-sm)}.sidebar-toggle-right{margin-left:var(--spacing-sm);order:2}.sidebar-toggle:hover{background:var(--pastel-accent-hover);transform:translateY(-2px);box-shadow:0 4px 12px var(--pastel-shadow);border-color:var(--pastel-primary)}.sidebar-toggle:active{transform:translateY(0)}.main-view{flex:1;display:flex;flex-direction:column;position:relative;background:var(--pastel-background);border-radius:var(--radius-lg);box-shadow:0 4px 20px var(--pastel-shadow-soft);overflow:hidden;min-width:0}.error-message{position:absolute;top:var(--spacing-lg);left:50%;transform:translate(-50%);padding:var(--spacing-md) var(--spacing-lg);background:var(--pastel-error-bg);color:var(--pastel-error-text);border:1px solid var(--pastel-error-border);border-radius:var(--radius-md);z-index:100;font-size:14px;font-weight:500;box-shadow:0 4px 16px var(--pastel-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideDown .3s ease-out}.processing-message{position:absolute;top:var(--spacing-lg);left:50%;transform:translate(-50%);padding:var(--spacing-md) var(--spacing-lg);background:var(--pastel-accent);color:var(--pastel-text);border:1px solid var(--pastel-border);border-radius:var(--radius-md);z-index:100;font-size:14px;font-weight:500;box-shadow:0 4px 16px var(--pastel-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.empty-state{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;color:var(--pastel-text-light);font-size:18px;font-weight:400;gap:var(--spacing-md);padding:var(--spacing-xl)}.empty-state i{font-size:64px;opacity:.4;color:var(--pastel-text-light);animation:float 3s ease-in-out infinite}.empty-state p{margin:0;text-align:center;line-height:1.6}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}:root{--pastel-primary: #E6D5C4;--pastel-primary-hover: #D4C4B0;--pastel-secondary: #D4C4B0;--pastel-secondary-hover: #C4B5A0;--pastel-accent: #F5E6D3;--pastel-accent-hover: #E6D5C4;--pastel-background: #FFF9F0;--pastel-background-hover: #FFF5E6;--pastel-surface: #FFFFFF;--pastel-border: #E8D5C4;--pastel-text: #5A5A5A;--pastel-text-light: #8A8A8A;--pastel-error-bg: #F5E6D3;--pastel-error-text: #8B6A5A;--pastel-error-border: #D4C4B0;--pastel-shadow: rgba(228, 213, 196, .2);--pastel-shadow-soft: rgba(228, 213, 196, .1);--pastel-shadow-strong: rgba(228, 213, 196, .4);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 16px}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--pastel-background);color:var(--pastel-text);line-height:1.6}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--pastel-background)}::-webkit-scrollbar-thumb{background:var(--pastel-border);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--pastel-primary)}