/* MagicTag — StudioTools chrome */

:root,
[data-theme='dark'] {
    color-scheme: dark;
    --color-bg-void: #0a0a0c;
    --color-bg-primary: #0a0a0c;
    --color-bg-secondary: #101014;
    --color-bg-header: #101014;
    --color-bg-elevated: #16161c;
    --color-bg-hover: #1c1c24;
    --color-bg-panel: #121218;
    --color-bg-instrument: #0c0c10;
    --color-overlay: rgba(0, 0, 0, 0.55);
    --color-shadow: rgba(0, 0, 0, 0.45);

    --color-text-primary: #f5f5f7;
    --color-text-secondary: #8a8a96;
    --color-text-tertiary: #5c5c68;
    --color-text-dim: #5c5c68;

    --color-border-primary: #22222a;
    --color-border-secondary: #2e2e38;
    --color-border-hi: #2e2e38;

    --color-accent: #ff9d2f;
    --color-accent-dim: rgba(255, 157, 47, 0.14);
    --color-success: #3dcf7a;
    --color-danger: #e53935;
    --color-info: #00aaff;

    --color-titlebar-from: #1a1a22;
    --color-titlebar-to: #121218;
    --header-h: 48px;
    --toolbar-h: 36px;
    --footer-h: 28px;
    --enrich-w: 380px;
    --font-family: "DM Sans", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --scrollbar-thumb: #2a2a32;
    --scrollbar-thumb-hover: #3a3a44;
    --row-dirty: rgba(255, 157, 47, 0.12);
    --row-selected: rgba(255, 157, 47, 0.18);
}

[data-theme='light'] {
    color-scheme: light;
    --color-bg-void: #cfd5e0;
    --color-bg-primary: #e2e6ef;
    --color-bg-secondary: #d8dde8;
    --color-bg-header: #dce1eb;
    --color-bg-elevated: #ffffff;
    --color-bg-hover: #d0d6e2;
    --color-bg-panel: #f7f8fc;
    --color-bg-instrument: #eef1f7;
    --color-overlay: rgba(20, 24, 32, 0.4);
    --color-shadow: rgba(20, 28, 42, 0.16);

    --color-text-primary: #12141a;
    --color-text-secondary: #3f4656;
    --color-text-tertiary: #5c6474;
    --color-text-dim: #7a8496;

    --color-border-primary: rgba(18, 24, 36, 0.18);
    --color-border-secondary: rgba(18, 24, 36, 0.26);
    --color-border-hi: rgba(18, 24, 36, 0.22);

    --color-accent: #c2410c;
    --color-accent-dim: rgba(194, 65, 12, 0.14);
    --color-success: #047857;
    --color-danger: #dc2626;
    --color-info: #0369a1;

    --color-titlebar-from: #ffffff;
    --color-titlebar-to: #e8ecf4;
    --scrollbar-thumb: #a8b0c0;
    --scrollbar-thumb-hover: #7e8798;
    --row-dirty: rgba(194, 65, 12, 0.1);
    --row-selected: rgba(194, 65, 12, 0.14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 18px;
    line-height: 1;
    user-select: none;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-family);
    background: var(--color-bg-void);
    color: var(--color-text-primary);
    display: grid;
    grid-template-rows: var(--header-h) var(--toolbar-h) minmax(0, 1fr) auto auto var(--footer-h);
    grid-template-areas:
        "header"
        "toolbar"
        "main"
        "logs"
        "player"
        "footer";
    -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-track { background: transparent; }

.app-header {
    grid-area: header;
    background: var(--color-bg-header);
    border-bottom: 1px solid var(--color-border-primary);
    z-index: 20;
}

.header-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--header-h);
    padding: 0 10px;
    background: linear-gradient(180deg, var(--color-titlebar-from) 0%, var(--color-bg-header) 100%);
    min-width: 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-right: 10px;
    border-right: 1px solid var(--color-border-primary);
}

.brand-name {
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.brand-mark { color: var(--color-accent); display: block; }

.header-tagline {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-dim);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    min-width: 0;
}

.header-chrome-spacer { flex: 1; min-width: 8px; }

.header-theme-seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-primary);
    border-radius: 2px;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 2px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}
.icon-btn:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
    border-color: var(--color-border-primary);
}
.icon-btn.is-active,
.theme-mode-btn.is-active {
    color: var(--color-accent);
    background: var(--color-accent-dim);
    border-color: var(--color-accent);
}
.icon-btn:disabled { opacity: 0.35; cursor: default; }

.btn-chip {
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--color-border-hi);
    border-radius: 2px;
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.btn-chip .material-symbols-outlined { font-size: 15px; }
.btn-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-chip:disabled { opacity: 0.4; cursor: default; }
.btn-chip--go {
    background: #00ff41;
    color: #000;
    border-color: #00e03a;
    font-weight: 800;
}
.btn-chip--go:hover { background: #00cc33; color: #000; border-color: #00b82e; }
.btn-chip--go:disabled { background: var(--color-bg-elevated); color: var(--color-text-dim); border-color: var(--color-border-primary); }
.layout-btn.is-active {
    background: var(--color-accent-dim);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.toolbar {
    grid-area: toolbar;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
    min-width: 0;
}

.toolbar-group, .toolbar-layouts {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.toolbar-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-dim);
    margin-right: 4px;
}

.tool-btn {
    height: 26px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 2px;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tool-btn .material-symbols-outlined { font-size: 16px; }
.tool-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.tool-btn:disabled { opacity: 0.35; cursor: default; }
.tool-btn--go {
    background: var(--color-accent);
    color: var(--color-text-on-accent, #111);
    border-color: transparent;
}
.tool-btn--go:hover { filter: brightness(1.08); color: var(--color-text-on-accent, #111); }

.toolbar-search {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 280px;
    max-width: 560px;
    flex: 1;
    height: 26px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--color-text-dim);
}
.crate-filters {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.crate-chip {
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--color-border-primary);
    border-radius: 2px;
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.crate-chip:hover { color: var(--color-text-primary); background: var(--color-bg-hover); }
.crate-chip.is-active {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}
.toolbar-search-field {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 140px;
    height: 26px;
    padding: 0 8px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-primary);
    border-radius: 2px;
}
.toolbar-search-field .material-symbols-outlined { font-size: 16px; }
.toolbar-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    font-size: 12px;
    outline: none;
}

.workspace {
    grid-area: main;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    background: var(--color-bg-void);
}
.workspace.has-enrich {
    grid-template-columns: minmax(0, 1fr) var(--enrich-w);
}
.workspace.has-djlab {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
}
.workspace.has-enrich.has-djlab {
    grid-template-columns: minmax(0, 1fr) var(--enrich-w);
}
.workspace.is-empty {
    grid-template-columns: 1fr;
}
.workspace.is-empty .file-pane,
.workspace.is-empty .enrich-pane {
    display: none !important;
}
.workspace:not(.is-empty) .drop-hero {
    display: none !important;
}

.drop-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 32px;
    border: 1px dashed var(--color-border-secondary);
    margin: 16px;
    background: var(--color-bg-panel);
    min-height: 0;
}
.drop-hero.is-over { border-color: var(--color-accent); background: var(--color-accent-dim); }
.drop-icon { font-size: 56px; color: var(--color-accent); }
.drop-hero h1 { font-size: 22px; font-weight: 800; letter-spacing: 0.02em; }
.drop-hero p { max-width: 560px; color: var(--color-text-secondary); font-size: 13px; }
.drop-hint { font-size: 11px !important; color: var(--color-text-dim) !important; }
.drop-actions { display: flex; gap: 8px; margin-top: 8px; }

.file-pane {
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-panel);
}
.track-list {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    overflow: auto;
}
.lib-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border-primary);
    background: var(--color-bg-secondary);
    font-size: 12px;
    color: var(--color-text-secondary);
}
.lib-banner[hidden] { display: none !important; }

.next-strip {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 8px 10px;
    border-top: 1px solid var(--color-border-primary);
    background: var(--color-bg-secondary);
    min-height: 52px;
}
.next-strip-head {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-dim);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.next-strip-list {
    display: flex;
    gap: 8px;
    min-width: 0;
    flex: 1;
    overflow-x: auto;
}
.next-card {
    flex: 1 1 160px;
    min-width: 140px;
    max-width: 280px;
    padding: 6px 8px;
    border: 1px solid var(--color-border-primary);
    border-radius: 2px;
    background: var(--color-bg-panel);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}
.next-card-main {
    flex: 1;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    padding: 0;
}
.next-card:hover { background: var(--color-bg-hover); }
.next-card-add {
    align-self: flex-start;
    border: 1px solid var(--color-border-primary);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 10px;
    padding: 1px 6px;
    cursor: pointer;
    border-radius: 2px;
}
.next-card-add:hover { background: var(--color-bg-panel); }
.next-card em {
    display: block;
    font-style: normal;
    font-size: 10px;
    color: var(--color-text-dim);
    margin-bottom: 2px;
}
    display: block;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.next-card span {
    display: block;
    font-size: 11px;
    color: var(--color-text-dim);
    margin-top: 2px;
}
.next-keys {
    display: block;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.04em;
    margin-top: 4px;
    opacity: 0.7;
}
.set-dock {
    flex: 0 0 200px;
    max-width: 240px;
    border-left: 1px solid var(--color-border-primary);
    padding-left: 10px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.set-dock-head {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.set-dock-head .btn-chip {
    font-size: 10px;
    padding: 1px 6px;
    text-transform: none;
    letter-spacing: 0;
}
.set-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 11px;
    overflow: auto;
    max-height: 72px;
}
.set-item {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.set-item-pick {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    padding: 1px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.set-item-pick:hover { color: var(--color-accent, #c8ff3e); }
.set-item-rm {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--color-text-dim);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}
.set-meta-over { color: #e8a23a; }
.track-row.is-offline { opacity: 0.55; }

.track-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.track-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-bg-secondary);
}
.track-table th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-dim);
    padding: 8px 8px;
    border-bottom: 1px solid var(--color-border-primary);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.track-table th.col-check, .track-table th.col-art { cursor: default; }
.track-table td {
    padding: 2px 6px;
    border-bottom: 1px solid var(--color-border-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.track-table td.col-tag { min-width: 88px; max-width: 200px; user-select: none; }
.track-table td.col-title,
.track-table td.col-artist,
.track-table td.col-album,
.track-table td.col-albumartist,
.track-table td.col-comment,
.track-table td.col-filename { min-width: 140px; max-width: 240px; }
.track-table td.col-year,
.track-table td.col-track,
.track-table td.col-trackTotal,
.track-table td.col-disc,
.track-table td.col-bpm,
.track-table td.col-camelot,
.track-table td.col-cueIn,
.track-table td.col-cueOut { min-width: 52px; max-width: 72px; }
.cell-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 22px;
    line-height: 22px;
    pointer-events: none;
}
.col-tag.is-editing .cell-text { display: none; }
.col-tag.is-changed {
    white-space: normal;
    vertical-align: top;
    background: var(--color-accent-dim);
}
.col-tag.is-changed .cell-text {
    min-height: 16px;
    line-height: 16px;
    font-weight: 600;
}
.cell-was {
    display: block;
    font-size: 10px;
    line-height: 13px;
    color: var(--color-text-dim);
    text-decoration: line-through;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    max-width: 100%;
}
.cell-input {
    width: 100%;
    min-width: 3.5ch;
    height: 22px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-radius: 2px;
    background: var(--color-bg-elevated);
    color: inherit;
    font: inherit;
    outline: none;
    box-shadow: inset 0 0 0 1px var(--color-accent);
}
.cell-input[type="number"] { -moz-appearance: textfield; }
.cell-input[type="number"]::-webkit-outer-spin-button,
.cell-input[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; }
.meter-cell .cell-input { width: 4.2ch; flex: 0 0 auto; }
.track-table tbody tr.track-row { cursor: pointer; }
.track-table tbody tr.track-row:hover { background: var(--color-bg-hover); }
.track-table tbody tr.is-selected { background: var(--row-selected); }
.track-table tbody tr.is-dirty td:first-child { box-shadow: inset 3px 0 0 var(--color-accent); }
.track-table tbody tr.track-row.is-busy td { border-bottom-color: transparent; }
.track-job[hidden] { display: none !important; }
.track-job td {
    padding: 0 8px 5px;
    border-bottom: 1px solid var(--color-border-primary);
    background: var(--color-bg-panel);
    cursor: default;
}
.track-job-bar {
    height: 3px;
    border-radius: 1px;
    background: var(--color-border-primary);
    overflow: hidden;
}
.track-job-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--color-info);
}
.track-job-bar[data-state="run"] i {
    width: 34%;
    background: linear-gradient(90deg, var(--color-info), var(--color-accent));
    animation: track-job-slide 1.15s ease-in-out infinite;
}
.track-job-bar[data-state="ok"] i {
    width: 100%;
    background: var(--color-success);
}
.track-job-bar[data-state="fail"] i {
    width: 100%;
    background: var(--color-danger);
}
.track-job-label {
    display: block;
    padding: 3px 0 0;
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--color-text-dim);
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
td.is-fresh {
    animation: cell-fresh 1.15s ease;
}
@keyframes track-job-slide {
    0% { transform: translateX(-130%); }
    100% { transform: translateX(380%); }
}
@keyframes cell-fresh {
    from { background: rgba(255, 157, 47, 0.38); }
    to { background: transparent; }
}
.col-check { width: 32px; }
.col-art {
    width: 36px;
    cursor: pointer;
}
.col-art:not(:has(img)) {
    background:
        linear-gradient(var(--color-border-primary), var(--color-border-primary)) center / 10px 1px no-repeat,
        linear-gradient(var(--color-border-primary), var(--color-border-primary)) center / 1px 10px no-repeat,
        var(--color-bg-instrument);
}
.art-thumb {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 2px;
    background: var(--color-bg-instrument);
    display: block;
}
.col-art.is-art-changed {
    width: 52px;
}
.col-art.is-art-changed {
    display: flex;
    align-items: center;
    gap: 3px;
}
.art-thumb-was {
    width: 16px;
    height: 16px;
    opacity: 0.55;
    outline: 1px dashed var(--color-text-dim);
    outline-offset: -1px;
}
.fmt-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-info);
}
.cell-muted { color: var(--color-text-dim); }

.enrich-pane, .djlab-pane {
    background: var(--color-bg-panel);
    border-left: 1px solid var(--color-border-primary);
    min-height: 0;
    min-width: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.djlab-pane {
    padding: 0;
}
.djlab-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--color-border-primary);
}
.djlab-head h2 { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.djlab-head p { font-size: 11px; color: var(--color-text-dim); margin-top: 2px; }
.djlab-head-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.djlab-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border-primary);
}
.djlab-tab.is-active {
    background: var(--color-accent-dim);
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.djlab-body {
    flex: 1;
    min-height: 0;
    padding: 10px;
    overflow: auto;
}
.djlab-canvas {
    width: 100%;
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg-instrument);
    border-radius: 2px;
}
.djlab-hint {
    font-size: 11px;
    color: var(--color-text-dim);
    margin-top: 8px;
}
.djlab-graph { width: 100%; min-height: 240px; background: var(--color-bg-instrument); border: 1px solid var(--color-border-primary); }
.chapter-list { display: grid; gap: 8px; }
.chapter-card {
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg-elevated);
    border-radius: 2px;
    padding: 8px 10px;
}
.chapter-card header { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; margin-bottom: 6px; }
.chapter-card ol { margin-left: 18px; font-size: 11px; color: var(--color-text-secondary); }
.chapter-card em { color: var(--color-accent); font-style: normal; }
.match-list { display: grid; gap: 6px; }
.match-row {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 4px 8px;
    padding: 6px 8px;
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg-elevated);
    font-size: 11px;
}
.match-row em { grid-column: 2; color: var(--color-text-dim); font-style: normal; }
.match-score { font-family: var(--font-mono); font-weight: 700; color: var(--color-accent); }
.djlab-sort-bar, .djlab-control { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; font-size: 11px; }
.sort-preview { margin-left: 18px; font-size: 11px; color: var(--color-text-secondary); }
.sort-preview li { margin: 4px 0; }

.field {
    display: grid;
    gap: 3px;
}
.field label, .modal-card label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-dim);
}
.field input, .field textarea, .modal-card input, .modal-card select {
    width: 100%;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--color-border-primary);
    border-radius: 2px;
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    font: inherit;
    font-size: 12px;
    outline: none;
}
.field textarea { height: 64px; padding: 6px 8px; resize: vertical; }
.field input:focus, .field textarea:focus, .modal-card input:focus, .modal-card select:focus {
    border-color: var(--color-accent);
}
.meter-bar {
    height: 4px;
    background: var(--color-bg-instrument);
    border-radius: 2px;
    overflow: hidden;
}
.meter-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--color-info), var(--color-accent));
    width: 0;
}
.meter-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
}
.meter-cell i {
    display: block;
    height: 100%;
    background: var(--color-accent);
    width: 0;
}
.meter-mini {
    display: inline-block;
    width: 36px;
    height: 4px;
    background: var(--color-bg-instrument);
    border-radius: 2px;
    overflow: hidden;
    vertical-align: middle;
}
.genre-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
    max-height: 340px;
    overflow: auto;
}
.genre-opt {
    text-align: left;
    padding: 8px 10px;
    border: 1px solid var(--color-border-primary);
    border-radius: 2px;
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}
.genre-opt:hover { border-color: var(--color-accent); color: var(--color-accent); }
.genre-opt strong { display: block; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 2px; }
.modal-card-wide { width: min(720px, 100%); }

.enrich-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 12px 8px;
    border-bottom: 1px solid var(--color-border-primary);
}
.enrich-head h2 { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.enrich-head p { font-size: 11px; color: var(--color-text-dim); margin-top: 2px; }
.enrich-query {
    display: flex;
    gap: 6px;
    padding: 10px 12px 6px;
}
.enrich-query input {
    flex: 1;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--color-border-primary);
    border-radius: 2px;
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    font: inherit;
    font-size: 12px;
}
.enrich-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 4px 12px 10px;
    font-size: 11px;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-primary);
}
.enrich-sources label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.enrich-results { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.enrich-empty, .enrich-status { font-size: 12px; color: var(--color-text-dim); padding: 16px 8px; text-align: center; }

.match-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 8px;
    padding: 8px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-primary);
    border-radius: 2px;
    cursor: pointer;
}
.match-card:hover, .match-card.is-picked { border-color: var(--color-accent); }
.match-card img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    background: var(--color-bg-instrument);
    border-radius: 2px;
}
.match-card img.is-empty { opacity: 0.4; }
.match-body { min-width: 0; }
.match-title { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-sub { font-size: 11px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-meta { font-size: 10px; color: var(--color-text-dim); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.source-pill {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--color-accent);
}
.match-actions { grid-column: 1 / -1; display: flex; gap: 6px; }
.match-actions .btn-chip { height: 22px; font-size: 9px; }

.player-dock {
    grid-area: player;
    display: grid;
    gap: 8px;
    padding: 8px 12px 10px;
    background: var(--color-bg-header);
    border-top: 1px solid var(--color-border-primary);
    min-height: 0;
    max-height: min(280px, 34vh);
    overflow: hidden;
}
.player-main {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}
.player-meta {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.player-meta strong,
.player-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.player-meta strong { font-size: 12px; }
.player-meta span { font-size: 11px; color: var(--color-text-dim); }
.player-time {
    display: inline-flex;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-dim);
}
.player-timeline {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 56px;
}
.player-timeline > * {
    grid-area: 1 / 1;
}
.player-waveform {
    display: block;
    width: 100%;
    height: 52px;
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg-instrument);
    cursor: pointer;
}
.player-timeline input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.player-markers {
    position: absolute;
    inset: 1px;
    pointer-events: none;
    overflow: visible;
}
.player-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    background: none;
}
.player-marker::after {
    content: attr(data-label);
    position: absolute;
    top: -14px;
    left: 4px;
    font-size: 9px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-dim);
    white-space: nowrap;
}
.player-cues {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 48px;
    overflow: auto;
}
.cue-pill {
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--color-border-primary);
    border-radius: 999px;
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.cue-pill:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.cue-pill span {
    color: var(--color-text-dim);
    margin-left: 6px;
    font-family: var(--font-mono);
}

.log-dock {
    grid-area: logs;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-primary);
    max-height: min(160px, 22vh);
    min-height: 72px;
    overflow: hidden;
}
.log-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.log-head strong {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.log-progress {
    display: grid;
    gap: 6px;
}
.log-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-text-dim);
}
.log-progress-bar {
    height: 8px;
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg-instrument);
    overflow: hidden;
}
.log-progress-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--color-info), var(--color-accent));
}
.log-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: grid;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
}
.log-line {
    padding: 4px 6px;
    border-left: 2px solid var(--color-border-secondary);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}
.log-line--success { border-left-color: var(--color-success); }
.log-line--warning { border-left-color: var(--color-accent); }
.log-line--error { border-left-color: var(--color-danger); }
.log-line--info { border-left-color: var(--color-info); }

.app-footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    font-size: 11px;
    color: var(--color-text-dim);
    background: var(--color-bg-header);
    border-top: 1px solid var(--color-border-primary);
    font-family: var(--font-mono);
}
.app-footer span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.modal {
    grid-area: 1 / 1;
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 20px;
}
.modal[hidden] { display: none !important; }
.modal-card {
    width: min(520px, 100%);
    background: var(--color-bg-panel);
    border: 1px solid var(--color-border-primary);
    border-radius: 2px;
    padding: 18px;
    display: grid;
    gap: 10px;
    box-shadow: 0 16px 40px var(--color-shadow);
}
.modal-card h3 { font-size: 14px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.modal-card p, .modal-help { font-size: 12px; color: var(--color-text-secondary); }
.modal-card code {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-accent);
}
.modal-preview {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-secondary);
    max-height: 140px;
    overflow: auto;
    background: var(--color-bg-instrument);
    padding: 8px;
    border: 1px solid var(--color-border-primary);
}
.check-row {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--color-text-primary) !important;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

.toast-container {
    grid-area: 1 / 1;
    position: fixed;
    right: 16px;
    bottom: 44px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 80;
}
.toast {
    min-width: 240px;
    max-width: 360px;
    padding: 10px 12px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-primary);
    border-left: 3px solid var(--color-info);
    font-size: 12px;
    box-shadow: 0 8px 24px var(--color-shadow);
}
.toast.success { border-left-color: var(--color-success); }
.toast.error { border-left-color: var(--color-danger); }
.toast.warning { border-left-color: var(--color-accent); }

@media (max-width: 860px) {
    .workspace:not(.is-empty),
    .workspace.has-enrich:not(.is-empty) {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(200px, 1fr);
    }
    .workspace.has-enrich:not(.is-empty) {
        grid-template-rows: minmax(160px, 1fr) minmax(240px, 38vh);
    }
    .enrich-pane { border-left: 0; border-top: 1px solid var(--color-border-primary); }
    .header-tagline { display: none; }
    .player-main { grid-template-columns: 32px minmax(0, 1fr); }
    .player-time { grid-column: 1 / -1; }
}