:root{--bg: #0a0a0a;--surface: #111118;--border: #1e1e2e;--text: #e0e0e0;--text-muted: #888;--accent: #4a9eff;--accent-hover: #6ab4ff;--danger: #ff6b6b}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text);overflow:hidden;height:100vh}#root{height:100vh}.app{display:flex;flex-direction:column;height:100vh;padding:8px;gap:8px}.app-header{display:flex;align-items:baseline;gap:12px;padding:4px 8px;flex-shrink:0}.app-header h1{font-size:20px;font-weight:300;color:var(--accent);letter-spacing:-.5px}.app-header h1 strong{font-weight:700}.app-subtitle{font-size:12px;color:var(--text-muted)}.header-logo{height:28px;width:auto;opacity:.8}.dropzone{border:2px dashed var(--border);border-radius:12px;padding:48px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;flex:1;display:flex;align-items:center;justify-content:center}.dropzone:hover{border-color:var(--accent);background:#4a9eff08}.dropzone-logo{max-height:200px;width:auto;margin-bottom:24px;opacity:.9}.dropzone-text{font-size:16px;margin-bottom:8px}.dropzone-subtext{font-size:12px;color:var(--text-muted)}.file-info{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 16px;flex-shrink:0}.file-info-header{display:flex;align-items:center;gap:16px}.file-name{font-weight:600;font-size:14px}.file-change-btn{background:none;border:1px solid var(--border);color:var(--text-muted);padding:2px 10px;border-radius:4px;cursor:pointer;font-size:11px;margin-left:auto}.file-change-btn:hover{border-color:var(--accent);color:var(--accent)}.file-info-details{font-size:12px;color:var(--text-muted)}.main-content{flex:1;display:flex;flex-direction:column;gap:8px;min-height:0}.timeline-container{flex:1;min-height:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg)}.eeg-canvas{display:block}.timeline-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted);font-size:14px}.control-panel{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 16px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;flex-shrink:0}.control-group{display:flex;align-items:center;gap:8px}.control-group label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.nav-buttons{display:flex;align-items:center;gap:6px}.time-display{font-size:12px;font-family:monospace;color:var(--text-muted);min-width:120px;text-align:center}.button-group{display:flex;gap:4px}.button-group button,.nav-buttons button{background:var(--bg);border:1px solid var(--border);color:var(--text-muted);padding:4px 10px;border-radius:4px;cursor:pointer;font-size:11px;transition:all .15s;outline:none}.button-group button:focus-visible,.nav-buttons button:focus-visible{border-color:var(--accent)}.button-group button:hover,.nav-buttons button:hover{border-color:var(--accent);color:var(--accent)}.button-group button.active{background:var(--accent);border-color:var(--accent);color:#000}.scrubber{width:200px;accent-color:var(--accent)}.filter-controls{display:flex;align-items:center;gap:12px}.filter-item{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-muted);cursor:pointer}.filter-item input[type=checkbox]{accent-color:var(--accent);cursor:pointer}.filter-freq-input{width:50px;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:2px 4px;border-radius:4px;font-size:11px;font-family:monospace;outline:none}.filter-freq-input:focus{border-color:var(--accent)}.filter-unit{color:var(--text-muted);font-size:10px}.error-banner{background:#ff6b6b1a;border:1px solid var(--danger);color:var(--danger);padding:8px 16px;border-radius:6px;font-size:13px;flex-shrink:0}.notification-banner{background:#4a9eff1a;border:1px solid var(--accent);color:var(--accent);padding:8px 16px;border-radius:6px;font-size:13px;flex-shrink:0;text-align:center}.loading{text-align:center;color:var(--text-muted);padding:24px;font-size:14px}.overlay-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100}.overlay-panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto}.overlay-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.overlay-header h2{font-size:16px;font-weight:600}.overlay-close{background:var(--bg);border:1px solid var(--border);color:var(--text-muted);padding:2px 10px;border-radius:4px;cursor:pointer;font-size:11px}.overlay-close:hover{border-color:var(--accent);color:var(--accent)}.overlay-panel h3{font-size:13px;font-weight:600;margin:16px 0 8px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.metadata-table{width:100%;border-collapse:collapse;font-size:13px}.metadata-table td,.metadata-table th{padding:6px 12px 6px 0;border-bottom:1px solid var(--border)}.metadata-table td:first-child{color:var(--text-muted);white-space:nowrap;width:120px}.metadata-table th{color:var(--text-muted);font-weight:500;text-align:left;font-size:11px}.channel-list{overflow-y:visible}.shortcut-key{background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:2px 6px;font-family:monospace;font-size:12px;color:var(--text)}.channel-tooltip{position:fixed;background:var(--surface);border:1px solid var(--border);color:var(--text);padding:4px 8px;border-radius:4px;font-size:12px;font-family:monospace;pointer-events:none;z-index:50;white-space:nowrap}.label-drag-indicator{position:absolute;left:0;right:0;background:#4a9eff0a;pointer-events:none;z-index:15;display:flex;align-items:center;padding-left:8px}.label-drag-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.label-drag-name{font-size:11px;font-family:monospace;font-weight:600;margin-left:6px}.cursor-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;pointer-events:none;z-index:10}.cursor-info-bar{position:absolute;bottom:22px;left:90px;right:0;display:flex;gap:16px;padding:3px 12px;background:#111118e6;border-top:1px solid var(--border);font-size:11px;font-family:monospace;color:var(--text-muted);pointer-events:none;z-index:10}.cursor-channel{color:var(--text);font-weight:600}.color-picker-row{display:flex;gap:4px}.color-swatch{width:20px;height:20px;border-radius:4px;border:2px solid transparent;cursor:pointer;padding:0;outline:none}.color-swatch:hover{border-color:#ffffff80}.color-swatch.active{border-color:#fff}.colormap-picker{display:flex;flex-wrap:wrap;gap:6px}.colormap-btn{display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border);color:var(--text-muted);padding:4px 8px;border-radius:4px;cursor:pointer;font-size:11px;outline:none}.colormap-btn:hover{border-color:var(--accent)}.colormap-btn.active{border-color:var(--accent);color:var(--text)}.channel-editor{max-width:700px}.channel-editor-bulk{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px;font-size:11px;color:var(--text-muted)}.channel-editor-bulk button{background:var(--bg);border:1px solid var(--border);color:var(--text-muted);padding:2px 8px;border-radius:3px;cursor:pointer;font-size:10px;outline:none}.channel-editor-bulk button:hover{border-color:var(--accent);color:var(--accent)}.channel-editor-bulk select{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:2px 4px;border-radius:3px;font-size:10px;outline:none}.channel-editor-sep{color:var(--border);margin:0 4px}.channel-editor-list{max-height:400px;overflow-y:auto}.channel-editor-input{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:2px 6px;border-radius:3px;font-size:11px;font-family:monospace;width:120px;outline:none}.channel-editor-input:focus{border-color:var(--accent)}.channel-editor-select{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:2px 4px;border-radius:3px;font-size:11px;outline:none}.channel-editor-unit{color:var(--text-muted);font-size:10px}.channel-editor-selected td{background:#4a9eff14}.channel-editor-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.channel-editor-cancel{background:var(--bg);border:1px solid var(--border);color:var(--text-muted);padding:4px 16px;border-radius:4px;cursor:pointer;font-size:12px;outline:none}.channel-editor-save{background:var(--accent);border:1px solid var(--accent);color:#000;padding:4px 16px;border-radius:4px;cursor:pointer;font-size:12px;outline:none}.channel-editor-save:hover{opacity:.9}.colormap-preview{display:inline-block;width:40px;height:12px;border-radius:2px}.annotations-only{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);font-size:14px}.spectrogram-panel{height:200px;min-height:150px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg);flex-shrink:0;position:relative}.spectrogram-nav{position:absolute;top:4px;left:56px;display:flex;align-items:center;gap:4px;font-size:10px;font-family:monospace;color:var(--accent);z-index:5;background:#000000b3;padding:2px 6px;border-radius:4px}.spectrogram-nav button{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);width:20px;height:20px;border-radius:3px;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;outline:none}.spectrogram-nav button:hover{border-color:var(--accent);color:var(--accent)}.spectrogram-toggle{font-size:9px;padding:1px 6px}.spectrogram-toggle.active{background:var(--accent);border-color:var(--accent);color:#000}.spectrogram-win-label{font-size:9px;color:var(--text-muted)}.spectrogram-no-data{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:12px;z-index:5}.psd-panel{height:200px;min-height:150px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg);flex-shrink:0;position:relative}.psd-hover-info{position:absolute;bottom:4px;right:6px;background:#000000b3;padding:2px 8px;border-radius:4px;font-size:10px;font-family:monospace;color:var(--text-muted);pointer-events:none;z-index:5}.psd-reset-btn{position:absolute;top:6px;right:6px;background:var(--surface);border:1px solid var(--border);color:var(--text-muted);width:24px;height:24px;border-radius:4px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;opacity:.7;outline:none}.psd-reset-btn:hover{border-color:var(--accent);color:var(--accent);opacity:1}.annot-summary{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.annot-tag{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:2px 8px;font-size:11px;color:var(--text-muted)}.annot-list{max-height:400px;overflow-y:auto}.annot-row{cursor:pointer}.annot-row:hover td{color:var(--accent)}.annot-active td{color:var(--accent);font-weight:600}