:root {
        --bg-main: #0d1117;
        --bg-panel: #161b22;
        --bg-hover: #21262d;
        --text-main: #c9d1d9;
        --text-muted: #8b949e;
        --accent: #58a6ff;
        --green: #3fb950;
        --warn: #d29922;
        --err: #f85149;
        --border: #30363d;
    }
    * { box-sizing: border-box; }
    body { background: var(--bg-main); color: var(--text-main); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; margin: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #484f58; border-radius: 3px; }

    .top-bar { height: 46px; min-height: 46px; border-bottom: 1px solid var(--border); background: var(--bg-panel); display: flex; align-items: center; padding: 0 16px; gap: 12px; }
    .clerk-auth {
        display: flex;
        align-items: center;
        min-width: 66px;
        justify-content: flex-end;
        color: var(--text-muted);
        font-size: 11px;
        flex-shrink: 0;
    }
    .clerk-auth[hidden] { display: none; }
    .clerk-auth[data-state="loading"],
    .clerk-auth[data-state="error"] {
        border: 1px solid var(--border);
        border-radius: 4px;
        padding: 4px 8px;
        background: var(--bg-hover);
    }
    .clerk-signin-btn {
        padding: 4px 10px;
        font-size: 11px;
        white-space: nowrap;
    }
    body.auth-locked .landing,
    body.auth-locked #workspace {
        pointer-events: none;
        user-select: none;
        filter: grayscale(.35);
        opacity: .38;
    }
    .auth-lock {
        position: fixed;
        inset: 46px 0 0;
        z-index: 2000;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        overflow: auto;
        padding: 24px;
    }
    .auth-lock-panel {
        pointer-events: auto;
        min-width: min(420px, calc(100vw - 48px));
    }
    .auth-lock-signin {
        display: flex;
        justify-content: center;
    }
    .tool-strip {
        border-bottom: 1px solid var(--border);
        background: rgba(13,17,23,0.95);
        padding: 7px 12px 6px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        flex-shrink: 0;
    }
    .tool-strip-run {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .tool-strip-label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--warn);
        white-space: nowrap;
        flex-shrink: 0;
    }
    .tool-strip-btn {
        background: rgba(210,153,34,.14);
        border: 1px solid rgba(210,153,34,.35);
        color: var(--warn);
        border-radius: 5px;
        padding: 3px 10px;
        font-size: 10px;
        font-weight: 700;
        cursor: pointer;
        transition: background .12s, opacity .12s;
        flex-shrink: 0;
    }
    .tool-strip-btn:hover { background: rgba(210,153,34,.24); }
    .tool-strip-btn:disabled { opacity: .45; cursor: default; }
    .tool-strip-status {
        font-size: 10px;
        color: var(--text-muted);
        min-height: 12px;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tool-strip-params {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
    }
    .tool-strip-field {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 10px;
        color: var(--text-muted);
        flex-shrink: 0;
    }
    .tool-strip-field span {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        white-space: nowrap;
    }
    .tool-strip-field input,
    .tool-strip-field select {
        background: var(--bg-main);
        border: 1px solid var(--border);
        color: var(--text-main);
        border-radius: 4px;
        padding: 3px 5px;
        font-size: 10px;
    }
    .tool-strip-field input { width: 58px; }
    .tool-strip-field select { cursor: pointer; }
    .editor { display: flex; flex: 1; overflow: hidden; }
    .pane-center { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

    .timeline-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

    /* Single scroll root — the only element that scrolls horizontally.
       All waveform canvases, subtitle lanes, and timeline rulers are
       children of this container and scroll together as one panel. */
    #timeline-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }
    #track-mixer { width: 128px; flex-shrink: 0; background: var(--bg-panel); border-right: 1px solid var(--border); overflow: hidden; }
    #track-mixer-rows { will-change: transform; }
    .mixer-row { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 6px 8px; border-bottom: 1px solid var(--border); overflow: hidden; transition: height .25s, opacity .2s, background .2s; min-height: 44px; }
    .mixer-row.muted { opacity: 0.3; background: rgba(248,81,73,.06); }
    .mixer-track-name { font-size: 9px; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 108px; }
    .mixer-btns { display: flex; gap: 4px; }
    .btn-mix {
        background: var(--bg-hover);
        border: 1px solid var(--border);
        color: var(--text-muted);
        border-radius: 3px;
        padding: 2px 8px;
        font-size: 9px;
        font-weight: 800;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: .06em;
        transition: all .12s;
        min-width: 24px;
        text-align: center;
    }
    .btn-mix:hover { color: var(--text-main); border-color: var(--text-muted); background: var(--bg-hover); }
    /* Muted — bright red, unmistakable */
    .btn-mix.mute-on { background: var(--err); color: #fff; border-color: var(--err); box-shadow: 0 0 6px rgba(248,81,73,.5); }
    /* Soloed — bright accent */
    .btn-mix.solo-on { background: var(--accent); color: #000; border-color: var(--accent); box-shadow: 0 0 6px rgba(88,166,255,.5); }
    #waveform-scroll-root { flex: 1; overflow-x: auto; overflow-y: auto; }
    #waveform-area { min-width: 100%; }

    .track-row { border-bottom: 1px solid var(--border); position: relative; }
    .track-label { position: absolute; top: 0; left: 0; z-index: 10; background: rgba(22,27,34,0.88); backdrop-filter: blur(4px); padding: 3px 10px; font-size: 11px; color: var(--text-muted); border-bottom-right-radius: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; }
    .track-wave { min-height: 160px; background: #0a0d11; overflow: hidden; }

    .subs-area { background: var(--bg-panel); }
    .sub-lane { height: 22px; position: relative; overflow: hidden; border-top: 1px solid rgba(48,54,61,.3); }
    /* Label stays pinned at the left viewport edge via JS translateX (see pinSubtitleLabels) */
    .sub-lane-label { position: absolute; left: 0; top: 0; height: 100%; width: 70px; display: flex; align-items: center; padding-left: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; z-index: 1; background: var(--bg-panel); }
    .sub-inner { position: relative; height: 100%; }
    .sub-block { position: absolute; top: 0; height: 100%; display: flex; align-items: center; padding: 0 6px 0 4px; font-size: 10px; font-family: ui-monospace, monospace; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; border-left: 2px solid; border-radius: 2px; }
    .sub-block:hover { background: rgba(255,255,255,.06); }
    .sub-block.active { background: rgba(88,166,255,.12); }

    .console-area { border-top: 1px solid var(--border); background: #0a0e12; display: flex; flex-direction: column; }
    .console-header { padding: 6px 12px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; cursor: pointer; user-select: none; }
    .console-log { flex: 1; padding: 6px 12px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; color: #8b949e; overflow-y: auto; }

    .log-line { margin-bottom: 2px; line-height: 1.4; }
    .log-step { color: var(--accent); }
    .log-ok { color: var(--green); }
    .log-warn { color: var(--warn); }
    .log-err { color: var(--err); }
    @keyframes pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

    .btn { border: none; border-radius: 4px; padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .1s; }
    .btn-primary { background: var(--accent); color: #000; }
    .btn-primary:hover { background: #79c0ff; }
    .btn-ghost { background: var(--bg-hover); color: var(--text-main); border: 1px solid var(--border); }
    .btn-ghost:hover { background: #30363d; }
    .time-display { font-family: ui-monospace, monospace; font-size: 13px; color: var(--text-main); min-width: 72px; }

    .tag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-right: 4px; margin-bottom: 3px; }
    .tag-blue { background: rgba(88,166,255,.15); color: #58a6ff; }
    .tag-green { background: rgba(63,185,80,.15); color: #3fb950; }
    .tag-yellow { background: rgba(210,153,34,.15); color: #d29922; }
    .tag-red { background: rgba(248,81,73,.15); color: #f85149; }
    .tag-purple { background: rgba(188,140,255,.15); color: #bc8cff; }

    .meta-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 12px; }
    .meta-label { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
    .meta-value { font-family: ui-monospace, monospace; font-size: 12px; }
    .section-title { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; margin-top: 16px; }
    .section-title:first-child { margin-top: 0; }

    .landing { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 24px; }
    .import-card {
        width: 420px;
        max-width: calc(100vw - 32px);
        background: var(--bg-panel);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .import-dropzone {
        border: 1px dashed rgba(88,166,255,.45);
        background: linear-gradient(180deg, rgba(88,166,255,.08), rgba(13,17,23,.25));
        border-radius: 10px;
        padding: 20px 16px;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 6px;
        transition: border-color .15s, background .15s, transform .15s;
    }
    .import-dropzone.dragover {
        border-color: var(--accent);
        background: linear-gradient(180deg, rgba(88,166,255,.16), rgba(13,17,23,.35));
        transform: translateY(-1px);
    }
    .import-dropzone.busy { opacity: 0.7; }
    .import-actions { display: flex; gap: 8px; }
    .import-btn {
        flex: 1;
        background: rgba(88,166,255,.12);
        border: 1px solid rgba(88,166,255,.35);
        color: var(--accent);
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        transition: background .15s, opacity .15s;
    }
    .import-btn:hover { background: rgba(88,166,255,.2); }
    .import-btn:disabled { opacity: .5; cursor: default; }
    .import-status {
        min-height: 16px;
        font-size: 11px;
        color: var(--text-muted);
        text-align: center;
    }
    .import-status[data-state="busy"] { color: var(--accent); }
    .import-status[data-state="error"] { color: var(--err); }
    .source-card {
        background: var(--bg-panel);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 16px 20px;
        width: min(420px, calc(100vw - 32px));
        cursor: pointer;
        transition: border-color .15s, background .15s;
    }
    .source-card:hover { border-color: var(--accent); background: var(--bg-hover); }
    .project-card-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 14px;
    }
    .project-card-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .project-card-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 700;
        font-size: 14px;
        line-height: 1.25;
    }
    .project-card-meta {
        font-size: 11px;
        color: var(--text-muted);
        line-height: 1.2;
    }
    .project-delete-btn {
        background: rgba(248,81,73,.1);
        border: 1px solid rgba(248,81,73,.35);
        color: #ff938a;
        border-radius: 7px;
        padding: 6px 12px;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        min-width: 72px;
        justify-self: end;
        flex-shrink: 0;
    }
    .project-delete-btn:hover { background: rgba(248,81,73,.18); }

    .qc-page { flex: 1; overflow: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
    .qc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .qc-title { font-size: 22px; font-weight: 800; color: var(--text-main); }
    .qc-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
    .qc-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .qc-summary-card {
        min-height: 126px;
        background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(13,17,23,0.5));
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 18px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
    }
    .qc-summary-card.pass { border-color: rgba(63,185,80,.45); box-shadow: inset 0 0 0 1px rgba(63,185,80,.12); }
    .qc-summary-card.warn { border-color: rgba(210,153,34,.45); box-shadow: inset 0 0 0 1px rgba(210,153,34,.12); }
    .qc-summary-card.fail { border-color: rgba(248,81,73,.45); box-shadow: inset 0 0 0 1px rgba(248,81,73,.12); }
    .qc-summary-card.na { border-color: rgba(139,148,158,.35); }
    .qc-summary-label { font-size: 12px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
    .qc-summary-value { font-size: 24px; font-weight: 800; line-height: 1.15; color: var(--text-main); }
    .qc-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; min-height: 0; }
    .qc-sidecard, .qc-main {
        background: var(--bg-panel);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 16px;
    }
    .qc-files { display: flex; flex-direction: column; gap: 6px; }
    .qc-file-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-main); }
    .qc-file-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
    .qc-counts { display: flex; flex-wrap: wrap; gap: 8px; }
    .qc-count-chip {
        border-radius: 999px;
        padding: 4px 10px;
        font-size: 11px;
        font-weight: 700;
        border: 1px solid var(--border);
        color: var(--text-muted);
        background: rgba(139,148,158,.1);
    }
    .qc-count-chip.pass { border-color: rgba(63,185,80,.4); color: var(--green); background: rgba(63,185,80,.12); }
    .qc-count-chip.warn { border-color: rgba(210,153,34,.4); color: var(--warn); background: rgba(210,153,34,.12); }
    .qc-count-chip.fail { border-color: rgba(248,81,73,.4); color: var(--err); background: rgba(248,81,73,.12); }
    .qc-checklist { display: flex; flex-direction: column; gap: 10px; }
    .qc-check-row {
        border: 1px solid var(--border);
        border-left: 4px solid var(--border);
        border-radius: 10px;
        padding: 14px 16px;
        background: rgba(13,17,23,0.72);
    }
    .qc-check-row.running { border-left-color: var(--accent); }
    .qc-check-row.pass { border-left-color: var(--green); }
    .qc-check-row.warn { border-left-color: var(--warn); }
    .qc-check-row.fail { border-left-color: var(--err); }
    .qc-check-row.na { border-left-color: var(--text-muted); }
    .qc-check-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
    .qc-check-title { font-size: 14px; font-weight: 700; color: var(--text-main); }
    .qc-check-status { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
    .qc-check-summary { font-size: 12px; color: var(--text-main); margin-top: 4px; line-height: 1.45; }
    .qc-check-detail { font-size: 11px; color: var(--text-muted); margin-top: 8px; line-height: 1.55; }
    .pane-qc .qc-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pane-qc .qc-layout { grid-template-columns: 1fr; }
    .pane-qc .qc-summary-card { min-height: 96px; padding: 14px; }
    .pane-qc .qc-summary-value { font-size: 18px; }

    @media (max-width: 1200px) {
        .qc-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .qc-layout { grid-template-columns: 1fr; }
    }
    .zoom-controls { display: flex; align-items: center; gap: 6px; margin-left: 12px; border-left: 1px solid var(--border); padding-left: 12px; }
    .zoom-btn { background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-main); width: 24px; height: 24px; border-radius: 4px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; line-height: 1; }
    .zoom-btn:hover { background: #30363d; }
    .zoom-slider { width: 100px; accent-color: var(--accent); height: 4px; }
    .zoom-label { font-size: 10px; color: var(--text-muted); min-width: 36px; text-align: center; font-family: ui-monospace, monospace; }

    /* WaveSurfer timeline plugin renders inside the waveform wrapper — syncs automatically */

    .track-header { display: flex; align-items: center; gap: 8px; padding: 3px 10px; background: var(--bg-panel); border-bottom: 1px solid rgba(48,54,61,.5); font-size: 11px; color: var(--text-muted); }
    .track-ctrl { background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-muted); border-radius: 3px; padding: 1px 6px; font-size: 9px; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; transition: all .15s; }
    .track-ctrl:hover { color: var(--text-main); border-color: var(--text-muted); }
    .track-ctrl.active { background: var(--accent); color: #000; border-color: var(--accent); }
    .track-lufs { font-family: ui-monospace, monospace; font-size: 9px; padding: 1px 5px; border-radius: 3px; }
    .track-dur { font-family: ui-monospace, monospace; font-size: 9px; color: var(--text-muted); margin-left: auto; }
    .track-spectrogram { height: 160px; background: #0a0d11; display: none; }

    .meta-strip { display: flex; align-items: center; gap: 12px; padding: 6px 14px; background: var(--bg-panel); border-bottom: 1px solid var(--border); font-size: 11px; overflow-x: auto; flex-shrink: 0; }
    .meta-strip-group { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
    .meta-strip-sep { width: 1px; height: 16px; background: var(--border); flex-shrink: 0; }
    .meta-strip-icon { font-size: 12px; opacity: .6; }

    .track-wave [data-id] { cursor: pointer; }

    /* ── Agent Panel ─────────────────────────────────────────────── */
    .pane-agent {
        width: 0;
        min-width: 0;
        border-left: 0 solid var(--border);
        background: var(--bg-panel);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: width .25s ease, min-width .25s ease, border-left-width .25s ease;
        flex-shrink: 0;
    }
    .pane-agent.open {
        width: 400px;
        min-width: 400px;
        border-left-width: 1px;
    }
    .pane-qc .qc-pane-scroll {
        flex: 1;
        overflow-y: auto;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .pane-qc .qc-pane-toolbar {
        align-items: flex-start;
        padding-bottom: 2px;
    }
    .pane-qc .qc-pane-title { font-size: 18px; }
    .pane-automix .automix-scroll {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        background:
            radial-gradient(circle at top right, rgba(88,166,255,.12), transparent 30%),
            linear-gradient(180deg, rgba(255,255,255,.02), rgba(13,17,23,.02));
    }
    .automix-hero {
        border: 1px solid rgba(88,166,255,.2);
        background: linear-gradient(180deg, rgba(88,166,255,.08), rgba(22,27,34,.85));
        border-radius: 16px;
        padding: 16px 18px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
    }
    .automix-title {
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--text-main);
    }
    .automix-subtitle {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 4px;
        line-height: 1.5;
    }
    .automix-badge {
        flex-shrink: 0;
        border-radius: 999px;
        padding: 6px 10px;
        font-size: 11px;
        font-weight: 700;
        color: #8dd6ff;
        background: rgba(88,166,255,.12);
        border: 1px solid rgba(88,166,255,.25);
    }
    .automix-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .automix-card {
        background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(13,17,23,.72));
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    }
    .automix-card-main {
        border-color: rgba(210,153,34,.28);
        background:
            linear-gradient(180deg, rgba(210,153,34,.06), rgba(13,17,23,.76)),
            linear-gradient(180deg, rgba(255,255,255,.025), rgba(13,17,23,.72));
    }
    .automix-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }
    .automix-card-main .automix-card-head {
        flex-direction: column;
        align-items: stretch;
    }
    .automix-card-stem .automix-card-head {
        align-items: center;
    }
    .automix-card-title {
        font-size: 15px;
        font-weight: 800;
        letter-spacing: -.01em;
        color: var(--text-main);
    }
    .automix-row {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    .automix-label {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--text-muted);
        line-height: 1.35;
    }
    .automix-check {
        display: inline-flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-main);
        line-height: 1.35;
        flex-wrap: wrap;
    }
    .automix-check-compact {
        font-size: 11px;
        color: var(--text-muted);
        align-items: center;
        flex-wrap: nowrap;
    }
    .automix-check input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--accent);
        cursor: pointer;
        margin: 0;
    }
    .automix-pill-group,
    .automix-segment {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .automix-pill,
    .automix-segment-btn {
        background: rgba(139,148,158,.08);
        border: 1px solid rgba(139,148,158,.18);
        color: var(--text-main);
        border-radius: 10px;
        padding: 7px 12px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        transition: background .12s, color .12s, border-color .12s, transform .12s;
    }
    .automix-pill:hover,
    .automix-segment-btn:hover {
        background: rgba(255,255,255,.08);
        border-color: rgba(255,255,255,.16);
        transform: translateY(-1px);
    }
    .automix-pill.is-active,
    .automix-segment-btn.is-active {
        background: linear-gradient(180deg, rgba(88,166,255,.22), rgba(88,166,255,.12));
        border-color: rgba(88,166,255,.42);
        color: #a8d3ff;
        box-shadow: inset 0 0 0 1px rgba(88,166,255,.12);
    }
    .automix-number {
        width: 100%;
        max-width: 160px;
        height: 36px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: rgba(13,17,23,.9);
        color: var(--text-main);
        padding: 0 10px;
        font-size: 12px;
        font-weight: 700;
    }
    .automix-number:disabled {
        opacity: .45;
        color: var(--text-muted);
        background: rgba(13,17,23,.55);
        cursor: default;
    }
    .automix-slider-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .automix-slider-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-main);
    }
    .automix-slider-label output {
        font-family: ui-monospace, monospace;
        font-size: 11px;
        color: var(--accent);
    }
    .automix-slider {
        width: 100%;
        accent-color: #79c0ff;
        height: 4px;
    }
    .automix-card-stem[data-disabled="true"] {
        opacity: .48;
    }
    .automix-card-stem[data-disabled="true"] .automix-slider {
        pointer-events: none;
    }
    .automix-card-stem[data-disabled="true"] .automix-card-title,
    .automix-card-stem[data-disabled="true"] .automix-slider-label {
        color: var(--text-muted);
    }
    .automix-footer {
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 14px 16px;
        background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(13,17,23,.72));
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .automix-summary {
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
    }
    .automix-footer-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .automix-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        justify-content: flex-end;
        flex-shrink: 0;
    }
    .automix-actions .btn {
        min-width: 104px;
    }
    .automix-export-btn {
        width: 100%;
        min-height: 36px;
        border-color: rgba(88,166,255,.28);
        color: #9ccdff;
        background: linear-gradient(180deg, rgba(88,166,255,.10), rgba(88,166,255,.05));
        font-weight: 700;
    }
    .automix-export-btn:hover:not(:disabled) {
        border-color: rgba(88,166,255,.45);
        background: linear-gradient(180deg, rgba(88,166,255,.16), rgba(88,166,255,.08));
    }
    .automix-export-btn:disabled {
        opacity: .45;
    }
    .automix-toast {
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 12px;
        line-height: 1.5;
        border: 1px solid rgba(88,166,255,.22);
        color: var(--text-main);
        background: rgba(88,166,255,.08);
    }
    .automix-toast-success {
        border-color: rgba(63,185,80,.28);
        background: rgba(63,185,80,.1);
    }
    .automix-toast-error {
        border-color: rgba(248,81,73,.28);
        background: rgba(248,81,73,.1);
    }
    .automix-toast strong {
        color: #8dd6ff;
        font-weight: 800;
    }
    .automix-toast-success strong { color: #7ee787; }
    .automix-toast-error strong { color: #ff938a; }
    .agent-header {
        padding: 10px 14px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
    }
    .agent-header-title {
        font-size: 12px;
        font-weight: 700;
        color: var(--text-main);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .agent-close-btn {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 16px;
        line-height: 1;
        padding: 2px 4px;
        border-radius: 3px;
    }
    .agent-close-btn:hover { color: var(--text-main); background: var(--bg-hover); }

    .agent-messages {
        flex: 1;
        overflow-y: auto;
        padding: 12px 14px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    /* User bubble */
    .agent-msg-user {
        align-self: flex-end;
        background: var(--accent);
        color: #000;
        border-radius: 12px 12px 2px 12px;
        padding: 8px 12px;
        font-size: 12px;
        max-width: 86%;
        line-height: 1.5;
        font-weight: 500;
    }

    /* Assistant message wrapper */
    .agent-msg-assistant { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }

    /* Thinking block */
    .agent-thinking {
        background: rgba(210,153,34,.08);
        border: 1px solid rgba(210,153,34,.25);
        border-radius: 6px;
        padding: 8px 10px;
        font-family: ui-monospace, monospace;
        font-size: 11px;
        color: var(--warn);
        line-height: 1.55;
        white-space: pre-wrap;
        word-break: break-word;
        max-height: 200px;
        overflow-y: auto;
        cursor: pointer;
        position: relative;
    }
    .agent-thinking.collapsed { max-height: 36px; overflow: hidden; }
    .agent-thinking-header {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        opacity: .7;
        margin-bottom: 4px;
    }
    .agent-thinking-text::after {
        content: '▌';
        display: inline;
        animation: blink .7s step-end infinite;
    }
    .agent-thinking-text.done::after { display: none; }
    @keyframes blink { 50% { opacity: 0; } }

    /* Plan card */
    .agent-plan-card {
        background: var(--bg-main);
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 10px 12px;
        font-size: 12px;
    }
    .agent-plan-intent {
        font-weight: 600;
        color: var(--text-main);
        margin-bottom: 8px;
        line-height: 1.4;
    }
    .agent-plan-steps { display: flex; flex-direction: column; gap: 4px; }
    .agent-plan-step {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        font-size: 11px;
        color: var(--text-muted);
        line-height: 1.4;
    }
    .agent-plan-step-num {
        font-family: ui-monospace, monospace;
        font-size: 10px;
        color: var(--accent);
        min-width: 18px;
        font-weight: 700;
    }
    .agent-plan-step-reason { color: var(--text-muted); font-style: italic; font-size: 10px; }

    /* Status / execute row inside assistant message */
    .agent-executing-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: rgba(63,185,80,.1);
        border: 1px solid rgba(63,185,80,.25);
        border-radius: 4px;
        padding: 4px 8px;
        font-size: 11px;
        color: var(--green);
        font-weight: 600;
    }

    /* Version ready chip */
    .agent-version-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(63,185,80,.12);
        border: 1px solid rgba(63,185,80,.3);
        border-radius: 20px;
        padding: 4px 10px;
        font-size: 11px;
        color: var(--green);
        font-weight: 600;
        cursor: pointer;
        transition: background .15s;
    }
    .agent-version-chip:hover { background: rgba(63,185,80,.22); }
    .agent-version-chip.highlighted { background: rgba(63,185,80,.35); outline: 2px solid rgba(63,185,80,.6); }
    .mixer-row.v-selected { background: rgba(63,185,80,.08); border-left: 2px solid var(--green); }

    /* Agent input bar — Cursor style */
    .agent-input-bar {
        border-top: 1px solid var(--border);
        padding: 12px 14px 14px;
        flex-shrink: 0;
    }
    .agent-input-wrap {
        background: var(--bg-main);
        border: 1px solid var(--border);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        padding: 10px 12px 8px;
        transition: border-color .15s, box-shadow .15s;
    }
    .agent-input-wrap:focus-within {
        border-color: rgba(88,166,255,.5);
        box-shadow: 0 0 0 3px rgba(88,166,255,.08);
    }
    .agent-textarea {
        background: transparent;
        border: none;
        color: var(--text-main);
        font-size: 13px;
        resize: none;
        outline: none;
        font-family: inherit;
        min-height: 52px;
        max-height: 140px;
        line-height: 1.6;
        width: 100%;
    }
    .agent-textarea::placeholder { color: var(--text-muted); }
    .agent-input-row {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 6px;
    }
    .agent-export-btn,
    .agent-export-select {
        height: 28px;
        border-radius: 6px;
        border: 1px solid var(--border);
        background: var(--bg-hover);
        color: var(--text-main);
        font-size: 11px;
        font-weight: 600;
    }
    .agent-export-btn {
        padding: 0 10px;
        cursor: pointer;
        transition: background .1s, opacity .15s, border-color .15s;
    }
    .agent-export-btn:hover { background: rgba(88,166,255,.14); border-color: rgba(88,166,255,.35); }
    .agent-export-select {
        padding: 0 8px;
        min-width: 68px;
        cursor: pointer;
    }
    .agent-export-btn:disabled,
    .agent-export-select:disabled {
        opacity: .45;
        cursor: default;
    }
    .agent-send-btn {
        background: var(--accent);
        color: #000;
        border: none;
        border-radius: 6px;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: background .1s, opacity .15s;
    }
    .agent-send-btn:hover { background: #79c0ff; }
    .agent-send-btn:disabled { opacity: .35; cursor: default; background: var(--accent); }
    .agent-export-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(88,166,255,.12);
        border: 1px solid rgba(88,166,255,.3);
        border-radius: 20px;
        padding: 4px 10px;
        font-size: 11px;
        color: var(--accent);
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        transition: background .15s;
    }
    .agent-export-chip:hover { background: rgba(88,166,255,.22); }

    /* Toggle button in top bar */
    .btn-agent-toggle {
        background: var(--bg-hover);
        border: 1px solid var(--border);
        color: var(--text-muted);
        border-radius: 4px;
        padding: 4px 10px;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 5px;
        transition: all .15s;
    }
    .btn-agent-toggle:hover { color: var(--text-main); border-color: var(--text-muted); }
    .btn-agent-toggle.active { background: rgba(88,166,255,.15); color: var(--accent); border-color: var(--accent); }

    /* ── Version track rows ──────────────────────────────────────── */
    .versions-divider {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 10px;
        background: var(--bg-panel);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--text-muted);
    }

    .version-track-row { border-bottom: 1px solid var(--border); position: relative; }
    .version-track-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        margin-left: 8px;
    }
    .version-track-tag {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        border-radius: 999px;
        padding: 2px 6px;
        border: 1px solid rgba(88,166,255,.25);
        color: rgba(88,166,255,.9);
        background: rgba(88,166,255,.08);
    }
    @media (max-width: 1200px) {
        .tool-strip-params { gap: 6px; }
        .tool-strip-field input { width: 52px; }
        .automix-grid { grid-template-columns: 1fr; }
        .automix-card-main { grid-row: auto; }
        .automix-footer {
            flex-direction: column;
            align-items: stretch;
        }
        .automix-actions {
            justify-content: stretch;
        }
        .automix-actions .btn {
            flex: 1;
        }
    }

    /* Collapsed / hidden state — thin strip, auto-muted */
    .version-track-row.hidden .track-wave { height: 0 !important; min-height: 0 !important; overflow: hidden; }
    .version-track-row.hidden .version-waveform { display: none; }

    /* Keep version track controls visible regardless of horizontal scroll */
    .version-track-row .track-header { position: sticky; left: 0; z-index: 2; }

    /* Version mixer row */
    .version-mixer-row {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 4px 8px;
        border-bottom: 1px solid var(--border);
        transition: opacity .2s, background .2s;
    }
    .version-mixer-row.hidden { opacity: 0.3; background: rgba(248,81,73,.06); }
    .mixer-row.hidden { opacity: 0.3; background: rgba(248,81,73,.06); }
    .version-mixer-name {
        font-size: 9px;
        font-weight: 600;
        color: var(--green);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 108px;
    }
    .version-actions { display: flex; gap: 3px; }
    .btn-version {
        background: var(--bg-hover);
        border: 1px solid var(--border);
        color: var(--text-muted);
        border-radius: 3px;
        padding: 2px 5px;
        font-size: 9px;
        font-weight: 700;
        cursor: pointer;
        transition: all .12s;
    }
    .btn-version:hover { color: var(--text-main); border-color: var(--text-muted); }
    .btn-version.approve { color: var(--green); border-color: rgba(63,185,80,.4); }
    .btn-version.approve:hover { background: rgba(63,185,80,.15); }
    .btn-version.reject { color: var(--err); border-color: rgba(248,81,73,.4); }
    .btn-version.reject:hover { background: rgba(248,81,73,.15); }
    .btn-version.approved { background: rgba(63,185,80,.2); color: var(--green); border-color: var(--green); cursor: default; }
    .btn-icon { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 4px; border-radius: 3px; font-size: 13px; line-height: 1; transition: color .12s, background .12s; display: flex; align-items: center; justify-content: center; }
    .btn-icon:hover { background: var(--bg-hover); }
    .btn-icon.hide-btn:hover { color: var(--warn); background: rgba(210,153,34,.12); }
    .btn-icon.hide-btn.active { color: var(--warn); }

    /* ── Version Accept / Decline buttons ─────────────────────────── */
    .btn-va {
        border-radius: 3px;
        padding: 2px 6px;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        transition: all .12s;
        line-height: 1;
        border: 1px solid;
    }
    .va-accept {
        background: rgba(63,185,80,.12);
        border-color: rgba(63,185,80,.4);
        color: var(--green);
    }
    .va-accept:hover { background: rgba(63,185,80,.28); }
    .va-accept.accepted { background: var(--green); color: #000; border-color: var(--green); cursor: default; }
    .va-decline {
        background: rgba(248,81,73,.08);
        border-color: rgba(248,81,73,.35);
        color: var(--err);
    }
    .va-decline:hover { background: rgba(248,81,73,.2); }
    .va-decline.confirming {
        background: rgba(248,81,73,.28);
        border-color: var(--err);
        box-shadow: 0 0 6px rgba(248,81,73,.35);
        animation: pulse 0.8s infinite;
    }

    .version-waveform { background: #040608; min-height: 80px; }
    .version-track-row.hidden .track-header { border-left-color: rgba(63,185,80,.3); opacity: .5; }
    .version-waveform.small { min-height: 80px; }


    /* ── Envelope overlay ────────────────────────────────────────────── */
    .envelope-row {
        position: relative;
        background: rgba(88,166,255,0.03);
        border-bottom: 1px solid rgba(88,166,255,0.12);
    }
    /* Unity-gain reference line (0 dB / 1.0×) sits at 50% of the waveform height */
    .env-unity-line {
        position: absolute;
        left: 0; right: 0;
        top: 50%;
        height: 0;
        border-top: 1px solid rgba(255,255,255,0.18);
        pointer-events: none;
        z-index: 3;
    }
    .env-unity-label {
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 8px;
        font-weight: 700;
        color: rgba(255,255,255,0.5);
        letter-spacing: .04em;
        line-height: 1;
        background: rgba(13,17,23,0.8);
        padding: 1px 3px;
        border-radius: 2px;
        pointer-events: none;
        z-index: 4;
        user-select: none;
    }
    .envelope-hint {
        position: absolute;
        top: 4px;
        right: 10px;
        font-size: 9px;
        font-weight: 700;
        color: rgba(88,166,255,0.5);
        text-transform: uppercase;
        letter-spacing: .06em;
        pointer-events: none;
        z-index: 5;
    }

    .region-legend {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        padding: 6px 12px;
        border-bottom: 1px solid rgba(48,54,61,0.9);
        background: rgba(13,17,23,0.92);
    }
    .region-legend-title {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--text-muted);
        margin-right: 2px;
    }
    .region-legend-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 2px 8px;
        border-radius: 999px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        color: var(--text-main);
        font-size: 11px;
        line-height: 1;
        white-space: nowrap;
    }
    .region-legend-swatch {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        display: inline-block;
        flex-shrink: 0;
    }
    .region-legend-count {
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 700;
    }
    .region-hover-tooltip {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        max-width: 320px;
        white-space: pre-line;
        padding: 8px 10px;
        border-radius: 6px;
        background: rgba(13,17,23,0.96);
        border: 1px solid rgba(255,255,255,0.12);
        color: var(--text-main);
        font-size: 11px;
        line-height: 1.45;
        box-shadow: 0 8px 24px rgba(0,0,0,0.35);
        pointer-events: none;
        opacity: 0;
        transform: translateY(4px);
        transition: opacity .08s ease, transform .08s ease;
    }
    .region-hover-tooltip.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Region resize handle highlight */
    [part="region-handle-left"],
    [part="region-handle-right"] {
        opacity: 0.7;
        transition: opacity .15s;
    }
    [part="region-handle-left"]:hover,
    [part="region-handle-right"]:hover {
        opacity: 1;
    }

    /* ── Proposal diff overlay ───────────────────────────────────────── */
    #proposal-panel {
        display: none;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        background: rgba(210,153,34,0.08);
        border-bottom: 1px solid rgba(210,153,34,0.3);
        font-size: 11px;
        flex-wrap: wrap;
        flex-shrink: 0;
    }
    #proposal-panel.active { display: flex; }
    .proposal-label {
        font-weight: 700;
        color: var(--warn);
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .proposal-stats { color: var(--text-muted); font-size: 10px; }
    .prop-panel-btn {
        cursor: pointer;
        border: 1px solid;
        border-radius: 4px;
        padding: 2px 9px;
        font-size: 10px;
        font-weight: 700;
        background: transparent;
        white-space: nowrap;
    }
    .prop-panel-btn.accept-all  { color: var(--green);  border-color: rgba(63,185,80,.4); }
    .prop-panel-btn.accept-all:hover  { background: rgba(63,185,80,.15); }
    .prop-panel-btn.decline-all { color: var(--err);    border-color: rgba(248,81,73,.4); }
    .prop-panel-btn.decline-all:hover { background: rgba(248,81,73,.1); }
    .prop-panel-btn.apply-btn   { color: #fff; border-color: var(--accent); background: var(--accent); }
    .prop-panel-btn.apply-btn:hover   { opacity: .85; }
    .prop-panel-btn.dismiss-btn { color: var(--text-muted); border-color: var(--border); }
    .prop-panel-btn.dismiss-btn:hover { background: rgba(255,255,255,.05); }
    /* Preview A/B toggle */
    .prop-preview-btn {
        cursor: pointer;
        border: 1px solid rgba(88,166,255,.4);
        border-radius: 4px;
        padding: 2px 9px;
        font-size: 10px;
        font-weight: 700;
        background: transparent;
        color: rgba(88,166,255,.85);
        white-space: nowrap;
    }
    .prop-preview-btn:hover  { background: rgba(88,166,255,.1); }
    .prop-preview-btn.active { background: rgba(88,166,255,.25); }

    /* Proposal region content inside WaveSurfer region */
    .prop-region-inner {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 1px 5px;
        font-size: 9px;
        line-height: 1.2;
        pointer-events: auto;
        white-space: nowrap;
        overflow: hidden;
        max-width: 100%;
    }
    .prop-region-reason {
        font-weight: 700;
        color: rgba(255,255,255,.9);
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
    }
    .prop-region-gain { color: rgba(255,255,255,.6); flex-shrink: 0; }
    .prop-region-btns { display: flex; gap: 2px; flex-shrink: 0; }
    .prop-r-accept, .prop-r-decline {
        cursor: pointer;
        border: none;
        border-radius: 3px;
        padding: 1px 5px;
        font-size: 10px;
        font-weight: 900;
        line-height: 1;
    }
    .prop-r-accept  { background: rgba(63,185,80,.9);  color: #fff; }
    .prop-r-decline { background: rgba(248,81,73,.75); color: #fff; }
    .prop-r-accept:hover  { background: rgb(63,185,80); }
    .prop-r-decline:hover { background: rgb(248,81,73); }
    /* Region state colors — applied via region.setOptions() */
    /* pending-decrease, pending-increase, accepted, declined handled in JS */