feat: align ui with reference sample extractor layout

README.md

@@ -211,3 +211,8 @@ The default UI is now intentionally simple:
 Advanced parameters, run history, raw tables, and supervised semantic editing remain available in collapsed panels, but they are no longer required for the common path.
 
 See `docs/AUTOMATIC_CARD_FLOW_UI.md`.
+
+
+### Reference-style UI update
+
+The web UI now follows the supplied Sample Extractor reference: waveform-first canvas, grouped sample columns, persistent right settings panel, compact export bar, and a bottom selection/tools bar. Drop/upload still starts processing automatically.

docs/FEATURES.md

@@ -143,3 +143,10 @@ Status: implemented.
 | UI | Zoomable/pannable waveform | Implemented | Pinch/ctrl-wheel zoom and horizontal/shift-wheel pan. |
 | Pipeline | Automatic tuning | Implemented | `auto_tune=true` chooses onset sensitivity and grouping bounds from the separated target stem. |
 | Export | MIDI fallback | Implemented | Missing `pretty_midi` no longer breaks extraction; a compact fallback MIDI writer is used. |
+
+
+## Reference-style visual workflow
+
+- The default web UI is now a reference-style sample extractor workspace: compact top bar, large waveform, persistent settings panel, grouped sample columns, and bottom selection bar.
+- Users can still just drop audio anywhere; waveform rendering and extraction begin automatically.
+- Expert parameters and semantic editing tools are available without cluttering the default path.

docs/PROGRESS.md

@@ -362,3 +362,11 @@ Validation performed:
 - `scripts/test_sse_and_review_hits.py`.
 - `scripts/test_supervised_export_and_force_onset.py`.
 - `scripts/test_interactive_supervision.py`.
+
+
+## 2026-05-12 Reference image UI alignment
+
+- Reworked the frontend shell to match the provided Sample Extractor reference image.
+- Added centered file picker/current filename, right-aligned export actions, persistent right settings panel, waveform-first canvas, grouped sample columns, and compact bottom selection bar.
+- Kept automatic drop-to-process behavior and progressive sample-card rendering.
+- Moved secondary pipeline/history/supervision/tables into a compact tools drawer.

docs/REFERENCE_IMAGE_UI_ALIGNMENT.md

@@ -0,0 +1,47 @@
+# Reference Image UI Alignment
+
+This pass aligns the automatic card-flow web app with the supplied reference screenshot.
+
+## Implemented
+
+- Top application bar now follows the reference structure:
+  - compact waveform logo
+  - `Sample Extractor` title
+  - beta pill
+  - centered file picker/current filename
+  - right-aligned export actions
+- Main canvas is now split into:
+  - large waveform area on the left
+  - persistent settings panel on the right
+  - grouped sample board below the waveform
+  - compact bottom selection/action bar
+- The waveform panel includes:
+  - zoom controls
+  - current file/progress status
+  - time display
+  - transport row
+  - progress-tinted waveform rendering already provided by the previous real-progress pass
+- Sample results now visually match the card/column model:
+  - columns by detected type
+  - per-column count and draw button
+  - compact cards with mini-waveform, label, metadata, and small action strip
+- Everyday controls are visible in the right panel, while expert pipeline controls are collapsed under `Expert pipeline controls`.
+- Existing automatic behavior is preserved:
+  - drop/upload starts processing immediately
+  - browser-side waveform renders immediately
+  - progressive sample cards appear while processing
+  - dismiss, draw another, trim, extend, and save-edit actions remain available
+
+## Intentional differences from the reference
+
+- The screenshot's exact icons are approximated with Unicode/text controls to avoid adding an icon dependency.
+- `Export Selected` currently exports the generated pack because backend-level selected-card export is not yet implemented as a distinct artifact path.
+- Selection is currently all visible cards by default; the next iteration should add true per-card checkboxes and export only selected representatives.
+- The right panel remains visible by default because the reference shows it open.
+
+## Validation targets
+
+- No document-level scrolling on desktop sizes.
+- Waveform and sample board fill the viewport.
+- Advanced controls are available but not part of the primary visual path.
+- All previous backend APIs and semantic editing features remain reachable through the tools drawer.

docs/REMAINING_WORK.md

@@ -95,3 +95,11 @@ The default UI is now a cleaner fixed, non-scrolling workstation layout with col
 - Make card trim/extend rewrite preview audio immediately, not only create a forced hit for edited export.
 - Add true cached feature-vector local reclustering after dismiss/draw/move decisions.
 - Add browser-level tests for drag/drop auto-run, progressive cards, waveform zoom/pan, dismiss, draw, and clip edit flows.
+
+
+## Remaining UI fidelity work
+
+- Add true per-card checkbox state instead of treating all visible cards as selected.
+- Add selected-only backend export so `Export Selected` creates an artifact containing only selected representatives.
+- Replace Unicode icons with a small icon system if exact visual parity is required.
+- Validate with a real browser screenshot comparison against the supplied reference image.

docs/TASKS.md

@@ -191,3 +191,14 @@ Next:
 - [ ] Promote drawn candidate cards into backend representative choices.
 - [ ] Add immediate local reclustering after dismiss/draw constraints.
 - [ ] Add browser tests for the automatic card-flow path.
+
+
+## Reference image UI alignment
+
+- [x] Match top bar structure: brand, beta badge, current file, export buttons.
+- [x] Match main layout: waveform left, settings right, sample columns below.
+- [x] Keep automatic upload/process flow.
+- [x] Keep advanced controls hidden behind a collapsed expert section.
+- [x] Preserve existing review/edit tools in a secondary drawer.
+- [ ] Implement true per-card selection and selected-only export artifacts.
+- [ ] Run browser screenshot comparison in an environment that allows localhost rendering.

web/app.js

@@ -721,6 +721,23 @@ function groupedSamples(samples) {
   });
 }
 
+function updateSelectedExportCount(count) {
+  const text = `${count} Selected`;
+  if ($("selectedCountTop")) $("selectedCountTop").textContent = `(${count})`;
+  if ($("selectedCountBottom")) $("selectedCountBottom").textContent = text;
+  if ($("exportSelectedButton")) $("exportSelectedButton").disabled = count === 0 || !lastResult;
+  if ($("exportAllButton")) $("exportAllButton").disabled = !lastResult;
+}
+
+function updateControlOutputs() {
+  const pct = Math.round((Number($("onset_delta")?.value || 0) / 0.35) * 100);
+  if ($("sensitivityOutput")) $("sensitivityOutput").textContent = Number.isFinite(pct) ? `${pct}%` : "Auto";
+  if ($("minGapOutput")) $("minGapOutput").textContent = `${Math.round(Number($("min_gap")?.value || 0) * 1000)} ms`;
+  if ($("energyOutput")) $("energyOutput").textContent = `${Number($("energy_threshold_db")?.value || 0).toFixed(0)} dB`;
+  if ($("targetMaxOutput")) $("targetMaxOutput").textContent = String($("target_max")?.value || "Auto");
+  if ($("nccOutput")) $("nccOutput").textContent = `${Math.round(Number($("ncc_threshold")?.value || 0) * 100)}%`;
+}
+
 async function dismissSample(sample) {
   dismissedSampleKeys.add(sample._key || sampleKey(sample));
   renderSamples(lastResult || { samples: [] });
@@ -788,12 +805,13 @@ async function saveSampleEdit(sample) {
 function renderSamples(result) {
   const samples = visibleSamples(result);
   if ($("sampleCountLabel")) $("sampleCountLabel").textContent = `(${samples.length})`;
+  updateSelectedExportCount(samples.length);
 
   const grid = $("samplesGrid");
   if (grid) {
     const groups = groupedSamples(samples);
     grid.innerHTML = groups.map(([type, rows]) => `
-      <section class="sample-column" data-sample-type="${esc(type)}">
+      <section class="sample-column" data-sample-type="${esc(type)}" style="--column-color: ${esc(clusterColor(rows[0]?.cluster_id ?? type.length))}">
         <header class="sample-column-head">
           <strong>${esc(type)}</strong>
           <span>${rows.length}</span>
@@ -806,7 +824,7 @@ function renderSamples(result) {
             const edit = sample._edit || { startMs: 0, tailMs: 0 };
             const editLabel = (edit.startMs || edit.tailMs) ? ` · edit ${edit.startMs >= 0 ? "+" : ""}${edit.startMs}ms/${edit.tailMs >= 0 ? "+" : ""}${edit.tailMs}ms` : "";
             return `
-              <article class="sample-card ${absoluteIndex === selectedSampleIndex ? "selected" : ""}" style="border-top-color: ${esc(color)}" data-sample-card="${absoluteIndex}">
+              <article class="sample-card ${absoluteIndex === selectedSampleIndex ? "selected" : ""}" style="--card-color: ${esc(color)}" data-sample-card="${absoluteIndex}">
                 <button class="sample-play-zone" type="button" data-sample-audition="${absoluteIndex}">
                   <canvas class="sample-wave" data-wave-url="${esc(sample.url)}" data-wave-color="${esc(color)}"></canvas>
                   <span class="sample-card-footer">
@@ -1336,8 +1354,8 @@ function setFile(file) {
   clearError();
   selectedFile = file;
   clearRunViews();
-  $("dropTitle").textContent = file ? file.name : "Choose an audio file";
-  $("dropMeta").textContent = file ? `${(file.size / 1024 / 1024).toFixed(2)} MB · ${file.type || "audio"}` : "WAV, MP3, FLAC, AIFF, OGG, M4A";
+  $("dropTitle").textContent = file ? file.name : "Drop or choose audio";
+  $("dropMeta").textContent = file ? `${(file.size / 1024 / 1024).toFixed(2)} MB` : "Processing starts automatically";
   $("runButton").disabled = !file;
   currentProgress = { fraction: 0, status: "idle", stage_label: null, stage_fraction: 0 };
   currentJobStatus = "idle";
@@ -1556,4 +1574,30 @@ window.addEventListener("resize", () => {
   drawWaveform(activeOverview());
 });
 
+for (const id of ["onset_delta", "min_gap", "energy_threshold_db", "target_max", "ncc_threshold"]) {
+  const input = $(id);
+  if (input) input.addEventListener("input", updateControlOutputs);
+}
+for (const [id, factor] of [["zoomOutButton", 1 / 1.35], ["zoomInButton", 1.35]]) {
+  const button = $(id);
+  if (button) button.addEventListener("click", () => zoomWaveformAround($("waveform").getBoundingClientRect().left + $("waveform").getBoundingClientRect().width / 2, factor));
+}
+if ($("zoomFitButton")) $("zoomFitButton").addEventListener("click", () => { waveZoom = 1; waveOffset = 0; drawWaveform(activeOverview()); });
+for (const button of document.querySelectorAll("[data-zoom-command]")) {
+  button.addEventListener("click", () => zoomWaveformAround($("waveform").getBoundingClientRect().left + $("waveform").getBoundingClientRect().width / 2, button.dataset.zoomCommand === "in" ? 1.35 : 1 / 1.35));
+}
+if ($("openToolsButton")) $("openToolsButton").addEventListener("click", () => { const drawer = $("toolsDrawer"); drawer.hidden = !drawer.hidden; });
+if ($("selectAllSamplesButton")) $("selectAllSamplesButton").addEventListener("click", () => updateSelectedExportCount(visibleSamples(lastResult || { samples: [] }).length));
+if ($("clearSelectionButton")) $("clearSelectionButton").addEventListener("click", () => updateSelectedExportCount(0));
+function clickArchiveDownload() {
+  const link = $("downloads")?.querySelector('a[href*="sample-pack"], a[download], a');
+  if (link) link.click();
+  else showError("Nothing to export yet", new Error("Run extraction first; sample-pack ZIP appears when processing completes."));
+}
+if ($("exportAllButton")) $("exportAllButton").addEventListener("click", clickArchiveDownload);
+if ($("exportSelectedButton")) $("exportSelectedButton").addEventListener("click", clickArchiveDownload);
+if ($("resetUiButton")) $("resetUiButton").addEventListener("click", () => { populateConfig(); updateControlOutputs(); });
+if ($("groupSimilarToggle")) $("groupSimilarToggle").addEventListener("change", () => { $("clustering_mode").value = $("groupSimilarToggle").checked ? "batch_quality" : "online_preview"; });
+updateControlOutputs();
+
 boot();

web/index.html

@@ -3,114 +3,73 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Drum Sample Extractor</title>
+    <title>Sample Extractor</title>
     <link rel="stylesheet" href="/web/styles.css" />
   </head>
   <body>
     <div id="globalDropOverlay" class="global-drop-overlay" aria-hidden="true">
       <div>
-        <strong>Drop audio to load</strong>
-        <span>WAV, MP3, FLAC, AIFF, OGG, M4A</span>
+        <strong>Drop audio to extract samples</strong>
+        <span>The waveform appears immediately and processing starts automatically.</span>
       </div>
     </div>
 
-
     <div id="errorBanner" class="error-banner" role="alert" hidden>
       <div class="error-copy">
         <strong id="errorTitle">Request failed</strong>
         <span id="errorMessage">Something went wrong.</span>
         <small id="errorDetail"></small>
       </div>
-      <button id="dismissErrorButton" class="error-dismiss" type="button" aria-label="Dismiss error">×</button>
+      <button id="dismissErrorButton" class="icon-button" type="button" aria-label="Dismiss error">×</button>
     </div>
 
-    <div class="shell">
+    <div class="app-shell">
       <header class="topbar">
-        <div class="app-title">
+        <div class="brand">
           <span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span>
-          <div>
-            <strong>Drum Sample Extractor</strong>
-            <small id="resultSummary">Drop audio. Extraction starts automatically. Review the sample cards.</small>
-          </div>
+          <strong>Sample Extractor</strong>
+          <span class="beta-pill">BETA</span>
         </div>
 
-        <label class="upload-chip" id="dropzone" title="Click to browse, or drop audio anywhere on the app">
+        <label id="dropzone" class="file-picker" title="Click to browse, or drop audio anywhere">
           <input id="fileInput" type="file" accept="audio/*,.wav,.mp3,.flac,.aiff,.ogg,.m4a" />
-          <span class="upload-button-face">Drop / upload</span>
-          <span class="upload-copy">
-            <strong id="dropTitle">Drop a song here</strong>
-            <small id="dropMeta">Processing starts automatically</small>
-          </span>
+          <span id="dropTitle">Drop or choose audio</span>
+          <small id="dropMeta">Processing starts automatically</small>
+          <span aria-hidden="true">⌄</span>
         </label>
 
-        <div class="topbar-actions">
+        <div class="top-actions">
           <div class="backend-pill" aria-live="polite">
             <span class="status-dot" id="healthDot"></span>
             <span><strong id="healthText">Connecting</strong><small id="healthSubtext">FastAPI backend</small></span>
           </div>
-          <button id="runButton" class="primary-button" type="button" disabled><span>↻</span> Reprocess</button>
+          <button id="runButton" class="secondary-action" type="button" disabled>↻ Reprocess</button>
+          <button id="exportAllButton" class="secondary-action" type="button" disabled>⇧ Export All</button>
+          <button id="exportSelectedButton" class="primary-action" type="button" disabled>⇄ Export Selected <span id="selectedCountTop">(0)</span></button>
         </div>
       </header>
 
-      <main class="workstation">
-        <aside class="sidebar left-sidebar" aria-label="Left tool sidebar">
-          <details class="tool-panel workflow-panel" open>
-            <summary><span>Start here</span><small>Sequential extraction flow</small></summary>
-            <ol class="workflow-list" aria-label="Sample extraction steps">
-              <li id="flowLoad" class="flow-step active"><strong>1. Drop audio</strong><small>Waveform appears immediately.</small></li>
-              <li id="flowControls" class="flow-step"><strong>2. Automatic setup</strong><small>The app chooses practical detection and grouping values.</small></li>
-              <li id="flowExtract" class="flow-step"><strong>3. Processing</strong><small>Stem chunks and pipeline stages stream real progress.</small></li>
-              <li id="flowReview" class="flow-step"><strong>4. Review cards</strong><small>Dismiss weak samples or draw another candidate.</small></li>
-            </ol>
-          </details>
-
-          <details class="tool-panel source-panel">
-            <summary><span>Source</span><small>Upload and status</small></summary>
-            <div class="drop-hint-card">
-              <strong>Upload button is in the top bar.</strong>
-              <span>Drag an audio file onto any part of the app to load it.</span>
-            </div>
-            <div class="job-status-card">
-              <span id="jobPill" class="job-pill">idle</span>
-              <small>Current extraction job</small>
+      <main class="main-grid">
+        <section class="canvas-pane" aria-label="Waveform and samples">
+          <section class="wave-panel" aria-label="Waveform overview">
+            <div class="wave-toolbar">
+              <div class="zoom-tools" aria-label="Waveform zoom controls">
+                <button id="zoomInspectButton" class="tool-button" type="button" title="Zoom with pinch or wheel">⌕</button>
+                <button id="zoomOutButton" class="tool-button" type="button" title="Zoom out">−</button>
+                <button id="zoomInButton" class="tool-button" type="button" title="Zoom in">+</button>
+                <button id="zoomFitButton" class="tool-button fit" type="button" title="Fit waveform">Fit</button>
+              </div>
+              <div class="wave-status">
+                <strong id="waveTitle">Load audio</strong>
+                <span id="waveProgressText">Drop a file anywhere. Extraction starts automatically.</span>
+              </div>
+              <time id="transportTime" class="top-time">0:00 / 0:00</time>
             </div>
-          </details>
 
-          <details class="tool-panel selection-panel">
-            <summary><span>Selection</span><small>Audition context</small></summary>
-            <article class="review-card">
-              <strong>Selected hit</strong>
-              <span id="selectedHitMeta">Click an onset marker or hit row to audition the detected slice.</span>
-            </article>
-            <article class="review-card">
-              <strong>Selected sample</strong>
-              <span id="selectedSampleMeta">Click a sample card to hear the representative sample.</span>
-            </article>
-          </details>
+            <canvas id="waveform" class="waveform" height="360"></canvas>
 
-          <details class="tool-panel progress-panel">
-            <summary><span>Pipeline</span><small>Stage timings and logs</small></summary>
-            <div id="stageList" class="stage-list"></div>
-            <pre id="logs" class="logs" aria-live="polite"></pre>
-          </details>
-
-          <details class="tool-panel history-panel">
-            <summary><span>Run history</span><small>Completed manifests</small></summary>
-            <button id="refreshHistoryButton" class="ghost-button full-width" type="button">Refresh history</button>
-            <div id="historyList" class="history-list"></div>
-          </details>
-        </aside>
-
-        <section class="center-workspace" aria-label="Waveform and extracted samples">
-          <section class="wave-card panel" aria-label="Waveform overview">
-            <div class="wave-hud" aria-live="polite">
-              <strong id="waveTitle">1. Load audio</strong>
-              <small id="waveProgressText">Upload or drop an audio file to render its waveform before extraction.</small>
-            </div>
-            <canvas id="waveform" class="waveform" height="420"></canvas>
             <div class="transport-row" aria-label="Preview transport">
               <button id="transportPlayButton" class="round-play" type="button" aria-label="Play preview">▶</button>
-              <span id="transportTime" class="transport-time">0:00 / 0:00</span>
               <input id="transportSeek" class="transport-seek" type="range" min="0" max="1000" value="0" step="1" aria-label="Seek preview" />
               <div class="preview-tabs" aria-label="Preview source">
                 <button id="previewSourceButton" class="preview-tab active" type="button" data-preview-mode="source">Source</button>
@@ -118,6 +77,7 @@
                 <button id="previewReproductionButton" class="preview-tab" type="button" data-preview-mode="reproduction">Reproduced</button>
               </div>
             </div>
+
             <div class="hidden-audio-bank" aria-hidden="true">
               <audio id="sourcePreview"></audio>
               <audio id="stemAudio"></audio>
@@ -127,241 +87,160 @@
             </div>
           </section>
 
-          <section class="samples-section panel" aria-label="Extracted samples">
-            <div class="section-heading">
-              <h2>Sample cards <span id="sampleCountLabel">(0)</span></h2>
-              <small>Grouped by type. Click a card to audition; draw another when one is missing.</small>
+          <section class="sample-board" aria-label="Extracted samples">
+            <div class="board-header">
+              <h2>Extracted Samples <span id="sampleCountLabel">(0)</span></h2>
+              <span id="resultSummary">Drop audio. The app uploads, separates stems, tunes parameters, and deals sample cards.</span>
             </div>
             <div id="samplesGrid" class="sample-grid"></div>
           </section>
         </section>
 
-        <aside class="sidebar right-sidebar" aria-label="Right tool sidebar">
-          <details class="tool-panel control-card" open>
-            <summary><span>Simple controls</span><small>Optional overrides</small></summary>
-            <p class="panel-help">Most users can ignore this panel. Drop audio and the app starts automatically.</p>
-            <div class="control-group">
-              <label>Stem to sample
-                <select id="stem"></select>
-                <small class="field-hint">Default: drums. Use all for quick full-mix tests.</small>
-              </label>
-            </div>
+        <aside class="settings-pane" aria-label="Settings">
+          <header class="settings-head">
+            <strong>Advanced Settings</strong>
+            <button class="icon-button" type="button" aria-label="Hide settings">×</button>
+          </header>
+
+          <section class="settings-section simple-section">
+            <h3>Detection</h3>
+            <label class="control-line">Stem
+              <select id="stem"></select>
+            </label>
+            <label class="range-line">Sensitivity
+              <span class="range-wrap"><input id="onset_delta" type="range" min="0.01" max="0.35" step="0.005" /><output id="sensitivityOutput">Auto</output></span>
+            </label>
+            <label class="range-line">Minimum interval
+              <span class="range-wrap"><input id="min_gap" type="range" min="0.001" max="1" step="0.005" /><output id="minGapOutput">Auto</output></span>
+            </label>
+            <label class="range-line">Minimum amplitude
+              <span class="range-wrap"><input id="energy_threshold_db" type="range" min="-100" max="0" step="1" /><output id="energyOutput">Auto</output></span>
+            </label>
+          </section>
 
-            <div class="control-group sensitivity-group">
-              <label for="onset_delta">Hit sensitivity</label>
-              <input id="onset_delta" type="range" min="0.01" max="0.35" step="0.005" />
-              <div class="range-caption"><span>Fewer hits</span><span>More hits</span></div>
-              <small class="field-hint">Increase when quiet hits are missed; decrease when bleed or ghost transients are over-detected.</small>
-            </div>
+          <section class="settings-section simple-section">
+            <h3>Grouping</h3>
+            <label class="toggle-line"><span>Group Similar Hits</span><input id="groupSimilarToggle" type="checkbox" checked /></label>
+            <label class="range-line">Max groups
+              <span class="range-wrap"><input id="target_max" type="range" min="1" max="64" step="1" /><output id="targetMaxOutput">Auto</output></span>
+            </label>
+            <label class="range-line">Max group distance
+              <span class="range-wrap"><input id="ncc_threshold" type="range" min="0" max="1" step="0.01" /><output id="nccOutput">Auto</output></span>
+            </label>
+          </section>
+
+          <section class="settings-section simple-section">
+            <h3>Waveform</h3>
+            <label class="control-line">Resolution
+              <select id="waveformResolution"><option>High</option><option>Medium</option><option>Low</option></select>
+            </label>
+            <label class="control-line">Channels
+              <select id="waveformChannels"><option>Left & Right</option><option>Mono</option></select>
+            </label>
+          </section>
 
-            <div class="control-group">
-              <label>Sample groups
-                <div class="stepper">
-                  <button id="clusterMinusButton" type="button" class="step-button" aria-label="Decrease cluster count">−</button>
-                  <input id="target_max" type="number" min="0" max="256" step="1" aria-label="Sample group count" />
-                  <button id="clusterPlusButton" type="button" class="step-button" aria-label="Increase cluster count">+</button>
-                </div>
-                <small class="field-hint">Approximate maximum number of sample cards to produce.</small>
-              </label>
+          <details class="settings-section advanced-fold">
+            <summary>Expert pipeline controls</summary>
+            <div class="expert-grid">
+              <label>Demucs model<select id="demucs_model"></select></label>
+              <label>Clustering mode<select id="clustering_mode"><option value="batch_quality">batch quality</option><option value="online_preview">online preview</option></select></label>
+              <label>Shifts<input id="demucs_shifts" type="number" min="0" max="8" step="1" /></label>
+              <label>Overlap<input id="demucs_overlap" type="number" min="0" max="0.9" step="0.05" /></label>
+              <label>Onset mode<select id="onset_mode"><option value="auto">auto / multiband</option><option value="percussive">percussive</option><option value="harmonic">harmonic</option><option value="broadband">broadband</option></select></label>
+              <label>Pre-pad<input id="pre_pad" type="number" min="0" max="0.25" step="0.001" /></label>
+              <label>Min duration<input id="min_dur" type="number" min="0.001" max="10" step="0.005" /></label>
+              <label>Max duration<input id="max_dur" type="number" min="0.01" max="10" step="0.1" /></label>
+              <label>Target min<input id="target_min" type="number" min="0" max="256" step="1" /></label>
+              <label>Attack ms<input id="attack_ms" type="number" min="1" max="250" step="1" /></label>
+              <label>Mel prefilter<input id="mel_threshold" type="number" min="0" max="1" step="0.01" /></label>
+              <label>Linkage<select id="linkage"><option value="average">average</option><option value="complete">complete</option><option value="single">single</option></select></label>
+              <label>MIDI grid<select id="subdivision"><option value="4">4th</option><option value="8">8th</option><option value="16">16th</option><option value="32">32nd</option><option value="64">64th</option></select></label>
             </div>
-            <div class="preset-row common-presets">
-              <button id="usePreviewButton" class="ghost-button" type="button">Fast preview</button>
-              <button id="useQualityButton" class="ghost-button" type="button">Best quality</button>
+            <div class="toggles">
+              <label><input id="synthesize" type="checkbox" /> synthesize alternates</label>
+              <label><input id="quantize_midi" type="checkbox" /> quantize MIDI</label>
+              <label><input id="auto_tune" type="checkbox" checked /> automatic parameter tuning</label>
+              <label><input id="use_disk_cache" type="checkbox" /> disk cache stems/source loads</label>
+            </div>
+            <div class="preset-row">
+              <button id="usePreviewButton" class="secondary-action" type="button">Fast preview</button>
+              <button id="useQualityButton" class="secondary-action" type="button">Best quality</button>
+              <button id="clearCacheButton" class="secondary-action" type="button">Clear cache</button>
             </div>
           </details>
 
-          <details class="tool-panel downloads-panel">
-            <summary><span>Exports</span><small>Current artifacts</small></summary>
-            <div id="downloads" class="downloads compact-downloads"></div>
-            <div id="editedDownloads" class="downloads edited-downloads"></div>
-            <button id="exportStateButton" class="export-button full-width" type="button" disabled>Export edited pack</button>
-          </details>
-
-          <details class="tool-panel advanced-controls">
-            <summary><span>Advanced parameters</span><small>Only adjust when the common controls are not enough</small></summary>
-            <p class="panel-help">Advanced controls are grouped by pipeline stage. They are intentionally hidden from the normal extraction loop.</p>
-            <section class="advanced-section">
-              <h4>Stem separation</h4>
-              <div class="control-grid compact-controls">
-                <label>Demucs model
-                  <select id="demucs_model"></select>
-                </label>
-                <label>Shifts
-                  <input id="demucs_shifts" type="number" min="0" max="8" step="1" />
-                </label>
-                <label>Overlap
-                  <input id="demucs_overlap" type="number" min="0" max="0.9" step="0.05" />
-                </label>
-              </div>
-            </section>
-            <section class="advanced-section">
-              <h4>Hit detection</h4>
-              <div class="control-grid compact-controls">
-                <label>Onset mode
-                  <select id="onset_mode">
-                    <option value="auto">auto / multiband</option>
-                    <option value="percussive">percussive</option>
-                    <option value="harmonic">harmonic</option>
-                    <option value="broadband">broadband</option>
-                  </select>
-                </label>
-                <label>Energy threshold dB
-                  <input id="energy_threshold_db" type="number" min="-100" max="0" step="1" />
-                </label>
-                <label>Minimum gap seconds
-                  <input id="min_gap" type="number" min="0.001" max="1" step="0.005" />
-                </label>
-                <label>Pre-pad seconds
-                  <input id="pre_pad" type="number" min="0" max="0.25" step="0.001" />
-                </label>
-                <label>Min duration seconds
-                  <input id="min_dur" type="number" min="0.001" max="10" step="0.005" />
-                </label>
-                <label>Max duration seconds
-                  <input id="max_dur" type="number" min="0.01" max="10" step="0.1" />
-                </label>
-              </div>
-            </section>
-            <section class="advanced-section">
-              <h4>Grouping</h4>
-              <div class="control-grid compact-controls">
-                <label>Clustering mode
-                  <select id="clustering_mode">
-                    <option value="batch_quality">batch quality</option>
-                    <option value="online_preview">online preview</option>
-                  </select>
-                </label>
-                <label>Target min clusters
-                  <input id="target_min" type="number" min="0" max="256" step="1" />
-                </label>
-                <label>NCC threshold
-                  <input id="ncc_threshold" type="number" min="0" max="1" step="0.01" />
-                </label>
-                <label>Attack window ms
-                  <input id="attack_ms" type="number" min="1" max="250" step="1" />
-                </label>
-                <label>Mel prefilter
-                  <input id="mel_threshold" type="number" min="0" max="1" step="0.01" />
-                </label>
-                <label>Linkage
-                  <select id="linkage">
-                    <option value="average">average</option>
-                    <option value="complete">complete</option>
-                    <option value="single">single</option>
-                  </select>
-                </label>
-              </div>
-            </section>
-            <section class="advanced-section">
-              <h4>Export and cache</h4>
-              <div class="control-grid compact-controls">
-                <label>MIDI grid
-                  <select id="subdivision">
-                    <option value="8">8th</option>
-                    <option value="16">16th</option>
-                    <option value="32">32nd</option>
-                    <option value="64">64th</option>
-                  </select>
-                </label>
-              </div>
-              <div class="toggles">
-                <label><input id="synthesize" type="checkbox" /> synthesize alternates</label>
-                <label><input id="quantize_midi" type="checkbox" /> quantize MIDI</label>
-                <label class="advanced-hidden"><input id="auto_tune" type="checkbox" checked /> automatic parameter tuning</label>
-                <label><input id="use_disk_cache" type="checkbox" /> disk cache stems/source loads</label>
-              </div>
-              <button id="clearCacheButton" class="ghost-button full-width" type="button">Clear cache</button>
-            </section>
-          </details>
+          <button id="resetUiButton" class="reset-button" type="button">Reset to Defaults</button>
         </aside>
       </main>
 
-      <footer class="bottom-dock" aria-label="Bottom tool bar">
-        <details class="bottom-tool supervision-panel">
-          <summary><span>Review & edit</span><small>Move, suppress, restore, force-onset, explain, and export edited packs</small></summary>
-          <div class="bottom-tool-content">
-            <div class="supervision-header">
-              <div>
-                <h3>Semantic edit state</h3>
-                <p class="subtle">Moves, locks, suppressions, favorites, and accepted suggestions are saved as replayable semantic state next to the run manifest.</p>
-              </div>
-              <div class="supervision-actions">
-                <button id="refreshStateButton" class="ghost-button" type="button">Refresh state</button>
-                <button id="forceOnsetButton" class="ghost-button" type="button" disabled>Add-onset mode off</button>
-                <button id="undoButton" class="ghost-button" type="button" disabled>Undo edit</button>
-              </div>
-            </div>
+      <footer class="bottom-bar" aria-label="Selection and tools">
+        <div class="selection-count"><span class="checked-box">✓</span><strong id="selectedCountBottom">0 Selected</strong></div>
+        <div class="bottom-zoom"><button class="tool-button" type="button" data-zoom-command="out">⌕ −</button><input class="mini-slider" type="range" min="1" max="64" value="1" /><button class="tool-button" type="button" data-zoom-command="in">+</button></div>
+        <div class="bottom-actions"><button id="selectAllSamplesButton" class="secondary-action" type="button">☑ Select All</button><button id="clearSelectionButton" class="secondary-action" type="button">🗑 Clear</button><button id="openToolsButton" class="help-button" type="button">?</button></div>
+      </footer>
+
+      <section id="toolsDrawer" class="tools-drawer" aria-label="Review tools" hidden>
+        <div class="drawer-grid">
+          <article>
+            <h3>Pipeline</h3>
+            <span id="jobPill" class="job-pill">idle</span>
+            <div id="stageList" class="stage-list"></div>
+            <pre id="logs" class="logs" aria-live="polite"></pre>
+          </article>
+          <article>
+            <h3>Exports</h3>
+            <div id="downloads" class="downloads compact-downloads"></div>
+            <div id="editedDownloads" class="downloads edited-downloads"></div>
+            <button id="exportStateButton" class="secondary-action" type="button" disabled>Export edited pack</button>
+          </article>
+          <article>
+            <h3>Selection</h3>
+            <p id="selectedHitMeta">Click an onset marker or hit row to audition the detected slice.</p>
+            <p id="selectedSampleMeta">Click a sample card to hear the representative sample.</p>
             <div id="supervisionSummary" class="state-summary">No interactive state loaded.</div>
-            <div class="supervision-tools">
-              <label>Target cluster
-                <select id="targetClusterSelect"></select>
-              </label>
-              <button id="moveHitButton" class="secondary-button" type="button" disabled>Move selected hit</button>
-              <button id="pullHitButton" class="secondary-button" type="button" disabled>Pull into new cluster</button>
-              <button id="acceptHitButton" class="secondary-button" type="button" disabled>Accept hit</button>
-              <button id="favoriteHitButton" class="secondary-button" type="button" disabled>Favorite</button>
-              <button id="suppressHitButton" class="secondary-button danger-button" type="button" disabled>Suppress</button>
-              <button id="restoreHitButton" class="secondary-button" type="button" disabled>Restore</button>
-              <button id="lockClusterButton" class="secondary-button" type="button" disabled>Lock cluster</button>
-              <button id="explainClusterButton" class="secondary-button" type="button" disabled>Explain</button>
-            </div>
-            <div class="supervision-grid">
-              <article>
-                <h4>Outlier-first review queue</h4>
-                <div id="reviewQueue" class="compact-list"></div>
-              </article>
-              <article>
-                <h4>Cluster board</h4>
-                <div id="clusterBoard" class="compact-list"></div>
-              </article>
-              <article>
-                <h4>Suggestion inbox</h4>
-                <div id="suggestionInbox" class="compact-list"></div>
-              </article>
-              <article>
-                <h4>Constraint / event log</h4>
-                <div id="stateLog" class="compact-list"></div>
-              </article>
-            </div>
-            <pre id="clusterExplanation" class="explanation empty">Select a cluster and click Explain.</pre>
+          </article>
+          <article>
+            <h3>Run history</h3>
+            <button id="refreshHistoryButton" class="secondary-action" type="button">Refresh history</button>
+            <div id="historyList" class="history-list"></div>
+          </article>
+        </div>
+
+        <details class="drawer-advanced">
+          <summary>Review & edit state</summary>
+          <div class="supervision-actions">
+            <button id="refreshStateButton" class="secondary-action" type="button">Refresh state</button>
+            <button id="forceOnsetButton" class="secondary-action" type="button" disabled>Add-onset mode off</button>
+            <button id="undoButton" class="secondary-action" type="button" disabled>Undo edit</button>
+          </div>
+          <div class="supervision-tools">
+            <label>Target cluster<select id="targetClusterSelect"></select></label>
+            <button id="moveHitButton" class="secondary-action" type="button" disabled>Move selected hit</button>
+            <button id="pullHitButton" class="secondary-action" type="button" disabled>Pull into new cluster</button>
+            <button id="acceptHitButton" class="secondary-action" type="button" disabled>Accept hit</button>
+            <button id="favoriteHitButton" class="secondary-action" type="button" disabled>Favorite</button>
+            <button id="suppressHitButton" class="secondary-action danger" type="button" disabled>Suppress</button>
+            <button id="restoreHitButton" class="secondary-action" type="button" disabled>Restore</button>
+            <button id="lockClusterButton" class="secondary-action" type="button" disabled>Lock cluster</button>
+            <button id="explainClusterButton" class="secondary-action" type="button" disabled>Explain</button>
           </div>
+          <div class="supervision-grid">
+            <article><h4>Outlier-first review queue</h4><div id="reviewQueue" class="compact-list"></div></article>
+            <article><h4>Cluster board</h4><div id="clusterBoard" class="compact-list"></div></article>
+            <article><h4>Suggestion inbox</h4><div id="suggestionInbox" class="compact-list"></div></article>
+            <article><h4>Constraint / event log</h4><div id="stateLog" class="compact-list"></div></article>
+          </div>
+          <pre id="clusterExplanation" class="explanation empty">Select a cluster and click Explain.</pre>
         </details>
 
-        <details class="bottom-tool data-panel">
-          <summary><span>Tables</span><small>Raw sample and detected-hit rows</small></summary>
-          <div class="bottom-tool-content">
-            <div class="result-columns">
-              <section>
-                <h3>Representative samples</h3>
-                <div class="table-wrap">
-                  <table id="samplesTable">
-                    <thead>
-                      <tr>
-                        <th>Audition</th><th>Sample</th><th>Class</th><th>Hits</th><th>Score</th><th>Duration</th><th>First hit</th><th>File</th>
-                      </tr>
-                    </thead>
-                    <tbody></tbody>
-                  </table>
-                </div>
-              </section>
-              <section>
-                <h3>Detected hit review</h3>
-                <p class="subtle">Every detected slice is exported under <code>review/hits/</code>. Click rows or waveform markers to audition.</p>
-                <div class="table-wrap hit-table-wrap">
-                  <table id="hitsTable">
-                    <thead>
-                      <tr>
-                        <th>Audition</th><th>#</th><th>Label</th><th>Cluster</th><th>Confidence</th><th>Flags</th><th>Onset</th><th>Duration</th><th>Energy</th><th>File</th>
-                      </tr>
-                    </thead>
-                    <tbody></tbody>
-                  </table>
-                </div>
-              </section>
-            </div>
+        <details class="drawer-advanced">
+          <summary>Raw tables</summary>
+          <div class="result-columns">
+            <section><h3>Representative samples</h3><div class="table-wrap"><table id="samplesTable"><thead><tr><th>Audition</th><th>Sample</th><th>Class</th><th>Hits</th><th>Score</th><th>Duration</th><th>First hit</th><th>File</th></tr></thead><tbody></tbody></table></div></section>
+            <section><h3>Detected hit review</h3><div class="table-wrap hit-table-wrap"><table id="hitsTable"><thead><tr><th>Audition</th><th>#</th><th>Label</th><th>Cluster</th><th>Confidence</th><th>Flags</th><th>Onset</th><th>Duration</th><th>Energy</th><th>File</th></tr></thead><tbody></tbody></table></div></section>
           </div>
         </details>
-      </footer>
+      </section>
     </div>
     <script type="module" src="/web/app.js"></script>
   </body>

web/styles.css

@@ -1,1575 +1,172 @@
 :root {
   color-scheme: light;
-  --bg: #f6f6f8;
-  --surface: #ffffff;
-  --surface-soft: #fbfbfc;
-  --line: #e2e3e8;
-  --line-strong: #d1d3db;
-  --muted: #8a8f9b;
-  --text: #24252b;
-  --text-soft: #4f535d;
-  --accent: #6d45ec;
-  --accent-strong: #552bd8;
-  --accent-soft: #f0ebff;
-  --good: #64a946;
-  --bad: #d85867;
-  --warn: #ef9343;
-  --shadow: 0 14px 38px rgba(18, 21, 30, .055);
-  --radius-xl: 18px;
-  --radius-lg: 13px;
-  --topbar-h: 72px;
-  --bottom-h: 236px;
-  font-synthesis-weight: none;
+  --bg: #f7f7f9;
+  --panel: #ffffff;
+  --panel-soft: #fbfbfc;
+  --line: #e6e6eb;
+  --line-strong: #d7d8df;
+  --text: #1f2430;
+  --muted: #767b8a;
+  --faint: #a4a8b3;
+  --purple: #6d3df2;
+  --purple-dark: #5528d7;
+  --purple-soft: #eee8ff;
+  --bad: #d7374a;
+  --good: #29a36a;
+  --warn: #d99b22;
+  --shadow: 0 1px 2px rgba(18, 21, 28, .04), 0 12px 32px rgba(18, 21, 28, .06);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
-
 * { box-sizing: border-box; }
-html, body {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  overflow: hidden;
-  background: var(--bg);
-  color: var(--text);
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
-}
+html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); }
 button, input, select { font: inherit; }
 button { cursor: pointer; }
-button:disabled { opacity: .45; cursor: not-allowed; }
-code { color: var(--accent-strong); }
-
-.global-drop-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 100;
-  display: none;
-  place-items: center;
-  background: rgba(246, 246, 248, .74);
-  backdrop-filter: blur(10px);
-  pointer-events: none;
-}
-.global-drop-overlay.visible { display: grid; }
-.global-drop-overlay div {
-  display: grid;
-  gap: 8px;
-  min-width: min(520px, calc(100vw - 48px));
-  padding: 36px;
-  border: 2px dashed rgba(109, 69, 236, .45);
-  border-radius: 24px;
-  background: rgba(255, 255, 255, .92);
-  text-align: center;
-  box-shadow: var(--shadow);
-}
-.global-drop-overlay strong { font-size: 26px; letter-spacing: -.035em; }
-.global-drop-overlay span { color: var(--muted); }
-
-.error-banner {
-  position: fixed;
-  top: 14px;
-  left: 50%;
-  z-index: 140;
-  width: min(760px, calc(100vw - 32px));
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: start;
-  gap: 14px;
-  padding: 14px 14px 14px 16px;
-  border: 1px solid rgba(216, 88, 103, .34);
-  border-radius: 16px;
-  background: rgba(255, 248, 249, .97);
-  color: #7c202c;
-  box-shadow: 0 18px 44px rgba(126, 24, 42, .14);
-  transform: translateX(-50%);
-}
-.error-banner[hidden] { display: none; }
-.error-copy { min-width: 0; display: grid; gap: 3px; }
-.error-copy strong { font-size: 13px; letter-spacing: -.01em; }
-.error-copy span { overflow-wrap: anywhere; font-size: 13px; line-height: 1.35; }
-.error-copy small { overflow-wrap: anywhere; color: rgba(124, 32, 44, .72); line-height: 1.35; }
-.error-dismiss {
-  width: 28px;
-  height: 28px;
-  border: 1px solid rgba(216, 88, 103, .26);
-  border-radius: 999px;
-  background: #fff;
-  color: #7c202c;
-  font-size: 18px;
-  line-height: 1;
-}
-.error-dismiss:hover { border-color: rgba(216, 88, 103, .52); }
-
-.shell {
-  width: 100%;
-  height: 100vh;
-  min-height: 720px;
-  display: grid;
-  grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--bottom-h);
-  gap: 12px;
-  padding: 12px;
-  overflow: hidden;
-}
-
-.topbar {
-  min-height: 0;
-  display: grid;
-  grid-template-columns: minmax(250px, 1fr) minmax(360px, 560px) auto;
-  align-items: center;
-  gap: 14px;
-  padding: 0 4px;
-}
-.app-title {
-  min-width: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 14px;
-}
-.app-title strong {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 19px;
-  line-height: 1.05;
-  letter-spacing: -.035em;
-  font-weight: 620;
-}
-.app-title small {
-  display: block;
-  margin-top: 3px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--muted);
-  font-size: 12px;
-}
-.brand-mark {
-  width: 44px;
-  height: 44px;
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  border-radius: 14px;
-  background: #fff;
-  border: 1px solid var(--line);
-  box-shadow: 0 3px 10px rgba(18, 21, 30, .035);
-}
-.brand-mark i {
-  width: 4px;
-  border-radius: 999px;
-  background: #202125;
-  display: block;
-}
-.brand-mark i:nth-child(1) { height: 14px; }
-.brand-mark i:nth-child(2) { height: 25px; }
-.brand-mark i:nth-child(3) { height: 34px; }
-.brand-mark i:nth-child(4) { height: 22px; }
-.brand-mark i:nth-child(5) { height: 11px; }
-
-.upload-chip {
-  position: relative;
-  min-width: 0;
-  height: 58px;
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  gap: 12px;
-  padding: 7px 14px 7px 7px;
-  border: 1px solid var(--line);
-  border-radius: 16px;
-  background: rgba(255, 255, 255, .88);
-  box-shadow: 0 6px 18px rgba(18, 21, 30, .04);
-  cursor: pointer;
-  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
-}
-.upload-chip:hover,
-.upload-chip.dragging {
-  border-color: rgba(109, 69, 236, .45);
-  box-shadow: 0 10px 26px rgba(109, 69, 236, .10);
-  transform: translateY(-1px);
-}
-.upload-chip input {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  cursor: pointer;
-}
-.upload-button-face {
-  display: inline-grid;
-  place-items: center;
-  height: 42px;
-  padding: 0 16px;
-  border-radius: 11px;
-  background: #1f2025;
-  color: #fff;
-  font-size: 13px;
-  font-weight: 760;
-  white-space: nowrap;
-}
-.upload-copy { min-width: 0; }
-.upload-copy strong {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--text);
-  font-size: 13px;
-  line-height: 1.1;
-}
-.upload-copy small {
-  display: block;
-  margin-top: 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--muted);
-  font-size: 11px;
-}
-.topbar-actions {
-  display: inline-flex;
-  align-items: center;
-  justify-content: end;
-  gap: 12px;
-}
-.backend-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  color: var(--muted);
-  font-size: 11px;
-  opacity: .72;
-  white-space: nowrap;
-}
-.backend-pill strong { display: block; font-size: 11px; line-height: 1; }
+button:disabled { cursor: not-allowed; opacity: .48; }
+
+.app-shell { height: 100vh; display: grid; grid-template-rows: 70px minmax(0, 1fr) 54px; }
+.topbar { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(280px, 460px) minmax(440px, 1fr); align-items: center; gap: 18px; padding: 14px 26px; background: rgba(255,255,255,.86); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
+.brand, .top-actions, .backend-pill { display: flex; align-items: center; }
+.brand { gap: 12px; min-width: 0; }
+.brand strong { font-size: 18px; letter-spacing: -.02em; }
+.brand-mark { display: inline-flex; align-items: center; gap: 3px; height: 24px; }
+.brand-mark i { display: block; width: 3px; border-radius: 999px; background: #151821; }
+.brand-mark i:nth-child(1), .brand-mark i:nth-child(5) { height: 10px; opacity: .68; }
+.brand-mark i:nth-child(2), .brand-mark i:nth-child(4) { height: 20px; opacity: .86; }
+.brand-mark i:nth-child(3) { height: 28px; }
+.beta-pill { color: var(--purple); background: var(--purple-soft); border: 1px solid #dfd2ff; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
+.file-picker { justify-self: center; max-width: 460px; min-width: 260px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1px solid transparent; color: var(--text); font-weight: 600; white-space: nowrap; }
+.file-picker:hover { background: var(--panel); border-color: var(--line); }
+.file-picker input { display: none; }
+.file-picker small { max-width: 140px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 11px; font-weight: 500; }
+.top-actions { justify-content: end; gap: 10px; min-width: 0; }
+.backend-pill { gap: 7px; color: var(--muted); font-size: 11px; opacity: .75; }
+.backend-pill strong { display: block; line-height: 1; }
 .backend-pill small { display: none; }
-.status-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 999px;
-  background: var(--warn);
-}
+.status-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--warn); }
 .status-dot.ok { background: var(--good); }
 .status-dot.bad { background: var(--bad); }
-.primary-button {
-  min-width: 192px;
-  border: 0;
-  border-radius: 12px;
-  padding: 16px 22px;
-  background: linear-gradient(135deg, #7048f5, #552bd8);
-  color: #fff;
-  font-weight: 700;
-  font-size: 16px;
-  box-shadow: 0 14px 34px rgba(85, 43, 216, .20);
-  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
-}
-.primary-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 18px 40px rgba(85, 43, 216, .24); }
-.primary-button span { margin-right: 8px; }
-
-.workstation {
-  min-height: 0;
-  display: grid;
-  grid-template-columns: 292px minmax(0, 1fr) 332px;
-  gap: 12px;
-  overflow: hidden;
-}
-.sidebar {
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  overflow: auto;
-  scrollbar-width: thin;
-}
-.center-workspace {
-  min-width: 0;
-  min-height: 0;
-  display: grid;
-  grid-template-rows: minmax(270px, 1fr) minmax(172px, 220px);
-  gap: 12px;
-  overflow: hidden;
-}
-.panel,
-.tool-panel,
-.bottom-tool {
-  border: 1px solid var(--line);
-  border-radius: var(--radius-xl);
-  background: rgba(255, 255, 255, .90);
-  box-shadow: var(--shadow);
-}
-.tool-panel {
-  flex: 0 0 auto;
-  padding: 12px;
-}
-.tool-panel[open] { padding-bottom: 14px; }
-.tool-panel > summary,
-.bottom-tool > summary {
-  min-height: 38px;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  align-items: center;
-  gap: 2px;
-  list-style: none;
-  cursor: pointer;
-  user-select: none;
-}
-.tool-panel > summary::-webkit-details-marker,
-.bottom-tool > summary::-webkit-details-marker { display: none; }
-.tool-panel > summary span,
-.bottom-tool > summary span {
-  color: var(--text);
-  font-size: 14px;
-  font-weight: 760;
-  letter-spacing: -.02em;
-}
-.tool-panel > summary small,
-.bottom-tool > summary small {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--muted);
-  font-size: 11px;
-  font-weight: 520;
-}
-.tool-panel > summary::after,
-.bottom-tool > summary::after {
-  content: "+";
-  position: absolute;
-  right: 18px;
-  color: var(--muted);
-  font-weight: 760;
-}
-.tool-panel,
-.bottom-tool { position: relative; }
-.tool-panel[open] > summary::after,
-.bottom-tool[open] > summary::after { content: "–"; }
-
-.drop-hint-card,
-.job-status-card,
-.review-card {
-  margin-top: 10px;
-  border: 1px solid var(--line);
-  border-radius: var(--radius-lg);
-  background: var(--surface-soft);
-  padding: 12px;
-}
-.drop-hint-card strong,
-.drop-hint-card span,
-.review-card strong,
-.review-card span,
-.job-status-card small { display: block; }
-.drop-hint-card span,
-.review-card span,
-.job-status-card small {
-  margin-top: 4px;
-  color: var(--muted);
-  font-size: 12px;
-  line-height: 1.35;
-}
-.job-pill {
-  display: inline-flex;
-  align-items: center;
-  white-space: nowrap;
-  border: 1px solid rgba(228, 229, 233, .86);
-  border-radius: 999px;
-  padding: 6px 10px;
-  color: var(--muted);
-  background: rgba(255, 255, 255, .78);
-  font-size: 11px;
-  backdrop-filter: blur(10px);
-}
-
-.wave-card {
-  position: relative;
-  min-height: 0;
-  overflow: hidden;
-  display: grid;
-  grid-template-rows: minmax(0, 1fr) 72px;
-}
-.waveform {
-  display: block;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  background: linear-gradient(180deg, #fff, #fbfbfc);
-  cursor: crosshair;
-}
-.transport-row {
-  display: grid;
-  grid-template-columns: 48px 100px minmax(0, 1fr);
-  gap: 18px;
-  align-items: center;
-  padding: 10px 22px 18px;
-}
-.round-play {
-  width: 48px;
-  height: 48px;
-  display: grid;
-  place-items: center;
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  background: #fff;
-  color: #1f2024;
-  font-size: 16px;
-  line-height: 1;
-  box-shadow: 0 2px 8px rgba(18, 21, 30, .035);
-}
-.transport-time {
-  color: #6d717b;
-  font-size: 15px;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-.transport-seek {
-  appearance: none;
-  width: 100%;
-  height: 2px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  border-radius: 999px;
-  background: #d9dbe2;
-}
-.transport-seek::-webkit-slider-thumb {
-  appearance: none;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--accent);
-  border: 0;
-  opacity: 0;
-}
-.transport-seek:hover::-webkit-slider-thumb { opacity: 1; }
-.transport-seek::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--accent);
-  border: 0;
-  opacity: 0;
-}
-.transport-seek:hover::-moz-range-thumb { opacity: 1; }
+.primary-action, .secondary-action, .tool-button, .icon-button, .reset-button, .help-button { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 9px; min-height: 34px; padding: 0 13px; font-weight: 650; box-shadow: 0 1px 1px rgba(0,0,0,.02); }
+.primary-action { border-color: transparent; color: white; background: linear-gradient(135deg, #7348f5, #552bd8); box-shadow: 0 8px 18px rgba(109,61,242,.20); }
+.secondary-action:hover, .tool-button:hover, .icon-button:hover, .reset-button:hover { border-color: var(--line-strong); background: #fafafd; }
+.icon-button { width: 34px; padding: 0; font-size: 19px; }
+.help-button { width: 34px; height: 34px; padding: 0; border-radius: 999px; font-size: 18px; }
+
+.main-grid { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 0; }
+.canvas-pane { min-width: 0; display: grid; grid-template-rows: minmax(310px, 48vh) minmax(0, 1fr); border-right: 1px solid var(--line); }
+.wave-panel { position: relative; display: grid; grid-template-rows: 52px minmax(0, 1fr) 58px; background: var(--panel); border-bottom: 1px solid var(--line); }
+.wave-toolbar { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 12px 18px; }
+.zoom-tools { display: flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
+.zoom-tools .tool-button { border: 0; border-right: 1px solid var(--line); border-radius: 0; min-width: 38px; padding: 0 10px; box-shadow: none; }
+.zoom-tools .tool-button:last-child { border-right: 0; }
+.zoom-tools .fit { min-width: 52px; }
+.wave-status { min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: 10px; color: var(--muted); font-size: 13px; }
+.wave-status strong { color: var(--text); font-size: 13px; }
+.wave-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.top-time { color: #575c68; font-variant-numeric: tabular-nums; font-size: 14px; justify-self: end; }
+.waveform { width: 100%; height: 100%; display: block; background: linear-gradient(90deg, transparent, rgba(109,61,242,.035), transparent); }
+.transport-row { margin: 0 18px 14px; min-height: 44px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.88); box-shadow: 0 8px 26px rgba(18, 21, 28, .06); }
+.round-play { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: #12151b; font-size: 16px; }
+.transport-seek, input[type="range"] { accent-color: var(--purple); }
+.transport-seek { width: 100%; }
+.preview-tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); background: #f5f5f8; border-radius: 9px; }
+.preview-tab { border: 0; border-radius: 7px; background: transparent; padding: 6px 10px; color: var(--muted); font-size: 12px; font-weight: 650; }
+.preview-tab.active { background: var(--panel); color: var(--purple); box-shadow: 0 1px 2px rgba(18,21,28,.08); }
 .hidden-audio-bank { display: none; }
 
-.samples-section {
-  min-height: 0;
-  overflow: hidden;
-  padding: 14px;
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-}
-.section-heading {
-  display: flex;
-  align-items: end;
-  justify-content: space-between;
-  gap: 20px;
-  margin-bottom: 12px;
-}
-h2 { margin: 0; font-size: 17px; letter-spacing: -.035em; font-weight: 620; }
-.section-heading small { color: var(--muted); font-size: 12px; }
-.sample-grid {
-  min-height: 0;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
-  grid-auto-rows: 146px;
-  gap: 12px;
-  overflow: auto;
-  padding-right: 4px;
-  scrollbar-width: thin;
-}
-.sample-card {
-  display: grid;
-  grid-template-rows: minmax(0, 1fr) 54px;
-  min-height: 0;
-  border: 1px solid var(--line);
-  border-top: 4px solid var(--accent);
-  border-radius: 10px;
-  background: #fff;
-  box-shadow: 0 8px 20px rgba(18, 21, 30, .035);
-  overflow: hidden;
-  text-align: left;
-  padding: 0;
-}
-.sample-card:hover { box-shadow: 0 12px 28px rgba(18, 21, 30, .07); }
-.sample-card.selected { outline: 3px solid rgba(109, 69, 236, .14); }
-.sample-wave {
-  width: 100%;
-  height: 100%;
-  display: block;
-  background: #fff;
-}
-.sample-card-footer {
-  display: grid;
-  grid-template-columns: 34px minmax(0, 1fr);
-  gap: 9px;
-  align-items: center;
-  padding: 9px 10px;
-}
-.play-dot {
-  width: 32px;
-  height: 32px;
-  display: grid;
-  place-items: center;
-  border-radius: 999px;
-  background: #fff;
-  border: 1px solid var(--line);
-  color: var(--text);
-  font-size: 11px;
-}
-.sample-name {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 13px;
-  font-weight: 650;
-  letter-spacing: -.02em;
-}
-.sample-meta {
-  display: none;
-  margin-top: 3px;
-  color: var(--muted);
-  font-size: 11px;
-  font-weight: 500;
-}
-.empty { color: var(--muted); }
-
-label {
-  display: block;
-  color: var(--text-soft);
-  font-size: 13px;
-  font-weight: 700;
-  letter-spacing: -.01em;
-}
-.control-group { margin-top: 12px; }
-input, select {
-  width: 100%;
-  margin-top: 8px;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  padding: 10px 11px;
-  color: var(--text);
-  background: #fff;
-  outline: none;
-  font-size: 13px;
-}
-select { appearance: auto; }
-input:focus, select:focus {
-  border-color: rgba(109, 69, 236, .58);
-  box-shadow: 0 0 0 4px rgba(109, 69, 236, .075);
-}
-input[type="range"] {
-  appearance: none;
-  padding: 0;
-  height: 6px;
-  border: 0;
-  border-radius: 999px;
-  background: linear-gradient(90deg, var(--accent), #ececf1);
-}
-input[type="range"]::-webkit-slider-thumb {
-  appearance: none;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: var(--accent);
-  border: 0;
-  box-shadow: 0 6px 18px rgba(109, 69, 236, .26);
-}
-input[type="range"]::-moz-range-thumb {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: var(--accent);
-  border: 0;
-  box-shadow: 0 6px 18px rgba(109, 69, 236, .26);
-}
-.range-caption {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 7px;
-  color: var(--muted);
-  font-size: 11px;
-}
-.stepper {
-  display: grid;
-  grid-template-columns: 40px minmax(0, 1fr) 40px;
-  gap: 8px;
-  align-items: center;
-}
-.stepper input { text-align: center; }
-.step-button,
-.ghost-button,
-.secondary-button,
-.export-button,
-.mini-button {
-  border: 1px solid var(--line-strong);
-  border-radius: 10px;
-  background: #fff;
-  color: var(--text-soft);
-  font-weight: 700;
-}
-.step-button { height: 38px; margin-top: 8px; font-size: 18px; }
-.ghost-button,
-.secondary-button,
-.export-button {
-  padding: 9px 11px;
-  font-size: 12px;
-}
-.ghost-button:hover:not(:disabled),
-.secondary-button:hover:not(:disabled),
-.step-button:hover:not(:disabled) { border-color: rgba(109, 69, 236, .34); color: var(--accent-strong); }
-.export-button {
-  margin-top: 10px;
-  border: 0;
-  background: #1f2025;
-  color: #fff;
-}
-.full-width { width: 100%; }
-.danger-button { color: var(--bad); }
-.preset-row {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 8px;
-  margin-top: 10px;
-}
-.control-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 9px;
-  margin-top: 10px;
-}
-.toggles {
-  display: grid;
-  gap: 8px;
-  margin: 12px 0;
-}
-.toggles label {
-  display: grid;
-  grid-template-columns: 16px minmax(0, 1fr);
-  align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  color: var(--text-soft);
-}
-.toggles input { width: auto; margin: 0; }
-.downloads {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 10px;
-}
-.downloads:empty { display: none; }
-.downloads a, .table-wrap a {
-  color: var(--accent-strong);
-  text-decoration: none;
-  font-weight: 760;
-  background: var(--accent-soft);
-  border: 1px solid rgba(109, 69, 236, .16);
-  border-radius: 999px;
-  padding: 7px 10px;
-  font-size: 11px;
-}
-
-.stage-list {
-  display: grid;
-  gap: 8px;
-  margin-top: 10px;
-}
-.stage {
-  display: grid;
-  grid-template-columns: 14px minmax(0, 1fr) auto;
-  gap: 8px;
-  align-items: center;
-  padding: 9px;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  background: var(--surface-soft);
-}
-.stage .badge { width: 10px; height: 10px; border-radius: 999px; background: #d7d9e1; }
-.stage.running .badge { background: var(--accent); box-shadow: 0 0 0 5px rgba(109, 69, 236, .12); }
-.stage.done .badge { background: var(--good); }
-.stage.error .badge { background: var(--bad); }
-.stage strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text); }
-.stage small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); margin-top: 2px; font-size: 11px; }
-.stage time { color: var(--text-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
-.logs {
-  min-height: 88px;
-  max-height: 156px;
-  overflow: auto;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: 10px;
-  margin: 10px 0 0;
-  background: #fbfbfc;
-  color: #4f535d;
-  font-size: 11px;
-  line-height: 1.45;
-}
-.history-list, .compact-list {
-  display: grid;
-  gap: 8px;
-  margin-top: 10px;
-}
-.history-row, .compact-row, .suggestion-row, .log-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto auto;
-  gap: 8px;
-  align-items: center;
-  width: 100%;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  background: #fff;
-  padding: 10px;
-  text-align: left;
-}
-.compact-row, .suggestion-row, .log-row { grid-template-columns: minmax(0, 1fr) auto; }
-.history-row strong, .compact-row strong, .suggestion-row strong, .log-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 12px; }
-.history-row small, .compact-row small, .suggestion-row small, .log-row small { display: block; color: var(--muted); margin-top: 3px; line-height: 1.35; font-size: 11px; }
-.compact-row.locked { border-color: rgba(109, 69, 236, .35); background: #fbf9ff; }
-.compact-row.suppressed, tr.suppressed { opacity: .55; }
-.row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
-.mini-button {
-  border-radius: 999px;
-  padding: 5px 8px;
-  font-size: 11px;
-}
-
-.bottom-dock {
-  min-height: 0;
-  display: grid;
-  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .85fr);
-  gap: 12px;
-  overflow: hidden;
-}
-.bottom-tool {
-  min-height: 0;
-  overflow: hidden;
-  padding: 12px;
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-}
-.bottom-tool:not([open]) { display: block; }
-.bottom-tool-content {
-  min-height: 0;
-  overflow: auto;
-  padding-top: 8px;
-  scrollbar-width: thin;
-}
-.supervision-header {
-  display: flex;
-  justify-content: space-between;
-  gap: 14px;
-  align-items: flex-start;
-}
-.supervision-header h3, .result-columns h3 { margin: 0; font-size: 14px; }
-.subtle { color: var(--muted); font-size: 12px; line-height: 1.4; margin: 4px 0 0; }
-.supervision-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
-.state-summary {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin: 10px 0;
-}
-.state-summary span {
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  background: var(--surface-soft);
-  padding: 6px 10px;
-  color: var(--text-soft);
-  font-size: 11px;
-}
-.supervision-tools {
-  display: grid;
-  grid-template-columns: minmax(180px, 1fr) repeat(4, auto);
-  gap: 8px;
-  align-items: end;
-  margin-top: 10px;
-}
-.supervision-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(210px, 1fr));
-  gap: 10px;
-  margin-top: 12px;
-}
-.supervision-grid article {
-  min-height: 120px;
-  border: 1px solid var(--line);
-  border-radius: 14px;
-  padding: 10px;
-  background: var(--surface-soft);
-  overflow: auto;
-}
-.supervision-grid h4 { margin: 0 0 8px; font-size: 12px; }
-.explanation {
-  margin: 12px 0 0;
-  max-height: 160px;
-  overflow: auto;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: 10px;
-  background: #fbfbfc;
-  font-size: 11px;
-}
-.result-columns {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 12px;
-}
-.table-wrap {
-  overflow: auto;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  margin-top: 8px;
-  background: #fff;
-}
-table { width: 100%; border-collapse: collapse; font-size: 12px; }
-th, td {
-  text-align: left;
-  padding: 8px 10px;
-  border-bottom: 1px solid var(--line);
-  white-space: nowrap;
-}
-th { color: var(--muted); font-weight: 760; background: var(--surface-soft); }
-tr.selected { background: #f6f2ff; }
-tr.low-confidence { background: #fff8ed; }
-tr:last-child td { border-bottom: 0; }
-
-@media (max-width: 1180px) {
-  :root { --bottom-h: 244px; }
-  .shell { min-height: 650px; }
-  .topbar { grid-template-columns: minmax(180px, 1fr) minmax(260px, 420px) auto; }
-  .backend-pill { display: none; }
-  .workstation { grid-template-columns: 248px minmax(0, 1fr) 286px; }
-  .supervision-grid { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
-}
-@media (max-width: 900px) {
-  :root { --topbar-h: 134px; --bottom-h: 250px; }
-  .shell { padding: 10px; }
-  .topbar { grid-template-columns: 1fr; gap: 8px; }
-  .topbar-actions { justify-content: stretch; }
-  .primary-button { flex: 1; }
-  .workstation { grid-template-columns: 1fr; grid-template-rows: 0 minmax(0, 1fr) 0; }
-  .left-sidebar, .right-sidebar { display: none; }
-  .center-workspace { grid-template-rows: minmax(250px, 1fr) 170px; }
-  .bottom-dock { grid-template-columns: 1fr; }
-  .data-panel { display: none; }
-}
-
-/* Final control-specific overrides after the generic form styles. */
-.upload-chip input {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  border-radius: inherit;
-  background: transparent;
-}
-.transport-row .transport-seek {
-  appearance: none;
-  height: 2px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  border-radius: 999px;
-  background: #d9dbe2;
-}
-.transport-row .transport-seek::-webkit-slider-thumb {
-  appearance: none;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--accent);
-  border: 0;
-  opacity: 0;
-  box-shadow: none;
-}
-.transport-row .transport-seek:hover::-webkit-slider-thumb { opacity: 1; }
-.transport-row .transport-seek::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--accent);
-  border: 0;
-  opacity: 0;
-  box-shadow: none;
-}
-.transport-row .transport-seek:hover::-moz-range-thumb { opacity: 1; }
-
-/* Pass 9: clearer preview and parameter hierarchy. */
-.transport-row {
-  grid-template-columns: 48px 100px minmax(120px, 1fr) auto;
-  gap: 14px;
-}
-.preview-tabs {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px;
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  background: #f7f7fa;
-  white-space: nowrap;
-}
-.preview-tab {
-  border: 0;
-  border-radius: 999px;
-  padding: 7px 10px;
-  background: transparent;
-  color: var(--muted);
-  font-size: 11px;
-  font-weight: 800;
-  cursor: pointer;
-}
-.preview-tab.active {
-  background: #fff;
-  color: var(--accent-strong);
-  box-shadow: 0 2px 8px rgba(18, 21, 30, .06);
-}
-.panel-help,
-.field-hint {
-  display: block;
-  color: var(--muted);
-  font-size: 11px;
-  line-height: 1.4;
-  font-weight: 560;
-}
-.panel-help {
-  margin: 10px 0 4px;
-}
-.field-hint {
-  margin-top: 7px;
-}
-.common-presets {
-  grid-template-columns: 1fr 1fr;
-}
-.advanced-section {
-  margin-top: 14px;
-  padding-top: 12px;
-  border-top: 1px solid rgba(228, 229, 233, .75);
-}
-.advanced-section:first-of-type {
-  border-top: 0;
-  padding-top: 0;
-}
-.advanced-section h4 {
-  margin: 0 0 8px;
-  color: var(--text);
-  font-size: 12px;
-  letter-spacing: -.01em;
-}
-@media (max-width: 920px) {
-  .transport-row {
-    grid-template-columns: 44px 86px minmax(0, 1fr);
-  }
-  .preview-tabs {
-    grid-column: 1 / -1;
-    justify-content: center;
-  }
-}
-
-/* Clean default UI pass: keep the app usable at a glance and hide workstation depth until requested. */
-:root {
-  --topbar-h: 58px;
-  --bottom-h: 44px;
-  --radius-xl: 14px;
-  --radius-lg: 10px;
-  --shadow: 0 8px 24px rgba(18, 21, 30, .045);
-}
-
-.shell {
-  grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--bottom-h);
-  gap: 8px;
-  padding: 8px;
-}
-.shell:has(.bottom-tool[open]) {
-  grid-template-rows: var(--topbar-h) minmax(0, 1fr) minmax(230px, 33vh);
-}
-
-.topbar {
-  grid-template-columns: minmax(210px, 1fr) minmax(260px, 420px) auto;
-  gap: 10px;
-  padding: 0;
-}
-.app-title { gap: 10px; }
-.brand-mark {
-  width: 34px;
-  height: 34px;
-  border-radius: 10px;
-  box-shadow: none;
-}
-.brand-mark i { width: 3px; }
-.brand-mark i:nth-child(1) { height: 10px; }
-.brand-mark i:nth-child(2) { height: 18px; }
-.brand-mark i:nth-child(3) { height: 25px; }
-.brand-mark i:nth-child(4) { height: 15px; }
-.brand-mark i:nth-child(5) { height: 8px; }
-.app-title strong { font-size: 16px; }
-.app-title small { display: none; }
-
-.upload-chip {
-  height: 44px;
-  gap: 9px;
-  padding: 5px 10px 5px 5px;
-  border-radius: 12px;
-  box-shadow: none;
-}
-.upload-button-face {
-  height: 32px;
-  padding: 0 12px;
-  border-radius: 9px;
-  font-size: 12px;
-}
-.upload-copy strong { font-size: 12px; }
-.upload-copy small { display: none; }
-.backend-pill { max-width: 88px; overflow: hidden; }
-.backend-pill strong { max-width: 68px; overflow: hidden; text-overflow: ellipsis; }
-.primary-button {
-  min-width: 156px;
-  padding: 12px 16px;
-  border-radius: 11px;
-  font-size: 14px;
-  box-shadow: 0 10px 26px rgba(85, 43, 216, .18);
-}
-.primary-button span { margin-right: 5px; }
-
-.workstation {
-  grid-template-columns: 214px minmax(0, 1fr) 292px;
-  gap: 8px;
-}
-.sidebar { gap: 6px; overflow: hidden; }
-.sidebar:hover { overflow: auto; }
-.center-workspace {
-  grid-template-rows: minmax(280px, 1fr) minmax(142px, 190px);
-  gap: 8px;
-}
-.panel,
-.tool-panel,
-.bottom-tool {
-  border-color: rgba(226, 227, 232, .78);
-  box-shadow: none;
-  background: rgba(255, 255, 255, .94);
-}
-.tool-panel {
-  padding: 9px 10px;
-  border-radius: 12px;
-}
-.tool-panel[open] { padding-bottom: 10px; }
-.tool-panel > summary,
-.bottom-tool > summary {
-  min-height: 28px;
-  gap: 0;
-}
-.tool-panel > summary span,
-.bottom-tool > summary span {
-  font-size: 12px;
-  letter-spacing: -.01em;
-}
-.tool-panel > summary small,
-.bottom-tool > summary small {
-  font-size: 10px;
-}
-.left-sidebar .tool-panel > summary small,
-.control-card .panel-help,
-.control-card .field-hint,
-.control-card .range-caption,
-.section-heading small,
-.drop-hint-card,
-.review-card strong {
-  display: none;
-}
-.tool-panel > summary::after,
-.bottom-tool > summary::after {
-  right: 12px;
-  font-size: 12px;
-}
-
-.drop-hint-card,
-.job-status-card,
-.review-card {
-  margin-top: 8px;
-  padding: 9px;
-  border-radius: 10px;
-}
-.review-card span,
-.job-status-card small {
-  font-size: 11px;
-  line-height: 1.3;
-}
-.stage-list { gap: 5px; margin-top: 8px; }
-.stage {
-  grid-template-columns: 10px minmax(0, 1fr) auto;
-  gap: 6px;
-  padding: 7px;
-  border-radius: 9px;
-}
-.stage small { display: none; }
-.logs { display: none; }
-.history-list, .compact-list { gap: 6px; }
-.history-row, .compact-row, .suggestion-row, .log-row {
-  padding: 8px;
-  border-radius: 10px;
-}
-
-.wave-card {
-  grid-template-rows: minmax(0, 1fr) 54px;
-  border-radius: 16px;
-}
-.transport-row {
-  grid-template-columns: 38px 76px minmax(0, 1fr) auto;
-  gap: 10px;
-  padding: 8px 14px 10px;
-}
-.round-play {
-  width: 38px;
-  height: 38px;
-  font-size: 13px;
-}
-.transport-time { font-size: 12px; }
-.preview-tabs {
-  padding: 3px;
-  gap: 2px;
-}
-.preview-tab {
-  padding: 6px 8px;
-  font-size: 10px;
-}
-
-.samples-section {
-  padding: 10px;
-  border-radius: 14px;
-}
-.section-heading { margin-bottom: 8px; }
-h2 { font-size: 14px; }
-.sample-grid {
-  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
-  grid-auto-rows: 124px;
-  gap: 8px;
-}
-.sample-card {
-  grid-template-rows: minmax(0, 1fr) 42px;
-  border-top-width: 3px;
-  border-radius: 9px;
-  box-shadow: none;
-}
-.sample-card-footer {
-  grid-template-columns: 26px minmax(0, 1fr);
-  gap: 7px;
-  padding: 7px;
-}
-.play-dot {
-  width: 25px;
-  height: 25px;
-  font-size: 10px;
-}
-.sample-name { font-size: 11px; }
-
-.control-group { margin-top: 9px; }
-label { font-size: 12px; }
-input, select {
-  margin-top: 6px;
-  padding: 8px 9px;
-  border-radius: 9px;
-  font-size: 12px;
-}
-input[type="range"] { height: 4px; }
-input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; }
-input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; }
-.stepper { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 6px; }
-.step-button { height: 32px; margin-top: 6px; }
-.ghost-button,
-.secondary-button,
-.export-button {
-  padding: 7px 9px;
-  border-radius: 9px;
-  font-size: 11px;
-}
-.preset-row { gap: 6px; margin-top: 8px; }
-.downloads { gap: 6px; margin-top: 8px; }
-.downloads a, .table-wrap a { padding: 6px 8px; font-size: 10px; }
-.advanced-section { margin-top: 10px; padding-top: 9px; }
-.advanced-section h4 { font-size: 11px; margin-bottom: 6px; }
-.control-grid { gap: 7px; margin-top: 7px; }
-
-.bottom-dock {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
-}
-.bottom-tool {
-  padding: 8px 10px;
-  border-radius: 12px;
-}
-.bottom-tool[open] {
-  padding: 10px;
-}
-.bottom-tool:not([open]) {
-  display: grid;
-  align-items: center;
-}
-.bottom-tool:not([open]) > summary small { display: none; }
-.bottom-tool-content { padding-top: 8px; }
-.supervision-header p,
-.supervision-header h3,
-.result-columns h3,
-.subtle {
-  display: none;
-}
-.supervision-header { justify-content: end; }
-.state-summary { margin: 7px 0; gap: 5px; }
-.state-summary span { padding: 5px 8px; font-size: 10px; }
-.supervision-tools {
-  grid-template-columns: minmax(160px, 1fr) repeat(4, auto);
-  gap: 6px;
-  margin-top: 8px;
-}
-.supervision-grid {
-  grid-template-columns: repeat(4, minmax(160px, 1fr));
-  gap: 8px;
-  margin-top: 8px;
-}
-.supervision-grid article {
-  min-height: 96px;
-  padding: 8px;
-  border-radius: 10px;
-}
-.supervision-grid h4 { font-size: 11px; margin-bottom: 6px; }
-.explanation { margin-top: 8px; max-height: 110px; }
+.sample-board { min-height: 0; display: grid; grid-template-rows: 52px minmax(0, 1fr); background: #fbfbfc; }
+.board-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
+.board-header h2 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
+.board-header span { color: var(--muted); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.sample-grid { min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); overflow-x: auto; overflow-y: hidden; padding: 0; }
+.sample-column { min-width: 170px; display: grid; grid-template-rows: 42px minmax(0,1fr) 42px; border-right: 1px solid var(--line); background: #fcfcfd; }
+.sample-column-head { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--line); color: #4b505b; font-size: 13px; }
+.sample-column-head::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--column-color, var(--purple)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--column-color, var(--purple)) 14%, transparent); }
+.sample-column-head strong { text-transform: capitalize; }
+.sample-column-head span { justify-self: start; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: #f0f1f5; color: var(--muted); font-size: 12px; }
+.draw-card-button { border: 0; background: transparent; color: #596070; font-size: 20px; line-height: 1; padding: 0 2px; }
+.sample-column-list { min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
+.sample-card { position: relative; border: 1px solid color-mix(in srgb, var(--card-color, var(--purple)) 58%, var(--line)); border-radius: 9px; background: var(--panel); box-shadow: 0 8px 20px rgba(18, 21, 28, .05); overflow: hidden; }
+.sample-card.selected { box-shadow: 0 0 0 2px color-mix(in srgb, var(--card-color, var(--purple)) 24%, transparent), 0 10px 26px rgba(18,21,28,.08); }
+.sample-play-zone { width: 100%; border: 0; background: transparent; padding: 0; text-align: left; }
+.sample-wave { width: 100%; height: 74px; display: block; }
+.sample-card-footer { display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: center; gap: 7px; padding: 0 10px 7px; }
+.play-dot { width: 14px; height: 14px; display: inline-grid; place-items: center; color: var(--purple); font-size: 10px; }
+.sample-name { display: block; color: #2c303a; font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sample-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
+.sample-card-actions { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }
+.sample-card-actions button { height: 30px; border: 0; border-right: 1px solid var(--line); background: #fff; color: #3e4350; font-size: 0; }
+.sample-card-actions button::before { font-size: 13px; }
+.sample-card-actions button:nth-child(1)::before { content: "×"; }
+.sample-card-actions button:nth-child(2)::before { content: "◁"; }
+.sample-card-actions button:nth-child(3)::before { content: "▷"; }
+.sample-card-actions button:nth-child(4)::before { content: "⋯"; }
+.sample-card-actions button:last-child { border-right: 0; }
+.empty-drop-state, .empty { color: var(--muted); padding: 18px; font-size: 13px; }
+
+.settings-pane { min-width: 0; background: var(--panel); display: grid; grid-template-rows: 58px minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, 1fr) 58px; border-left: 1px solid var(--line); overflow: hidden; }
+.settings-head { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line); }
+.settings-head strong { font-size: 14px; }
+.settings-section { padding: 18px 20px; border-bottom: 1px solid var(--line); }
+.settings-section h3 { margin: 0 0 14px; font-size: 13px; color: #383d49; }
+.control-line, .range-line, .toggle-line { display: grid; gap: 8px; margin-bottom: 16px; color: #4b505c; font-size: 13px; font-weight: 560; }
+.control-line select, .expert-grid select, .expert-grid input { width: 100%; height: 38px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); padding: 0 10px; color: var(--text); }
+.range-wrap { display: grid; grid-template-columns: minmax(0,1fr) 54px; align-items: center; gap: 12px; }
+.range-wrap output { text-align: right; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
+.toggle-line { grid-template-columns: 1fr auto; align-items: center; }
+.toggle-line input { width: 32px; height: 18px; accent-color: var(--purple); }
+.advanced-fold { min-height: 0; overflow-y: auto; padding-bottom: 12px; }
+.advanced-fold summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #383d49; }
+.expert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
+.expert-grid label, .toggles label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
+.toggles { display: grid; gap: 8px; margin: 14px 0; }
+.preset-row { display: flex; gap: 8px; flex-wrap: wrap; }
+.reset-button { align-self: center; justify-self: stretch; margin: 10px 20px; }
+
+.bottom-bar { display: grid; grid-template-columns: minmax(160px,1fr) minmax(260px,360px) minmax(320px,1fr); align-items: center; gap: 16px; padding: 10px 26px; border-top: 1px solid var(--line); background: rgba(255,255,255,.9); backdrop-filter: blur(16px); }
+.selection-count { display: flex; align-items: center; gap: 10px; color: #4f5563; font-size: 13px; }
+.checked-box { width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center; color: white; background: var(--purple); font-size: 12px; }
+.bottom-zoom { justify-self: center; display: grid; grid-template-columns: auto minmax(160px, 1fr) auto; align-items: center; gap: 8px; width: 100%; }
+.mini-slider { width: 100%; }
+.bottom-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
+
+.tools-drawer { position: absolute; left: 24px; right: 24px; bottom: 64px; max-height: 52vh; overflow: auto; background: rgba(255,255,255,.97); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 18px; z-index: 10; }
+.drawer-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
+.drawer-grid article, .drawer-advanced { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 14px; }
+.drawer-grid h3 { margin: 0 0 10px; font-size: 14px; }
+.logs, .explanation { max-height: 180px; overflow: auto; white-space: pre-wrap; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: #f8f8fa; color: #4f5563; font-size: 11px; }
+.stage-list, .history-list, .compact-list, .downloads { display: grid; gap: 8px; }
+.downloads a { color: var(--purple); text-decoration: none; font-weight: 650; font-size: 13px; }
+.job-pill { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: var(--purple-soft); color: var(--purple); font-size: 12px; font-weight: 700; }
+.supervision-tools, .supervision-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
+.supervision-grid, .result-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
+.table-wrap { overflow: auto; max-height: 260px; border: 1px solid var(--line); border-radius: 10px; }
+table { border-collapse: collapse; width: 100%; font-size: 12px; }
+th, td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
+.compact-row, .history-row { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
+.compact-row small, .history-row small { display: block; color: var(--muted); }
+.danger { color: var(--bad); }
+
+.error-banner { position: fixed; z-index: 30; left: 50%; top: 78px; transform: translateX(-50%); width: min(760px, calc(100vw - 32px)); display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 14px; border: 1px solid #fac8d0; background: #fff4f6; box-shadow: var(--shadow); color: #611923; }
+.error-copy { display: grid; gap: 3px; }
+.error-copy span { font-size: 13px; }
+.error-copy small { color: #8a3440; white-space: pre-wrap; }
+.global-drop-overlay { position: fixed; inset: 0; z-index: 25; display: none; place-items: center; background: rgba(109,61,242,.12); backdrop-filter: blur(4px); }
+.global-drop-overlay.active { display: grid; }
+.global-drop-overlay > div { display: grid; gap: 6px; place-items: center; padding: 32px 42px; border-radius: 18px; border: 1px solid #d9ccff; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
+.global-drop-overlay strong { font-size: 20px; }
+.global-drop-overlay span { color: var(--muted); }
 
 @media (max-width: 1180px) {
-  :root { --bottom-h: 44px; }
-  .workstation { grid-template-columns: 180px minmax(0, 1fr) 270px; }
-  .shell:has(.bottom-tool[open]) { grid-template-rows: var(--topbar-h) minmax(0, 1fr) minmax(230px, 36vh); }
+  .topbar { grid-template-columns: auto minmax(220px,1fr) auto; padding-inline: 16px; }
+  .backend-pill, #runButton { display: none; }
+  .main-grid { grid-template-columns: minmax(0, 1fr) 300px; }
+  .sample-grid { grid-auto-columns: 160px; }
 }
 @media (max-width: 900px) {
-  :root { --topbar-h: 118px; --bottom-h: 44px; }
-  .workstation { grid-template-columns: 1fr; grid-template-rows: 0 minmax(0, 1fr) 0; }
-  .topbar { grid-template-columns: 1fr; }
-  .left-sidebar, .right-sidebar { display: none; }
-  .shell:has(.bottom-tool[open]) { grid-template-rows: var(--topbar-h) minmax(0, 1fr) minmax(240px, 38vh); }
-}
-
-.workflow-list {
-  display: grid;
-  gap: 8px;
-  margin: 12px 0 0;
-  padding: 0;
-  list-style: none;
-}
-.flow-step {
-  display: grid;
-  gap: 2px;
-  padding: 10px 11px;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  background: var(--surface-soft);
-  opacity: .72;
-}
-.flow-step strong {
-  color: var(--text);
-  font-size: 12px;
-  letter-spacing: -.01em;
-}
-.flow-step small {
-  color: var(--muted);
-  font-size: 11px;
-  line-height: 1.25;
-}
-.flow-step.active {
-  border-color: rgba(109, 69, 236, .42);
-  background: var(--accent-soft);
-  opacity: 1;
-}
-.flow-step.done {
-  border-color: rgba(100, 169, 70, .34);
-  background: rgba(100, 169, 70, .08);
-  opacity: .95;
-}
-.wave-hud {
-  position: absolute;
-  z-index: 2;
-  top: 18px;
-  left: 20px;
-  max-width: min(520px, calc(100% - 40px));
-  display: grid;
-  gap: 3px;
-  padding: 10px 12px;
-  border: 1px solid rgba(226, 227, 232, .82);
-  border-radius: 14px;
-  background: rgba(255, 255, 255, .72);
-  backdrop-filter: blur(12px);
-  pointer-events: none;
-}
-.wave-hud strong {
-  font-size: 13px;
-  line-height: 1.15;
-  letter-spacing: -.02em;
-}
-.wave-hud small {
-  color: var(--muted);
-  font-size: 11px;
-  line-height: 1.25;
-}
-.stage-progress {
-  grid-column: 2 / 4;
-  height: 3px;
-  overflow: hidden;
-  border-radius: 999px;
-  background: rgba(226, 227, 232, .9);
-}
-.stage-progress span {
-  display: block;
-  height: 100%;
-  width: 0%;
-  border-radius: inherit;
-  background: var(--accent);
-  transition: width .16s ease;
-}
-
-/* Automatic card-flow UI pass. Keep the default screen quiet: drop, watch waveform, review cards. */
-:root {
-  --topbar-h: 64px;
-  --bottom-h: 54px;
-}
-.shell {
-  gap: 8px;
-  padding: 10px;
-  min-height: 620px;
-}
-.topbar {
-  grid-template-columns: minmax(220px, .8fr) minmax(320px, 560px) auto;
-  gap: 10px;
-}
-.app-title small { max-width: 520px; }
-.upload-chip {
-  height: 52px;
-  border: 1.5px dashed rgba(109, 69, 236, .34);
-  background: rgba(255,255,255,.94);
-}
-.upload-button-face {
-  height: 38px;
-  background: var(--accent);
-}
-.primary-button {
-  min-width: 132px;
-  padding: 13px 16px;
-  background: #232329;
-  box-shadow: none;
-}
-.backend-pill { display: none; }
-.workstation {
-  grid-template-columns: 218px minmax(0, 1fr) 248px;
-  gap: 8px;
-}
-.sidebar {
-  gap: 7px;
-  overflow: hidden;
-}
-.sidebar:hover { overflow: auto; }
-.tool-panel {
-  border-radius: 14px;
-  box-shadow: none;
-}
-.tool-panel > summary {
-  min-height: 40px;
-  padding: 10px 12px;
-}
-.tool-panel > summary small,
-.panel-help,
-.field-hint,
-.drop-hint-card,
-.selection-panel,
-.history-panel,
-.downloads-panel,
-.advanced-controls,
-.progress-panel {
-  display: none;
-}
-.workflow-panel { display: block; }
-.workflow-list { padding: 8px; gap: 6px; }
-.flow-step {
-  padding: 9px 10px;
-  border-radius: 11px;
-}
-.flow-step small { font-size: 10px; line-height: 1.25; }
-.control-card[open] { max-height: 360px; overflow: auto; }
-.control-card .control-group { margin: 8px 10px; }
-.common-presets { display: none; }
-.advanced-hidden { display: none !important; }
-.center-workspace {
-  grid-template-rows: minmax(260px, .58fr) minmax(240px, .42fr);
-  gap: 8px;
-}
-.panel,
-.wave-card,
-.samples-section {
-  border-radius: 18px;
-  box-shadow: none;
-}
-.wave-card { padding: 12px; }
-.wave-hud {
-  left: 18px;
-  top: 16px;
-  max-width: min(560px, calc(100% - 36px));
-  padding: 9px 12px;
-  border-radius: 999px;
-  background: rgba(255,255,255,.76);
-  backdrop-filter: blur(8px);
-  display: inline-flex;
-  align-items: baseline;
-  gap: 10px;
-}
-.wave-hud strong { font-size: 12px; }
-.wave-hud small { font-size: 11px; }
-.waveform {
-  height: 100%;
-  border-radius: 16px;
-  cursor: crosshair;
-}
-.transport-row {
-  height: 42px;
-  padding: 6px 8px;
-  margin-top: 8px;
-}
-.preview-tabs { margin-left: auto; }
-.preview-tab { padding: 5px 8px; font-size: 11px; }
-.samples-section {
-  padding: 12px;
-  overflow: hidden;
-}
-.section-heading {
-  margin-bottom: 8px;
-}
-.section-heading h2 { font-size: 16px; }
-.section-heading small { font-size: 11px; }
-.sample-grid {
-  height: calc(100% - 34px);
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(170px, 1fr);
-  grid-template-columns: none;
-  gap: 10px;
-  overflow-x: auto;
-  overflow-y: hidden;
-  padding: 1px 2px 8px;
-}
-.sample-column {
-  min-width: 170px;
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-  gap: 8px;
-}
-.sample-column-head {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto;
-  align-items: center;
-  gap: 7px;
-  padding: 0 2px;
-  text-transform: capitalize;
-}
-.sample-column-head strong { font-size: 13px; letter-spacing: -.02em; }
-.sample-column-head span {
-  color: var(--muted);
-  font-size: 11px;
-}
-.draw-card-button {
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  padding: 4px 8px;
-  background: #fff;
-  color: var(--accent-strong);
-  font-size: 11px;
-  font-weight: 750;
-}
-.sample-column-list {
-  display: grid;
-  align-content: start;
-  gap: 8px;
-  min-height: 0;
-  overflow: auto;
-  padding-right: 2px;
-}
-.sample-card {
-  min-height: 138px;
-  display: grid;
-  grid-template-rows: minmax(0, 1fr) auto;
-  padding: 0;
-  border-top-width: 3px;
-  overflow: hidden;
-}
-.sample-play-zone {
-  min-width: 0;
-  display: grid;
-  grid-template-rows: minmax(72px, 1fr) auto;
-  gap: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  text-align: left;
-}
-.sample-wave {
-  height: 84px;
-  border-radius: 0;
-}
-.sample-card-footer {
-  padding: 8px 10px;
-}
-.sample-name { font-size: 12px; }
-.sample-meta { font-size: 10px; }
-.sample-card-actions {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 4px;
-  padding: 0 8px 8px;
-  opacity: .22;
-  transition: opacity .16s ease;
-}
-.sample-card:hover .sample-card-actions,
-.sample-card.selected .sample-card-actions { opacity: 1; }
-.sample-card-actions button {
-  min-width: 0;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 4px 5px;
-  background: #fff;
-  color: var(--text-soft);
-  font-size: 10px;
-  font-weight: 650;
-}
-.sample-card-actions button:hover { color: var(--accent-strong); border-color: rgba(109,69,236,.35); }
-.empty-drop-state {
-  grid-column: 1 / -1;
-  display: grid;
-  place-items: center;
-  align-content: center;
-  gap: 6px;
-  min-height: 100%;
-  color: var(--muted);
-  border: 1.5px dashed var(--line-strong);
-  border-radius: 16px;
-  background: rgba(255,255,255,.58);
-  text-align: center;
-}
-.empty-drop-state strong { color: var(--text); font-size: 18px; }
-.bottom-dock {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
-  min-height: 0;
-}
-.bottom-tool > summary {
-  min-height: 42px;
-  padding: 8px 12px;
-}
-.bottom-tool:not([open]) { height: 42px; }
-.bottom-tool[open] {
-  position: fixed;
-  left: 10px;
-  right: 10px;
-  bottom: 10px;
-  height: min(46vh, 420px);
-  z-index: 50;
-  box-shadow: 0 24px 80px rgba(18,21,30,.18);
-}
-@media (max-width: 1000px) {
-  .workstation { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
-  .left-sidebar, .right-sidebar { display: none; }
-  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
-  .app-title { display: none; }
+  html, body { overflow: auto; }
+  .app-shell { height: auto; min-height: 100vh; grid-template-rows: auto auto auto; }
+  .topbar, .main-grid, .bottom-bar { grid-template-columns: 1fr; }
+  .canvas-pane { grid-template-rows: 360px 520px; }
+  .settings-pane { border-left: 0; border-top: 1px solid var(--line); }
 }
+.global-drop-overlay.visible { display: grid; }