:root{color-scheme:dark;font-family:"Segoe UI",system-ui,sans-serif;--bg:#090b0a;--panel:#111512;--line:#29312b;--text:#eef3ef;--muted:#8c9990;--accent:#72d58a;--accent-soft:rgba(114,213,138,.17);--radius:16px}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{min-height:100dvh}button,input,select{font:inherit}button,select{color:inherit}
.app{width:min(1700px,100%);margin:auto;padding:12px;display:grid;gap:10px}
.plot-shell{position:relative;overflow:hidden;height:clamp(430px,70vh,900px);border:1px solid var(--line);border-radius:var(--radius);background:#020302;touch-action:none;user-select:none}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#axes{z-index:2;pointer-events:auto}
.empty-state{position:absolute;inset:0;z-index:4;display:grid;place-content:center;gap:6px;text-align:center;color:var(--muted);pointer-events:none}.empty-state strong{color:var(--text);font-size:17px;font-variant:small-caps;letter-spacing:.12em}
.play-cursor{position:absolute;z-index:3;top:76px;bottom:34px;width:1px;background:#fff;box-shadow:0 0 0 1px #000;pointer-events:none}
.transport,.controls{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius)}
.transport{min-height:62px;display:flex;align-items:center;gap:9px;padding:10px 11px;overflow:hidden}
.button,.select{min-height:38px;padding:8px 13px;border:1px solid #374139;border-radius:12px;background:#1a201c;white-space:nowrap}.button{cursor:pointer}.button:hover:not(:disabled){background:#202820}.button:disabled,.select:disabled{opacity:.4;cursor:default}.button.primary{border-color:rgba(114,213,138,.55);background:var(--accent-soft)}.file-button input{display:none}.select{cursor:pointer;max-width:145px}
.time-readout{min-width:158px;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}.muted{color:var(--muted)}
.inline-slider{display:grid;grid-template-columns:auto minmax(110px,220px) 56px 26px;gap:8px;align-items:center;font-size:12px}.slider-stack{display:grid;gap:1px;min-width:0}
.transport-info{margin-left:auto;min-width:0;display:grid;gap:2px;text-align:right}.transport-info strong,.transport-info span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.transport-info strong{font-size:12px}.transport-info span{font-size:11px}
.controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden}.control-card,.toggle-card{min-width:0;padding:12px;background:var(--panel)}.control-card+.control-card,.toggle-card{border-left:1px solid var(--line)}
.control-head{display:grid;grid-template-columns:1fr auto 26px;gap:8px;align-items:center;margin-bottom:8px;font-size:12px;font-weight:600}.control-head output{color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}
.reset-button{width:24px;height:24px;padding:0;border:1px solid #354038;border-radius:8px;background:#171c18;color:var(--muted);cursor:pointer;line-height:1}.reset-button:hover{color:var(--text);border-color:#4b5a4f}.reset-button:active{transform:translateY(1px)}
.dual-range{--lo:0%;--hi:100%;position:relative;height:30px;cursor:pointer;touch-action:none}.dual-track,.dual-fill{position:absolute;top:12px;height:6px;border-radius:999px}.dual-track{left:0;right:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(255,255,255,.20) calc(10% - 1px) 10%),#29312b;box-shadow:inset 0 1px 2px #000}.dual-fill{left:var(--lo);right:calc(100% - var(--hi));background:var(--accent)}
.color-range .dual-track{background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(255,255,255,.22) calc(10% - 1px) 10%),linear-gradient(90deg,#000,#111a58 18%,#5a237f 36%,#c3364d 55%,#ef7c28 73%,#f8d34a 88%,#fff)}.color-range .dual-fill{background:transparent;border:1px solid rgba(255,255,255,.72);top:10px;height:10px}
.dual-handle{position:absolute;top:4px;width:22px;height:22px;margin-left:-11px;border:1px solid rgba(255,255,255,.55);border-radius:8px;background:#151b17;box-shadow:0 2px 7px rgba(0,0,0,.65);outline:none}.dual-handle.low{left:var(--lo)}.dual-handle.high{left:var(--hi)}
.single-range{width:100%;height:26px;margin:0;background:transparent;accent-color:var(--accent)}
.single-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(255,255,255,.22) calc(10% - 1px) 10%),#29312b;box-shadow:inset 0 1px 2px #000}
.single-range::-moz-range-track{height:6px;border-radius:999px;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(255,255,255,.22) calc(10% - 1px) 10%),#29312b;box-shadow:inset 0 1px 2px #000}
.range-minmax{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:10px;line-height:1;font-variant-numeric:tabular-nums;pointer-events:none}
.toggle-card{display:flex;align-items:center;gap:12px;cursor:pointer;border-top:1px solid var(--line);grid-column:span 2}.toggle-card>span{display:grid;gap:2px;flex:1}.toggle-card strong{font-size:12px}.toggle-card small{color:var(--muted)}.toggle-card input{position:absolute;opacity:0;pointer-events:none}.toggle-card i{position:relative;width:44px;height:24px;border-radius:999px;background:#29312b}.toggle-card i:after{content:"";position:absolute;width:18px;height:18px;top:3px;left:3px;border-radius:7px;background:#c7d0ca;transition:transform .14s,background .14s}.toggle-card input:checked+i{background:var(--accent-soft);box-shadow:inset 0 0 0 1px rgba(114,213,138,.6)}.toggle-card input:checked+i:after{transform:translateX(20px);background:var(--accent)}
.is-disabled{opacity:.42;pointer-events:none}
@media(max-width:1100px){.controls{grid-template-columns:repeat(2,minmax(0,1fr))}.toggle-card{grid-column:span 1}}
@media(max-width:900px){.app{padding:6px;gap:6px}.plot-shell{height:64vh;min-height:410px}.transport{flex-wrap:wrap}.transport-info{order:8;width:100%;text-align:left}.inline-slider{margin-left:auto;flex:1}.controls{grid-template-columns:1fr}.control-card+.control-card,.toggle-card{border-left:0;border-top:1px solid var(--line)}.toggle-card{grid-column:auto}}
.analysis-progress{min-width:150px;display:grid;grid-template-columns:minmax(90px,180px) 42px;gap:8px;align-items:center;font-size:11px;font-variant-numeric:tabular-nums}
.analysis-progress-track{height:8px;border-radius:999px;overflow:hidden;background:#29312b;box-shadow:inset 0 1px 2px #000}
#analysisProgressFill{width:0;height:100%;background:var(--accent);transition:width 80ms linear}
#analysisProgressText{text-align:right;color:var(--muted)}
.single-range{-webkit-appearance:none;appearance:none}
.single-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8px;border:1px solid rgba(255,255,255,.55);border-radius:8px;background:#151b17;box-shadow:0 2px 7px rgba(0,0,0,.65)}
.single-range::-moz-range-thumb{width:22px;height:22px;border:1px solid rgba(255,255,255,.55);border-radius:8px;background:#151b17;box-shadow:0 2px 7px rgba(0,0,0,.65)}

.resize-handle{position:absolute;z-index:6;opacity:.45;transition:opacity .12s;background:var(--accent);touch-action:none}
.resize-handle:hover,.resize-handle.dragging{opacity:1}
.resize-horizontal{height:5px;border-radius:999px;cursor:ns-resize}
.resize-vertical{width:5px;border-radius:999px;cursor:ew-resize}
.shell-resize{left:50%;bottom:4px;width:74px;height:6px;transform:translateX(-50%);border-radius:999px;cursor:ns-resize}
.endpoint-card{gap:10px}
.endpoint-toggle{display:flex;align-items:center;gap:12px;flex:1;cursor:pointer}
.endpoint-toggle>span{display:grid;gap:2px;flex:1}.endpoint-toggle strong{font-size:12px}.endpoint-toggle small{color:var(--muted)}
.endpoint-toggle input[type="checkbox"]{position:absolute;opacity:0;pointer-events:none}
.endpoint-toggle i{position:relative;width:44px;height:24px;border-radius:999px;background:#29312b;flex:none}
.endpoint-toggle i:after{content:"";position:absolute;width:18px;height:18px;top:3px;left:3px;border-radius:7px;background:#c7d0ca;transition:transform .14s,background .14s}
.endpoint-toggle input:checked+i{background:var(--accent-soft);box-shadow:inset 0 0 0 1px rgba(114,213,138,.6)}
.endpoint-toggle input:checked+i:after{transform:translateX(20px);background:var(--accent)}
.endpoint-colors{display:flex;gap:6px}
.endpoint-colors input[type="color"]{width:30px;height:30px;padding:2px;border:1px solid #354038;border-radius:8px;background:#171c18}
.endpoint-colors.is-disabled{opacity:.35;pointer-events:none}

.compact-select-card .control-head{grid-template-columns:1fr;margin-bottom:8px}
.scale-select{width:100%;max-width:none}

.mode-toggle{display:grid;grid-template-columns:1fr 1fr;margin-top:8px;padding:2px;border:1px solid #354038;border-radius:10px;background:#171c18}
.mode-toggle button{min-height:30px;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;font-size:11px}
.mode-toggle button.active{background:var(--accent-soft);color:var(--text);box-shadow:inset 0 0 0 1px rgba(114,213,138,.48)}

.tab-bar{position:relative;display:flex;align-items:stretch;min-height:38px;border:1px solid var(--line);border-radius:13px;background:var(--panel);overflow:hidden}
.tabs-list{display:flex;align-items:stretch;gap:1px;min-width:0;flex:1;overflow-x:auto;scrollbar-width:none}.tabs-list::-webkit-scrollbar{display:none}
.audio-tab{display:flex;align-items:center;gap:8px;max-width:260px;min-width:96px;padding:0 6px 0 12px;border:0;border-right:1px solid var(--line);background:#111512;color:var(--muted);cursor:pointer}
.audio-tab.active{background:#1a211c;color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
.audio-tab-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.audio-tab-close{display:grid;place-items:center;width:22px;height:22px;margin-left:auto;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;font-size:15px;line-height:1}
.audio-tab-close:hover{background:#283029;color:var(--text)}
.tab-add{flex:none;width:40px;border:0;border-left:1px solid var(--line);background:#171c18;color:var(--text);font-size:20px;cursor:pointer}.tab-add:hover{background:#202820}
.tab-context-menu{position:fixed;z-index:30;min-width:150px;padding:5px;border:1px solid #3b463e;border-radius:10px;background:#151a17;box-shadow:0 8px 28px rgba(0,0,0,.5)}
.tab-context-menu button{width:100%;padding:8px 10px;border:0;border-radius:7px;background:transparent;color:var(--text);text-align:left;cursor:pointer}.tab-context-menu button:hover{background:#232a25}
.filter-enable{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:10px;font-weight:400;cursor:pointer}.filter-enable input{accent-color:var(--accent)}
.db-filter-card .filter-head{grid-template-columns:1fr auto 26px auto}

body.hide-slider-ticks .single-range::-webkit-slider-runnable-track{background:#29312b}
body.hide-slider-ticks .single-range::-moz-range-track{background:#29312b}
body.hide-slider-ticks .dual-track{background:#29312b}
body.hide-slider-ticks .color-range .dual-track{background:linear-gradient(90deg,#000,#111a58 18%,#5a237f 36%,#c3364d 55%,#ef7c28 73%,#f8d34a 88%,#fff)}