diff --git a/app/api/jobs.py b/app/api/jobs.py
index 34d3343b..2b00f6ea 100644
--- a/app/api/jobs.py
+++ b/app/api/jobs.py
@@ -10,7 +10,7 @@
from pathlib import Path
from fastapi import APIRouter, HTTPException, Request
-from pydantic import BaseModel
+from pydantic import BaseModel, field_validator
from app.core.config import (
JOB_ID_RE,
@@ -271,6 +271,82 @@ def cancel_job(job_id: str) -> dict:
return job.to_state()
+_SECTION_ID_RE = re.compile(r"^[a-zA-Z0-9_\-]{1,64}$")
+_COLOR_RE = re.compile(r"^#[0-9a-fA-F]{3,8}$")
+
+
+class SectionItem(BaseModel):
+ id: str
+ name: str
+ start: float
+ end: float
+ color: str
+
+ @field_validator("id")
+ @classmethod
+ def _check_id(cls, v: str) -> str:
+ if not _SECTION_ID_RE.match(v):
+ raise ValueError("invalid section id")
+ return v
+
+ @field_validator("name")
+ @classmethod
+ def _check_name(cls, v: str) -> str:
+ return v.strip()[:64] or "Section"
+
+ @field_validator("color")
+ @classmethod
+ def _check_color(cls, v: str) -> str:
+ if not _COLOR_RE.match(v):
+ raise ValueError("invalid color")
+ return v
+
+ @field_validator("start", "end")
+ @classmethod
+ def _check_time(cls, v: float) -> float:
+ if not (0 <= v < 86400):
+ raise ValueError("time out of range")
+ return round(v, 3)
+
+
+class SectionsBody(BaseModel):
+ sections: list[SectionItem]
+
+
+@router.patch("/{job_id}/sections")
+def update_sections(job_id: str, body: SectionsBody) -> dict:
+ if not JOB_ID_RE.match(job_id):
+ raise HTTPException(status_code=404, detail="job not found")
+ job = registry_get(job_id)
+ if job is None:
+ raise HTTPException(status_code=404, detail="job not found")
+
+ validated = [s.model_dump() for s in body.sections]
+ job.sections = validated
+
+ job_dir = (JOBS_DIR / job_id).resolve()
+ if not job_dir.is_relative_to(JOBS_DIR.resolve()):
+ raise HTTPException(status_code=404, detail="job not found")
+ meta_path = job_dir / "metadata.json"
+
+ meta: dict = {}
+ if meta_path.is_file():
+ try:
+ meta = json.loads(meta_path.read_text(encoding="utf-8"))
+ except (OSError, json.JSONDecodeError):
+ pass
+ meta["sections"] = validated
+ try:
+ meta_path.write_text(json.dumps(meta, indent=2) + "\n", encoding="utf-8")
+ except OSError as exc:
+ logger.exception("failed to write sections for %s: %s", job_id, exc)
+ raise HTTPException(status_code=500, detail="failed to save sections") from exc
+
+ registry_persist(JOBS_DIR)
+
+ return {"job_id": job_id, "sections": validated}
+
+
@router.delete("/{job_id}")
def delete_job(job_id: str) -> dict[str, str]:
if not JOB_ID_RE.match(job_id):
diff --git a/app/api/stems.py b/app/api/stems.py
index b66ee557..407c6480 100644
--- a/app/api/stems.py
+++ b/app/api/stems.py
@@ -1,9 +1,11 @@
from __future__ import annotations
+import asyncio
+
from fastapi import APIRouter, HTTPException
-from fastapi.responses import FileResponse
+from fastapi.responses import FileResponse, StreamingResponse
-from app.core.config import JOB_ID_RE, JOBS_DIR, STEM_NAMES
+from app.core.config import JOB_ID_RE, JOBS_DIR, STEM_NAMES, ffmpeg_executable
from app.core.registry import get as registry_get
router = APIRouter(tags=["stems"])
@@ -30,3 +32,43 @@ def get_stem(job_id: str, name: str) -> FileResponse:
if not path.is_file() or not path.is_relative_to(JOBS_DIR.resolve()):
raise HTTPException(status_code=404, detail="stem not found")
return FileResponse(path, media_type="audio/wav", filename=f"{name}.wav")
+
+
+@router.get("/jobs/{job_id}/stems/{name}.mp3")
+async def get_stem_mp3(job_id: str, name: str) -> StreamingResponse:
+ if not JOB_ID_RE.match(job_id):
+ raise HTTPException(status_code=404, detail="job not found")
+ if name not in _ALLOWED_NAMES:
+ raise HTTPException(status_code=404, detail="unknown stem")
+ job = registry_get(job_id)
+ if job is None or job.status != "done":
+ raise HTTPException(status_code=404, detail="job not ready")
+ wav_path = (JOBS_DIR / job_id / "stems" / f"{name}.wav").resolve()
+ if not wav_path.is_file() or not wav_path.is_relative_to(JOBS_DIR.resolve()):
+ raise HTTPException(status_code=404, detail="stem not found")
+
+ async def _stream():
+ proc = await asyncio.create_subprocess_exec(
+ ffmpeg_executable(),
+ "-nostdin", "-loglevel", "error",
+ "-i", str(wav_path),
+ "-q:a", "2", # VBR ~190 kbps
+ "-f", "mp3", "pipe:1",
+ stdout=asyncio.subprocess.PIPE,
+ stderr=asyncio.subprocess.DEVNULL,
+ )
+ try:
+ while True:
+ chunk = await proc.stdout.read(65536)
+ if not chunk:
+ break
+ yield chunk
+ finally:
+ proc.stdout.close()
+ await proc.wait()
+
+ return StreamingResponse(
+ _stream(),
+ media_type="audio/mpeg",
+ headers={"Content-Disposition": f'attachment; filename="{name}.mp3"'},
+ )
diff --git a/app/core/models.py b/app/core/models.py
index e16dda6a..d2e66584 100644
--- a/app/core/models.py
+++ b/app/core/models.py
@@ -27,6 +27,11 @@ class Job:
key_confidence: int | None = None # 0-100 percent
lufs: float | None = None # ITU-R BS.1770 integrated loudness (dB)
peak_db: float | None = None # sample peak in dBFS (close to true peak)
+ dynamic_range: float | None = None # peak_db - integrated LUFS (dB)
+ tempo_stability: int | None = None # 0-100, beat interval consistency
+ stem_presence: dict[str, int] | None = None # per-stem RMS 0-100
+ sections: list[dict] | None = None # [{id, name, start, end, color}]
+ tags: list[str] | None = None # YouTube tags + categories, lowercased, max 8
stems: list[dict[str, str]] = field(default_factory=list)
# Subset of stems the user chose at submit. The pipeline produces all
# 6 regardless (Demucs htdemucs_6s is fixed), but after collect we
@@ -58,11 +63,17 @@ def to_state(self) -> dict[str, Any]:
"key_confidence": self.key_confidence,
"lufs": self.lufs,
"peak_db": self.peak_db,
+ "dynamic_range": self.dynamic_range,
+ "tempo_stability": self.tempo_stability,
+ "stem_presence": self.stem_presence,
+ "sections": self.sections,
+ "tags": self.tags,
"stems": self.stems,
"selected_stems": self.selected_stems,
"mix_url": self.mix_url,
"source_url": self.source_url,
"error": self.error,
+ "created_at": self.created_at,
}
def to_record(self) -> dict[str, Any]:
diff --git a/app/core/registry.py b/app/core/registry.py
index ce8661cd..37ca4829 100644
--- a/app/core/registry.py
+++ b/app/core/registry.py
@@ -153,6 +153,11 @@ def _recover_done_job(job_dir: Path) -> Job | None:
key_confidence=meta.get("key_confidence"),
lufs=meta.get("lufs"),
peak_db=meta.get("peak_db"),
+ dynamic_range=meta.get("dynamic_range"),
+ tempo_stability=meta.get("tempo_stability"),
+ stem_presence=meta.get("stem_presence"),
+ sections=meta.get("sections"),
+ tags=meta.get("tags"),
)
diff --git a/app/pipeline/analyze.py b/app/pipeline/analyze.py
index 476e0a87..8e67b481 100644
--- a/app/pipeline/analyze.py
+++ b/app/pipeline/analyze.py
@@ -215,6 +215,38 @@ def _load_audio_ffmpeg(
return y, sr
+def compute_stem_presence(stems_dir: Path, selected_stems: list[str]) -> dict[str, int]:
+ """Load each extracted stem WAV, compute mean absolute amplitude, normalize
+ to 0-100. Only the stems that were selected (and therefore extracted) are
+ measured; the rest are omitted from the returned dict."""
+ import numpy as np
+
+ result: dict[str, int] = {}
+ rms_values: dict[str, float] = {}
+
+ for name in selected_stems:
+ wav_path = stems_dir / f"{name}.wav"
+ if not wav_path.is_file():
+ continue
+ loaded = _load_audio_ffmpeg(wav_path, sr=22050, duration=180.0)
+ if loaded is None:
+ continue
+ y, _ = loaded
+ rms_values[name] = float(np.sqrt(np.mean(y ** 2)))
+
+ if not rms_values:
+ return result
+
+ max_rms = max(rms_values.values())
+ if max_rms < 1e-9:
+ return {name: 0 for name in rms_values}
+
+ for name, rms in rms_values.items():
+ result[name] = max(0, min(100, round(rms / max_rms * 100)))
+
+ return result
+
+
def analyze(job: Job, source: Path) -> tuple[int | None, str | None]:
"""Best-effort BPM and key detection. On failure, returns (None, None)
and leaves job fields untouched -- the chips stay as placeholders."""
@@ -241,7 +273,7 @@ def analyze(job: Job, source: Path) -> tuple[int | None, str | None]:
# smear, no kick fundamentals leaking in).
y_harmonic, y_percussive = librosa.effects.hpss(y)
- tempo_arr, _ = librosa.beat.beat_track(y=y_percussive, sr=sr)
+ tempo_arr, beat_frames = librosa.beat.beat_track(y=y_percussive, sr=sr)
try:
tempo = float(tempo_arr[0]) # type: ignore[index]
except (TypeError, IndexError):
@@ -263,6 +295,22 @@ def analyze(job: Job, source: Path) -> tuple[int | None, str | None]:
# it's good enough for a UI display and adds ~50 ms to analyze.
lufs, peak_db = _measure_loudness(y, sr)
+ dynamic_range: float | None = None
+ if lufs is not None and peak_db is not None:
+ dynamic_range = round(peak_db - lufs, 1)
+
+ # Beat interval coefficient of variation → stability 0-100.
+ # CV = std/mean of inter-beat intervals; CV=0 is perfectly metronomic.
+ tempo_stability: int | None = None
+ import numpy as np
+ beat_times = librosa.frames_to_time(beat_frames, sr=sr)
+ if len(beat_times) > 2:
+ intervals = np.diff(beat_times)
+ mean_iv = float(intervals.mean())
+ if mean_iv > 0:
+ cv = float(intervals.std() / mean_iv)
+ tempo_stability = max(0, min(100, round((1 - min(cv, 1)) * 100)))
+
_set(
job,
bpm=bpm,
@@ -271,6 +319,8 @@ def analyze(job: Job, source: Path) -> tuple[int | None, str | None]:
key_confidence=key_confidence,
lufs=lufs,
peak_db=peak_db,
+ dynamic_range=dynamic_range,
+ tempo_stability=tempo_stability,
progress=1.0,
stage="Analysis complete",
)
diff --git a/app/pipeline/download.py b/app/pipeline/download.py
index b13b14c4..d30afd77 100644
--- a/app/pipeline/download.py
+++ b/app/pipeline/download.py
@@ -213,6 +213,15 @@ def hook(d: dict) -> None:
thumbnail=info.get("thumbnail") or meta.get("thumbnail"),
)
+ raw_tags = [
+ t.strip().lower()
+ for t in (info.get("tags") or []) + (info.get("categories") or [])
+ if isinstance(t, str) and t.strip()
+ ]
+ seen: set[str] = set()
+ deduped = [t for t in raw_tags if not (t in seen or seen.add(t))] # type: ignore[func-returns-value]
+ _set(job, tags=deduped[:8] or None)
+
candidates = sorted(job_dir.glob("source.*"))
if not candidates:
raise RuntimeError("yt-dlp finished but no source file was produced")
diff --git a/app/pipeline/runner.py b/app/pipeline/runner.py
index ae27e0a9..921235e9 100644
--- a/app/pipeline/runner.py
+++ b/app/pipeline/runner.py
@@ -10,7 +10,7 @@
from app.core.config import TIMEOUT_FFMPEG
from app.core.models import Job, JobCancelled
from app.core.registry import persist as persist_registry
-from app.pipeline.analyze import analyze
+from app.pipeline.analyze import analyze, compute_stem_presence
from app.pipeline.collect import cleanup_source, collect, make_original_track, make_selected_mix
from app.pipeline.download import _set, download
from app.pipeline.separate import separate
@@ -83,6 +83,7 @@ def _run_common(job: Job, source: Path, job_dir: Path) -> None:
stems_root = separate(job, source, job_dir)
found = collect(job, stems_root, job_dir)
stems_dir = job_dir / "stems"
+ job.stem_presence = compute_stem_presence(stems_dir, found)
# Source (100-300 MB or the local upload) is no longer needed after
# collect; delete it before the ffmpeg amix steps in case scratch space
# is tight.
@@ -129,6 +130,10 @@ def _write_metadata(job: Job, job_dir: Path) -> None:
"key_confidence": job.key_confidence,
"lufs": job.lufs,
"peak_db": job.peak_db,
+ "dynamic_range": job.dynamic_range,
+ "tempo_stability": job.tempo_stability,
+ "stem_presence": job.stem_presence,
+ "tags": job.tags,
}
try:
(job_dir / "metadata.json").write_text(json.dumps(meta, indent=2) + "\n", encoding="utf-8")
diff --git a/static/css/daw.css b/static/css/daw.css
new file mode 100644
index 00000000..ceb0b8a5
--- /dev/null
+++ b/static/css/daw.css
@@ -0,0 +1,1873 @@
+/* ═══════════════════════════════════════════
+ DAW UI — flat dark design
+ ═══════════════════════════════════════════ */
+
+/* ── Reset ── */
+*, *::before, *::after { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; height: 100%; background: #0a0d10; overflow: hidden; }
+body { font-family: var(--font-sans); color: var(--fg); }
+button { font-family: inherit; }
+input, textarea { font-family: inherit; }
+
+/* ── Root ── */
+.daw {
+ width: 100vw;
+ height: 100vh;
+ background: var(--bg);
+ color: var(--fg);
+ font-family: var(--font-sans);
+ font-size: 13px;
+ line-height: 1.4;
+ letter-spacing: -0.005em;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ /* reset any old .app grid */
+ grid-template-columns: none !important;
+ grid-template-rows: none !important;
+}
+
+/* ── Utilities ── */
+.daw .uplabel {
+ font-size: 10px;
+ font-weight: 600;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+.daw .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.daw .hidden { display: none !important; }
+
+/* ═══════════════════════════════════
+ TOPBAR
+ ═══════════════════════════════════ */
+.daw-topbar {
+ height: 77px;
+ flex-shrink: 0;
+ background: var(--bg-2);
+ border-bottom: 1px solid var(--border);
+ display: flex;
+ align-items: center;
+ padding: 0 16px;
+ gap: 14px;
+}
+
+/* Brand */
+.daw-brand {
+ display: flex;
+ align-items: center;
+ gap: 9px;
+ flex-shrink: 0;
+}
+.daw-brand img { height: 30px; width: auto; display: block; }
+.daw-brand-name {
+ font-size: 18px;
+ font-weight: 600;
+ letter-spacing: -0.015em;
+ line-height: 1;
+}
+.daw-brand-name .fg { color: var(--fg); }
+.daw-brand-name .accent{ color: var(--accent); }
+
+.daw-version {
+ display: none !important; /* version shown in notification panel instead */
+}
+
+/* Topbar separator */
+.daw-sep {
+ width: 1px;
+ height: 28px;
+ background: var(--border);
+ flex-shrink: 0;
+}
+
+/* ── Composer pill ── */
+.daw-composer {
+ flex: 1;
+ min-width: 0;
+ height: 50px;
+ display: flex;
+ align-items: stretch;
+ background: var(--panel);
+ border: 1px solid var(--border-strong);
+ border-radius: var(--radius);
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 1px 8px rgba(0,0,0,0.3);
+ overflow: hidden;
+}
+
+/* URL zone */
+.daw-url-zone {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 0 14px;
+ flex: 1;
+ min-width: 0;
+ cursor: text;
+}
+/* Hide decorative SVG icons in the topbar */
+.daw-url-zone > svg { display: none; }
+.daw-process-btn > svg { display: none; }
+.daw-url-zone svg { flex-shrink: 0; }
+
+.daw-url-zone input[type="url"] {
+ flex: 1;
+ min-width: 0;
+ background: none;
+ border: none;
+ outline: none;
+ color: var(--fg-2);
+ font-size: 14px;
+ font-family: inherit;
+ letter-spacing: -0.005em;
+}
+.daw-url-zone input[type="url"]::placeholder { color: var(--muted); }
+
+/* Upload button inside URL zone */
+.daw-upload-btn {
+ width: 30px;
+ height: 30px;
+ flex-shrink: 0;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ background: none;
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ color: var(--muted);
+ cursor: pointer;
+ transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
+}
+.daw-upload-btn:hover { background: var(--panel-2); color: var(--fg-2); border-color: var(--border-strong); }
+
+/* File pill (shown when file selected) */
+.file-pill {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 2px 8px;
+ border: 1px solid var(--border-strong);
+ border-radius: 6px;
+ background: var(--panel-2);
+ color: var(--fg-2);
+ font-size: 11px;
+ white-space: nowrap;
+ overflow: hidden;
+}
+.file-pill.hidden { display: none !important; }
+.file-name { overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
+.file-size { color: var(--muted); flex-shrink: 0; }
+.file-clear {
+ width: 16px; height: 16px;
+ background: none; border: none;
+ color: var(--muted); cursor: pointer;
+ font-size: 14px; line-height: 1;
+ display: flex; align-items: center; justify-content: center;
+ border-radius: 3px; flex-shrink: 0; padding: 0;
+}
+.file-clear:hover { color: var(--fg); background: var(--panel-3); }
+
+/* url-wrap alias (JS uses .url-wrap for drag events) */
+.daw-url-zone { position: relative; }
+.daw-url-zone.drag-over {
+ background: rgba(244,183,64,0.06);
+ box-shadow: inset 0 0 0 1px rgba(244,183,64,0.3);
+}
+.daw-url-zone.has-file input[type="url"] { display: none; }
+
+/* Composer vertical divider */
+.daw-composer-sep {
+ width: 1px;
+ background: var(--border);
+ align-self: stretch;
+ margin: 6px 0;
+ flex-shrink: 0;
+}
+
+/* Stem section */
+.daw-stem-section {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 0 14px;
+ flex-shrink: 0;
+}
+.daw-extract-label {
+ font-size: 10px;
+ font-weight: 600;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+.daw-stem-chips { display: flex; gap: 4px; }
+
+/* Stem choice buttons */
+.stem-choice {
+ height: 30px;
+ padding: 0 11px;
+ border-radius: 6px;
+ border: 1px solid var(--border);
+ background: none;
+ color: var(--muted-2);
+ font-size: 12px;
+ font-weight: 600;
+ font-family: inherit;
+ letter-spacing: -0.005em;
+ cursor: pointer;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
+}
+.stem-choice[aria-pressed="true"] {
+ border-color: color-mix(in srgb, var(--color) 60%, transparent);
+ background: color-mix(in srgb, var(--color) 14%, transparent);
+ color: var(--color);
+}
+.stem-dot {
+ width: 5px; height: 5px;
+ border-radius: 50%;
+ background: currentColor;
+ opacity: 0.85;
+}
+.stem-choice[aria-pressed="false"] .stem-dot { opacity: 0.4; }
+
+/* "All" toggle */
+.stem-choice-all {
+ border-color: var(--border-strong);
+ color: var(--fg-2);
+ font-size: 12px;
+}
+.stem-choice-all[aria-pressed="true"] {
+ border-color: var(--accent);
+ background: rgba(244,183,64,0.12);
+ color: var(--accent);
+}
+
+/* Process button */
+.daw-process-btn {
+ height: auto;
+ padding: 0 20px;
+ background: linear-gradient(180deg, var(--accent), var(--accent-2));
+ border: none;
+ border-left: 1px solid #b97f1c;
+ color: #1a1206;
+ font-weight: 600;
+ font-size: 14px;
+ font-family: inherit;
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+ cursor: pointer;
+ box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
+ flex-shrink: 0;
+ transition: background var(--t-fast);
+}
+.daw-process-btn:hover { background: linear-gradient(180deg, #f8c054, #e0a032); }
+.daw-process-btn:active { transform: translateY(1px); }
+.daw-process-btn:disabled {
+ opacity: 0.8;
+ cursor: progress;
+ filter: saturate(0.85);
+}
+
+/* Loading spinner on process btn */
+.daw-process-btn.loading > svg { display: none; }
+.daw-process-btn.loading { filter: saturate(0.85); }
+.daw-process-btn.loading::before {
+ content: "";
+ width: 14px; height: 14px; flex: 0 0 14px;
+ border-radius: 50%;
+ background: conic-gradient(currentColor 0deg 270deg, transparent 270deg 360deg);
+ -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 0);
+ mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 0);
+ animation: daw-spin 0.85s linear infinite;
+}
+@keyframes daw-spin { to { transform: rotate(360deg); } }
+
+/* Icon button */
+.daw-iconbtn {
+ width: 30px; height: 30px;
+ display: inline-flex; align-items: center; justify-content: center;
+ background: transparent;
+ border: 1px solid transparent;
+ color: var(--fg-2);
+ border-radius: 8px;
+ cursor: pointer;
+ transition: background var(--t-fast), color var(--t-fast);
+ flex-shrink: 0;
+}
+.daw-iconbtn:hover { background: var(--panel-2); border-color: var(--border); color: var(--fg); }
+.daw-iconbtn:active { transform: scale(0.96); }
+
+/* Notification panel */
+.daw-notif-wrap { position: relative; }
+.daw-notif-panel {
+ display: none;
+ position: absolute;
+ top: calc(100% + 8px);
+ right: 0;
+ width: 280px;
+ background: var(--panel-2);
+ border: 1px solid var(--border-strong);
+ border-radius: var(--radius);
+ box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+ z-index: 200;
+ overflow: hidden;
+}
+.daw-notif-wrap.open .daw-notif-panel { display: block; }
+.daw-notif-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 12px 8px;
+ border-bottom: 1px solid var(--border);
+}
+.daw-notif-close {
+ width: 22px; height: 22px;
+ background: none; border: none;
+ color: var(--muted); cursor: pointer;
+ display: flex; align-items: center; justify-content: center;
+ border-radius: 5px;
+}
+.daw-notif-close:hover { background: var(--panel-3); color: var(--fg); }
+.daw-notif-list { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
+.daw-notif-card {
+ display: flex;
+ gap: 10px;
+ align-items: flex-start;
+ padding: 10px 12px;
+ background: var(--panel);
+ border: 1px solid var(--border);
+ border-radius: 8px;
+}
+.daw-notif-release { border-color: rgba(244,183,64,0.25); }
+.daw-notif-card-icon {
+ width: 28px; height: 28px; flex-shrink: 0;
+ display: flex; align-items: center; justify-content: center;
+ background: rgba(244,183,64,0.12);
+ border-radius: 6px;
+ color: var(--accent);
+}
+.daw-notif-card-body { flex: 1; min-width: 0; }
+.daw-notif-card-title { font-size: 12px; font-weight: 600; color: var(--fg); }
+.daw-notif-card-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
+
+/* Hidden collapsed strip (JS compat, not shown in new design) */
+.appbar-icon-strip.hidden { display: none !important; }
+
+/* ═══════════════════════════════════
+ BODY LAYOUT
+ ═══════════════════════════════════ */
+.daw-body {
+ flex: 1;
+ display: flex;
+ min-height: 0;
+}
+
+/* ═══════════════════════════════════
+ SIDEBAR / CATALOG
+ ═══════════════════════════════════ */
+.sidebar {
+ width: 390px;
+ flex-shrink: 0;
+ background: var(--bg-2);
+ border-right: 1px solid var(--border);
+ display: flex;
+}
+
+/* Rail */
+.sidebar-rail {
+ width: 56px;
+ border-right: 1px solid var(--border);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 12px 0;
+ gap: 4px;
+ flex-shrink: 0;
+}
+
+.rail-btn {
+ width: 40px; height: 40px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 2px;
+ border-radius: 8px;
+ color: var(--muted);
+ font-size: 9px;
+ font-family: var(--font-sans);
+ cursor: pointer;
+ transition: background var(--t-fast), color var(--t-fast);
+ border: none;
+ background: none;
+ /* remove old pseudo-element strip */
+}
+.rail-btn::before { display: none !important; }
+.rail-btn:hover { background: var(--panel); color: var(--fg-2); }
+.rail-btn.active { color: var(--accent); background: var(--panel); }
+.rail-btn svg { flex-shrink: 0; }
+.rail-btn span { white-space: nowrap; }
+
+/* Sidebar body */
+.sidebar-body {
+ flex: 1;
+ padding: 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ min-width: 0;
+ overflow: hidden;
+}
+
+/* Search */
+.daw-search {
+ height: 32px;
+ border: 1px solid var(--border);
+ background: var(--panel);
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 0 10px;
+ color: var(--muted);
+ font-size: 12px;
+ flex-shrink: 0;
+}
+.daw-search svg { flex-shrink: 0; }
+.daw-search input {
+ flex: 1; min-width: 0;
+ border: none; outline: none;
+ background: transparent;
+ color: var(--fg);
+ font: inherit;
+}
+.daw-search input::placeholder { color: var(--muted); }
+.search-kbd {
+ font-size: 10px;
+ color: var(--muted-2);
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ padding: 0 5px;
+ flex-shrink: 0;
+}
+
+/* Lib header row */
+.daw-lib-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 4px;
+ min-height: 22px;
+ flex-shrink: 0;
+}
+.daw-lib-label {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+.daw-lib-count { color: var(--muted-2); font-weight: 500; margin-left: 4px; }
+.new-folder-btn {
+ display: inline-flex; align-items: center; gap: 5px;
+ padding: 3px 9px 3px 7px;
+ background: none;
+ border: 1px solid var(--border);
+ border-radius: 5px;
+ color: var(--muted);
+ font-size: 11px; font-weight: 500;
+ cursor: pointer;
+ white-space: nowrap;
+ transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
+}
+.new-folder-btn:hover {
+ background: var(--panel);
+ color: var(--fg-2);
+ border-color: var(--border-2, rgba(255,255,255,0.15));
+}
+
+/* Lib list (JS populates with .lib-item, .folder, .cat-item) */
+.daw-lib-list {
+ flex: 1;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+/* Library item */
+.lib-item {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ padding: 8px;
+ border-radius: 8px;
+ cursor: pointer;
+ position: relative;
+ transition: background var(--t-fast);
+}
+.lib-item:hover { background: var(--panel); }
+.lib-item.active {
+ background: linear-gradient(90deg, rgba(244,183,64,0.10) 0%, var(--panel-2) 60%);
+}
+.lib-item.active::before {
+ content: '';
+ position: absolute; left: -2px; top: 6px; bottom: 6px;
+ width: 3px; border-radius: 2px;
+ background: var(--accent);
+}
+.lib-cover {
+ width: 36px; height: 36px; border-radius: 6px;
+ display: flex; align-items: center; justify-content: center;
+ font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
+ color: rgba(255,255,255,0.85);
+ flex-shrink: 0;
+}
+.lib-meta { flex: 1; min-width: 0; }
+.lib-meta .t { font-size: 13px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.lib-meta .s { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.lib-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+
+/* cat-item (legacy catalog items JS creates) */
+.cat-item {
+ display: flex;
+ gap: 9px;
+ align-items: center;
+ padding: 7px 8px;
+ border: 1px solid transparent;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: background var(--t-fast), border-color var(--t-fast);
+}
+.cat-item:hover { background: var(--panel-2); border-color: var(--border); }
+.cat-item.active { background: var(--panel-2); border-color: rgba(244,183,64,0.3); }
+.cat-thumb {
+ width: 36px; height: 36px;
+ border-radius: 6px; flex-shrink: 0;
+ overflow: hidden; border: 1px solid var(--border);
+ background: var(--panel);
+ display: flex; align-items: center; justify-content: center;
+ color: var(--muted);
+}
+.cat-thumb svg, .cat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.cat-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
+.cat-title { color: var(--fg); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cat-sub { color: var(--muted); font-size: 10.5px; display: flex; gap: 5px; white-space: nowrap; overflow: hidden; }
+.cat-status { width: 6px; height: 6px; border-radius: 50%; background: #5fbc56; flex-shrink: 0; }
+.cat-status.processing { background: var(--accent); animation: cat-pulse 1.4s infinite; }
+@keyframes cat-pulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
+.cat-del {
+ width: 20px; height: 20px; border: 0; border-radius: 5px;
+ background: transparent; color: var(--muted); cursor: pointer;
+ opacity: 0; display: flex; align-items: center; justify-content: center;
+ padding: 0; flex-shrink: 0; transition: opacity var(--t-fast), background var(--t-fast);
+}
+.cat-item:hover .cat-del { opacity: 1; }
+.cat-del:hover { background: rgba(21,31,39,0.8); color: var(--danger); }
+
+/* Folder items (legacy catalog) */
+.folder { display: flex; flex-direction: column; }
+.folder-head {
+ --folder-color: var(--accent);
+ display: flex; align-items: center; gap: 7px;
+ padding: 6px 8px; border-radius: 7px;
+ cursor: pointer; color: var(--muted);
+ transition: background var(--t-fast), color var(--t-fast);
+ user-select: none;
+}
+.folder-head:hover { background: var(--panel); color: var(--fg); }
+.folder-head .f-chevron { width: 11px; height: 11px; transition: transform 180ms ease; flex-shrink: 0; color: var(--muted); }
+.folder.collapsed .folder-head .f-chevron { transform: rotate(-90deg); }
+.folder-head .f-icon { width: 13px; height: 13px; flex-shrink: 0; color: var(--folder-color); }
+.folder-head .f-name {
+ font-size: 12px; font-weight: 500; color: inherit;
+ flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+ background: transparent; border: none; padding: 0; font-family: inherit; outline: none; cursor: inherit;
+}
+.folder-head .f-count { font-size: 10.5px; color: var(--muted); }
+.folder-color-dot {
+ width: 13px; height: 13px; border: 1px solid rgba(255,255,255,0.22);
+ border-radius: 999px; background: var(--folder-color); cursor: pointer; padding: 0;
+ box-shadow: inset 0 0 0 1px rgba(0,0,0,0.22);
+}
+.folder-head .f-del,
+.folder-head .f-subfolder {
+ width: 18px; height: 18px; border: none; background: transparent;
+ color: var(--muted); cursor: pointer; opacity: 0;
+ display: flex; align-items: center; justify-content: center;
+ border-radius: 4px; padding: 0; transition: opacity var(--t-fast), color var(--t-fast);
+ flex-shrink: 0;
+}
+.folder-head:hover .f-del,
+.folder-head:hover .f-subfolder { opacity: 1; }
+.folder-head .f-del:hover { background: rgba(21,31,39,0.8); color: var(--danger); }
+.folder-head .f-subfolder:hover { background: rgba(21,31,39,0.8); color: var(--fg-2); }
+/* Drag grip */
+.f-grip {
+ display: none; align-items: center; justify-content: center;
+ cursor: grab; color: var(--muted); flex-shrink: 0;
+ padding: 2px; border-radius: 3px;
+ transition: color var(--t-fast);
+}
+.f-grip:active { cursor: grabbing; }
+.folder-head:hover .f-grip { display: flex; }
+/* Drop indicators for folder reorder / nest */
+.folder.drop-before > .folder-head { box-shadow: 0 -2px 0 var(--accent); border-radius: 7px 7px 0 0; }
+.folder.drop-after > .folder-head { box-shadow: 0 2px 0 var(--accent); border-radius: 0 0 7px 7px; }
+.folder.drop-into > .folder-head { box-shadow: 0 0 0 1px var(--accent); background: var(--panel); }
+/* Folder being dragged */
+.folder.folder-dragging { opacity: 0.35; pointer-events: none; }
+/* Subfolder indentation */
+.folder.subfolder { margin-left: 12px; }
+.folder-body { display: flex; flex-direction: column; gap: 3px; padding: 3px 0 3px 14px; margin-left: 7px; border-left: 1px solid rgba(157,170,182,0.1); }
+.folder.collapsed .folder-body { display: none; }
+.folder-empty { color: var(--muted); font-size: 11px; padding: 5px 8px; font-style: italic; }
+
+/* Folder editor modal */
+.folder-editor-backdrop {
+ position: fixed; inset: 0; z-index: 80;
+ display: grid; place-items: center;
+ background: rgba(3,8,13,0.42); backdrop-filter: blur(2px);
+}
+.folder-editor {
+ width: min(300px, calc(100vw - 32px));
+ border: 1px solid var(--border-strong);
+ border-radius: 10px;
+ background: linear-gradient(180deg, rgba(28,39,48,0.98), rgba(13,21,29,0.98));
+ box-shadow: var(--shadow-panel);
+ padding: 12px; color: var(--fg); font-family: var(--font-mono);
+}
+.folder-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 13px; font-weight: 600; }
+.folder-editor-close { width: 24px; height: 24px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 0; }
+.folder-editor-close:hover { background: rgba(21,31,39,0.8); color: var(--fg); }
+.folder-editor-field { display: grid; gap: 7px; margin-bottom: 12px; color: var(--muted); font-size: 10.5px; }
+.folder-editor-name { width: 100%; min-height: 34px; border: 1px solid var(--border); border-radius: 7px; background: rgba(10,17,24,0.78); color: var(--fg); font: inherit; font-size: 12px; padding: 0 10px; outline: none; }
+.folder-editor-name:focus { border-color: rgba(244,183,64,0.5); box-shadow: 0 0 0 2px rgba(244,183,64,0.12); }
+.folder-editor-colors { display: flex; align-items: center; gap: 9px; }
+.folder-editor-colors .folder-color-dot { width: 22px; height: 22px; }
+.folder-editor-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
+.folder-editor-actions button { min-height: 30px; border-radius: 7px; font-family: var(--font-mono); font-size: 11px; cursor: pointer; padding: 0 11px; }
+.folder-editor-cancel { border: 1px solid var(--border); background: rgba(21,31,39,0.52); color: var(--muted); }
+.folder-editor-save { border: 1px solid rgba(244,183,64,0.3); background: rgba(244,183,64,0.16); color: var(--accent); }
+
+/* Color picker popover */
+.color-picker-popover {
+ position: absolute; z-index: 90;
+ background: var(--panel-2); border: 1px solid var(--border-strong);
+ border-radius: 8px; padding: 8px; display: flex; gap: 6px;
+ box-shadow: var(--shadow-panel);
+}
+
+/* Collapsed sidebar strip */
+.cat-collapsed-strip { display: none; }
+.daw.cat-collapsed .sidebar { width: 56px; }
+.daw.cat-collapsed .sidebar-body { display: none; }
+.daw.cat-collapsed .cat-collapsed-strip { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 8px 0; overflow-y: auto; }
+
+/* ═══════════════════════════════════
+ MAIN AREA (#lanes)
+ ═══════════════════════════════════ */
+.daw-main-col {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+ min-height: 0;
+}
+.daw-main {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+ min-height: 0;
+ overflow: hidden;
+}
+
+/* ── Job progress overlay ── */
+.job {
+ position: absolute;
+ top: 64px; left: 260px; right: 0; bottom: 56px;
+ z-index: 20;
+ background: rgba(11,15,18,0.92);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+ padding: 32px;
+}
+.job.hidden { display: none !important; }
+.job .title { font-size: 15px; font-weight: 600; color: var(--fg); text-align: center; }
+.job .stage { font-size: 12px; color: var(--muted); text-align: center; }
+.job progress {
+ width: 280px; max-width: 100%;
+ height: 4px;
+ border-radius: 2px;
+ appearance: none; border: none;
+ background: var(--panel-3);
+ overflow: hidden;
+}
+.job progress::-webkit-progress-bar { background: var(--panel-3); border-radius: 2px; }
+.job progress::-webkit-progress-value { background: var(--accent); border-radius: 2px; }
+.job progress::-moz-progress-bar { background: var(--accent); border-radius: 2px; }
+.job .job-detail { font-size: 11px; color: var(--muted-2); text-align: center; }
+.cancel-btn {
+ height: 30px; padding: 0 16px;
+ background: var(--panel-2); border: 1px solid var(--border-strong);
+ color: var(--fg-2); border-radius: 8px; font-size: 12px;
+ font-family: inherit; cursor: pointer;
+ transition: background var(--t-fast);
+}
+.cancel-btn:hover { background: var(--panel-3); color: var(--fg); }
+.cancel-btn.hidden { display: none !important; }
+
+/* Error banner */
+.error {
+ position: absolute;
+ top: 64px; left: 260px; right: 0;
+ z-index: 15;
+ padding: 12px 20px;
+ background: rgba(214,90,74,0.12);
+ border-bottom: 1px solid rgba(214,90,74,0.3);
+ color: #ff9090;
+ font-size: 13px;
+}
+.error.hidden { display: none !important; }
+
+/* ── Track header ── */
+.daw-track-header {
+ display: flex;
+ flex-direction: column;
+ border-bottom: 1px solid var(--border);
+ background: var(--bg-2);
+ flex-shrink: 0;
+}
+
+/* Row 1 */
+.daw-info-row {
+ display: flex;
+ border-bottom: 1px solid var(--border);
+}
+
+/* Track card */
+.daw-track-card {
+ display: flex;
+ gap: 14px;
+ align-items: flex-start;
+ padding: 14px 16px;
+ flex-shrink: 0;
+ width: 340px;
+ border-right: 1px solid var(--border);
+}
+
+/* Metadata cards */
+.daw-meta-card {
+ flex: 1;
+ padding: 14px 16px;
+ border-right: 1px solid var(--border);
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ min-width: 0;
+}
+.daw-meta-card:last-child { border-right: none; }
+.meta-card-label {
+ font-size: 10px;
+ font-weight: 600;
+ letter-spacing: 0.07em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+.meta-card-main {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+.meta-card-value {
+ font-size: 22px;
+ font-weight: 700;
+ color: var(--fg);
+ line-height: 1;
+ font-family: var(--font-mono);
+}
+.meta-card-value.accent { color: var(--accent); }
+.meta-card-value.stability-high { color: #4caf7d; }
+.meta-card-sub {
+ font-size: 11px;
+ color: var(--muted);
+}
+.daw-cover {
+ width: 64px; height: 64px;
+ border-radius: 8px;
+ background: var(--panel-2);
+ display: flex; align-items: center; justify-content: center;
+ flex-shrink: 0; color: var(--muted);
+ position: relative; overflow: hidden;
+}
+.np-art-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
+.np-art-img {
+ position: absolute; inset: 0;
+ width: 100%; height: 100%; object-fit: cover; display: none;
+}
+.np-art-img[src]:not([src=""]) { display: block; }
+
+.daw-track-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
+.daw-track-title { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.daw-track-sub { font-size: 11px; color: var(--muted); }
+.daw-track-time-row {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+.daw-track-sep { color: var(--border); font-size: 12px; }
+.daw-track-stems-label {
+ font-size: 11px;
+ color: var(--muted);
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+.daw-track-stems-label::before {
+ content: '';
+ display: inline-block;
+ width: 7px; height: 7px;
+ border-radius: 50%;
+ background: #4caf7d;
+ flex-shrink: 0;
+}
+.daw-fav-btn {
+ margin-left: auto;
+ background: none;
+ border: none;
+ cursor: pointer;
+ color: var(--muted);
+ padding: 2px;
+ display: flex;
+ align-items: center;
+ transition: color 150ms;
+}
+.daw-fav-btn:hover { color: var(--fg); }
+.daw-fav-btn.active { color: #e54e4e; }
+.daw-fav-btn.active svg { fill: #e54e4e; stroke: #e54e4e; }
+.daw-track-details { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
+.daw-detail-row { display: flex; gap: 8px; align-items: baseline; }
+.daw-detail-label { font-size: 11px; color: var(--muted); width: 64px; flex-shrink: 0; }
+.daw-detail-val { font-size: 11px; color: var(--fg-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.daw-chip {
+ display: inline-flex; align-items: center;
+ padding: 2px 8px;
+ border: 1px solid var(--border);
+ border-radius: 999px;
+ background: var(--panel-2);
+ font-size: 11px;
+ color: var(--fg-2);
+ font-family: var(--font-mono);
+}
+
+/* Energy panel */
+.daw-energy-panel {
+ padding: 12px;
+ background: var(--panel);
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ min-width: 0;
+}
+.daw-energy-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.daw-playhead-label { color: var(--accent); display: flex; align-items: center; gap: 4px; }
+.daw-energy-bars { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
+
+/* Energy rows (JS-driven) */
+.energy-row {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+.energy-row span {
+ font-size: 11px;
+ font-weight: 500;
+ width: 44px;
+ flex-shrink: 0;
+}
+.energy-row.vocals span { color: var(--vocals); }
+.energy-row.drums span { color: var(--drums); }
+.energy-row.bass span { color: var(--bass); }
+.energy-row.guitar span { color: var(--guitar); }
+.energy-row.piano span { color: var(--piano); }
+.energy-row.other span { color: var(--other); }
+.energy-row.original span { color: var(--fg-2); }
+
+.energy-row b {
+ flex: 1;
+ height: 6px;
+ border-radius: 3px;
+ background: var(--bg);
+ overflow: hidden;
+ position: relative;
+ display: block;
+}
+.energy-row b::after {
+ content: '';
+ position: absolute; inset: 0;
+ width: var(--v, 0%);
+ border-radius: 3px;
+ transition: width 160ms;
+}
+.energy-row.vocals b::after { background: var(--vocals); }
+.energy-row.drums b::after { background: var(--drums); }
+.energy-row.bass b::after { background: var(--bass); }
+.energy-row.guitar b::after { background: var(--guitar); }
+.energy-row.piano b::after { background: var(--piano); }
+.energy-row.other b::after { background: var(--other); opacity: 0.5; }
+.energy-row.original b::after { background: var(--fg-2); }
+
+.energy-row em {
+ font-style: normal;
+ font-family: var(--font-mono);
+ font-size: 11px;
+ color: var(--fg-2);
+ width: 36px;
+ text-align: right;
+ flex-shrink: 0;
+}
+
+/* Stem presence cards — row 2 */
+.stem-presence-panel {
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+}
+.stem-card {
+ padding: 14px 16px;
+ border-right: 1px solid var(--border);
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+.stem-card:last-child { border-right: none; }
+.stem-card-label {
+ font-size: 10px;
+ font-weight: 600;
+ letter-spacing: 0.07em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+.stem-card-pct {
+ font-size: 28px;
+ font-weight: 700;
+ font-family: var(--font-mono);
+ line-height: 1;
+ color: var(--fg);
+ transition: color 200ms;
+}
+.stem-card:not(.inactive)[data-stem="vocals"] .stem-card-pct { color: var(--vocals); }
+.stem-card:not(.inactive)[data-stem="drums"] .stem-card-pct { color: var(--drums); }
+.stem-card:not(.inactive)[data-stem="bass"] .stem-card-pct { color: var(--bass); }
+.stem-card:not(.inactive)[data-stem="guitar"] .stem-card-pct { color: var(--guitar); }
+.stem-card:not(.inactive)[data-stem="piano"] .stem-card-pct { color: var(--piano); }
+.stem-card:not(.inactive)[data-stem="other"] .stem-card-pct { color: var(--other); }
+.stem-card.inactive .stem-card-pct { color: var(--muted); }
+
+/* Analysis panel */
+.daw-analysis-panel {
+ padding: 12px;
+ background: var(--panel);
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+ display: flex;
+ gap: 16px;
+ flex-shrink: 0;
+}
+.daw-analysis-item {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ min-width: 80px;
+}
+.daw-analysis-val { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
+.daw-analysis-num {
+ font-size: 22px;
+ font-weight: 600;
+ line-height: 1.1;
+ color: var(--fg);
+}
+.daw-analysis-num.accent { color: var(--accent); }
+.daw-analysis-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }
+.daw-analysis-divider { width: 1px; background: var(--border); align-self: stretch; }
+.daw-camelot-ring {
+ width: 28px; height: 28px; border-radius: 50%;
+ border: 1.5px solid var(--accent);
+ display: flex; align-items: center; justify-content: center;
+ font-size: 10px; font-weight: 700; color: var(--accent);
+ background: rgba(244,183,64,0.08);
+ font-family: var(--font-mono);
+}
+
+/* ── Section ribbon ── */
+.daw-section-ribbon {
+ display: flex;
+ flex-shrink: 0;
+ border-bottom: 1px solid var(--border);
+}
+.daw-mixer-label {
+ width: 300px;
+ flex-shrink: 0;
+ background: var(--bg-2);
+ border-right: 1px solid var(--border);
+ padding: 6px 14px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.daw-label-title { font-size: 12px; font-weight: 600; }
+.daw-label-sub { font-size: 9px; }
+.daw-sections-header { justify-content: space-between; }
+.daw-sections-area {
+ flex: 1;
+ position: relative;
+ height: 36px;
+ background: var(--bg-2);
+ overflow: hidden;
+ user-select: none;
+}
+
+/* Section blocks (sections.js populates) */
+.section-block {
+ position: absolute;
+ top: 4px; bottom: 4px;
+ box-sizing: border-box;
+ border: 1px solid var(--sc, #4a7fff);
+ border-radius: 4px;
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+ cursor: grab;
+ transition: filter 80ms;
+}
+.section-block:hover { filter: brightness(1.15); }
+.section-block.sec-dragging { cursor: grabbing; filter: brightness(1.2); z-index: 10; }
+.section-block.sec-resizing { filter: brightness(1.2); z-index: 10; }
+
+.section-label {
+ flex: 1;
+ padding: 0 6px 0 10px;
+ font-size: 10px;
+ font-weight: 700;
+ letter-spacing: 0.09em;
+ text-transform: uppercase;
+ color: var(--sc, #4a7fff);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ pointer-events: auto;
+}
+
+.section-del {
+ display: none;
+ flex-shrink: 0;
+ width: 16px; height: 16px;
+ margin-right: 4px;
+ border: none; background: none;
+ color: var(--sc, #4a7fff);
+ font-size: 13px; line-height: 1;
+ cursor: pointer; border-radius: 3px;
+ align-items: center; justify-content: center;
+ opacity: 0.7;
+}
+.section-del:hover { opacity: 1; background: rgba(0,0,0,0.3); }
+.section-block:hover .section-del { display: flex; }
+
+.section-handle {
+ position: absolute;
+ top: 0; bottom: 0;
+ width: 6px;
+ cursor: col-resize;
+ z-index: 2;
+ flex-shrink: 0;
+}
+.section-handle-l { left: 0; }
+.section-handle-r { right: 0; }
+.section-handle:hover { background: rgba(255,255,255,0.12); }
+
+.section-rename-input {
+ flex: 1;
+ min-width: 0;
+ background: transparent;
+ border: none;
+ outline: none;
+ font: inherit;
+ font-size: 10px;
+ font-weight: 700;
+ letter-spacing: 0.09em;
+ text-transform: uppercase;
+ color: var(--sc, #4a7fff);
+ padding: 0 6px 0 10px;
+ caret-color: var(--sc, #4a7fff);
+}
+
+/* Sections save indicator */
+.sections-save-indicator {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ font-size: 10px;
+ color: var(--muted);
+ white-space: nowrap;
+ transition: opacity 400ms;
+}
+.sections-save-indicator.hidden { display: none; }
+.sections-save-indicator.saved { color: #4caf7d; }
+.sections-save-indicator::before {
+ content: "";
+ display: block;
+ width: 8px; height: 8px;
+ border-radius: 50%;
+ border: 1.5px solid currentColor;
+ border-top-color: transparent;
+ animation: sections-spin 600ms linear infinite;
+}
+.sections-save-indicator.saved::before {
+ animation: none;
+ border: none;
+ width: auto; height: auto;
+ content: "✓";
+ font-size: 11px;
+}
+@keyframes sections-spin {
+ to { transform: rotate(360deg); }
+}
+
+/* Add section button — lives in the Sections label column */
+.sections-add-btn-label {
+ display: inline-flex; align-items: center; gap: 4px;
+ padding: 3px 8px 3px 6px;
+ background: none;
+ border: 1px solid var(--border);
+ border-radius: 5px;
+ color: var(--muted);
+ font-size: 10px; font-weight: 600;
+ cursor: pointer;
+ white-space: nowrap;
+ transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
+}
+.sections-add-btn-label:hover {
+ background: var(--panel-2);
+ color: var(--fg);
+ border-color: rgba(255,255,255,0.18);
+}
+
+/* Wave label (left column in wave header — Mixer label) */
+.daw-wave-label {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 14px;
+}
+
+/* ── Waveform header ── */
+.daw-wave-header {
+ display: flex;
+ flex-shrink: 0;
+ border-bottom: 1px solid var(--border);
+}
+.daw-wave-label {
+ width: 300px;
+ flex-shrink: 0;
+ background: var(--bg-2);
+ border-right: 1px solid var(--border);
+ min-height: 32px;
+}
+.daw-ruler-area {
+ flex: 1;
+ background: var(--bg-2);
+ min-height: 32px;
+}
+
+/* Ruler */
+.lanes-ruler { position: relative; height: 18px; }
+.lanes-ruler-time {
+ position: absolute; inset: 0;
+ font-family: var(--font-mono);
+ font-size: 9px;
+ color: var(--muted);
+}
+.playhead-marker {
+ position: absolute;
+ top: -1px;
+ transform: translateX(-50%);
+ pointer-events: none;
+}
+
+/* ── Content area (mixer + waveform) ── */
+.daw-content {
+ flex: 1;
+ display: flex;
+ min-height: 0;
+ overflow: hidden;
+}
+
+/* ── Stems panel (left 300px) ── */
+.daw-stems-panel {
+ width: 300px;
+ flex-shrink: 0;
+ border-right: 1px solid var(--border);
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ background: var(--bg-2);
+}
+
+/* Stem list rows — kept in DOM for JS hook (.stem-mute/.stem-solo toggling, hidden visually) */
+.stem-list {
+ position: absolute;
+ width: 0; height: 0; overflow: hidden;
+ visibility: hidden; pointer-events: none;
+ opacity: 0;
+}
+/* Also update the --lane-h var to match waveform lane height */
+:root { --lane-h: 72px; } /* 70px wave + 2px separator */
+.stem-icon { width: 14px; height: 14px; flex-shrink: 0; }
+.stem-mute, .stem-solo { display: none; }
+.stem-monitor { display: none; }
+.drag-handle { display: none; }
+.mini-meter { display: none; }
+
+/* ── Mixer column (JS-built horizontal lanes) ── */
+.mixer-column {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 0;
+ overflow: hidden;
+}
+
+/* Each mixer row height is driven by --lane-h (set dynamically in JS to fill available space) */
+.lane-header.mx-row {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 0 10px;
+ height: var(--lane-h, 72px);
+ min-height: 72px;
+ max-height: none;
+ border-bottom: 2px solid var(--border);
+ background: var(--bg-2);
+ flex-shrink: 0;
+ position: relative;
+ transition: opacity var(--t-base);
+ box-sizing: border-box;
+}
+.lane-header.mx-row.muted { opacity: 0.45; }
+.lane-header.mx-row.hidden { display: none !important; }
+
+.lane-stripe { display: none; }
+
+/* Name + VU stacked vertically */
+.lane-name-vu {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 5px;
+ width: 76px;
+ flex-shrink: 0;
+}
+
+/* Stem icon — hidden per user preference */
+.mx-icon { display: none; }
+
+/* Stem name */
+.mx-name {
+ font-size: 13px; font-weight: 500;
+ min-width: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+/* Fader (horizontal, native range input) */
+.lane-knob.mx-fader {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ min-width: 0;
+}
+.lane-knob-indicator { display: none; }
+.mx-fader-input {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 100%;
+ height: 22px;
+ background: transparent;
+ cursor: ew-resize;
+ outline: none;
+ margin: 0;
+}
+.mx-fader-input::-webkit-slider-runnable-track {
+ height: 4px;
+ border-radius: 2px;
+ background: linear-gradient(
+ to right,
+ var(--fader-color, #888) 0%,
+ var(--fader-color, #888) calc(var(--lane-pos, 0.5) * 100%),
+ rgba(255,255,255,0.08) calc(var(--lane-pos, 0.5) * 100%)
+ );
+}
+.mx-fader-input::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ width: 14px; height: 14px;
+ border-radius: 50%;
+ background: var(--fader-color, #888);
+ margin-top: -5px;
+ border: 2px solid rgba(0,0,0,0.35);
+ box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
+ cursor: ew-resize;
+}
+.mx-fader-input::-moz-range-track {
+ height: 4px; border-radius: 2px;
+ background: rgba(255,255,255,0.08);
+}
+.mx-fader-input::-moz-range-thumb {
+ width: 14px; height: 14px;
+ border-radius: 50%;
+ background: var(--fader-color, #888);
+ border: 2px solid rgba(0,0,0,0.35);
+ cursor: ew-resize;
+}
+
+/* VU meter — sits below stem name in .lane-left-col, spans full column width */
+.lane-vu.mx-meter {
+ position: relative;
+ height: 5px;
+ width: 100%;
+ background: var(--bg);
+ border: 1px solid var(--border);
+ border-radius: 3px;
+ overflow: hidden;
+ --vu-level: 0%;
+ --vu-peak: 0%;
+}
+.lane-vu-bar {
+ display: none;
+}
+.lane-vu-bar.mx-meter-fill {
+ display: block;
+ position: absolute;
+ inset: 0 auto 0 0;
+ width: var(--vu-level, 0%);
+ background: linear-gradient(90deg, #22c55e 0%, #86efac 80%, #f97316 95%, #ef4444 100%);
+ border-radius: 2px;
+ transition: width 40ms linear;
+}
+
+/* dB value */
+.mx-val {
+ font-family: var(--font-mono);
+ font-size: 10px;
+ font-weight: 500;
+ color: var(--fg);
+ width: 36px;
+ text-align: right;
+ flex-shrink: 0;
+ font-variant-numeric: tabular-nums;
+}
+
+/* M/S buttons (JS-built) */
+.lane-icon-toggle.mx-btn,
+.ms-btn.mx-btn,
+.lane-dl.mx-btn {
+ width: 22px; height: 20px;
+ background: transparent;
+ border: 1px solid var(--border-strong);
+ border-radius: 5px;
+ color: var(--muted);
+ font-size: 10px; font-weight: 700;
+ font-family: var(--font-mono);
+ letter-spacing: 0.05em;
+ cursor: pointer;
+ display: inline-flex; align-items: center; justify-content: center;
+ transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
+ flex-shrink: 0;
+ text-decoration: none;
+ padding: 0;
+ opacity: 1;
+}
+.lane-icon-toggle.mx-btn:hover,
+.ms-btn.mx-btn:hover { color: var(--fg); border-color: #3a4550; }
+
+/* Mute button: "active" = NOT muted (lit up) */
+.lane-icon-toggle.mx-btn.mute.active { color: var(--fg-2); border-color: var(--border-strong); }
+.lane-icon-toggle.mx-btn.mute:not(.active) { opacity: 0.35; }
+
+/* Solo button: "active" = soloed */
+.ms-btn.mx-btn.active { background: rgba(244,183,64,0.18); color: var(--accent); border-color: rgba(244,183,64,0.4); }
+
+/* Download button */
+.lane-dl.mx-btn {
+ color: var(--muted);
+ border-color: transparent;
+}
+.lane-dl.mx-btn:hover { color: var(--fg); border-color: var(--border); }
+.lane-dl.mx-btn svg { width: 13px; height: 13px; }
+
+/* Unavailable stems — gray entire mixer row and waveform row */
+.lane-header.unavailable { opacity: 0.25; pointer-events: none; }
+.stem-waveform-row.unavailable { opacity: 0.2; pointer-events: none; }
+.mx-fader-input { touch-action: pan-y; }
+
+/* ── Waveform panel (right) ── */
+/* Layout only — waves.css handles all visual styling inside (.wave-scroll bg,
+ golden scrollbar, .loop-region, .waves-grid, .stem-waveform-layer etc.) */
+.daw-wave-panel {
+ flex: 1;
+ min-width: 0;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+/* waves.css gives .wave-editor padding + border-radius for the old rounded panel
+ style. In the flat DAW layout those are unwanted — strip them. */
+.daw .wave-editor,
+.app:not(.is-import) .daw-wave-panel.wave-editor {
+ padding: 0 !important;
+ min-height: 0 !important;
+ border-radius: 0 !important;
+}
+
+/* Our zoom toolbar sits outside .wave-editor (in .daw-wave-header), so
+ the wave-scroll should fill the full panel height instead of calc(100% - 32px).
+ Also remove the rounded corners waves.css adds in active state. */
+.daw .wave-scroll {
+ flex: 1 !important;
+ height: auto !important;
+ border-radius: 0 !important;
+ border: none !important;
+}
+
+/* Establish height chain so waves-column's calc(100%-34px) resolves correctly */
+.daw .wave-canvas { height: 100%; }
+
+/* In the original layout a 48px stem-icon strip lived INSIDE the wave panel,
+ offsetting waves-column/multitrack/waveform-layer by 48px. In our layout the
+ mixer is a separate 300px panel, so all those 48px offsets must be zero. */
+.daw .waves-column,
+.app:not(.is-import) .daw-wave-panel .waves-column {
+ padding-left: 0 !important;
+ --wave-gutter: 0px !important;
+}
+/* Show WaveSurfer native bar rendering; hide the SVG overlay layer */
+.daw #multitrack-container {
+ opacity: 1 !important;
+ pointer-events: all !important;
+ position: relative !important; /* in flow → waves-column height driven by WaveSurfer */
+ inset: 0 !important; /* waves.css sets inset: 0 0 0 48px; zero left offset */
+}
+/* Zero waves.css 48px left offsets that assumed an icon strip inside the wave panel */
+.daw .waves-grid { left: 0 !important; }
+.daw .lanes-ruler { margin-left: 0 !important; }
+.daw .stem-waveform-layer {
+ display: none !important;
+}
+/* waves-column must size naturally now that multitrack is in flow */
+.daw .waves-column {
+ height: auto !important;
+ min-height: 0 !important;
+}
+
+.loop-region.hidden { display: none !important; }
+
+/* Wave loading overlay */
+.wave-loading-overlay {
+ position: absolute; inset: 0; z-index: 10;
+ display: flex; flex-direction: column;
+ align-items: center; justify-content: center;
+ gap: 16px;
+ background: rgba(11,15,18,0.88);
+}
+.wave-loading-overlay.hidden { display: none !important; }
+.wave-loading-glow {
+ width: 80px; height: 80px; border-radius: 50%;
+ background: radial-gradient(circle, rgba(244,183,64,0.2) 0%, transparent 70%);
+ animation: daw-pulse 2s ease-in-out infinite;
+}
+@keyframes daw-pulse { 0%,100%{opacity:0.5;transform:scale(0.9);} 50%{opacity:1;transform:scale(1.1);} }
+.wave-loading-lines {
+ display: flex; gap: 3px; align-items: center;
+}
+.wave-loading-lines i {
+ display: block; width: 3px; height: 20px;
+ background: var(--accent); border-radius: 2px;
+ animation: daw-bar 1.2s ease-in-out infinite;
+}
+.wave-loading-lines i:nth-child(2) { animation-delay: 0.1s; }
+.wave-loading-lines i:nth-child(3) { animation-delay: 0.2s; }
+.wave-loading-lines i:nth-child(4) { animation-delay: 0.3s; }
+.wave-loading-lines i:nth-child(5) { animation-delay: 0.4s; }
+.wave-loading-lines i:nth-child(6) { animation-delay: 0.5s; }
+@keyframes daw-bar { 0%,100%{transform:scaleY(0.4);opacity:0.5;} 50%{transform:scaleY(1.4);opacity:1;} }
+.wave-loading-msg { font-size: 12px; color: var(--muted); }
+
+/* Presence panel (hidden, JS compat) */
+.presence-panel { display: none; }
+
+/* ── Transport footer ── */
+
+.daw-footer {
+ height: 200px;
+ flex-shrink: 0;
+ border-top: 1px solid var(--border);
+ background: var(--bg-2);
+ display: flex !important;
+ flex-direction: column;
+}
+
+.daw-footer-left {
+ display: flex;
+ align-items: baseline;
+ gap: 6px;
+ min-width: 140px;
+ flex: 1;
+}
+.daw-time-big {
+ font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
+}
+.daw-time-total { font-size: 13px; color: var(--muted); }
+.daw-footer-right {
+ display: flex; align-items: center; gap: 8px;
+ min-width: 140px; justify-content: flex-end;
+ flex: 1;
+}
+.daw-master-fader { accent-color: var(--accent); cursor: pointer; }
+.daw-btn {
+ display: inline-flex; align-items: center; justify-content: center;
+ background: var(--panel-2); border: 1px solid var(--border-strong);
+ color: var(--fg); border-radius: 8px; font-size: 12px;
+ font-family: inherit; cursor: pointer;
+ transition: background var(--t-fast);
+}
+.daw-btn:hover { background: var(--panel-3); }
+
+/* Transport controls */
+.daw-transport-controls {
+ display: flex; align-items: center; justify-content: center; gap: 8px;
+}
+.daw-play-btn {
+ background: var(--accent);
+ color: #1a1206;
+ width: 56px; height: 56px;
+ border-radius: 50%; border: none;
+ display: inline-flex; align-items: center; justify-content: center;
+ cursor: pointer;
+ box-shadow: 0 2px 10px rgba(244,183,64,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
+ transition: transform var(--t-fast), box-shadow var(--t-fast);
+ flex-shrink: 0;
+}
+.daw-play-btn:hover { box-shadow: 0 2px 16px rgba(244,183,64,0.5), inset 0 1px 0 rgba(255,255,255,0.22); }
+.daw-play-btn:active { transform: scale(0.96); }
+
+/* JS toggles these to show play vs pause icon */
+.btn-transport.playing .pause-icon { display: block !important; }
+.btn-transport.playing > svg:first-child { display: none; }
+
+/* Stop/loop buttons inside the footer transport row */
+.daw-footer .daw-iconbtn.btn-transport {
+ width: 40px; height: 40px;
+ border-radius: 9px;
+ display: inline-flex; align-items: center; justify-content: center;
+}
+
+/* Loop active state */
+.daw-iconbtn.loop.active,
+.btn-transport.loop.active { color: var(--accent); }
+
+/* Export buttons in footer */
+.daw-footer .footer-btn {
+ padding: 0 14px;
+ height: 36px;
+ border-radius: 8px;
+ gap: 6px;
+ white-space: nowrap;
+}
+.daw-footer .footer-btn:disabled {
+ opacity: 0.4;
+ cursor: default;
+}
+
+/* ── Footer redesign ── */
+
+/* ── Footer layout ── */
+.footer-content {
+ display: flex; flex-direction: row; align-items: center;
+ padding: 0 20px; flex: 1; min-height: 0;
+ justify-content: space-between;
+}
+.footer-center {
+ flex: 0 0 auto;
+ display: flex; flex-direction: column; align-items: center; gap: 6px;
+ padding: 0 24px;
+}
+.footer-chips {
+ flex: 1;
+ display: flex; align-items: center; justify-content: flex-end; gap: 8px;
+ min-width: 0;
+}
+
+/* Wave bar at the bottom of the footer */
+.footer-wave-bar {
+ height: 40px; flex-shrink: 0;
+ position: relative; overflow: hidden;
+}
+#footer-waveform {
+ position: absolute; inset: 0;
+ width: 100%; height: 100%; display: block;
+}
+.footer-scrub {
+ position: absolute; inset: 0;
+ cursor: pointer; z-index: 2;
+ background: transparent;
+}
+.footer-scrub-fill { display: none; }
+
+/* Track info (art + title + meta) */
+.footer-track {
+ flex: 1; min-width: 0; overflow: hidden;
+ display: flex; flex-direction: column; justify-content: center;
+ gap: 6px;
+}
+.footer-track-title-row {
+ display: flex; align-items: center; gap: 8px; min-width: 0;
+}
+.footer-track-title-row .daw-fav-btn { margin-left: 0; }
+.footer-track-title {
+ min-width: 0; flex-shrink: 1;
+ font-size: 14px; font-weight: 600;
+ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+ color: var(--fg);
+}
+.footer-track-body {
+ display: flex; align-items: flex-start; gap: 10px; min-width: 0;
+}
+.footer-cover {
+ width: 56px !important; height: 56px !important;
+ flex-shrink: 0;
+}
+.footer-track-body .daw-track-meta { flex: 1; min-width: 0; gap: 4px; }
+.footer-track .daw-track-details { gap: 2px; }
+.footer-track .daw-detail-label { font-size: 10px; width: 58px; }
+.footer-track .daw-detail-val { font-size: 10px; }
+.footer-art {
+ width: 44px; height: 44px; border-radius: 6px;
+ background: var(--panel-3); flex-shrink: 0; overflow: hidden;
+ display: none;
+}
+.footer-art.has-art { display: block; }
+.footer-thumb-img {
+ width: 100%; height: 100%; object-fit: cover;
+ opacity: 0; transition: opacity 0.2s;
+}
+.footer-thumb-img.loaded { opacity: 1; }
+.footer-info {
+ display: flex; flex-direction: column; gap: 3px; min-width: 0;
+}
+.footer-title {
+ font-size: 13px; font-weight: 600;
+ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+ color: var(--fg);
+}
+.footer-meta {
+ font-size: 11px; color: var(--muted);
+ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+/* Time display below transport buttons */
+.footer-time-row {
+ display: flex; align-items: baseline; gap: 4px;
+ justify-content: center;
+}
+.footer-elapsed {
+ font-size: 17px; font-weight: 700; letter-spacing: -0.03em; color: var(--fg);
+}
+.footer-total {
+ font-size: 13px; font-weight: 400; color: var(--muted);
+}
+.footer-time-sep { font-size: 13px; color: var(--muted); }
+
+/* Transport buttons */
+.footer-transport {
+ display: flex; align-items: center; gap: 8px; flex-shrink: 0;
+}
+.footer-transport .daw-iconbtn.btn-transport {
+ background: var(--panel-2);
+ border-color: var(--border-strong);
+ color: var(--fg-2);
+}
+.footer-transport .daw-iconbtn.btn-transport:hover {
+ background: var(--panel-3);
+ color: var(--fg);
+}
+
+/* Speed + export chip buttons */
+.footer-chip-wrap {
+ position: relative; flex-shrink: 0;
+ display: flex; align-items: center;
+}
+.footer-chip {
+ display: inline-flex; align-items: center; gap: 6px;
+ background: var(--panel-2); border: 1px solid var(--border-strong);
+ color: var(--fg); border-radius: 8px; font-size: 12px; font-weight: 500;
+ font-family: inherit; cursor: pointer; padding: 0 12px; height: 36px;
+ white-space: nowrap;
+ transition: background var(--t-fast);
+}
+.footer-chip:hover { background: var(--panel-3); }
+.footer-chip-primary {
+ background: var(--accent); color: #1a1206;
+ border-color: transparent;
+}
+.footer-chip-primary:hover { background: color-mix(in srgb, var(--accent) 85%, white); }
+
+.footer-chip-panel {
+ position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 30;
+ background: var(--panel-2); border: 1px solid var(--border-strong);
+ border-radius: 10px; padding: 4px;
+ min-width: 120px;
+ box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+}
+.footer-chip-panel.hidden { display: none !important; }
+
+.chip-panel-item {
+ display: flex; align-items: center; gap: 8px;
+ width: 100%; padding: 7px 12px;
+ background: none; border: none; border-radius: 7px;
+ color: var(--fg); font-size: 13px; font-family: inherit;
+ cursor: pointer; text-align: left; white-space: nowrap;
+}
+.chip-panel-item:hover { background: var(--panel-3); }
+.chip-panel-item.active { color: var(--accent); font-weight: 600; }
+
+/* ── About dialog ── */
+.about-backdrop {
+ position: fixed; inset: 0; z-index: 100;
+ display: grid; place-items: center;
+ background: rgba(3,8,13,0.55); backdrop-filter: blur(4px);
+}
+.about-backdrop.hidden { display: none !important; }
+.about-card {
+ width: min(320px, calc(100vw - 32px));
+ background: var(--panel-2); border: 1px solid var(--border-strong);
+ border-radius: 14px; box-shadow: var(--shadow-panel);
+ padding: 24px; text-align: center;
+ position: relative;
+}
+.about-close {
+ position: absolute; top: 12px; right: 12px;
+ width: 28px; height: 28px;
+ background: transparent; border: 1px solid var(--border);
+ border-radius: 6px; color: var(--muted);
+ font-size: 16px; cursor: pointer;
+ display: flex; align-items: center; justify-content: center;
+}
+.about-close:hover { background: var(--panel-3); color: var(--fg); }
+.about-card h2 { margin: 0 0 8px; font-size: 20px; font-family: var(--font-mono); }
+.about-version { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
+.about-link {
+ display: block; color: var(--accent); font-size: 13px;
+ text-decoration: none; font-family: var(--font-mono);
+}
+.about-link:hover { text-decoration: underline; }
+
+/* ── Library sections (Recent · Stem Collections · Tags) ── */
+.lib-section {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ padding-top: 14px;
+}
+.lib-section + .lib-section {
+ border-top: 1px solid var(--border);
+}
+.lib-section-head {
+ padding: 0 4px 6px;
+ font-size: 10px;
+ font-weight: 700;
+ letter-spacing: 0.09em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+/* Tag chips */
+.lib-tags-row {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ padding: 2px 0 8px;
+}
+.lib-tag-chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ padding: 5px 11px;
+ background: var(--panel);
+ border: 1px solid var(--border);
+ border-radius: 20px;
+ font-size: 12px;
+ color: var(--fg-2);
+ cursor: pointer;
+ transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
+ white-space: nowrap;
+}
+.lib-tag-chip:hover {
+ background: var(--panel-2);
+ color: var(--fg);
+ border-color: rgba(255,255,255,0.15);
+}
+.lib-tag-chip.active {
+ background: rgba(244,183,64,0.12);
+ color: var(--accent);
+ border-color: rgba(244,183,64,0.3);
+}
+.lib-tag-count { color: var(--muted); font-size: 11px; }
+
+/* ── Clear bin bar (trash view only) ── */
+.clear-bin-bar { display: none; padding: 6px 10px 4px; }
+.sidebar.trash-view .clear-bin-bar { display: block; }
+.sidebar.trash-view .daw-lib-header { display: none; }
+.sidebar.favorites-view .daw-lib-header { display: none; }
+.clear-bin-btn {
+ display: flex; align-items: center; gap: 5px;
+ width: 100%; padding: 6px 10px; border-radius: 6px;
+ background: rgba(229, 78, 78, 0.12); border: 1px solid rgba(229, 78, 78, 0.28);
+ color: #e54e4e; font-size: 12px; font-weight: 500; cursor: pointer;
+ transition: background 150ms, border-color 150ms;
+}
+.clear-bin-btn:hover { background: rgba(229, 78, 78, 0.22); border-color: rgba(229, 78, 78, 0.5); }
+.clear-bin-btn:active { background: rgba(229, 78, 78, 0.32); }
+
+/* ── App state classes (set by JS) ── */
+/* No track loaded: hide main waveform content */
+.daw.is-import .daw-track-header,
+.daw.is-import .daw-section-ribbon,
+.daw.is-import .daw-wave-header,
+.daw.is-import .daw-content { opacity: 0.3; pointer-events: none; }
+
+.daw.no-track .daw-track-header,
+.daw.no-track .daw-section-ribbon,
+.daw.no-track .daw-wave-header,
+.daw.no-track .daw-content { opacity: 0.3; pointer-events: none; }
+
+/* When track is playing */
+.daw-play-btn .pause-icon { display: none; }
+
+/* ── Responsive: hide zoom in small windows ── */
+@media (max-width: 900px) {
+ .daw-info-row { flex-wrap: wrap; }
+ .daw-track-card { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
+ .stem-presence-panel { grid-template-columns: repeat(3, 1fr); }
+}
diff --git a/static/css/variables.css b/static/css/variables.css
index 22b9693b..a6f23667 100644
--- a/static/css/variables.css
+++ b/static/css/variables.css
@@ -1,49 +1,69 @@
+/* ── Design tokens ── */
:root {
color-scheme: dark;
- --bg: #0a0a0a;
- --bg-deep: #050505;
- --panel: rgba(15, 24, 30, 0.78);
- --panel-2: rgba(21, 31, 39, 0.82);
- --panel-hover: rgba(31, 43, 52, 0.88);
- --ink: #ececec;
- --ink-dim: #9c9c9c;
- --ink-faint: #6c6c6c;
- --line: rgba(157, 170, 182, 0.14);
- --line-strong: rgba(186, 197, 208, 0.24);
- --gold: #d8a84a;
- --gold-bright: #f1cf82;
- --gold-soft: rgba(216, 168, 74, 0.16);
- --gold-line: rgba(216, 168, 74, 0.28);
- --glass: rgba(14, 23, 30, 0.78);
- --glass-strong: rgba(24, 34, 43, 0.82);
- --glass-line: rgba(157, 170, 182, 0.16);
- --shadow-panel: 0 24px 70px rgba(0, 0, 0, 0.3);
- --accent: #6fb060;
- --danger: #d65a4a;
- --focus-ring: rgba(236, 236, 236, 0.55);
-
- --header-w: 320px;
- --lane-h: 96px;
- --radius: 8px;
- --radius-sm: 6px;
- --radius-xs: 4px;
- --border-w: 1px;
-
- --font-mono: "JetBrains Mono", "SF Mono", "Menlo", "Consolas", monospace;
-
- --t-fast: 120ms;
- --t-base: 180ms;
- --easing: cubic-bezier(0.2, 0.8, 0.2, 1);
+
+ /* Surfaces */
+ --bg: #0b0f12;
+ --bg-2: #0f1418;
+ --panel: #131a1f;
+ --panel-2: #182026;
+ --panel-3: #1d262d;
+ --border: #232c34;
+ --border-strong: #2e3942;
+
+ /* Text */
+ --fg: #e8ecf0;
+ --fg-2: #c2c9d1;
+ --muted: #8a939c;
+ --muted-2: #5d666e;
+
+ /* Stem colours */
+ --vocals: #ef4444;
+ --drums: #f97316;
+ --bass: #eab308;
+ --guitar: #22c55e;
+ --piano: #a855f7;
+ --other: #9ca3af;
+
+ /* Accent */
+ --accent: #f4b740;
+ --accent-2: #d99a2b;
+
+ /* Legacy compat aliases used by waves.css / player.js */
+ --gold: var(--accent);
+ --gold-bright: #f8c054;
+ --gold-soft: rgba(244,183,64,0.16);
+ --gold-line: rgba(244,183,64,0.28);
+ --ink: var(--fg);
+ --ink-dim: var(--fg-2);
+ --ink-faint: var(--muted);
+ --line: var(--border);
+ --line-strong: var(--border-strong);
+ --glass-line: var(--border);
+ --danger: #d65a4a;
+ --focus-ring: rgba(236,236,236,0.55);
+
+ /* Typography */
+ --font-sans: 'Inter', -apple-system, system-ui, sans-serif;
+ --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+
+ /* Layout */
+ --header-w: 300px;
+ --lane-h: 86px;
+ --radius: 10px;
+ --radius-sm: 8px;
+ --radius-xs: 6px;
+
+ /* Motion */
+ --t-fast: 80ms;
+ --t-base: 120ms;
+ --easing: cubic-bezier(0.2,0.8,0.2,1);
+ --shadow-panel: 0 4px 24px rgba(0,0,0,0.4);
}
@media (prefers-reduced-motion: reduce) {
- :root {
- --t-fast: 0ms;
- --t-base: 0ms;
- }
- *,
- *::before,
- *::after {
+ :root { --t-fast: 0ms; --t-base: 0ms; }
+ *, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
diff --git a/static/index.html b/static/index.html
index ac3357a5..cd2d3c92 100644
--- a/static/index.html
+++ b/static/index.html
@@ -3,498 +3,679 @@
- StemDeck
+ StemDeck — split any track into stems
-
+
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
- 
-
-
ALPHA
+
+
+
+
+
+
+
+
+ StemDeck
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
- Help
-
-