:root {
    --bg: #1b1b22;
    --bg-2: #23232c;
    --bg-3: #2c2c37;
    --panel: #202028;
    --line: #34343f;
    --text: #e7e7ee;
    --text-dim: #9a9aab;
    --accent: #7b3fe4;
    --accent-2: #9a63ff;
    --select: #6a2fc9;
    --orange: #ff8c2b;
    --green: #37c26b;
    --pink: #ff3d8b;
    --danger: #e2445c;
    --ok: #37c26b;
    --vt: #2d6cdf;
    --vt-empty: #3a3050;
    font-size: 14px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

button { font-family: inherit; cursor: pointer; }

/* ---------- Login ---------- */
.login-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(1200px 600px at 50% -10%, #2a2340, var(--bg));
}
.login-card {
    width: 340px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px 26px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.login-card h1 { margin: 0 0 4px; font-size: 1.5rem; }
.login-sub { margin: 0 0 18px; color: var(--text-dim); }
.login-card label { display: block; margin-bottom: 12px; font-size: .82rem; color: var(--text-dim); }
.login-card input {
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-size: .95rem;
}
.login-card .login-remember {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px; cursor: pointer; user-select: none;
}
.login-card .login-remember input {
    width: auto; margin: 0; cursor: pointer;
}
.login-card .login-remember span { font-size: .82rem; color: var(--text-dim); }
.login-card button {
    width: 100%;
    margin-top: 8px;
    padding: 11px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 600;
}
.login-card button:hover { background: var(--accent-2); }
.login-error {
    background: rgba(226,68,92,.15);
    border: 1px solid var(--danger);
    color: #ffb3bf;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: .85rem;
}

/* ---------- App layout ---------- */
body.app { display: flex; flex-direction: column; overflow: hidden; }

.topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 14px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
    /* Wrap instead of overflowing on narrow / split-screen widths. An overflowing
       top bar used to force document-level horizontal scroll, pushing the log panel
       (and its top-right Voicetrack chip) and the right-hand controls off-screen. */
    flex-wrap: wrap;
    row-gap: 6px;
}
/* Belt-and-suspenders: never let the page scroll sideways. */
html { overflow-x: hidden; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand-mark {
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 1px;
    font-size: .8rem;
}
.brand-title { font-weight: 600; }

.hour-nav { display: flex; align-items: center; gap: 6px; margin-left: 10px; }
.hour-nav input[type=date],
.hour-nav select {
    background: var(--bg-3);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 6px 8px;
    font-size: .85rem;
}
.icon-btn, .ghost-btn {
    background: var(--bg-3);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 6px 10px;
    font-size: .85rem;
}
.icon-btn:hover, .ghost-btn:hover { background: var(--line); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.hour-title { color: var(--text-dim); font-size: .85rem; }
.user-chip {
    background: var(--bg-3);
    border: 1px solid var(--line);
    padding: 5px 10px;
    border-radius: 20px;
    font-size: .8rem;
}
.logout-form { margin: 0; }

.workspace { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
/* Attribute-based hide must win over the display:flex on these views. */
.workspace[hidden], .hour-nav[hidden], .overview[hidden] { display: none; }

/* Show-prep view: only the hour log, no segue editor / carts. */
.workspace.prep-mode .editor-panel,
.workspace.prep-mode .panel-splitter { display: none; }
/* !important beats the inline flex the panel splitter pins on the log panel, so it
   fills the whole workspace instead of leaving the old editor area blank. */
.workspace.prep-mode .log-panel { flex: 1 1 auto !important; }

.view-mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
}
.view-mode-label { font-weight: 600; color: var(--text); }
.view-mode select {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 3px 6px;
    font: inherit;
    cursor: pointer;
}
.view-mode select:hover { border-color: var(--accent-2); }

/* ---------- Landing / hour overview ---------- */
.overview {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 22px 40px;
}
.overview-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.overview-titles { min-width: min(100%, 280px); flex: 1 1 280px; }
.overview-title { margin: 0; font-size: 1.15rem; font-weight: 700; }
.overview-sub {
    margin: 6px 0 0;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--text-dim);
    max-width: 52rem;
}
.overview-daynav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.overview-daynav input[type=date] {
    background: var(--bg-3); color: var(--text); border: 1px solid var(--line);
    border-radius: 7px; padding: 6px 8px; font-size: .85rem;
}
.overview-legend { display: flex; gap: 8px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.overview-body { display: flex; flex-direction: column; gap: 22px; }
.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.ov-day { display: flex; flex-direction: column; gap: 10px; }
.ov-day-title {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .01em;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}
.ov-day.is-today .ov-day-title { color: var(--accent-2, #6ea8ff); }
.ov-day.is-past-day { opacity: .72; }
.ov-empty {
    padding: 28px 18px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    color: var(--text-dim);
    background: var(--bg-2);
    text-align: center;
    font-size: .92rem;
}
.overview.is-scoped .overview-grid {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.ov-card {
    text-align: left;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 14px 16px;
    min-height: 92px;
    cursor: pointer;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .12s, background .12s, transform .06s;
}
.ov-card:hover { border-color: var(--accent-2); background: var(--bg-3); }
.ov-card:active { transform: translateY(1px); }
.ov-card.loading { opacity: .55; }
.ov-card.is-past { opacity: .55; }
.ov-card.no-vt { opacity: .8; }
.ov-card.has-todo { border-color: var(--orange); }
.ov-card.is-current { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.ov-hour { font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ov-status { display: flex; flex-wrap: wrap; gap: 6px; }
.ov-onair {
    font-size: .6rem; font-weight: 700; letter-spacing: .04em;
    background: var(--green); color: #05210f; padding: 2px 6px; border-radius: 5px;
}
.ov-badge {
    font-size: .68rem; font-weight: 600; padding: 3px 8px; border-radius: 999px;
    border: 1px solid transparent; white-space: nowrap;
}
.ov-badge.todo { background: rgba(255, 140, 43, .16); color: var(--orange); border-color: rgba(255, 140, 43, .5); }
.ov-badge.done { background: rgba(55, 194, 107, .16); color: var(--green); border-color: rgba(55, 194, 107, .5); }
.ov-badge.none { background: var(--bg-3); color: var(--text-dim); border-color: var(--line); }

/* ---------- Log panel ---------- */
.log-panel {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}
/* Draggable divider between the log and the editor. */
.panel-splitter {
    flex: 0 0 7px;
    background: var(--accent);
    cursor: row-resize;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.panel-splitter:hover { background: var(--accent-2); }
.panel-splitter-grip {
    width: 44px; height: 3px; border-radius: 2px;
    background: rgba(255, 255, 255, .55);
}
body.resizing-panels { cursor: row-resize; user-select: none; }

/* Dedicated toolbar row above the log — not overlaid on the table. */
.log-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
}
.log-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.vt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--vt);
    color: #fff;
    border-radius: 8px;
    padding: 6px 11px;
    font-weight: 600;
    font-size: .8rem;
    cursor: grab;
    user-select: none;
    opacity: .92;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    transition: opacity .12s ease;
}
.vt-chip:hover { opacity: 1; }
.vt-chip:active { cursor: grabbing; }
.vt-chip[hidden] { display: none; }
#libToggleBtn.active { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
#fileImportBtn.active { background: var(--orange); border-color: var(--orange); color: #1a0f00; }

/* Table area (+ optional library drawer anchored to it). */
.log-main {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Guided file-import placement banner — in flow, pushes the table down. */
.file-place-banner {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 140, 43, .45);
    background: linear-gradient(180deg, rgba(255, 140, 43, .18), rgba(255, 140, 43, .08));
}
.file-place-banner[hidden] { display: none; }
.file-place-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.file-place-copy strong { font-size: .9rem; color: var(--text); }
.file-place-copy span { font-size: .78rem; color: var(--text-dim); line-height: 1.35; }
body.file-placing .log-row { opacity: .72; }
body.file-placing .log-row:hover { opacity: 1; }
body.file-placing .log-insert-slot { opacity: 1; }
.log-insert-slot td {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.log-insert-slot .log-insert-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    margin: 2px 0;
    border: 1.5px dashed rgba(255, 140, 43, .55);
    border-radius: 8px;
    background: rgba(255, 140, 43, .08);
    color: var(--orange);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s, transform .06s;
}
.log-insert-slot .log-insert-btn:hover,
.log-insert-slot .log-insert-btn:focus-visible {
    background: rgba(255, 140, 43, .22);
    border-color: var(--orange);
    color: #fff;
    outline: none;
}
.log-insert-slot .log-insert-btn:active { transform: translateY(1px); }
.log-insert-slot .log-insert-btn .ins-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--orange);
    color: #1a0f00;
    font-size: .95rem;
    line-height: 1;
}

/* Library drawer: over the table area only, not the toolbar. */
.lib-panel {
    position: absolute;
    top: 8px;
    right: 10px;
    bottom: 10px;
    z-index: 20;
    width: 340px;
    max-height: none;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
    overflow: hidden;
}
.lib-panel[hidden] { display: none; }
.lib-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-bottom: 1px solid var(--line);
}
.lib-panel-title { font-weight: 600; font-size: .85rem; }
.lib-panel-controls { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.lib-panel-controls select, .lib-panel-controls input {
    width: 100%; background: var(--bg-3); color: var(--text);
    border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font-size: .82rem;
}
.lib-search-row { display: flex; gap: 6px; }
.lib-search-row input { flex: 1 1 auto; }
.lib-search-row .ghost-btn { flex: 0 0 auto; }
.lib-panel-hint { padding: 0 10px 8px; font-size: .68rem; color: var(--text-dim); }
.lib-results { overflow-y: auto; padding: 4px; flex: 1 1 auto; }
.lib-empty { padding: 10px; font-size: .78rem; color: var(--text-dim); }
.lib-result {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 6px; cursor: grab; font-size: .8rem;
}
.lib-result:hover { background: rgba(255, 255, 255, .06); }
.lib-result:active { cursor: grabbing; }
.lib-result .lib-dur {
    flex: 0 0 auto; min-width: 36px; font-variant-numeric: tabular-nums;
    color: var(--text-dim); font-size: .72rem;
}
.lib-result .lib-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Inline "pending upload" rows shown while local files are uploaded/inserted. */
.log-row.log-pending td { padding: 8px 10px; }
.log-row.log-pending .lp-spin { display: inline-block; animation: vt-spin 1s linear infinite; margin-right: 8px; color: var(--accent-2); }
.log-row.log-pending .lp-name { font-weight: 500; margin-right: 8px; }
.log-row.log-pending .lp-status { color: var(--text-dim); font-size: .76rem; margin-right: 10px; }
.log-row.log-pending .lp-bar {
    display: inline-block; width: 120px; height: 4px; border-radius: 3px;
    background: rgba(255, 255, 255, .12); vertical-align: middle; overflow: hidden;
}
.log-row.log-pending .lp-bar i { display: block; height: 100%; width: 0; background: var(--accent-2); transition: width .2s ease; }
.log-row.log-pending.is-error .lp-status { color: var(--danger); }
.log-row.log-pending.is-error .lp-spin { animation: none; color: var(--danger); }
@keyframes vt-spin { to { transform: rotate(360deg); } }

/* Hour timing (total content vs 01:00:00) in the topbar. */
.hour-timing {
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg-2);
    color: var(--text-dim);
    white-space: nowrap;
}
.hour-timing.over { color: #ffb057; border-color: rgba(232,138,30,.55); background: rgba(232,138,30,.12); }
.hour-timing.ok { color: #63d693; border-color: rgba(55,194,107,.5); background: rgba(55,194,107,.12); }

.log-table-wrap { overflow: auto; flex: 1 1 auto; }
.log-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .84rem; }
.log-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-3);
    text-align: left;
    padding: 8px 12px;
    color: var(--text-dim);
    font-weight: 600;
    border-bottom: 1px solid var(--line);
    z-index: 2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.log-table thead th .col-label { pointer-events: none; }
.log-table td {
    padding: 7px 12px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Drag handle on the right edge of each header (same idea as playit/). */
.log-table thead th .col-resizer {
    position: absolute;
    top: 0;
    right: -3px;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    z-index: 3;
}
.log-table thead th .col-resizer::after {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 3px;
    width: 1px;
    background: var(--line);
    opacity: .7;
}
.log-table thead th:hover .col-resizer::after,
.log-table thead th.col-resizing .col-resizer::after {
    width: 2px;
    background: var(--accent, #7b3fe4);
    opacity: 1;
}
body.col-resizing-active { cursor: col-resize; user-select: none; }
body.col-resizing-active .log-table thead th { cursor: col-resize; }
/* Hour divider row shown when several hours are stacked in the log. */
.log-table tr.hour-divider td {
    padding: 6px 12px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, var(--bg-2)), var(--bg-2));
    border-top: 2px solid var(--accent);
    border-bottom: 1px solid var(--line);
}
.hour-divider .hd-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hour-divider .hd-title { color: var(--text); font-weight: 700; font-size: .82rem; letter-spacing: .02em; }
.hour-divider .hd-timing {
    font-size: .74rem; font-variant-numeric: tabular-nums;
    padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-dim);
}
.hour-divider .hd-timing.over { color: #ffb057; border-color: rgba(232,138,30,.55); background: rgba(232,138,30,.12); }
.hour-divider .hd-timing.ok { color: #63d693; border-color: rgba(55,194,107,.5); background: rgba(55,194,107,.12); }
.log-table-wrap.loading-more { cursor: progress; }
.col-time { width: 92px; }
.col-segue { width: 30px; text-align: center; padding-left: 0; padding-right: 0; }
.col-intro, .col-dur { width: 68px; color: var(--text-dim); }
.col-actions { width: 96px; text-align: right; white-space: nowrap; }

/* Segue indicator icons (auto-segue vs stop) */
.seg-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: 2px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 0;
}
.seg-ic:disabled { opacity: .45; cursor: progress; }
.seg-ic svg { width: 15px; height: 15px; display: block; }
.seg-go { color: var(--green); }
.seg-go:hover:not(:disabled) { background: rgba(55, 194, 107, .16); }
.seg-stop { color: var(--red, #e2445c); }
.seg-stop:hover:not(:disabled) { background: rgba(226, 68, 92, .12); }
.log-row.selected .seg-go { color: #9af0bd; }
.log-row.selected .seg-stop { color: #ff9db0; }

.log-row { cursor: pointer; }
.log-row:hover { background: rgba(255,255,255,.03); }
.log-row.selected { background: var(--select) !important; color: #fff; }
.log-row.selected .col-intro, .log-row.selected .col-dur { color: #e5d9ff; }
.log-row.is-current { background: rgba(55,194,107,.10); }
.log-row.is-current td:first-child { box-shadow: inset 3px 0 0 var(--green) !important; }

/* On-air progress — the whole row fills as a progress bar (set inline in JS),
   with the elapsed / remaining times shown here. */
.np-progress {
    display: flex; gap: 10px; margin-top: 3px;
    font-size: .72rem; color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.np-remaining { color: var(--green); font-weight: 600; }
.np-progress.np-ending .np-remaining { color: var(--orange); }
/* The current row's fill is applied via inline gradient; keep the left bar. */
.log-row.is-current td { background: transparent; }
.log-row.type-track td:first-child { box-shadow: inset 3px 0 0 #4a4a58; }
.log-row.type-voiceTrack td:first-child { box-shadow: inset 3px 0 0 var(--vt); }
.log-row.vt-empty { background: rgba(45,108,223,.10); }
.log-row.vt-filled { background: rgba(55,194,107,.10); }
.log-row.is-past { opacity: .55; }
/* .pipl preview rows: ads that PlayIt will merge into an empty break at airtime. */
.log-row.pipl-preview { background: rgba(47,109,237,.16); cursor: default; }
.log-row.pipl-preview.pipl-intro { background: rgba(111,66,193,.16); }
.log-row.pipl-preview td:first-child { box-shadow: inset 3px 0 0 var(--accent-2, #2f6ded); }
.log-row.pipl-preview:hover { background: rgba(47,109,237,.22); }
.log-row .title-main { font-weight: 600; }
/* Type icons before the title (mirrors playit/ playout-icon-badge). */
.playout-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    vertical-align: middle;
    color: var(--text-dim, #8a93a3);
}
.playout-icon-badge .fa {
    font-size: 14px;
    line-height: 1;
}
.log-row.selected .playout-icon-badge { color: rgba(255, 255, 255, 0.85); }
.log-row.vt-empty .playout-icon-badge,
.log-row.vt-filled .playout-icon-badge { color: var(--vt, #7b3fe4); }
.log-row.pipl-preview .playout-icon-badge { color: var(--accent-2, #2f6ded); }
.log-row .badge {
    display: inline-block;
    font-size: .68rem;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}
.badge.vt { background: var(--vt); color: #fff; }
.badge.empty { background: var(--vt-empty); color: #c9b8ff; }
.badge.rec { background: var(--green); color: #06210f; }

.row-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: .75rem;
    margin-left: 4px;
}
.row-btn:hover { background: var(--line); }
.row-btn.danger:hover { background: var(--danger); border-color: var(--danger); }
/* Compact icon-only variant used for the voice-track row actions so they fit on one line. */
.row-btn.icon-btn {
    padding: 0;
    width: 24px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}
.row-btn.icon-btn svg { width: 13px; height: 13px; display: block; }
.row-btn.js-record { color: #ff5257; }
.row-btn.js-record:hover { border-color: #ff5257; }

/* ---- PlayIt colors + item flag states ---- */
.log-row .title-main { color: var(--text); }
.log-row.selected .title-main { color: #fff !important; }
.log-row.is-soft-deleted { opacity: .5; }
.log-row.is-soft-deleted .title-main { text-decoration: line-through; }
/* Overtime / will-skip: struck through + muted amber, like the web controller. */
.log-row.will-skip td { color: #c79a4f; text-decoration: line-through; text-decoration-thickness: 2px; }
.log-row.will-skip .title-main { color: #c79a4f; }
.log-row.is-invalid { outline: 1px dashed rgba(224,79,79,.65); outline-offset: -1px; }
.log-row.is-invalid .title-main { color: var(--danger); }
.badge.ignored { background: #6b7280; color: #fff; }
.badge.invalid { background: var(--danger); color: #fff; }
.badge.lock { background: transparent; padding: 0 2px; }
.onair {
    display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .04em;
    background: var(--green); color: #06210f; padding: 1px 5px; border-radius: 8px; margin-right: 6px;
    vertical-align: middle;
}
.type-pill {
    display: inline-block; font-size: .68rem; padding: 1px 8px; border-radius: 10px;
    color: var(--pi); border: 1px solid var(--pi); background: transparent; white-space: nowrap;
}

/* ---- Ignore toggle ---- */
.col-skip { width: 60px; text-align: center; }
.skip-toggle { display: inline-flex; cursor: pointer; }
.skip-toggle input { cursor: pointer; }

/* ---- Extra column widths ---- */
.col-year, .col-genre { width: 70px; color: var(--text-dim); }
.col-type { width: 96px; }
.col-group, .col-tags { color: var(--text-dim); }
.col-artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

/* ---- Column reorder / chooser ---- */
.log-table thead th { cursor: grab; user-select: none; }
.log-table thead th.col-dragging { opacity: .5; }
.log-table thead th.col-drop { box-shadow: inset 3px 0 0 var(--orange); }
th.is-col-hidden, td.is-col-hidden { display: none; }
.col-menu {
    position: fixed; z-index: 60; min-width: 180px;
    background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 12px; box-shadow: 0 12px 40px rgba(0,0,0,.5);
    display: flex; flex-direction: column; gap: 6px;
}
.col-menu strong { font-size: .78rem; color: var(--text-dim); margin-bottom: 2px; }
.col-menu-item { display: flex; align-items: center; gap: 8px; font-size: .82rem; cursor: pointer; }
.col-menu-item input { cursor: pointer; }
#logColsBtn { margin-left: auto; }
/* ---- Segue-style / generic right-click menu ---- */
.ctx-menu {
    position: fixed; z-index: 80; min-width: 190px;
    background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
    padding: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.55);
    display: flex; flex-direction: column; gap: 1px;
}
.ctx-header {
    font-size: .72rem; color: var(--text-dim); padding: 4px 8px 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.ctx-item {
    font-size: .84rem; padding: 6px 10px; border-radius: 6px; cursor: pointer;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ctx-item:hover { background: var(--line); }
.ctx-item.active { color: var(--orange); font-weight: 600; }

/* ---- Record / Segue mode switch ---- */
/* ---- Editor mode toggle (Segue <-> Record) ---- */
.mode-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; color: var(--text-dim); border: 1px solid var(--line);
    border-radius: 999px; padding: 3px 11px; font-size: .76rem; font-weight: 600;
    cursor: pointer; white-space: nowrap; line-height: 1.4;
    transition: background .12s, border-color .12s, color .12s;
}
.mode-toggle:hover { border-color: var(--accent-2); color: var(--text); }
/* Record mode: a soft tint + outline, not a big filled red button (so it's never
   mistaken for the actual Record button on the right). */
.mode-toggle.is-record {
    background: rgba(226, 68, 92, .14); border-color: var(--danger); color: #ff9aa7;
}
/* Drop indicator between rows */
.drop-line { height: 0; }
.drop-line.active td {
    box-shadow: inset 0 3px 0 var(--orange);
}
.log-body-dragover { outline: 2px dashed var(--orange); outline-offset: -2px; }

/* ---------- Segue editor ---------- */
.editor-panel {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg);
}
.editor-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
}
.editor-title { font-weight: 600; }
.editor-airtime {
    font-size: .78rem; color: var(--text-dim); white-space: nowrap;
    background: var(--bg-3); border: 1px solid var(--line);
    border-radius: 999px; padding: 3px 9px; font-variant-numeric: tabular-nums;
}
.editor-actions { margin-left: auto; display: flex; gap: 8px; }
.primary-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 7px 12px;
    font-weight: 600;
    font-size: .84rem;
}
.primary-btn:hover:not(:disabled) { background: var(--accent-2); }
.primary-btn:disabled, .ghost-btn:disabled { opacity: .4; cursor: not-allowed; }

/* The bottom minimap is our horizontal navigator (it drives scrollLeft programmatically), so
   suppress the native horizontal scrollbar that otherwise doubles up when zoomed in. Keep the
   vertical scrollbar for tight lane stacks. */
.segue-editor { flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; position: relative; }
.segue-minimap { flex: 0 0 auto; position: relative; height: 46px; background: var(--bg-2); border-top: 1px solid var(--line); padding: 5px 8px; box-sizing: border-box; cursor: pointer; }
.minimap-canvas { position: absolute; top: 5px; left: 8px; right: 8px; height: 36px; width: calc(100% - 16px); display: block; background: #1b1b1f; border-radius: 3px; }
.minimap-viewport { position: absolute; top: 5px; height: 36px; background: rgba(124, 92, 255, .20); border: 1px solid var(--accent); border-radius: 3px; pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
/* Grip bars on each end of the viewport box, showing it can be resized to zoom. */
.minimap-viewport::before, .minimap-viewport::after { content: ""; position: absolute; top: 50%; width: 3px; height: 16px; margin-top: -8px; background: var(--accent); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.minimap-viewport::before { left: -2px; }
.minimap-viewport::after { right: -2px; }
.zoom-controls { display: flex; align-items: center; gap: 4px; }
.zoom-controls .icon-btn { padding: 5px 9px; }
.editor-actions { align-items: center; gap: 6px; }
.editor-actions .icon-btn { padding: 6px 9px; line-height: 1; min-width: 34px; text-align: center; }
.editor-actions-sep { width: 1px; align-self: stretch; margin: 3px 2px; background: var(--line); }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.primary-btn.compact { padding: 6px 12px; }
.segue-transport {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 8px 12px; background: var(--bg-2); border-top: 1px solid var(--line);
}
.segue-transport .icon-btn { min-width: 42px; padding: 8px 12px; font-size: 1rem; line-height: 1; text-align: center; }
.icon-btn.trans-save.dirty { color: var(--orange); border-color: var(--orange); }
.icon-btn.record-ctrl { color: #ff9aa7; }
.icon-btn.record-ctrl.rec-idle { color: #ff3b3b; font-size: 1.2rem; line-height: 1; }
.icon-btn.record-ctrl:hover:not(:disabled) { background: rgba(226, 68, 92, .18); }
.icon-btn.record-ctrl.recording { background: #b3283c; color: #fff; animation: pulse 1.3s infinite; }
#seguePlayBtn.playing, #transPlayBtn.playing { color: var(--orange); }
.segue-transport .nav-target {
    background: var(--bg-3);
    border: 1px solid var(--line);
    color: var(--text-dim);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    cursor: pointer;
    min-width: 46px;
    line-height: 1;
}
.segue-transport .nav-target:hover { border-color: var(--accent); color: var(--text); }
.segue-transport .nav-target.all { color: var(--accent); border-color: var(--accent); background: rgba(90,130,255,.12); }
.segue-empty { padding: 40px; text-align: center; color: var(--text-dim); }
.segue-lanes { position: relative; padding: 14px 0; }

.lane {
    position: relative;
    height: 112px;
    margin: 0 0 6px;
}
.lane-inner {
    position: absolute;
    top: 8px;
    height: 96px;
    background: #f4f4f4;
    border: 1px solid #000;
    border-radius: 2px;
    overflow: hidden;
}
/* A yet-to-be-created voice track previewed in record mode. */
.lane-virtual .lane-inner {
    background: repeating-linear-gradient(45deg, #ececf2, #ececf2 8px, #e2e2ee 8px, #e2e2ee 16px);
    border: 1px dashed var(--vt, #2d6cdf);
}
.lane-virtual .lane-label { background: var(--vt, #2d6cdf); }
.lane-label {
    position: absolute;
    top: 0;
    left: 0;
    background: #3a3a44;
    color: #fff;
    font-size: .72rem;
    padding: 2px 8px;
    z-index: 5;
    border-radius: 2px 0 4px 0;
    white-space: nowrap;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Let clicks/drags pass through to the overlay canvas so volume-curve points hidden
       behind the title are still editable. The warning badge re-enables its own hover. */
    pointer-events: none;
    transition: transform .12s ease, box-shadow .12s ease;
}
/* Mirror the cart clips: when the cursor is over the title it lifts up out of the lane so
   it stops covering the waveform / volume-curve points at the top-left. */
.lane.label-lift .lane-label {
    transform: translateY(calc(-100% - 3px));
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
    z-index: 8;
}
.lane-warn {
    margin-left: 6px;
    color: var(--orange, #ff8c2b);
    cursor: help;
    pointer-events: auto;
}
.lane canvas.wave { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lane canvas.overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 4; cursor: default; }

.time-ruler {
    position: relative;
    height: 22px;
    margin: 0 0 4px;
    border-bottom: 1px solid var(--line);
    color: var(--text-dim);
    font-size: .68rem;
}
.time-ruler .tick { position: absolute; top: 0; border-left: 1px solid var(--line); padding-left: 3px; height: 100%; }

.playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: #ffd23f;
    box-shadow: 0 0 4px rgba(255, 210, 63, .8);
    z-index: 10;
    pointer-events: none;
}

/* ---------- Recorder modal ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.modal {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    width: 420px;
    max-width: 92vw;
    box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font-weight: 600;
}
.modal-head .icon-btn { border: none; background: transparent; font-size: 1.2rem; }
.modal-body { padding: 16px; }
.rec-viz {
    width: 100%;
    height: 72px;
    background: #12121a;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.rec-row { display: flex; align-items: center; gap: 14px; margin: 12px 0; flex-wrap: wrap; }
.rec-timer { font-size: 1.6rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.opt { font-size: .8rem; color: var(--text-dim); display: inline-flex; align-items: center; gap: 5px; }
.record-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 9px;
    background: var(--danger);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
}
.record-btn.recording { background: #b3283c; animation: pulse 1.3s infinite; }
@keyframes pulse { 50% { opacity: .7; } }
.primary-btn.recording { background: #b3283c; animation: pulse 1.3s infinite; }
.rec-opts { display: inline-flex; align-items: center; gap: 10px; margin-right: 4px; }
.rec-opts .opt { white-space: nowrap; }
#recPlayback { width: 100%; margin-top: 12px; }
.rec-actions { display: flex; gap: 8px; margin-top: 12px; }
.rec-actions button { flex: 1; }
.rec-status { margin-top: 10px; font-size: .82rem; color: var(--text-dim); min-height: 18px; }
.rec-status.err { color: #ffb3bf; }
.rec-status.ok { color: var(--ok); }

/* ---------- Settings modal ---------- */
.modal.settings { width: 460px; }
.settings-section { margin-bottom: 18px; }
.settings-section:last-of-type { margin-bottom: 8px; }
.settings-section h4 {
    margin: 0 0 8px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-dim);
    border-bottom: 1px solid var(--line);
    padding-bottom: 5px;
}
.set-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: .88rem;
}
.set-row > span:first-child { flex: 1; }
.set-row.range span:first-child { flex: 0 0 auto; }
.set-row.range { justify-content: space-between; }
.set-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.set-row output { font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; color: var(--text-dim); }
.set-row select, .set-row input[type="number"] {
    background: var(--bg-3, #16161d);
    color: var(--text, #f0f0f5);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 5px 8px;
    font: inherit;
}
.set-row input[type="number"] { width: 72px; }
.settings-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.settings-status { font-size: .82rem; color: var(--text-dim); }
.set-note { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-dim); font-size: .68rem; margin-left: 6px; }
.set-row select { flex: 1; min-width: 0; }
.dev-hint { justify-content: space-between; font-size: .8rem; color: var(--text-dim); }
.dev-hint .ghost-btn { flex: 0 0 auto; }

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-3);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 10px 16px;
    border-radius: 8px;
    z-index: 200;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    font-size: .85rem;
}
.toast.err { border-color: var(--danger); color: #ffb3bf; }
.toast.ok { border-color: var(--ok); }

/* ---------- Cart rack ---------- */
.cart-rack {
    flex: 0 0 auto;
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    padding: 6px 10px 8px;
}
.cart-rack-head { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.cart-rack-title { font-size: .8rem; font-weight: 600; }
.cart-rack-hint { font-size: .7rem; color: var(--text-dim); margin-left: auto; }
.cart-pages { display: flex; gap: 4px; align-items: center; }
.cart-page-tab {
    min-width: 22px; height: 20px; padding: 0 6px;
    font-size: .7rem; line-height: 18px; border-radius: 5px;
    border: 1px solid var(--line); background: var(--bg-3); color: var(--text-dim);
    cursor: pointer;
}
.cart-page-tab:hover { color: var(--text); border-color: var(--text-dim); }
.cart-page-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cart-page-tab.has-carts:not(.active) { color: var(--text); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.cart-page-add { font-weight: 700; }
.cart-rack-pads {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
}
.cart-pad {
    position: relative;
    min-height: 56px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--bg-3);
    padding: 5px 7px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1px;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    transition: transform .05s, box-shadow .12s, border-color .12s;
}
.cart-pad.filled:hover {
    overflow: visible;
    z-index: 4;
}
.cart-pad.filled {
    --cc: var(--accent);
    border-color: var(--cc);
    background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 22%, var(--bg-3)), var(--bg-3));
}
.cart-pad.filled::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cc);
}
.cart-pad.empty { border-style: dashed; color: var(--text-dim); align-items: center; justify-content: center; }
.cart-pad:hover { border-color: var(--accent-2); }
.cart-pad:active { transform: translateY(1px); }
.cart-pad.firing { box-shadow: 0 0 0 2px var(--cc), 0 0 14px color-mix(in srgb, var(--cc) 60%, transparent); }
.cart-pad.previewing { box-shadow: 0 0 0 2px var(--accent-2), 0 0 12px color-mix(in srgb, var(--accent-2) 55%, transparent); }
.cart-pad.loading { box-shadow: 0 0 0 2px var(--orange); animation: pulse 1s infinite; cursor: progress; }
.cart-pad.loading .cart-len { color: var(--orange); font-weight: 600; letter-spacing: 1px; }
/* Drag a track from the log onto the rack. */
.log-row.cart-draggable { cursor: grab; }
.cart-rack-pads.cart-drop { outline: 2px dashed var(--accent-2); outline-offset: 2px; border-radius: 8px; }
.cart-pad.cart-drop { border-color: var(--accent-2); box-shadow: 0 0 0 2px var(--accent-2) inset; }
.cart-pad[draggable="true"] { cursor: grab; }
.cart-pad.dragging { opacity: .45; }
.cart-page-tab.drag-target { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.cart-num {
    position: absolute; top: 3px; right: 5px;
    font-size: .62rem; color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.cart-pad.filled .cart-num { color: color-mix(in srgb, var(--cc) 60%, var(--text)); }
.cart-name {
    font-size: .74rem; font-weight: 600; line-height: 1.15;
    max-height: 2.3em; overflow: hidden;
    position: relative; z-index: 2;
    pointer-events: none;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .12s ease;
}
/* Lift the title only when hovering the lower part of the pad (volume/length live at the bottom). */
.cart-pad.filled.label-lift .cart-name {
    position: absolute;
    left: -1px; right: -1px; top: auto;
    bottom: calc(100% - 4px);
    max-height: none;
    padding: 3px 6px;
    background: var(--bg-3);
    border: 1px solid var(--accent-2);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    white-space: normal;
    overflow: visible;
    transform: translateY(-2px);
}
.cart-tag { font-size: .6rem; color: var(--text-dim); letter-spacing: .04em; }
.cart-len {
    position: absolute; bottom: 3px; left: 16px; right: 16px;
    text-align: center;
    font-size: .95rem; font-weight: 800; letter-spacing: .02em;
    color: var(--text); font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.cart-pad.previewing .cart-len { color: #fff; }
.cart-progress {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: rgba(255,255,255,.08);
    opacity: 0; transition: opacity .12s;
    pointer-events: none;
}
.cart-pad.has-progress .cart-progress { opacity: 1; }
.cart-progress > i {
    display: block; height: 100%; width: 0%;
    background: var(--cc, var(--accent));
    box-shadow: 0 0 6px color-mix(in srgb, var(--cc) 70%, transparent);
}
.cart-empty-label { font-size: .72rem; }
.cart-gear {
    position: absolute; bottom: 2px; right: 3px;
    background: transparent; border: 0; color: var(--text-dim); font-size: .78rem; padding: 1px 3px; line-height: 1;
}
.cart-gear:hover { color: #fff; }

/* ---------- Cart lane (in the segue editor) ---------- */
.cart-lane {
    position: relative;
    margin-top: 4px;
    border-top: 1px dashed var(--line);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.cart-lane-head {
    display: flex; align-items: center; gap: 6px;
    height: 20px; padding: 0 6px;
    position: sticky; left: 0;
    width: max-content;
}
.cart-lane-toggle {
    width: 16px; height: 16px; line-height: 14px; text-align: center;
    border: 1px solid var(--line); border-radius: 3px;
    background: var(--bg-3); color: var(--text);
    font-size: .8rem; cursor: pointer; padding: 0;
}
.cart-lane-toggle:hover { background: var(--line); }
.cart-lane-title { font-size: .68rem; color: var(--text-dim); font-weight: 600; }
.cart-lane-body { position: relative; }
.cart-lane.collapsed .cart-lane-body { display: none; }
.cart-lane-mini { position: relative; }
.cart-mini-clip {
    position: absolute; border-radius: 2px;
    pointer-events: none;
    background: color-mix(in srgb, var(--cc, var(--accent)) 65%, #14141a);
}
.cart-mini-clip.bed {
    background: color-mix(in srgb, var(--cc, var(--accent)) 35%, #14141a);
    border: 1px dashed color-mix(in srgb, var(--cc, var(--accent)) 70%, #fff);
}
.cart-clip {
    position: absolute;
    top: 4px;
    border-radius: 4px;
    border: 1px solid var(--cc, var(--accent));
    background: color-mix(in srgb, var(--cc, var(--accent)) 30%, #14141a);
    overflow: hidden;
    cursor: grab;
}
.cart-clip:hover {
    overflow: visible;
    z-index: 5;
}
.cart-clip.bed { border-style: dashed; }
.cart-clip .cart-clip-label {
    position: absolute; top: auto; bottom: 0; left: 0; right: 0;
    font-size: .64rem; color: #fff; padding: 1px 5px; z-index: 3;
    background: color-mix(in srgb, var(--cc, var(--accent)) 55%, transparent);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none;
    transition: bottom .12s ease, box-shadow .12s ease, opacity .12s ease;
}
/* Lift the title only when the cursor is in the lower half — frees the bottom for volume
   editing without covering handles at the top of the clip. */
.cart-clip.label-lift .cart-clip-label {
    bottom: calc(100% + 2px);
    overflow: visible;
    text-overflow: clip;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.cart-clip.cart-editing .cart-clip-label { opacity: 0; }
.cart-clip canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cart-clip canvas.cart-clip-ov { z-index: 2; }

/* ---------- Cart config popover ---------- */
.modal.cart-config { width: 460px; }
.cart-config .set-row input[type="text"] { flex: 1 1 auto; }
.cart-source {
    font-size: .78rem; color: var(--text-dim);
    background: var(--bg-3); border: 1px solid var(--line); border-radius: 6px;
    padding: 6px 8px; margin-bottom: 8px;
}
.cart-src-row { display: flex; gap: 8px; align-items: center; }
.cart-src-row input[type="text"], .cart-src-row select { flex: 1 1 auto; padding: 6px 8px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 6px; color: var(--text); }
.cart-lib-results { max-height: 180px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: 6px; }
.cart-lib-item { padding: 6px 9px; font-size: .8rem; cursor: pointer; border-bottom: 1px solid var(--line); }
.cart-lib-item:last-child { border-bottom: 0; }
.cart-lib-item:hover { background: var(--line); }
.cart-lib-item .lib-dur { color: var(--text-dim); font-size: .72rem; float: right; }
.cart-lib-item.selected { background: var(--select); color: #fff; }
.ghost-btn.danger { color: #ffb3bf; }
.ghost-btn.danger:hover { border-color: var(--danger); }

[hidden] { display: none !important; }