@import '_content/MelodyBridge.UI.Components/MelodyBridge.UI.Components.bundle.scp.css';

/* _content/MelodyBridge.Server/Components/Layout/DownloadActivityChip.razor.rz.scp.css */
/* Sidebar download chip: one glance at live runs from any page. */
.download-chip[b-wcxzi32m1m] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .75rem;
    padding: .55rem .65rem .65rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--text);
    text-decoration: none;
}

.download-chip:hover[b-wcxzi32m1m] { border-color: var(--accent); }

.download-chip-icon[b-wcxzi32m1m] {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--surface);
    color: var(--accent-text);
}

.download-chip-copy[b-wcxzi32m1m] { display: grid; gap: .05rem; min-width: 0; }
.download-chip-copy strong[b-wcxzi32m1m] { font-size: .8rem; line-height: 1.25; }
.download-chip-copy small[b-wcxzi32m1m] {
    color: var(--muted);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
}

.download-chip-track[b-wcxzi32m1m] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--surface-3);
}

.download-chip-track > span[b-wcxzi32m1m] {
    display: block;
    height: 100%;
    background: var(--accent-strong);
    transition: width .3s ease;
}

@media (max-width: 1100px) {
    .download-chip[b-wcxzi32m1m] {
        order: 4;
        flex: 1 1 100%;
        margin-top: .35rem;
    }
}
/* _content/MelodyBridge.Server/Components/Layout/MainLayout.razor.rz.scp.css */
/* Layout styling is centralized in wwwroot/app.css for consistent theming.
   Scoped here only: sidebar footer extras and the active nav indicator. */

/* Version badge next to the theme toggle in the sidebar footer. */
.version-badge[b-tjfnyziatv] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--muted-2);
    font-family: var(--font-mono);
}

/* Active nav link: 2px accent bar on the left edge, on top of the
   background tint app.css already applies. */
[b-tjfnyziatv] .app-nav .nav-link.active {
    box-shadow: inset 2px 0 0 var(--accent);
}
/* _content/MelodyBridge.Server/Components/Layout/NavMenu.razor.rz.scp.css */
/* Navigation styling is centralized in wwwroot/app.css for consistent
   theming (app.css sizes the old <span> glyphs; the Icon svg needs its
   own column rule here). */

/* Icon column inside each nav link, mirroring app.css .nav-link span. */
[b-ygm5c7xjub] .nav-icon {
    width: 20px;
    height: 16px;
    display: inline-grid;
    place-items: center;
    vertical-align: -3px;
    margin-right: .3rem;
    color: var(--muted-2);
}

.app-nav .nav-link.active .nav-icon[b-ygm5c7xjub] {
    color: var(--accent-strong);
}

.nav-mode-section[b-ygm5c7xjub] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 0 .75rem;
    padding: .2rem .25rem .65rem;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.nav-mode-section:hover[b-ygm5c7xjub] { color: var(--text); }
.nav-mode-section:hover .nav-mode-title[b-ygm5c7xjub] { color: var(--accent-text); }
.nav-mode-copy[b-ygm5c7xjub] { display: grid; gap: .1rem; min-width: 0; }
.nav-mode-title[b-ygm5c7xjub] { color: var(--text); font-size: .82rem; font-weight: 600; }
.nav-mode-copy small[b-ygm5c7xjub] { color: var(--muted-2); font-size: .68rem; line-height: 1.3; }
.nav-mode-switch[b-ygm5c7xjub] {
    width: 36px;
    height: 20px;
    flex: 0 0 auto;
    padding: 2px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-2);
    pointer-events: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.nav-mode-section[aria-checked="true"] .nav-mode-switch[b-ygm5c7xjub] {
    border-color: var(--accent);
    background: var(--accent);
}
.nav-mode-slider[b-ygm5c7xjub] {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform .15s ease, background-color .15s ease;
}
.nav-mode-section[aria-checked="true"] .nav-mode-slider[b-ygm5c7xjub] {
    transform: translateX(16px);
    background: var(--bg);
}
/* _content/MelodyBridge.Server/Components/Pages/Advanced.razor.rz.scp.css */
/* Advanced page scoped styles: cards size to their content instead of
   stretching to the tallest peer (which left large voids). */

.advanced-layout[b-uyweywi7wn] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr);
    gap: 1rem;
    align-items: start;
}
.advanced-side[b-uyweywi7wn] {
    display: grid;
    gap: 1rem;
    align-content: start;
}
#downloads[b-uyweywi7wn] { scroll-margin-top: 5rem; }
@media (max-width: 1020px) {
    .advanced-layout[b-uyweywi7wn] { grid-template-columns: 1fr; }
    .advanced-maintenance[b-uyweywi7wn] { grid-column: auto; }
}

/* The title row carries the Save button and the unsaved-changes pill:
   sticky, so the save action is never a scroll trip away. */
.page-title[b-uyweywi7wn] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg);
    padding-block: .75rem .5rem;
    margin-bottom: .5rem;
}
@media (max-width: 720px) {
    .page-title[b-uyweywi7wn] { position: static; padding-block: 0; margin-bottom: 1rem; }
}

/* Maintenance gets the full width: three independent jobs on top, then a
   preview that reads as a result, not as another paragraph. */
.advanced-maintenance[b-uyweywi7wn] {
    grid-column: 1 / -1;
    scroll-margin-top: 5rem;
}
.maintenance-grid[b-uyweywi7wn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: .9rem;
}
.maintenance-action[b-uyweywi7wn] {
    display: grid;
    align-content: start;
    gap: .45rem;
    padding: .9rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
}
.maintenance-action strong[b-uyweywi7wn] { font-size: .95rem; }
.maintenance-action p[b-uyweywi7wn] {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.5;
}
.maintenance-action button[b-uyweywi7wn] { justify-self: start; margin-top: .2rem; }
.maintenance-pattern[b-uyweywi7wn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
}
.maintenance-pattern a[b-uyweywi7wn] { color: var(--accent-strong); font-weight: 600; }
.duplicate-list[b-uyweywi7wn] {
    display: grid;
    gap: .55rem;
    max-height: 22rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}
.duplicate-list li[b-uyweywi7wn] {
    display: grid;
    gap: .2rem;
    padding: .55rem .65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    font-size: .82rem;
}
.duplicate-path[b-uyweywi7wn] {
    color: var(--muted);
    overflow-wrap: anywhere;
}
.duplicate-path code[b-uyweywi7wn] {
    color: var(--text);
    font-size: .76rem;
}
.duplicate-path.warn[b-uyweywi7wn] { color: var(--warning); }

.rename-preview[b-uyweywi7wn] {
    display: grid;
    gap: .9rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.rename-preview-head[b-uyweywi7wn] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
}
.rename-preview-head h3[b-uyweywi7wn] { margin: .1rem 0 .25rem; font-size: 1rem; }
.rename-pattern[b-uyweywi7wn] { margin: 0; color: var(--muted); font-size: .82rem; }
.rename-counts[b-uyweywi7wn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .55rem;
    margin: 0;
}
.rename-counts > div[b-uyweywi7wn] {
    display: grid;
    gap: .1rem;
    padding: .6rem .7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}
.rename-counts > div.primary[b-uyweywi7wn] { border-color: var(--accent-strong); background: var(--accent-soft); }
.rename-counts dt[b-uyweywi7wn] {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.3;
}
.rename-counts dd[b-uyweywi7wn] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.rename-counts > div.warn dd[b-uyweywi7wn] { color: var(--warning); }
.rename-counts > div.muted dd[b-uyweywi7wn] { color: var(--muted); }
.rename-note[b-uyweywi7wn] {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.55;
}
.rename-note a[b-uyweywi7wn] { color: var(--accent-strong); font-weight: 600; }

@media (max-width: 1020px) {
    .maintenance-grid[b-uyweywi7wn] { grid-template-columns: 1fr; }
}
/* _content/MelodyBridge.Server/Components/Pages/Attention.razor.rz.scp.css */
/* Needs attention: a health queue grouped by what the user has to do. */

.attention-summary[b-7htwz636qg] {
    display: flex;
    align-items: stretch;
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow-x: auto;
}
.attention-metric[b-7htwz636qg] {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    flex: 1 1 0;
    min-width: 112px;
    padding: .62rem .8rem;
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font: inherit;
    white-space: nowrap;
}
.attention-metric:last-child[b-7htwz636qg] { border-right: 0; }
.attention-metric:hover[b-7htwz636qg] { background: var(--surface-2); }
.attention-metric strong[b-7htwz636qg] {
    font-size: 1.05rem;
    line-height: 1.15;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.attention-metric span[b-7htwz636qg] {
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.3;
}
.attention-metric.bad strong[b-7htwz636qg] { color: var(--danger); }
.attention-metric.warn strong[b-7htwz636qg] { color: var(--warning); }
.attention-metric.active[b-7htwz636qg] {
    background: var(--accent-soft);
    box-shadow: inset 0 2px 0 var(--accent);
}
.attention-metric.active span[b-7htwz636qg] { color: var(--accent-text); }

.attention-result[b-7htwz636qg] {
    display: grid;
    gap: .1rem;
    margin-top: 1rem;
}
.attention-result span[b-7htwz636qg] { font-size: .78rem; color: var(--muted); }

.attention-progress[b-7htwz636qg] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1rem;
    padding: .6rem .75rem;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    border-radius: var(--radius);
    background: var(--surface-2);
}
.attention-progress > div:first-of-type[b-7htwz636qg] { display: grid; gap: .05rem; }
.attention-progress strong[b-7htwz636qg] { font-size: .82rem; }
.attention-progress small[b-7htwz636qg] { color: var(--muted); font-size: .72rem; }
.attention-progress .progress-track[b-7htwz636qg] { flex: 1 1 140px; min-width: 90px; }
.attention-progress .progress-track > span[b-7htwz636qg] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent-strong);
    transition: width .3s ease;
}

.attention-bulk[b-7htwz636qg] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: .55rem .65rem;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius: var(--radius);
    background: var(--accent-soft);
}
.attention-bulk strong[b-7htwz636qg] { font-size: .82rem; margin-right: .25rem; }

.attention-group.highlight[b-7htwz636qg] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.attention-group[b-7htwz636qg] {
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}
.attention-group-head[b-7htwz636qg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem .9rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.attention-group-title[b-7htwz636qg] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    min-width: 0;
}
.attention-group-icon[b-7htwz636qg] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
}
.attention-group-icon.bad[b-7htwz636qg] { background: var(--danger-soft); color: var(--danger); }
.attention-group-icon.warn[b-7htwz636qg] { background: var(--warning-soft); color: var(--warning); }
.attention-group-icon.neutral[b-7htwz636qg] { background: var(--surface); color: var(--muted); }
.attention-group-title h2[b-7htwz636qg] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .15rem;
    font-size: .98rem;
}
.attention-group-title p[b-7htwz636qg] {
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.4;
    max-width: 76ch;
}
.group-count[b-7htwz636qg] {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
}
.attention-group-actions[b-7htwz636qg] {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.attention-rows[b-7htwz636qg] { display: grid; }
.attention-row[b-7htwz636qg] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: .6rem;
    align-items: center;
    padding: .6rem .9rem;
    border-top: 1px solid var(--border);
}
.attention-row:first-child[b-7htwz636qg] { border-top: 0; }
.attention-row:hover[b-7htwz636qg] { background: var(--surface-2); }
.attention-row.selected[b-7htwz636qg] { background: var(--accent-soft); }
.attention-row-copy[b-7htwz636qg] { display: grid; gap: .1rem; min-width: 0; }
.attention-row-title[b-7htwz636qg] {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    flex-wrap: wrap;
    min-width: 0;
}
.attention-row-title strong[b-7htwz636qg] { font-size: .84rem; }
.attention-row-title > span[b-7htwz636qg] { color: var(--muted); font-size: .76rem; }
.attention-row-copy small[b-7htwz636qg] {
    color: var(--muted);
    font-size: .75rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.attention-playlist[b-7htwz636qg] {
    color: var(--accent-text);
    font-size: .72rem;
    font-weight: 600;
    text-decoration: none;
}
.attention-playlist:hover[b-7htwz636qg] { text-decoration: underline; }
.attention-playlist-icon[b-7htwz636qg] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--surface-2);
    color: var(--muted);
}
.attention-row-actions[b-7htwz636qg] {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 1100px) {
    .attention-summary[b-7htwz636qg] { display: flex; overflow-x: auto; }
    .attention-metric[b-7htwz636qg] { min-width: 104px; }
}
@media (max-width: 820px) {
    .attention-group-head[b-7htwz636qg] { flex-direction: column; }
    .attention-group-actions[b-7htwz636qg] { width: 100%; }
    .attention-row[b-7htwz636qg] {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }
    .attention-row > .pill[b-7htwz636qg] { grid-column: 2; justify-self: start; }
    .attention-row-actions[b-7htwz636qg] { grid-column: 2; justify-content: flex-start; }
}
@media (max-width: 560px) {
    .attention-summary[b-7htwz636qg] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attention-bulk[b-7htwz636qg] { align-items: stretch; }
    .attention-bulk .btn-modern[b-7htwz636qg] { flex: 1 1 auto; }
}

.attention-more[b-7htwz636qg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 100%;
    padding: .55rem;
    border: 0;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--accent-text);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}
.attention-more:hover[b-7htwz636qg] { background: var(--accent-soft); }

.attention-repair[b-7htwz636qg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: .9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
}

.attention-repair-copy h2[b-7htwz636qg] { margin: .1rem 0 .2rem; font-size: 1.05rem; }
.attention-repair-copy p[b-7htwz636qg] { margin: 0; color: var(--muted); max-width: 70ch; }
.attention-repair-actions[b-7htwz636qg] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
    flex-wrap: wrap;
}
.attention-modes[b-7htwz636qg] {
    display: inline-flex;
    gap: .15rem;
    padding: .15rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
}
.attention-mode[b-7htwz636qg] {
    border: 0;
    border-radius: 999px;
    padding: .32rem .62rem;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
}
.attention-mode:hover[b-7htwz636qg] { color: var(--text); }
.attention-mode.active[b-7htwz636qg] {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 12%, transparent);
}
@media (max-width: 620px) {
    .attention-repair-actions[b-7htwz636qg] { width: 100%; justify-content: flex-start; }
}

/* Simple mode: one calm summary card and one action. */
.attention-simple[b-7htwz636qg] {
    display: grid;
    gap: .85rem;
    max-width: 760px;
    margin-top: 1rem;
    padding: 1.35rem;
}
.attention-simple-head[b-7htwz636qg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.attention-simple-head h2[b-7htwz636qg] { margin: .1rem 0 0; font-size: 1.45rem; }
.attention-simple-number[b-7htwz636qg] {
    color: var(--accent-text);
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.attention-simple > p[b-7htwz636qg] {
    margin: 0;
    color: var(--muted);
    max-width: 64ch;
    line-height: 1.55;
}
.attention-simple-actions[b-7htwz636qg] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .15rem;
}
.attention-simple-fix[b-7htwz636qg] {
    min-height: 44px;
    padding-inline: 1.15rem;
    font-size: .95rem;
}
.attention-simple-note[b-7htwz636qg] {
    padding-top: .75rem;
    border-top: 1px solid var(--border);
    color: var(--muted-2);
    font-size: .78rem;
}
.attention-simple-icon[b-7htwz636qg] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
}
.attention-simple-icon.ok[b-7htwz636qg] {
    background: color-mix(in srgb, var(--success) 16%, transparent);
    color: var(--success);
}
.attention-pick[b-7htwz636qg] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
    padding: .85rem 1rem;
    color: var(--muted);
}
.attention-pick-icon[b-7htwz636qg] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--accent-text);
}
.attention-pick div[b-7htwz636qg] { display: grid; gap: .1rem; }
.attention-pick strong[b-7htwz636qg] { color: var(--text); font-size: .88rem; }
.attention-pick span[b-7htwz636qg] { font-size: .8rem; line-height: 1.4; }
.attention-eta[b-7htwz636qg] { white-space: nowrap; }

@media (max-width: 760px) {
    .attention-summary[b-7htwz636qg] { display: flex; overflow-x: auto; }
    .attention-metric[b-7htwz636qg] { min-width: 104px; }
    .attention-simple[b-7htwz636qg] { padding: 1rem; }
    .attention-simple-head[b-7htwz636qg] { flex-direction: column; gap: .25rem; }
    .attention-simple-number[b-7htwz636qg] { font-size: 2rem; }
    .attention-eta[b-7htwz636qg] { display: none; }
}
/* _content/MelodyBridge.Server/Components/Pages/Downloads.razor.rz.scp.css */
/* Downloads overview: playlist runs as wide cards, then the per-track
   stream. The list is the page's main content, so it stays readable at
   phone width without horizontal scrolling. */
.downloads-empty[b-zsz13erw6q] { text-align: center; }

.downloads-section[b-zsz13erw6q] { margin-top: 1.25rem; }

.downloads-window[b-zsz13erw6q] { font-size: .78rem; }

.downloads-run-list[b-zsz13erw6q] {
    display: grid;
    gap: .8rem;
}

.download-run[b-zsz13erw6q] {
    display: grid;
    gap: .65rem;
}

.download-run-head[b-zsz13erw6q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.download-run-title[b-zsz13erw6q] {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.download-run-title strong[b-zsz13erw6q] {
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.download-run-meta[b-zsz13erw6q] {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .75rem;
    color: var(--muted);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

.download-run-failed[b-zsz13erw6q] { color: var(--danger); }

.download-run-foot[b-zsz13erw6q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.download-run-current[b-zsz13erw6q] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .5rem;
    min-width: 0;
    font-size: .86rem;
}

.download-run-current .eyebrow[b-zsz13erw6q] { margin: 0; }

.download-run-plugin[b-zsz13erw6q] {
    color: var(--muted);
    font-size: .78rem;
}

.downloads-track-list[b-zsz13erw6q] {
    display: grid;
    margin-top: .35rem;
}

.downloads-track[b-zsz13erw6q] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--border);
}

.downloads-track:last-child[b-zsz13erw6q] { border-bottom: none; }

.downloads-track-icon[b-zsz13erw6q] {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--surface-3);
    color: var(--muted);
}

.downloads-track.is-active .downloads-track-icon[b-zsz13erw6q] {
    background: var(--accent-soft);
    color: var(--accent-text);
}

.downloads-track.is-done .downloads-track-icon[b-zsz13erw6q] {
    background: var(--success-soft);
    color: var(--success);
}

.downloads-track.is-failed .downloads-track-icon[b-zsz13erw6q] {
    background: var(--danger-soft);
    color: var(--danger);
}

.downloads-track-main[b-zsz13erw6q] {
    display: grid;
    flex: 1;
    gap: .12rem;
    min-width: 0;
}

.downloads-track-main strong[b-zsz13erw6q] {
    font-size: .92rem;
    overflow-wrap: anywhere;
}

.downloads-track-main small[b-zsz13erw6q] {
    color: var(--muted);
    font-size: .78rem;
}

.downloads-path[b-zsz13erw6q] {
    display: block;
    margin-top: .2rem;
    padding: .25rem .4rem;
    overflow-wrap: anywhere;
    border-radius: 6px;
    background: var(--surface-3);
    color: var(--text);
    font-size: .75rem;
}

.downloads-warning[b-zsz13erw6q] { color: var(--warning) !important; }

.downloads-track > .pill[b-zsz13erw6q] { flex: 0 0 auto; }

@media (max-width: 720px) {
    .download-run-foot[b-zsz13erw6q] { align-items: stretch; flex-direction: column; }
    .download-run-foot .flex-actions[b-zsz13erw6q] { flex-wrap: wrap; }
    .downloads-track[b-zsz13erw6q] { flex-wrap: wrap; }
    .downloads-track-main[b-zsz13erw6q] { flex: 1 1 calc(100% - 42px); }
    .downloads-track > .pill[b-zsz13erw6q] { margin-left: 42px; }
}

/* Two short buttons side by side wrap mid-label on a phone; stack them
   once the available width gets tight. */
@media (max-width: 480px) {
    .downloads-empty[b-zsz13erw6q]  .empty-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .downloads-empty[b-zsz13erw6q]  .empty-actions .btn-modern {
        width: 100%;
        justify-content: center;
    }
}
/* _content/MelodyBridge.Server/Components/Pages/Home.razor.rz.scp.css */
/* Home (dashboard) scoped styles: connection rows and stat cards layout */

.connection-icon[b-xtrcbw8o2h] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.connection-row[b-xtrcbw8o2h] {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
}

.cover-placeholder-icon[b-xtrcbw8o2h] {
    color: var(--muted-2);
}

.workflow-number .workflow-check[b-xtrcbw8o2h] {
    display: block;
}

/* Tablet and below: one column, so the narrow sync-runs and errors cards
   get the full width instead of clipping their tables. */
/* Keep the two dashboard columns on laptop widths: they carry short
   rows, not wide tables. Only tablet and below stack them. */
@media (max-width: 900px) {
    .dashboard-grid[b-xtrcbw8o2h] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Dashboard login health: one short row per affected plugin. */
.login-issue-list[b-xtrcbw8o2h] { display: grid; gap: .4rem; }
.login-issue[b-xtrcbw8o2h] {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .55rem .6rem;
    border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent);
    border-radius: 8px;
    background: var(--danger-soft);
}
.login-issue > .icon[b-xtrcbw8o2h] { flex-shrink: 0; margin-top: .15rem; color: var(--danger); }
.login-issue > div[b-xtrcbw8o2h] { display: grid; gap: .1rem; min-width: 0; }
.login-issue strong[b-xtrcbw8o2h] { font-size: .84rem; }
.login-issue span[b-xtrcbw8o2h] { color: var(--muted); font-size: .78rem; line-height: 1.4; overflow-wrap: anywhere; }
.login-issue .btn-modern[b-xtrcbw8o2h] { flex-shrink: 0; margin-left: auto; }

/* First-run lossless sources: direct links to the three token flows. */
.lossless-setup[b-xtrcbw8o2h] { margin-top: 1rem; }
.lossless-links[b-xtrcbw8o2h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .5rem;
    margin-top: .75rem;
}
.lossless-links a[b-xtrcbw8o2h] {
    display: grid;
    gap: .1rem;
    padding: .6rem .7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
}
.lossless-links a:hover[b-xtrcbw8o2h] { border-color: var(--accent); }
.lossless-links strong[b-xtrcbw8o2h] { font-size: .84rem; }
.lossless-links span[b-xtrcbw8o2h] { color: var(--muted); font-size: .76rem; }
.lossless-guides[b-xtrcbw8o2h] { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .6rem; }
.lossless-guides a[b-xtrcbw8o2h] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    color: var(--accent-text);
    font-size: .76rem;
    font-weight: 600;
    text-decoration: none;
}
.lossless-guides a:hover[b-xtrcbw8o2h] { text-decoration: underline; }

@media (max-width: 640px) {
    .login-issue[b-xtrcbw8o2h] { flex-wrap: wrap; }
    .login-issue .btn-modern[b-xtrcbw8o2h] { width: 100%; margin-left: 0; }
}

/* Resuming setup from an empty dashboard. */
.setup-resume[b-xtrcbw8o2h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.setup-resume h2[b-xtrcbw8o2h] { margin: .1rem 0 .3rem; }
.setup-resume p[b-xtrcbw8o2h] { margin: 0; max-width: 62ch; }

/* Dashboard columns close around their own content instead of stretching
   the shorter card to the height of the longer stack. */
.dashboard-grid[b-xtrcbw8o2h] { align-items: start; }

/* Recent runs read as a feed instead of a four-column table squeezed
   into half the page. The status and time keep their own column. */
.run-feed[b-xtrcbw8o2h] { display: grid; }
.run-row[b-xtrcbw8o2h] {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: start;
    padding: .6rem 0;
    border-top: 1px solid var(--border);
}
.run-row:first-child[b-xtrcbw8o2h] { border-top: 0; padding-top: 0; }
.run-row:last-child[b-xtrcbw8o2h] { padding-bottom: 0; }
.run-dot[b-xtrcbw8o2h] {
    width: 7px;
    height: 7px;
    margin-top: .4rem;
    border-radius: 50%;
    background: var(--muted-2);
}
.run-dot.ok[b-xtrcbw8o2h] { background: var(--success); }
.run-dot.err[b-xtrcbw8o2h] { background: var(--danger); }
.run-copy[b-xtrcbw8o2h] { display: grid; gap: .1rem; min-width: 0; }
.run-copy strong[b-xtrcbw8o2h] { font-size: .9rem; overflow-wrap: anywhere; }
.run-copy small[b-xtrcbw8o2h] { color: var(--muted); font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; }
.run-side[b-xtrcbw8o2h] { display: grid; justify-items: end; gap: .25rem; flex-shrink: 0; }
.run-side small[b-xtrcbw8o2h] { color: var(--muted-2); font-size: .75rem; white-space: nowrap; }

@media (max-width: 720px) {
    .run-row[b-xtrcbw8o2h] { grid-template-columns: 8px minmax(0, 1fr); }
    .run-side[b-xtrcbw8o2h] {
        grid-column: 2;
        justify-items: start;
        grid-auto-flow: column;
        justify-content: start;
        align-items: center;
        gap: .5rem;
        margin-top: .2rem;
    }
}

/* One compact all-clear instead of two empty panels. */
.dashboard-clear[b-xtrcbw8o2h] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem .9rem;
}
.dashboard-clear-icon[b-xtrcbw8o2h] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-text);
}
.dashboard-clear div[b-xtrcbw8o2h] { display: grid; gap: .1rem; min-width: 0; }
.dashboard-clear strong[b-xtrcbw8o2h] { font-size: .9rem; }
.dashboard-clear span[b-xtrcbw8o2h] { color: var(--muted); font-size: .8rem; line-height: 1.4; }

/* Phones: keep the four metrics visible as a 2x2 block instead of four
   full-width cards, and let Refresh and Add share the action row. */
@media (max-width: 720px) {
    .updated-note[b-xtrcbw8o2h] { display: none; }
    .page-title .topbar-actions[b-xtrcbw8o2h] {
        flex-wrap: nowrap;
        align-items: stretch;
    }
    .page-title .topbar-actions > .btn-modern[b-xtrcbw8o2h] { flex: 1 1 0; }
    .dashboard-stats[b-xtrcbw8o2h] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
        margin-top: .75rem;
    }
    .dashboard-stats .stat-card[b-xtrcbw8o2h] { padding: .8rem; }
    .dashboard-stats .stat-card strong[b-xtrcbw8o2h] { font-size: 1.35rem; }
    .dashboard-stats .stat-card small[b-xtrcbw8o2h] { font-size: .72rem; }
    .dashboard-stats .stat-icon[b-xtrcbw8o2h] { width: 32px; height: 32px; margin-bottom: .55rem; }
}

/* ---------------------------------------------------------------- */
/* Dashboard refresh: attention first, then activity and setup.      */
/* ---------------------------------------------------------------- */

.dashboard-actions[b-xtrcbw8o2h] { align-items: center; gap: .5rem; }
.dashboard-live[b-xtrcbw8o2h] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}
.dashboard-live .status-dot[b-xtrcbw8o2h] { width: 7px; height: 7px; }

/* The one band that says what needs a decision. It is intentionally
   louder than the numbers below, but still a compact set of rows. */
.dashboard-attention[b-xtrcbw8o2h] {
    margin-top: 1rem;
    border-color: var(--border);
    background: var(--surface);
}
.dashboard-attention .panel-header[b-xtrcbw8o2h] { margin-bottom: .75rem; }
.dashboard-attention h2[b-xtrcbw8o2h] { font-size: 1.05rem; }
.attention-grid[b-xtrcbw8o2h] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}
.attention-item[b-xtrcbw8o2h] {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    padding: .6rem .7rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
}
.attention-item:hover[b-xtrcbw8o2h] { border-color: var(--border-strong); }
.attention-count[b-xtrcbw8o2h] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .35rem;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.attention-item.danger .attention-count[b-xtrcbw8o2h] { background: var(--danger-soft); color: var(--danger); }
.attention-item.warning .attention-count[b-xtrcbw8o2h] { background: var(--warning-soft); color: var(--warning); }
.attention-item.neutral .attention-count[b-xtrcbw8o2h] { background: var(--surface-2); color: var(--muted); }
.attention-copy[b-xtrcbw8o2h] { display: grid; gap: .1rem; min-width: 0; }
.attention-copy strong[b-xtrcbw8o2h] { font-size: .84rem; line-height: 1.3; }
.attention-copy small[b-xtrcbw8o2h] { color: var(--muted); font-size: .75rem; line-height: 1.35; overflow-wrap: anywhere; }
.attention-arrow[b-xtrcbw8o2h] { flex: 0 0 auto; margin-left: auto; color: var(--muted-2); }

.dashboard-clear-wide[b-xtrcbw8o2h] {
    margin-top: 1rem;
    border: 1px solid color-mix(in srgb, var(--success) 26%, var(--border));
    border-radius: var(--radius);
    background: var(--success-soft);
}
.dashboard-clear-wide .dashboard-clear-icon[b-xtrcbw8o2h] {
    background: var(--success-soft);
    color: var(--success);
}
.dashboard-clear-wide .btn-modern[b-xtrcbw8o2h] { margin-left: auto; flex-shrink: 0; }

.dashboard-grid[b-xtrcbw8o2h] { margin-top: 1rem; }
.dashboard-activity[b-xtrcbw8o2h],
.dashboard-connections[b-xtrcbw8o2h] { min-width: 0; }

/* Live download summary inside the activity card. */
.activity-live[b-xtrcbw8o2h] {
    display: grid;
    gap: .55rem;
    padding: .7rem .75rem;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    border-radius: 10px;
    background: var(--surface-2);
}
.activity-live-head[b-xtrcbw8o2h] {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}
.activity-live-head strong[b-xtrcbw8o2h] { font-size: .88rem; }
.activity-live-head .text-muted[b-xtrcbw8o2h] { font-size: .78rem; }
.activity-live-head .btn-modern[b-xtrcbw8o2h] { margin-left: auto; }
.activity-live .progress-track[b-xtrcbw8o2h] { height: 5px; }
.activity-live .progress-track > span[b-xtrcbw8o2h],
.mini-progress > span[b-xtrcbw8o2h] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent-strong);
    transition: width .35s ease;
}
.active-run-row[b-xtrcbw8o2h] {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
    gap: .5rem;
    align-items: baseline;
    padding-top: .45rem;
    border-top: 1px solid var(--border);
    font-size: .78rem;
}
.active-run-name[b-xtrcbw8o2h] { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.active-run-row small[b-xtrcbw8o2h] { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.active-run-count[b-xtrcbw8o2h] { color: var(--muted-2); font-variant-numeric: tabular-nums; }

.activity-idle[b-xtrcbw8o2h] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .75rem;
    border: 1px dashed var(--border);
    border-radius: 9px;
    color: var(--muted);
    font-size: .8rem;
}
.activity-section-head[b-xtrcbw8o2h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: .95rem 0 .15rem;
}
.activity-section-head .eyebrow[b-xtrcbw8o2h] { margin: 0; }
.text-link[b-xtrcbw8o2h] { color: var(--accent-text); font-size: .76rem; font-weight: 600; text-decoration: none; }
.text-link:hover[b-xtrcbw8o2h] { text-decoration: underline; }
.run-dot.warn[b-xtrcbw8o2h] { background: var(--warning); }
.run-tracks[b-xtrcbw8o2h] { color: var(--muted-2) !important; font-size: .72rem !important; }

/* Connections are grouped by what the user has to configure, not by
   whatever order the probe returned. */
.connection-groups[b-xtrcbw8o2h] { display: grid; gap: .85rem; }
.connection-group[b-xtrcbw8o2h] { display: grid; gap: .35rem; }
.connection-group + .connection-group[b-xtrcbw8o2h] {
    padding-top: .75rem;
    border-top: 1px solid var(--border);
}
.connection-group-label[b-xtrcbw8o2h] {
    color: var(--muted-2);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.connection-empty[b-xtrcbw8o2h] {
    display: block;
    padding: .55rem .6rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.4;
    text-decoration: none;
}
.connection-empty:hover[b-xtrcbw8o2h] { border-color: var(--accent); color: var(--text); }

/* Playlists: three compact cards per row instead of six ragged tiles. */
.dashboard-playlists-section[b-xtrcbw8o2h] { margin-top: 1rem; }
.dashboard-partial[b-xtrcbw8o2h] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    padding: .55rem .65rem;
    border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border));
    border-radius: 8px;
    background: var(--warning-soft);
    color: var(--text);
    font-size: .8rem;
    text-decoration: none;
}
.dashboard-partial .icon[b-xtrcbw8o2h] { flex-shrink: 0; color: var(--warning); }
.dashboard-partial span[b-xtrcbw8o2h] { flex: 1; min-width: 0; }
.dashboard-playlists[b-xtrcbw8o2h] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}
.dashboard-playlist[b-xtrcbw8o2h] {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
    padding: .7rem;
}
.dashboard-playlists .dashboard-cover[b-xtrcbw8o2h] {
    width: 64px;
    height: 64px;
    aspect-ratio: auto;
    border-radius: 8px;
    flex: 0 0 64px;
}
.dashboard-cover .cover-badge[b-xtrcbw8o2h] { font-size: .56rem; padding: .1rem .3rem; right: .2rem; bottom: .2rem; }
.dashboard-playlist-copy[b-xtrcbw8o2h] { display: grid; gap: .15rem; min-width: 0; }
.dashboard-playlist-top[b-xtrcbw8o2h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    min-width: 0;
}
.dashboard-playlist-top .eyebrow[b-xtrcbw8o2h] { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-playlist h3[b-xtrcbw8o2h] {
    margin: 0;
    font-size: .9rem;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.dashboard-playlist h3 a[b-xtrcbw8o2h] { color: var(--text); text-decoration: none; }
.dashboard-playlist h3 a:hover[b-xtrcbw8o2h] { color: var(--accent-strong); text-decoration: underline; }
.dashboard-playlist-copy > small[b-xtrcbw8o2h] { color: var(--muted); font-size: .72rem; }
.mini-progress[b-xtrcbw8o2h] {
    height: 3px;
    margin-top: .2rem;
    border-radius: 99px;
    background: color-mix(in srgb, var(--border) 35%, transparent);
    overflow: hidden;
}
.mini-progress > span[b-xtrcbw8o2h] { background: var(--accent); }

@media (max-width: 1100px) {
    .attention-grid[b-xtrcbw8o2h] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-playlists[b-xtrcbw8o2h] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Four metrics still fit on one row between tablet and desktop; the
       global 2x2 rule would only add height. */
    .dashboard-stats[b-xtrcbw8o2h] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .dashboard-actions[b-xtrcbw8o2h] { flex-wrap: wrap; }
    .dashboard-live[b-xtrcbw8o2h] { order: -1; }
    .attention-grid[b-xtrcbw8o2h] { grid-template-columns: minmax(0, 1fr); }
    .dashboard-clear-wide[b-xtrcbw8o2h] { flex-wrap: wrap; }
    .dashboard-clear-wide .btn-modern[b-xtrcbw8o2h] { margin-left: 0; }
    .dashboard-playlists[b-xtrcbw8o2h] { grid-template-columns: minmax(0, 1fr); }
    .dashboard-stats[b-xtrcbw8o2h] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .active-run-row[b-xtrcbw8o2h] { grid-template-columns: minmax(0, 1fr) auto; }
    .active-run-row small[b-xtrcbw8o2h] { grid-column: 1 / -1; }
    .dashboard-playlist[b-xtrcbw8o2h] { grid-template-columns: 56px minmax(0, 1fr); }
}

/* Details live inside the attention band, not as extra cards. */
.attention-detail[b-xtrcbw8o2h] {
    display: grid;
    gap: .4rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid color-mix(in srgb, var(--danger) 16%, var(--border));
}
.attention-error-list[b-xtrcbw8o2h] { display: grid; gap: .15rem; }
.attention-error[b-xtrcbw8o2h] {
    display: grid;
    grid-template-columns: auto minmax(5rem, auto) minmax(0, 1fr);
    gap: .55rem;
    align-items: baseline;
    padding: .3rem .4rem;
    border-radius: 6px;
    color: var(--text);
    font-size: .76rem;
    text-decoration: none;
}
.attention-error:hover[b-xtrcbw8o2h] { background: var(--surface-2); }
.attention-error-time[b-xtrcbw8o2h] { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.attention-error-area[b-xtrcbw8o2h] { color: var(--muted); font-weight: 600; }
.attention-error-message[b-xtrcbw8o2h] { overflow-wrap: anywhere; }
@media (max-width: 720px) {
    .attention-error[b-xtrcbw8o2h] { grid-template-columns: auto minmax(0, 1fr); }
    .attention-error-area[b-xtrcbw8o2h] { display: none; }
}

/* A compact error strip: three rows, no nested scroller, only when there
   is something in the live log. */
.dashboard-errors[b-xtrcbw8o2h] { margin-top: 1rem; }
.dashboard-errors .panel-header[b-xtrcbw8o2h] { margin-bottom: .35rem; }
.dashboard-errors h2[b-xtrcbw8o2h] { font-size: 1rem; }

.mode-choice[b-xtrcbw8o2h] {
    max-width: 980px;
    display: grid;
    gap: .75rem;
}

.mode-choice h1[b-xtrcbw8o2h] { margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.mode-choice > p[b-xtrcbw8o2h] { margin: 0; max-width: 70ch; color: var(--muted); }
.mode-choice-grid[b-xtrcbw8o2h] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: .35rem;
}
.mode-choice-option[b-xtrcbw8o2h] {
    display: grid;
    gap: .35rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.mode-choice-option:hover[b-xtrcbw8o2h] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.mode-choice-option strong[b-xtrcbw8o2h] { font-size: 1.05rem; }
.mode-choice-option span[b-xtrcbw8o2h] { color: var(--muted); font-size: .86rem; line-height: 1.45; }
.mode-choice-option small[b-xtrcbw8o2h] { color: var(--muted-2); font-size: .72rem; font-weight: 600; }
.mode-choice-icon[b-xtrcbw8o2h] {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-text);
}
@media (max-width: 700px) {
    .mode-choice-grid[b-xtrcbw8o2h] { grid-template-columns: 1fr; }
}
/* _content/MelodyBridge.Server/Components/Pages/Library.razor.rz.scp.css */
/* Library page scoped styles: the scan-location list grid. The
   cards and the identity legend own their styles beside their
   components (LibraryLocationCard, LibraryIdentityPanel). */

.path-list[b-o64sbd83jt] { display: grid; gap: .65rem; }
/* _content/MelodyBridge.Server/Components/Pages/Logs.razor.rz.scp.css */
/* Logs page scoped styles. The toolbar pins under the 64px sticky
   topbar so search and filters stay reachable in a long stream. */
.logs-toolbar[b-g4xhv9zq1s] {
    position: sticky;
    top: 64px;
    z-index: 5;
    background: var(--surface);
    padding: .5rem 0 .75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: .75rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .6rem .75rem;
    align-items: center;
}

/* Search fills the first column, the toggles sit beside it. */
.logs-toolbar .search-input[b-g4xhv9zq1s] { width: 100%; }

.logs-toolbar-toggles[b-g4xhv9zq1s] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .7rem;
    align-items: center;
    justify-content: flex-end;
}

.logs-toolbar .toggle-switch.wide[b-g4xhv9zq1s] { margin-bottom: 0; }

.logs-source-row[b-g4xhv9zq1s] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem .9rem;
}

.log-source-filter[b-g4xhv9zq1s] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
}

.log-source-filter select[b-g4xhv9zq1s] {
    min-width: 150px;
    padding: .35rem .45rem;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: .8rem;
}

.logs-live[b-g4xhv9zq1s] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--muted);
    font-size: .75rem;
}

.logs-live.paused[b-g4xhv9zq1s] { color: var(--warning); }

/* Chip rows span the full width under the search row. */
.logs-toolbar .filter-chips[b-g4xhv9zq1s] { grid-column: 1 / -1; }

/* Pinned entries keep their own card above the stream. */
.pinned-logs[b-g4xhv9zq1s] {
    margin-bottom: .75rem;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius: 10px;
    background: var(--accent-soft);
    overflow: hidden;
}

.pinned-head[b-g4xhv9zq1s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .7rem;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--accent-text);
    font-size: .8rem;
}

.pinned-head strong[b-g4xhv9zq1s] { display: inline-flex; align-items: center; gap: .3rem; }

.pinned-logs .logs-list[b-g4xhv9zq1s] {
    max-height: 16rem;
    border: 0;
    border-radius: 0;
    background: var(--surface);
}

/* Group headers make one track's attempt read as one block. */
.log-group-head[b-g4xhv9zq1s] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .7rem;
    position: sticky;
    top: 0;
    z-index: 1;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font-size: .76rem;
}

.log-group-head:first-child[b-g4xhv9zq1s] { border-top: 0; }
.log-group-head strong[b-g4xhv9zq1s] { color: var(--text); }
.log-group-head span[b-g4xhv9zq1s] { margin-left: auto; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
    .logs-toolbar-toggles[b-g4xhv9zq1s] { justify-content: flex-start; }
    .logs-toolbar[b-g4xhv9zq1s] { grid-template-columns: minmax(0, 1fr); }
    .logs-toolbar-toggles[b-g4xhv9zq1s] { grid-column: 1 / -1; }
    .log-source-filter[b-g4xhv9zq1s] { width: 100%; }
    .log-source-filter select[b-g4xhv9zq1s] { flex: 1; min-width: 0; }
}

/* The count makes the area split visible before a chip is clicked. */
.filter-chip .chip-count[b-g4xhv9zq1s] {
    min-width: 16px;
    padding: 0 .28rem;
    border-radius: 99px;
    background: var(--surface-3);
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 16px;
}

.filter-chip.active .chip-count[b-g4xhv9zq1s] {
    background: color-mix(in srgb, currentColor 14%, transparent);
    color: currentColor;
}

/* Level chips take their severity color when active. */
.filter-chip.chip-level-warn.active[b-g4xhv9zq1s] {
    color: var(--warning);
    border-color: var(--warning);
    background: var(--warning-soft);
}

.filter-chip.chip-level-err.active[b-g4xhv9zq1s] {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--danger-soft);
}

.filter-chip.chip-level-info.active[b-g4xhv9zq1s] {
    color: var(--accent-strong);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.filter-chip.chip-level-debug.active[b-g4xhv9zq1s] {
    color: var(--muted);
    border-color: var(--border-strong);
    background: var(--surface-2);
}

/* Stream legibility: .8rem beats the global .74rem on this page. */
.logs-list[b-g4xhv9zq1s] {
    font-size: .8rem;
    line-height: 1.45;
}

.log-row[b-g4xhv9zq1s] {
    padding: .4rem .8rem;
}

.log-message[b-g4xhv9zq1s] {
    color: var(--text);
}

/* .log-time and .log-category keep the muted color from the global rules. */

/* The filter toolbar is half the screen on a phone; let it scroll away
   with the stream instead of covering every log row. */
@media (max-width: 720px) {
    .logs-toolbar[b-g4xhv9zq1s] { position: static; }
}
/* _content/MelodyBridge.Server/Components/Pages/ManualDownload.razor.rz.scp.css */
/* Manual download: two entry cards side by side, the save options above
   them, and the saved result under the fold. Everything stacks cleanly on
   a tablet and a phone. */
.manual-options[b-ia1rk9z874] { margin-bottom: 1rem; }

.manual-options-grid[b-ia1rk9z874] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.manual-field[b-ia1rk9z874] {
    display: grid;
    gap: .4rem;
    min-width: 0;
}

.manual-field .eyebrow[b-ia1rk9z874] { margin: 0; }
.manual-field small[b-ia1rk9z874] { line-height: 1.45; }

.manual-grid[b-ia1rk9z874] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.manual-form[b-ia1rk9z874] {
    display: grid;
    gap: .6rem;
    margin-top: .75rem;
}

.manual-form .btn-modern[b-ia1rk9z874] { justify-content: center; }

.manual-link-fields[b-ia1rk9z874] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

.manual-hint[b-ia1rk9z874] {
    margin: .65rem 0 0;
    font-size: .85rem;
    line-height: 1.5;
}

.manual-error[b-ia1rk9z874] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    color: var(--danger);
}

.manual-saved[b-ia1rk9z874] { margin-top: 1rem; }

.manual-path[b-ia1rk9z874] {
    margin: .25rem 0 .75rem;
    overflow-wrap: anywhere;
}

.manual-path code[b-ia1rk9z874] {
    padding: .35rem .5rem;
    border-radius: 6px;
    background: var(--surface-3);
    color: var(--text);
    font-size: .82rem;
}

.manual-warning[b-ia1rk9z874] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-top: .75rem;
}

@media (max-width: 900px) {
    .manual-options-grid[b-ia1rk9z874],
    .manual-grid[b-ia1rk9z874] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .manual-link-fields[b-ia1rk9z874] { grid-template-columns: 1fr; }
}
/* _content/MelodyBridge.Server/Components/Pages/PlaylistDetails.razor.rz.scp.css */
/* PlaylistDetails scoped styles: the sticky action header and the
   per-track action button group. */

/* Sticky page header: stays under the 64px app topbar while the track
   table scrolls. Opaque background so rows slide beneath it. */
.detail-header[b-tz8695hpue] {
    position: sticky;
    top: 64px;
    z-index: 5;
    background: var(--bg);
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border);
}

/* Per-track Retry / Remove buttons share one rounded group. */
[b-tz8695hpue] .btn-group {
    display: inline-flex;
    gap: .3rem;
}

/* Tracks header: the filter input plus the needs-attention chip. */
.track-filters[b-tz8695hpue] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.track-filters .search-input[b-tz8695hpue] {
    max-width: 220px;
}

/* Small inline icons inside text (hint boxes, links). */
[b-tz8695hpue] .inline-icon {
    vertical-align: -3px;
    color: var(--warning);
}
[b-tz8695hpue] .cover-placeholder-icon {
    color: var(--muted-2);
}

/* The settings column is taller than the track-status card; without this
   the card stretches to match and shows a mostly empty panel. */
.content-grid.two[b-tz8695hpue] {
    align-items: start;
}

/* Phones: the track filter wraps under its heading instead of squeezing
   the placeholder to a few pixels. */
@media (max-width: 720px) {
    .panel-header[b-tz8695hpue] { flex-wrap: wrap; }
    .track-filters[b-tz8695hpue] { width: 100%; }
    .track-filters .search-input[b-tz8695hpue] { max-width: none; }
}

.bulk-retry-live[b-tz8695hpue] {
    display: grid;
    gap: .45rem;
    margin-bottom: 1rem;
}

/* Folder fields with the grey {playlist name} suffix the rule appends. */
.path-field[b-tz8695hpue] { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.path-field input[b-tz8695hpue] { flex: 1; min-width: 0; }
.path-suffix[b-tz8695hpue] {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Archive dialog: one state card above the optional failure note, so the
   reason and the fix button read as one story. */
.archive-state-card[b-tz8695hpue] {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .8rem .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
}
[b-tz8695hpue] .archive-state-icon { flex: 0 0 auto; margin-top: .1rem; color: var(--accent-strong); }
.archive-state-card strong[b-tz8695hpue] { display: block; margin-bottom: .15rem; }
.archive-state-card p[b-tz8695hpue] { margin: 0; color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.archive-warning[b-tz8695hpue] { margin: .75rem 0 0; }

/* One page of track rows at a time: the count and the two actions stay
   together under the table, and stack once phone width is tight. */
.track-pager[b-tz8695hpue] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
    .track-pager[b-tz8695hpue] { align-items: stretch; flex-direction: column; }
    .track-pager .flex-actions[b-tz8695hpue] { justify-content: stretch; }
    .track-pager .flex-actions .btn-modern[b-tz8695hpue] { flex: 1 1 auto; }
}

/* Compact playlist setup: status chips in the header, two-column fields,
   rare overrides behind one disclosure. */
.playlist-settings-card[b-tz8695hpue] { margin-top: 1rem; }
.playlist-settings-card .settings-head[b-tz8695hpue] { align-items: flex-start; }
.playlist-status-strip[b-tz8695hpue] {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.status-chip[b-tz8695hpue] {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    padding: .25rem .45rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .7rem;
    white-space: nowrap;
}
.status-chip strong[b-tz8695hpue] {
    color: var(--text);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}
.status-chip.bad[b-tz8695hpue] { border-color: color-mix(in srgb, var(--danger) 28%, var(--border)); background: var(--danger-soft); }
.status-chip.bad strong[b-tz8695hpue] { color: var(--danger); }
.status-chip.warn[b-tz8695hpue] { border-color: color-mix(in srgb, var(--warning) 28%, var(--border)); background: var(--warning-soft); }
.status-chip.warn strong[b-tz8695hpue] { color: var(--warning); }

.settings-details[b-tz8695hpue] {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: .1rem .65rem;
}
.settings-details summary[b-tz8695hpue] {
    cursor: pointer;
    padding: .5rem 0;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 600;
}
.settings-details summary:hover[b-tz8695hpue] { color: var(--text); }
.settings-details[open][b-tz8695hpue] { padding-bottom: .65rem; }
.settings-details[open] summary[b-tz8695hpue] { border-bottom: 1px solid var(--border); margin-bottom: .6rem; }

.archive-summary[b-tz8695hpue] {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.4;
    flex-wrap: wrap;
}
.archive-summary .icon[b-tz8695hpue] { flex-shrink: 0; color: var(--accent-strong); }
.archive-summary-sep[b-tz8695hpue] { color: var(--muted-2); }
.archive-summary a[b-tz8695hpue] {
    color: var(--accent-text);
    font-weight: 600;
    text-decoration: none;
}
.archive-summary a:hover[b-tz8695hpue] { text-decoration: underline; }

.toggle-stack[b-tz8695hpue] { display: grid; gap: .5rem; align-content: start; }
.review-banner[b-tz8695hpue] { margin-bottom: .75rem; }
.review-banner a[b-tz8695hpue] { color: var(--accent-text); font-weight: 600; }

@media (max-width: 900px) {
    .playlist-settings-card .settings-head[b-tz8695hpue] { flex-direction: column; }
    .playlist-status-strip[b-tz8695hpue] { justify-content: flex-start; }
}

/* Playlist setup: one calm surface split into two columns. The left side
   answers "what lands here", the right side answers "what else happens
   after a download". Phones stack the same order. */
.playlist-settings-columns[b-tz8695hpue] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 1.5rem;
    align-items: start;
}
.playlist-settings-column[b-tz8695hpue] { display: grid; gap: 1rem; }
.playlist-settings-column + .playlist-settings-column[b-tz8695hpue] {
    border-left: 1px solid var(--border);
    padding-left: 1.5rem;
}

.section-line[b-tz8695hpue] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.section-line a[b-tz8695hpue] {
    color: var(--accent-text);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.section-line a:hover[b-tz8695hpue] { text-decoration: underline; }
.settings-hint[b-tz8695hpue] {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.45;
}

/* Archive destinations are a short checklist, not a form. Each row carries
   the name, the folder and the format so the choice is obvious without
   opening another editor. */
.archive-choice-list[b-tz8695hpue] { display: grid; gap: .45rem; }
.archive-choice[b-tz8695hpue] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem .7rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.archive-choice:hover[b-tz8695hpue] { border-color: var(--border-strong); }
.archive-choice:has(input:checked)[b-tz8695hpue] {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
}
.archive-choice input[b-tz8695hpue] {
    width: 16px;
    height: 16px;
    min-height: 0;
    flex: 0 0 auto;
    accent-color: var(--accent-strong);
}
.archive-choice-copy[b-tz8695hpue] { display: grid; gap: .1rem; min-width: 0; }
.archive-choice-copy strong[b-tz8695hpue] { font-size: .86rem; }
.archive-choice-copy small[b-tz8695hpue] {
    color: var(--muted);
    font-size: .76rem;
    overflow-wrap: anywhere;
}
.archive-choice-format[b-tz8695hpue] {
    margin-left: auto;
    color: var(--muted);
    font-size: .72rem;
    white-space: nowrap;
}
.archive-empty[b-tz8695hpue] { color: var(--muted); font-size: .82rem; line-height: 1.45; }
.archive-empty a[b-tz8695hpue] { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.archive-empty a:hover[b-tz8695hpue] { text-decoration: underline; }

@media (max-width: 1180px) {
    .playlist-settings-columns[b-tz8695hpue] { grid-template-columns: 1fr; gap: 1rem; }
    .playlist-settings-column + .playlist-settings-column[b-tz8695hpue] {
        border-left: 0;
        border-top: 1px solid var(--border);
        padding-left: 0;
        padding-top: 1rem;
    }
}
/* _content/MelodyBridge.Server/Components/Pages/Playlists.razor.rz.scp.css */
/* Playlists page scoped styles: the card tag row under each title
   (owner, format, size as small muted badges). The view switch and the
   compact rows come from the shared app.css (used by Sync jobs too). */

.card-tags[b-xbo3cq0fwb] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .4rem 0 .2rem 0;
}

/* Playlist card badges are compact square chips; the shared base in
   app.css carries the font, colors and border. */
.card-tags .quality-badge[b-xbo3cq0fwb] {
    font-size: .7rem;
    padding: .1rem .35rem;
    border-radius: 4px;
    white-space: nowrap;
}

.playlist-card[b-xbo3cq0fwb] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Spotify's mosaic art is square: strict 1 / 1 box, no height clamp,
   so the 2x2 grid renders whole. */
.playlist-card .playlist-cover[b-xbo3cq0fwb] {
    aspect-ratio: 1 / 1;
    width: 100%;
}

/* Add-playlist wizard: the schedule select needs little room, while the
   sync-mode option labels are long, so sync mode gets the wider column.
   Phones stack them again. */
.form-grid.sync-split[b-xbo3cq0fwb] { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }

@media (max-width: 720px) {
    .form-grid.sync-split[b-xbo3cq0fwb] { grid-template-columns: minmax(0, 1fr); }
}

/* Quick publish dialog: one row per playlist and per target, with the
   checkbox and the copy on one line. */
.publish-list[b-xbo3cq0fwb] { display: grid; gap: .4rem; }
.publish-option[b-xbo3cq0fwb] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .55rem .65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    cursor: pointer;
}
.publish-option:hover[b-xbo3cq0fwb] { border-color: var(--border-strong); }
.publish-option.on[b-xbo3cq0fwb] { border-color: var(--accent-strong); background: var(--accent-soft); }
.publish-option.excluded[b-xbo3cq0fwb] { opacity: .6; cursor: default; }
.publish-option input[type="checkbox"][b-xbo3cq0fwb] {
    flex: 0 0 auto;
    inline-size: 1.05rem;
    block-size: 1.05rem;
    margin: .15rem 0 0;
    accent-color: var(--accent-strong);
}
.publish-option-body[b-xbo3cq0fwb] { flex: 1; display: grid; gap: .1rem; min-width: 0; }
.publish-option-body strong[b-xbo3cq0fwb] { overflow-wrap: anywhere; }
.publish-option-body small[b-xbo3cq0fwb] { color: var(--muted); }
.publish-option-note[b-xbo3cq0fwb] { color: var(--muted); font-size: .8rem; }

/* Quick publish: the rule profile picker sits under the target list, so
   the choice reads as part of the M3U target it belongs to. */
.publish-m3u-config[b-xbo3cq0fwb] {
    display: grid;
    gap: .5rem;
    padding: .7rem .8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.publish-m3u-config h4[b-xbo3cq0fwb] { margin: 0; font-size: .88rem; }
.publish-m3u-config label[b-xbo3cq0fwb] { display: grid; gap: .3rem; }

/* Card size: one grid definition, three minimum widths. The switch in the
   toolbar only changes the class, so the choice is instant. */
.playlist-cards[b-xbo3cq0fwb] {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(var(--playlist-card-min, 260px), 1fr));
}
.playlist-cards.cards-small[b-xbo3cq0fwb] { --playlist-card-min: 180px; }
.playlist-cards.cards-medium[b-xbo3cq0fwb] { --playlist-card-min: 260px; }
.playlist-cards.cards-large[b-xbo3cq0fwb] { --playlist-card-min: 380px; }
.list-toolbar + .playlist-cards[b-xbo3cq0fwb],
.selection-bar + .playlist-cards[b-xbo3cq0fwb] { margin-top: 0; }

.playlist-cards.cards-small[b-xbo3cq0fwb] { gap: .7rem; }
.playlist-cards.cards-small .playlist-card[b-xbo3cq0fwb] { padding: .75rem; }
.playlist-cards.cards-small .playlist-card h2[b-xbo3cq0fwb] { font-size: .95rem; }
.playlist-cards.cards-small .card-tags[b-xbo3cq0fwb] { font-size: .7rem; }
.playlist-cards.cards-large .playlist-card[b-xbo3cq0fwb] { padding: 1.15rem; }
.playlist-cards.cards-large .playlist-card h2[b-xbo3cq0fwb] { font-size: 1.15rem; }

@media (max-width: 720px) {
    .playlist-cards[b-xbo3cq0fwb] { grid-template-columns: minmax(0, 1fr); }
}

/* Phone cards stay compact: an 84px cover beside the text instead of a
   full-width square that pushes the details below the fold. These rules
   live here because the scoped .playlist-card base sets flex-direction,
   and a global rule with equal specificity cannot win. */
@media (max-width: 720px) {
    .playlist-cards .playlist-card[b-xbo3cq0fwb] {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        gap: .3rem .8rem;
        align-items: start;
    }
    .playlist-cards .playlist-card .playlist-cover[b-xbo3cq0fwb] {
        grid-column: 1;
        grid-row: 1 / span 3;
        width: 84px;
    }
    .playlist-cards .playlist-card .playlist-cover .cover-badge[b-xbo3cq0fwb] { display: none; }
    .playlist-cards .playlist-card .card-menu[b-xbo3cq0fwb] {
        grid-column: 2;
        justify-self: end;
    }
    .playlist-cards .playlist-card .card-tags[b-xbo3cq0fwb] { grid-column: 2; }
    .playlist-cards .playlist-card .job-meta[b-xbo3cq0fwb] {
        grid-column: 2;
        display: block;
        line-height: 1.45;
    }
    .playlist-cards .playlist-card .card-menu-trigger[b-xbo3cq0fwb] { width: 28px; height: 28px; }
    .playlist-cards .playlist-card .card-tags .quality-badge[b-xbo3cq0fwb] { font-size: .68rem; }
}

/* The quick publish dialog uses two columns on desktop: playlists on
   the left, targets and schedule on the right. Everything stays visible
   without scrolling, and the M3U rule profile sits with its target. */
.publish-columns[b-xbo3cq0fwb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.publish-column[b-xbo3cq0fwb] { display: grid; gap: .6rem; align-content: start; min-width: 0; }
.publish-column .section-title-row[b-xbo3cq0fwb] { margin: 0; }
.publish-column .publish-schedule[b-xbo3cq0fwb] { margin-top: .35rem; }

@media (max-width: 720px) {
    .publish-columns[b-xbo3cq0fwb] { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* Source chips above the URL field: the user can see which services are
   supported and tap one to load an example into the field. The actual
   routing still comes from the URL, so a pasted link does not need a
   preselection. */
.source-picker[b-xbo3cq0fwb] { display: grid; gap: .45rem; }
.source-strip[b-xbo3cq0fwb] { display: flex; flex-wrap: wrap; gap: .4rem; }
.source-chip[b-xbo3cq0fwb] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 32px;
    padding: .3rem .65rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.source-chip:hover[b-xbo3cq0fwb] { border-color: var(--border-strong); color: var(--text); }
.source-chip.active[b-xbo3cq0fwb] {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: color-mix(in srgb, var(--accent) 9%, var(--surface-2));
    color: var(--text);
}
.source-chip:focus-visible[b-xbo3cq0fwb] { outline: 2px solid var(--accent); outline-offset: 2px; }
.source-chip .brand-icon[b-xbo3cq0fwb] { flex: 0 0 auto; }
/* _content/MelodyBridge.Server/Components/Pages/Plugins.razor.rz.scp.css */
/* Plugins page scoped styles: waterfall cards, head layout, tail
   controls (status pill, toggle, priority arrows) and quality badges.
   Shared card chrome (border, radius, surface, hover) and the
   .quality-badge base live in app.css. */

.plugin-list[b-6vwnnielzg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
    align-items: start;
    gap: .75rem;
    margin-top: 1rem;
}

/* One column when the content column is too narrow for two readable
   plugin cards. */
@media (max-width: 900px) {
    .plugin-list[b-6vwnnielzg] { grid-template-columns: minmax(0, 1fr); }
}

/* Login warning: impossible to miss without turning the page into a
   wall of red. The banner comes first, the card border and the icon flag
   repeat the same signal where the fix lives. */
.auth-alert[b-6vwnnielzg] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .85rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid color-mix(in srgb, var(--danger) 42%, transparent);
    border-radius: var(--radius);
    background: var(--danger-soft);
}

.auth-alert-icon[b-6vwnnielzg] {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--danger) 18%, transparent);
    color: var(--danger);
}

.auth-alert-body[b-6vwnnielzg] { display: grid; gap: .45rem; min-width: 0; }
.auth-alert-body > strong[b-6vwnnielzg] { font-size: 1.02rem; }
.auth-alert-body > p[b-6vwnnielzg] { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }

.auth-alert-head[b-6vwnnielzg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.auth-alert-head > strong[b-6vwnnielzg] { font-size: 1.02rem; }

/* The route preview reads like a small map, not another settings form. */
.route-preview[b-6vwnnielzg] { margin-bottom: 1rem; }

.route-preview-head[b-6vwnnielzg] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.route-preview-head h2[b-6vwnnielzg] { margin: 0; }

.route-select[b-6vwnnielzg] {
    min-width: 150px;
    padding: .4rem .55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: .85rem;
}

.route-chain[b-6vwnnielzg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .8rem;
}

.route-step[b-6vwnnielzg] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .6rem .3rem .35rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}

.route-step:hover[b-6vwnnielzg] { border-color: var(--accent); color: var(--accent-text); }

.route-index[b-6vwnnielzg] {
    width: 19px;
    height: 19px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: .7rem;
    font-weight: 700;
}

.route-skipped[b-6vwnnielzg] { margin: .6rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.route-note[b-6vwnnielzg] { margin: .35rem 0 0; color: var(--muted-2); font-size: .78rem; }

.auth-alert-list[b-6vwnnielzg] {
    list-style: none;
    display: grid;
    gap: .45rem;
    margin: .15rem 0 0;
    padding: 0;
}

.auth-alert-list li[b-6vwnnielzg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .65rem;
    border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.auth-alert-copy[b-6vwnnielzg] { display: grid; gap: .1rem; min-width: 0; }
.auth-alert-copy strong[b-6vwnnielzg] { font-size: .9rem; }
.auth-alert-copy span[b-6vwnnielzg] {
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.auth-alert-list .btn-modern[b-6vwnnielzg] { flex-shrink: 0; }

@media (max-width: 600px) {
    .auth-alert[b-6vwnnielzg] { grid-template-columns: minmax(0, 1fr); padding: .85rem; }
    .auth-alert-icon[b-6vwnnielzg] { width: 34px; height: 34px; }
    .auth-alert-list li[b-6vwnnielzg] { align-items: stretch; flex-direction: column; }
    .auth-alert-list .btn-modern[b-6vwnnielzg] { width: 100%; }
    .auth-alert-head[b-6vwnnielzg] { align-items: flex-start; }
    .route-preview-head[b-6vwnnielzg] { align-items: stretch; }
    .route-select[b-6vwnnielzg] { width: 100%; }
    .plugin-note[b-6vwnnielzg] { flex-wrap: wrap; }
    .plugin-note-action[b-6vwnnielzg] { width: 100%; margin-left: 0; }
}

.plugin-card[b-6vwnnielzg] {
    display: grid;
    align-content: start;
    gap: .6rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color .15s ease;
}

.plugin-card:hover[b-6vwnnielzg] { border-color: var(--border-strong); }

.plugin-card.auth-error[b-6vwnnielzg] {
    border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
    box-shadow: inset 3px 0 0 var(--danger);
}

/* The icon wrapper carries the red flag; the icon itself keeps the
   shared provider shape. */
.plugin-icon-wrap[b-6vwnnielzg] {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
}

.plugin-icon-wrap.auth-error .provider-icon[b-6vwnnielzg] {
    color: var(--danger);
    background: var(--danger-soft);
}

.plugin-auth-flag[b-6vwnnielzg] {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--danger);
    color: var(--bg);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    box-sizing: content-box;
}

/* Dimmed, but the toggle stays clickable at full opacity. */
.plugin-card.disabled[b-6vwnnielzg] { opacity: .6; }
.plugin-card.disabled .plugin-tail[b-6vwnnielzg] { opacity: 1; }

.plugin-head[b-6vwnnielzg] {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    flex-wrap: wrap;
}

.plugin-head strong[b-6vwnnielzg] { display: block; }

/* The title demands at least this much before the tail is pushed to
   its own row; without a basis the tail starves it to zero width on
   phones and the description wraps one word per line. */
.plugin-title[b-6vwnnielzg] {
    flex: 1 1 200px;
    min-width: 0;
}

/* Pills and arrows keep breathing room on every viewport; the head
   wraps instead of squeezing the title under the controls. */
.plugin-tail[b-6vwnnielzg] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* Under ~480px the tail drops below the title onto its own row. */
@media (max-width: 480px) {
    .plugin-tail[b-6vwnnielzg] {
        margin-left: calc(42px + .8rem); /* line up with the title */
        flex-wrap: wrap;
        row-gap: .5rem;
    }
}

.plugin-description[b-6vwnnielzg] {
    color: var(--muted);
    font-size: .85rem;
    margin-top: .15rem;
}

/* The facts a valid login already knows: account, plan, tier, expiry. */
.plugin-account[b-6vwnnielzg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .35rem;
    margin-top: .35rem;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.4;
}

.plugin-account span + span[b-6vwnnielzg]::before {
    content: "·";
    margin-right: .35rem;
    color: var(--muted-2);
}

.plugin-meta[b-6vwnnielzg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .7rem;
    margin-top: .3rem;
    color: var(--muted-2);
    font-size: .76rem;
}

.plugin-checking[b-6vwnnielzg] { display: inline-flex; align-items: center; gap: .35rem; }

.plugin-guide[b-6vwnnielzg] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    color: var(--accent-text);
    font-weight: 600;
    text-decoration: none;
}

.plugin-guide:hover[b-6vwnnielzg] { text-decoration: underline; }

.plugin-checking .spinner[b-6vwnnielzg],
.plugin-test .spinner[b-6vwnnielzg] {
    width: 12px;
    height: 12px;
    display: inline-block;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent-strong);
    border-radius: 50%;
    animation: plugin-spin-b-6vwnnielzg .8s linear infinite;
}

@keyframes plugin-spin-b-6vwnnielzg { to { transform: rotate(360deg); } }

.plugin-test[b-6vwnnielzg] { width: 32px; min-height: 32px; }

/* The banner or toast jumped here: a short accent flash points at the card. */
.plugin-card.highlight[b-6vwnnielzg] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-raised);
}

.plugin-quality[b-6vwnnielzg] {
    display: flex;
    align-items: center;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: .4rem;
}
.plugin-quality .quality-badge[b-6vwnnielzg] { align-self: center; }

/* Plugin badges are rounded pills; the shared base in app.css
   carries the font, colors and border. */
.plugin-quality .quality-badge[b-6vwnnielzg] {
    border-radius: 99px;
    white-space: nowrap;
}

.btn-group[b-6vwnnielzg] { display: inline-flex; gap: .25rem; }

.btn-group .icon-button[b-6vwnnielzg] {
    width: 32px;
    min-height: 32px;
}

/* Why a plugin is down: a quiet row with an icon instead of a full box,
   so it reads as part of the card. */
.plugin-note[b-6vwnnielzg] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .55rem .7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.45;
}

.plugin-note .icon[b-6vwnnielzg] { flex-shrink: 0; margin-top: .1rem; }
.plugin-note-action[b-6vwnnielzg] { margin-left: auto; flex-shrink: 0; }

.plugin-note.auth[b-6vwnnielzg] {
    border-color: color-mix(in srgb, var(--danger) 28%, transparent);
    background: var(--danger-soft);
    color: var(--text);
}

.plugin-note.auth .icon[b-6vwnnielzg] { color: var(--danger); }

/* The settings disclosure: a full-width row that opens into a panel,
   instead of a native details triangle. Closed it is a quiet inset row;
   opened it becomes the shared raised settings surface, so the panel
   reads as its own block inside the card. */
.plugin-settings[b-6vwnnielzg] {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-2);
    transition: border-color .15s ease;
}

.plugin-settings:hover[b-6vwnnielzg] { border-color: var(--border-strong); }

.plugin-settings.open[b-6vwnnielzg] {
    background: var(--surface-raised);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-raised);
}

.settings-toggle[b-6vwnnielzg] {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .6rem .75rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.settings-toggle:hover[b-6vwnnielzg] { color: var(--text); }
.settings-toggle .settings-chevron[b-6vwnnielzg] { margin-left: auto; transition: transform .15s ease; }
.plugin-settings.open .settings-chevron[b-6vwnnielzg] { transform: rotate(180deg); }

.settings-body[b-6vwnnielzg] {
    display: grid;
    gap: .9rem;
    padding: .9rem .85rem 1rem;
    border-top: 1px solid var(--border);
}

/* Rarely touched knobs hide behind one more click. */
.advanced-toggle[b-6vwnnielzg] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    justify-self: start;
    padding: .1rem 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

.advanced-toggle:hover[b-6vwnnielzg] { color: var(--text); }
.advanced-toggle .advanced-chevron[b-6vwnnielzg] { transition: transform .15s ease; }
.advanced-toggle[aria-expanded="true"] .advanced-chevron[b-6vwnnielzg] { transform: rotate(90deg); }

.advanced-fields[b-6vwnnielzg] {
    display: grid;
    gap: .9rem;
    padding-left: .8rem;
    border-left: 2px solid var(--border);
}

/* A run's pause/cancel pair needs its own row on a phone; beside the
   title it squeezed the track and progress text into a thin column. */
@media (max-width: 640px) {
    .qi-item[b-6vwnnielzg] { align-items: stretch; flex-direction: column; }
    .qi-item .qi-meta[b-6vwnnielzg] { white-space: normal; overflow: visible; }
    .qi-item .flex-actions[b-6vwnnielzg] { justify-content: flex-start; }
}

/* Search and filter sit between the dependency card and the list, so a
   long waterfall can be narrowed before the cards start. */
.plugin-toolbar[b-6vwnnielzg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    margin-top: 1rem;
    padding: .55rem .65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.plugin-search[b-6vwnnielzg] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 1 1 220px;
    min-width: 0;
    padding: 0 .55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
}
.plugin-search input[b-6vwnnielzg] {
    flex: 1;
    min-width: 0;
    min-height: 34px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    outline: none;
}
.plugin-search:focus-within[b-6vwnnielzg] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.plugin-toolbar .filter-chips[b-6vwnnielzg] { flex: 1 1 auto; }
.plugin-count[b-6vwnnielzg] {
    color: var(--muted-2);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Try-order number on the icon: the card tail already carries arrows,
   but a rank answers "where in the waterfall is this?" at a glance. */
.plugin-rank[b-6vwnnielzg] {
    position: absolute;
    right: -4px;
    bottom: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border: 2px solid var(--surface);
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: .66rem;
    font-weight: 800;
    line-height: 1;
}

@media (max-width: 600px) {
    .plugin-toolbar[b-6vwnnielzg] { align-items: stretch; }
    .plugin-search[b-6vwnnielzg] { flex-basis: 100%; }
    .plugin-toolbar .filter-chips[b-6vwnnielzg] { width: 100%; }
    .plugin-count[b-6vwnnielzg] { padding-left: .15rem; }
}

/* ---------------------------------------------------------------- */
/* Source order: the one place where priority is edited.             */
/* ---------------------------------------------------------------- */

.source-order[b-6vwnnielzg] { margin-bottom: 1rem; }
.source-order-head[b-6vwnnielzg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.source-order-title[b-6vwnnielzg] { display: block; }
.source-order-heading[b-6vwnnielzg] {
    display: block;
    margin: .1rem 0 .3rem;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
}
.source-order-head .panel-description[b-6vwnnielzg] {
    display: block;
    margin: 0;
    max-width: 62ch;
}
.source-order-preview-control[b-6vwnnielzg] {
    display: grid;
    gap: .25rem;
    min-width: 160px;
}
.source-order-preview-control label[b-6vwnnielzg] {
    color: var(--muted-2);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.order-list[b-6vwnnielzg] {
    display: grid;
    gap: .35rem;
    margin-top: .85rem;
}
.order-row[b-6vwnnielzg] {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    padding: .45rem .55rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
}
.order-row.has-problem[b-6vwnnielzg] {
    border-color: color-mix(in srgb, var(--danger) 32%, var(--border));
}
.order-index[b-6vwnnielzg] {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: .68rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.order-icon[b-6vwnnielzg] {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--surface);
    color: var(--accent-strong);
}
.order-icon.has-problem[b-6vwnnielzg] { color: var(--danger); background: var(--danger-soft); }
.order-main[b-6vwnnielzg] {
    display: grid;
    gap: .05rem;
    flex: 1 1 180px;
    min-width: 0;
}
.order-main strong[b-6vwnnielzg] { font-size: .85rem; }
.order-reason[b-6vwnnielzg] {
    color: var(--muted);
    font-size: .73rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.order-row .pill[b-6vwnnielzg] { flex: 0 0 auto; margin-left: auto; }
.order-row .btn-group[b-6vwnnielzg] { flex: 0 0 auto; }
.order-open[b-6vwnnielzg] { flex: 0 0 auto; color: var(--muted); }

/* The quality preview is a footnote under the order, not a second list
   of the same plugins at full size. */
.source-order .route-preview[b-6vwnnielzg] {
    margin: .9rem 0 0;
    padding-top: .8rem;
    border-top: 1px solid var(--border);
}
.source-order .route-preview-head[b-6vwnnielzg] { align-items: center; }
.source-order .route-preview-head .text-muted[b-6vwnnielzg] { font-size: .72rem; }
.source-order .route-chain[b-6vwnnielzg] { margin-top: .55rem; }

.dependency-strip[b-6vwnnielzg] { margin-bottom: 1rem; }
.dependency-row[b-6vwnnielzg] {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}
.dependency-icon[b-6vwnnielzg] {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--accent-strong);
}
.dependency-copy[b-6vwnnielzg] { display: grid; gap: .05rem; flex: 1 1 220px; min-width: 0; }
.dependency-copy strong[b-6vwnnielzg] { font-size: .85rem; }
.dependency-copy small[b-6vwnnielzg] { color: var(--muted); font-size: .76rem; line-height: 1.4; }

.plugin-groups[b-6vwnnielzg] { display: grid; gap: 1.25rem; margin-top: 1rem; }
.plugin-group[b-6vwnnielzg] { display: grid; gap: .35rem; }
.plugin-group-head[b-6vwnnielzg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.plugin-group-head h2[b-6vwnnielzg] {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .05rem 0 .2rem;
    font-size: 1.05rem;
}
.plugin-group-head p[b-6vwnnielzg] {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.45;
    max-width: 72ch;
}
.group-count[b-6vwnnielzg] {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
}
.plugin-group .plugin-list[b-6vwnnielzg] { margin-top: .35rem; }

/* Compact cards: the list is for setup and status, not a second copy of
   the description. */
.plugin-card[b-6vwnnielzg] { padding: .85rem; gap: .5rem; }
.plugin-description[b-6vwnnielzg] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.plugin-setup-link[b-6vwnnielzg] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent-text);
    font: inherit;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
}
.plugin-setup-link:hover[b-6vwnnielzg] { text-decoration: underline; }

@media (max-width: 900px) {
    .plugin-list[b-6vwnnielzg] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .source-order-head[b-6vwnnielzg] { flex-direction: column; }
    .source-order-preview-control[b-6vwnnielzg] { width: 100%; }
    .source-order-preview-control .route-select[b-6vwnnielzg] { width: 100%; }
    .order-row[b-6vwnnielzg] { align-items: flex-start; }
    .order-main[b-6vwnnielzg] { flex-basis: calc(100% - 90px); }
    .order-row .pill[b-6vwnnielzg] { margin-left: 90px; }
    .order-row .btn-group[b-6vwnnielzg] { margin-left: auto; }
    .plugin-group-head[b-6vwnnielzg] { flex-direction: column; gap: 0; }
}

.source-order summary[b-6vwnnielzg] {
    cursor: pointer;
    list-style: none;
}
.source-order summary[b-6vwnnielzg]::-webkit-details-marker { display: none; }
.source-order-count[b-6vwnnielzg] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
}
.source-order-chevron[b-6vwnnielzg] { transition: transform .15s ease; }
.source-order[open] .source-order-chevron[b-6vwnnielzg] { transform: rotate(180deg); }
.source-order-body[b-6vwnnielzg] {
    display: grid;
    gap: .65rem;
    padding-top: .85rem;
}
.source-order-body .source-order-preview-control[b-6vwnnielzg] { justify-self: start; }

/* Rows: the same source content in a single calm column, with the
   description hidden so the name, status and actions stay scannable. */
.plugin-groups.rows .plugin-list[b-6vwnnielzg] {
    grid-template-columns: minmax(0, 1fr);
    gap: .35rem;
}
.plugin-groups.rows .plugin-group-head p[b-6vwnnielzg] { display: none; }
.plugin-groups.rows .plugin-group-head[b-6vwnnielzg] { margin-bottom: .1rem; }
.plugin-groups.rows .plugin-card[b-6vwnnielzg] { padding: .6rem .75rem; gap: .35rem; }
.plugin-groups.rows .plugin-description[b-6vwnnielzg] { display: none; }
.plugin-groups.rows .plugin-account[b-6vwnnielzg] { margin-top: .05rem; }
.plugin-groups.rows .plugin-meta[b-6vwnnielzg] { margin-top: .1rem; }
.plugin-groups.rows .plugin-quality[b-6vwnnielzg] { margin-top: .05rem; }
.plugin-groups.rows .quality-badge[b-6vwnnielzg] { font-size: .68rem; }
.plugin-groups.rows .plugin-settings[b-6vwnnielzg] { margin-top: .1rem; }

/* Manage stays a small tail action instead of a full-width row on every
   card. The detail panel opens below the card. */
.plugin-tail .settings-toggle[b-6vwnnielzg] {
    width: auto;
    padding: .3rem .55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .76rem;
    font-weight: 500;
}
.plugin-tail .settings-toggle:hover[b-6vwnnielzg] {
    border-color: var(--border-strong);
    background: var(--surface);
    color: var(--text);
}
/* _content/MelodyBridge.Server/Components/Pages/Settings.razor.rz.scp.css */
/* Settings page scoped styles. Blazor puts the isolation attribute on
   this page's own elements, so plain selectors apply. The tab strip is
   a shared component and carries its own TabStrip.razor.css; those
   rules cannot live here because page isolation never reaches into a
   child component's elements. */

/* OAuth setup steps: callout box instead of a bare list. */
.oauth-steps[b-cy37e525xs] {
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-strong);
    border-radius: 8px;
    padding: .9rem 1rem;
    background: var(--surface-3);
}

.oauth-steps ol[b-cy37e525xs] {
    margin: .25rem 0 0;
    padding-left: 1.1rem;
    display: grid;
    gap: .65rem;
    color: var(--muted);
}

.oauth-steps li[b-cy37e525xs] {
    line-height: 1.5;
}

.oauth-steps li[b-cy37e525xs]::marker {
    color: var(--accent-strong);
    font-weight: 700;
}

.oauth-steps code[b-cy37e525xs] {
    font-family: var(--font-mono);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .1rem .35rem;
    /* The redirect URI is long and space-free: let it break instead of
       pushing the card wider than a phone screen. */
    overflow-wrap: anywhere;
}

/* The redirect-URI hint inside step 2: breathing room around the code
   line and a tidy row for the Copy button, so nothing crowds. */
.oauth-steps .hint-box[b-cy37e525xs] {
    margin: .5rem 0;
}

.oauth-steps .flex-actions[b-cy37e525xs] {
    margin-top: .45rem;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
}

/* Credential inputs at the card bottom: label above input, even
   rhythm, never touching. */
.account-card label[b-cy37e525xs] {
    display: grid;
    gap: .4rem;
    margin-top: .35rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}

/* Accent picker: one row of swatch buttons. Each swatch is a colored
   dot; the chosen one carries a ring in its own color plus a check
   icon. The legend colors are fixed: a swatch always shows its own
   palette regardless of which accent is active. */
.accent-picker[b-cy37e525xs] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.accent-swatch[b-cy37e525xs] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .65rem .38rem .45rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.accent-dot[b-cy37e525xs] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.accent-swatch:hover[b-cy37e525xs] {
    border-color: var(--border-strong);
    background: var(--surface);
}

.accent-swatch:focus-visible[b-cy37e525xs] {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

.accent-swatch.active[b-cy37e525xs] {
    border-color: var(--swatch);
    box-shadow: inset 0 0 0 1px var(--swatch);
}

.accent-swatch.active span:last-child[b-cy37e525xs] { font-weight: 600; }

/* Fixed legend: the strong color of each palette in both modes. */
.accent-teal[b-cy37e525xs] { --swatch: #2dd4bf; }
.accent-cyan[b-cy37e525xs] { --swatch: #06b6d4; }
.accent-blue[b-cy37e525xs] { --swatch: #3b82f6; }
.accent-green[b-cy37e525xs] { --swatch: #22c55e; }
.accent-violet[b-cy37e525xs] { --swatch: #a855f7; }
.accent-rose[b-cy37e525xs] { --swatch: #f43f5e; }
.accent-orange[b-cy37e525xs] { --swatch: #f97316; }
.accent-amber[b-cy37e525xs] { --swatch: #f59e0b; }
.accent-slate[b-cy37e525xs] { --swatch: #94a3b8; }
:root[data-theme="light"] .accent-teal[b-cy37e525xs] { --swatch: #0f766e; }
:root[data-theme="light"] .accent-cyan[b-cy37e525xs] { --swatch: #0e7490; }
:root[data-theme="light"] .accent-blue[b-cy37e525xs] { --swatch: #2563eb; }
:root[data-theme="light"] .accent-green[b-cy37e525xs] { --swatch: #15803d; }
:root[data-theme="light"] .accent-violet[b-cy37e525xs] { --swatch: #7c3aed; }
:root[data-theme="light"] .accent-rose[b-cy37e525xs] { --swatch: #e11d48; }
:root[data-theme="light"] .accent-orange[b-cy37e525xs] { --swatch: #c2410c; }
:root[data-theme="light"] .accent-amber[b-cy37e525xs] { --swatch: #b45309; }
:root[data-theme="light"] .accent-slate[b-cy37e525xs] { --swatch: #475569; }

/* The redirect URI and its Copy button share one row; the URI wraps
   inside its own space instead of pushing the button around. */
.redirect-row[b-cy37e525xs] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.redirect-row code[b-cy37e525xs] { flex: 1 1 14rem; min-width: 0; }

.redirect-row .btn-modern[b-cy37e525xs] { margin-left: auto; }

/* The title row carries the Save button and the unsaved-changes pill:
   sticky, so the save action is never a scroll trip away. */
.page-title[b-cy37e525xs] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg);
    padding-block: .75rem .5rem;
    margin-bottom: .5rem;
}
@media (max-width: 720px) {
    /* Phones stack the title; a permanent sticky block would eat the screen. */
    .page-title[b-cy37e525xs] { position: static; padding-block: 0; margin-bottom: 1rem; }
}

/* Path fields with the grey {playlist} suffix the folder rule appends. */
.path-field[b-cy37e525xs] { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.path-field input[b-cy37e525xs] { flex: 1; min-width: 0; }
.path-suffix[b-cy37e525xs] {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The setup steps stay available but collapsed: the Client ID field and
   Connect button are the useful part once the app exists. */
.oauth-steps summary[b-cy37e525xs] {
    cursor: pointer;
    font-weight: 600;
    font-size: .9rem;
    padding: .35rem 0;
}
.oauth-steps[open] summary[b-cy37e525xs] { margin-bottom: .35rem; }

/* Settings search: a jump box, not a DOM filter. */
.settings-search[b-cy37e525xs] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .85rem;
    padding: .55rem .7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.settings-search:focus-within[b-cy37e525xs] { border-color: var(--accent); }
.settings-search-icon[b-cy37e525xs] { color: var(--muted); flex-shrink: 0; }
.settings-search-input[b-cy37e525xs] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: .9rem;
    outline: none;
}

.settings-search-results[b-cy37e525xs],
.settings-search-empty[b-cy37e525xs] {
    position: absolute;
    left: -.1rem;
    right: -.1rem;
    top: calc(100% + .35rem);
    z-index: 40;
    padding: .35rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-raised);
    box-shadow: var(--shadow-raised);
}

.settings-search-empty[b-cy37e525xs] {
    padding: .6rem .7rem;
    color: var(--muted);
    font-size: .84rem;
}

.settings-search-result[b-cy37e525xs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: .5rem .6rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.settings-search-result:hover[b-cy37e525xs],
.settings-search-result:focus-visible[b-cy37e525xs] { background: var(--accent-soft); }
.settings-search-result > span:first-child[b-cy37e525xs] { display: grid; gap: .05rem; min-width: 0; }
.settings-search-result strong[b-cy37e525xs] { font-size: .85rem; }
.settings-search-result small[b-cy37e525xs] { color: var(--muted); font-size: .75rem; }
.settings-search-tab[b-cy37e525xs] {
    flex-shrink: 0;
    color: var(--muted-2);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Light / Dark / Auto segmented choice. */
.theme-choice[b-cy37e525xs] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .2rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
}

.theme-choice-option[b-cy37e525xs] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .65rem;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

.theme-choice-option:hover[b-cy37e525xs] { color: var(--text); }
.theme-choice-option.active[b-cy37e525xs] {
    border-color: var(--border-strong);
    background: var(--surface);
    color: var(--accent-text);
    box-shadow: var(--shadow);
}

@media (max-width: 640px) {
    .settings-search-result[b-cy37e525xs] { align-items: flex-start; }
    .settings-search-tab[b-cy37e525xs] { display: none; }
}

/* Extra archive profiles: a compact list under the default archive. */
.archive-profiles[b-cy37e525xs] {
    display: grid;
    gap: .65rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.archive-profiles-head[b-cy37e525xs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.archive-profiles-head h3[b-cy37e525xs] { margin: .05rem 0 .2rem; font-size: 1rem; }
.archive-profiles-head p[b-cy37e525xs] {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.45;
    max-width: 72ch;
}
.archive-profile-list[b-cy37e525xs] { display: grid; gap: .4rem; }
.archive-profile-row[b-cy37e525xs] {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    padding: .55rem .65rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
}
.archive-profile-row.disabled[b-cy37e525xs] { opacity: .62; }
.archive-profile-copy[b-cy37e525xs] {
    display: grid;
    gap: .05rem;
    flex: 1 1 220px;
    min-width: 0;
}
.archive-profile-copy strong[b-cy37e525xs] { font-size: .86rem; }
.archive-profile-copy small[b-cy37e525xs] {
    color: var(--muted);
    font-size: .74rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.archive-profile-format[b-cy37e525xs] { color: var(--muted-2); font-size: .72rem; }
.archive-profile-format em[b-cy37e525xs] { font-style: normal; }
.archive-backfill[b-cy37e525xs] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .65rem;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    border-radius: 9px;
    background: var(--surface-2);
}
.archive-backfill .progress-track[b-cy37e525xs] { flex: 1 1 120px; min-width: 80px; }
.archive-backfill .progress-track > span[b-cy37e525xs] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent-strong);
    transition: width .3s ease;
}
.archive-backfill-copy[b-cy37e525xs] { display: grid; gap: .05rem; min-width: 0; }
.archive-backfill-copy strong[b-cy37e525xs] { font-size: .8rem; }
.archive-backfill-copy small[b-cy37e525xs] { color: var(--muted); font-size: .72rem; }

@media (max-width: 720px) {
    .archive-profile-row[b-cy37e525xs] { align-items: flex-start; }
    .archive-profile-copy[b-cy37e525xs] { flex-basis: 100%; }
    .archive-profile-row .btn-modern[b-cy37e525xs] { flex: 1 1 auto; }
}

.archive-profile-modal[b-cy37e525xs] { width: min(560px, calc(100vw - 2rem)); }

.archive-profile-row.default[b-cy37e525xs] {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
    background: var(--surface);
}
.archive-default-badge[b-cy37e525xs] {
    margin-left: .35rem;
    padding: .02rem .34rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.archive-default-editor[b-cy37e525xs] {
    display: grid;
    gap: .65rem;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
}
/* _content/MelodyBridge.Server/Components/Pages/SyncJobs.razor.rz.scp.css */
/* Sync jobs page scoped styles: card action footer and wizard form grid. */

/* The source playlist's cover sits beside the job title, so a glance at
   the grid says which music the job publishes. A removed source or a
   folder job simply leaves the heading at the card edge. */
.sync-job-identity[b-klp57mk6at] {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.sync-job-cover[b-klp57mk6at] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--surface-3);
    color: var(--muted);
    text-decoration: none;
}

.sync-job-cover:hover[b-klp57mk6at] {
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.sync-job-cover img[b-klp57mk6at] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sync-job-row-cover:hover[b-klp57mk6at] {
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* On phones and tablets the row becomes two lines: cover, title and
   actions on the first, status directly under the title. Keeping the
   actions on their own column leaves the title readable instead of
   squeezing it to an ellipsis between the status pill and four buttons.
   The last-run metadata moves out; the card view still carries it. */
@media (max-width: 900px) {
    .sync-job-row .entity-row-actions .btn-label[b-klp57mk6at] { display: none; }

    .sync-job-row[b-klp57mk6at] {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "cover main actions"
            "cover state actions";
        row-gap: .3rem;
    }

    .sync-job-row .entity-row-cover[b-klp57mk6at] { grid-area: cover; }
    .sync-job-row .entity-row-main[b-klp57mk6at] { grid-area: main; }
    .sync-job-row .entity-row-state[b-klp57mk6at] {
        grid-area: state;
        justify-content: flex-start;
    }
    .sync-job-row .entity-row-actions[b-klp57mk6at] {
        grid-area: actions;
        align-self: center;
    }
    .sync-job-row .entity-row-meta[b-klp57mk6at] { display: none; }
}

/* Card actions: one horizontal toolbar under a hairline. Wraps gracefully
   on narrow viewports instead of jamming buttons. */
.job-footer[b-klp57mk6at] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border);
}

/* Two-column cards on a tablet are narrower than the four-action
   toolbar: pair the buttons instead of leaving Delete alone on a row.
   Single-column phones get the same treatment. */
@media (max-width: 460px), (min-width: 721px) and (max-width: 860px) {
    .job-footer[b-klp57mk6at] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .job-footer .btn-modern[b-klp57mk6at] { width: 100%; }
}

/* Run-history modal: slightly narrower than the wizard shell, and
   warning detail lists must not overflow their log row. */
.log-modal[b-klp57mk6at] {
    width: min(640px, calc(100vw - 2rem));
}

.log-entry details[b-klp57mk6at] {
    margin-top: .35rem;
    font-size: .82rem;
}

.log-entry details ul[b-klp57mk6at] {
    margin: .35rem 0 0;
    padding-left: 1.2rem;
}

/* One vertical rhythm for every step: the step body is a grid whose gap
   spaces the form, hint boxes and child editors uniformly. */
.wizard-step[b-klp57mk6at] {
    display: grid;
    gap: 1.1rem;
}

/* Step form grids: one column in the narrow modal, two from 640px. */
.wizard-step .form-grid[b-klp57mk6at] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
}

/* Zero the global .form-grid label margin-bottom: inside these grids it
   would stack on top of the gap and make row spacing uneven. */
.wizard-step .form-grid label[b-klp57mk6at] {
    margin-bottom: 0;
}

@media (min-width: 640px) {
    .wizard-step .form-grid:not(.single)[b-klp57mk6at] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Step validation message: danger tint, own space under the step body. */
.wizard-error[b-klp57mk6at] {
    margin-top: .75rem;
    border-color: var(--danger);
}

/* Footer: Back sits left, Next/Save stays pinned right also on step 0
   where Back is absent. */
.wizard-actions[b-klp57mk6at] {
    margin-left: auto;
    display: flex;
    gap: .75rem;
}

/* Target picker: one tappable row card per place a job publishes to. */
.target-picker[b-klp57mk6at] { gap: .6rem; }
.target-lead[b-klp57mk6at] { margin: 0; color: var(--muted); font-size: .85rem; }
/* The M3U path and compatibility fields use the same label rhythm as
   the wizard's form grid, without wrapping them in a second grid. */
.target-path[b-klp57mk6at] {
    display: grid;
    gap: .35rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}
/* Only the label is bold; the input and select keep normal text. */
.target-path input[b-klp57mk6at],
.target-path select[b-klp57mk6at] { font-weight: 400; }
.target-list[b-klp57mk6at] { display: grid; gap: .5rem; }
.target-option[b-klp57mk6at] {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    min-width: 0;
    padding: .65rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    cursor: pointer;
}
.target-option:hover[b-klp57mk6at] { border-color: var(--border-strong); }
.target-option.on[b-klp57mk6at] { border-color: var(--accent-strong); background: var(--accent-soft); }
.target-option input[type="checkbox"][b-klp57mk6at] {
    flex: 0 0 auto;
    inline-size: 1.05rem;
    block-size: 1.05rem;
    margin: .1rem 0 0;
    accent-color: var(--accent-strong);
}
.target-option-body[b-klp57mk6at] { flex: 1; display: grid; gap: .1rem; min-width: 0; }
.target-option-title[b-klp57mk6at] { display: flex; align-items: center; gap: .4rem; min-width: 0; font-weight: 600; }
.target-option-note[b-klp57mk6at] { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.target-url[b-klp57mk6at] { color: var(--muted-2); }
.target-actions[b-klp57mk6at] { display: flex; flex-wrap: wrap; gap: .5rem; }
.target-summary[b-klp57mk6at] {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    padding: .55rem .7rem;
    border-radius: var(--radius);
    background: var(--surface-3);
    color: var(--muted);
    font-size: .85rem;
}
.target-summary[b-klp57mk6at]  .icon { flex: 0 0 auto; margin-top: .15rem; color: var(--accent-strong); }

/* ── Jobs and rule profiles tabs ─────────────────────────────── */
.sync-tabs[b-klp57mk6at] {
    display: flex;
    gap: .35rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.sync-tab[b-klp57mk6at] {
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    padding: .55rem .7rem;
    font-weight: 600;
    cursor: pointer;
}
.sync-tab span[b-klp57mk6at] {
    margin-left: .3rem;
    padding: .05rem .35rem;
    border-radius: 999px;
    background: var(--surface-3);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
}
.sync-tab.on[b-klp57mk6at] { color: var(--text); border-bottom-color: var(--accent-strong); }

/* ── Bulk edit bar ───────────────────────────────────────────── */
.sync-bulk-bar[b-klp57mk6at] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}
.sync-bulk-bar .selection-actions[b-klp57mk6at] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.sync-bulk-bar select[b-klp57mk6at],
.sync-bulk-bar .selection-actions input[b-klp57mk6at] {
    width: auto;
    min-width: 9rem;
    min-height: 34px;
    padding: .35rem .5rem;
}
.sync-bulk-bar .selection-all input[b-klp57mk6at] { min-width: 0; }
.sync-bulk-bar .btn-modern[b-klp57mk6at] { flex: 0 0 auto; }

/* ── Quick job editor ────────────────────────────────────────── */
.job-quick-modal[b-klp57mk6at] { width: min(1040px, calc(100vw - 2rem)); }
.job-quick-grid[b-klp57mk6at] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
}
.quick-section[b-klp57mk6at] {
    display: grid;
    align-content: start;
    gap: .55rem;
    padding: .8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.quick-section.wide[b-klp57mk6at] { grid-column: 1 / -1; }
.quick-divider[b-klp57mk6at] {
    height: 1px;
    margin: .2rem 0;
    background: var(--border);
}
.quick-section > .eyebrow[b-klp57mk6at] { margin-bottom: .1rem; }
.quick-section label[b-klp57mk6at] { color: var(--muted); font-size: .8rem; font-weight: 700; }
.quick-section p[b-klp57mk6at] { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.quick-folders summary[b-klp57mk6at] {
    cursor: pointer;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
}
.quick-folders[b-klp57mk6at] {
    display: grid;
    gap: .35rem;
    padding-top: .25rem;
}
.quick-folders .toggle-switch.wide[b-klp57mk6at] { margin: 0; }

/* ── Rule profiles ───────────────────────────────────────────── */
.sync-profiles[b-klp57mk6at] { margin-top: 0; }
.rule-profile-list[b-klp57mk6at] { display: grid; gap: .6rem; }
.rule-profile-card[b-klp57mk6at] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
}
.rule-profile-main[b-klp57mk6at] { display: grid; gap: .3rem; min-width: 0; }
.rule-profile-main code[b-klp57mk6at] {
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: .78rem;
}
.rule-profile-main small[b-klp57mk6at] { color: var(--muted); font-size: .78rem; }
.profile-editor-overlay[b-klp57mk6at] { z-index: 120; }
.profile-editor-modal[b-klp57mk6at] { width: min(900px, calc(100vw - 2rem)); }
.rule-preview[b-klp57mk6at] {
    display: grid;
    gap: .6rem;
    padding: .8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.rule-preview-list[b-klp57mk6at] {
    display: grid;
    gap: .4rem;
    margin: 0;
}
.rule-preview-list > div[b-klp57mk6at] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .15rem;
    align-items: start;
}
.rule-preview-list dt[b-klp57mk6at] { color: var(--muted); font-size: .8rem; font-weight: 600; }
.rule-preview-list dd[b-klp57mk6at] { margin: 0; min-width: 0; }
.rule-preview-list code[b-klp57mk6at] { overflow-wrap: anywhere; }

@media (max-width: 1100px) {
    .job-quick-grid[b-klp57mk6at] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .job-quick-grid[b-klp57mk6at] { grid-template-columns: 1fr; }
    .quick-section.wide[b-klp57mk6at] { grid-column: auto; }
    .rule-profile-card[b-klp57mk6at] { align-items: start; flex-direction: column; }
    .rule-preview-list > div[b-klp57mk6at] { grid-template-columns: 1fr; gap: .15rem; }
}

.job-output[b-klp57mk6at] {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: -.35rem 0 .55rem;
    color: var(--muted);
    font-size: .76rem;
    min-width: 0;
}
.job-output code[b-klp57mk6at] {
    background: transparent;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-editor-grid[b-klp57mk6at] {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 1rem;
    align-items: start;
}
.profile-editor-form[b-klp57mk6at] { display: grid; gap: .8rem; }
.profile-editor-preview[b-klp57mk6at] { position: sticky; top: 0; }
@media (max-width: 760px) {
    .profile-editor-grid[b-klp57mk6at] { grid-template-columns: 1fr; }
    .profile-editor-preview[b-klp57mk6at] { position: static; }
}

/* Advanced fields stay collapsed for a first setup. */
.quick-advanced[b-klp57mk6at] {
    margin-top: .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.quick-advanced > summary[b-klp57mk6at] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem .8rem;
    cursor: pointer;
    color: var(--muted);
    font-size: .84rem;
    font-weight: 600;
}
.quick-advanced[open] > summary[b-klp57mk6at] { border-bottom: 1px solid var(--border); }
.quick-advanced-body[b-klp57mk6at] {
    display: grid;
    gap: .7rem;
    padding: .8rem;
}

/* Card size: the same three steps as the playlist grid, with wider
   minimums because a job card carries targets and a run summary. */
.sync-job-cards[b-klp57mk6at] {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(var(--job-card-min, 330px), 1fr));
}
.sync-job-cards.cards-small[b-klp57mk6at] { --job-card-min: 260px; gap: .75rem; }
.sync-job-cards.cards-medium[b-klp57mk6at] { --job-card-min: 400px; }
.sync-job-cards.cards-large[b-klp57mk6at] { --job-card-min: 600px; }
.list-toolbar + .sync-job-cards[b-klp57mk6at],
.selection-bar + .sync-job-cards[b-klp57mk6at] { margin-top: 0; }

.sync-job-cards.cards-small .job-card[b-klp57mk6at] { padding: .8rem; }
.sync-job-cards.cards-small .job-card h2[b-klp57mk6at] { font-size: .95rem; }
.sync-job-cards.cards-small .job-summary[b-klp57mk6at] { font-size: .8rem; }
.sync-job-cards.cards-large .job-card[b-klp57mk6at] { padding: 1.2rem; }
.sync-job-cards.cards-large .job-card h2[b-klp57mk6at] { font-size: 1.15rem; }

@media (max-width: 720px) {
    .sync-job-cards[b-klp57mk6at] { grid-template-columns: minmax(0, 1fr); }
}
/* _content/MelodyBridge.Server/Components/Shared/CardMenu.razor.rz.scp.css */
.card-menu[b-njw5m1rgue] { position: relative; }

.card-menu-trigger[b-njw5m1rgue] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
}
.card-menu-trigger:hover[b-njw5m1rgue] { color: var(--text); border-color: var(--border-strong); }
.card-menu-trigger[aria-expanded="true"][b-njw5m1rgue] { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }

.card-menu-items[b-njw5m1rgue] {
    position: absolute;
    right: 0;
    top: calc(100% + .35rem);
    z-index: 40;
    min-width: 11rem;
    padding: .3rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

[b-njw5m1rgue] button {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    text-align: left;
    padding: .45rem .6rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: .85rem;
}
[b-njw5m1rgue] button:hover { background: var(--surface-3); }
[b-njw5m1rgue] button.danger { color: var(--danger); }
[b-njw5m1rgue] button:disabled { opacity: .45; cursor: not-allowed; }
[b-njw5m1rgue] button:disabled:hover { background: transparent; }
[b-njw5m1rgue] .card-menu-sep {
    height: 1px;
    margin: .25rem .3rem;
    background: var(--border);
}
/* _content/MelodyBridge.Server/Components/Shared/FolderBrowseButton.razor.rz.scp.css */
/* The path input and its browse button stay on one line; the label still
   owns the text so screen readers and tests keep the same association. */
.path-input-row[b-7rilxc2buo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .35rem;
    align-items: stretch;
}

.path-input-row > input[b-7rilxc2buo] {
    min-width: 0;
}

.path-browse[b-7rilxc2buo] {
    min-width: 36px;
    height: auto;
    align-self: stretch;
    color: var(--muted);
}
/* _content/MelodyBridge.Server/Components/Shared/FolderPickerDialog.razor.rz.scp.css */
/* Folder picker: a shortcut rail plus a compact directory list. */

.folder-picker-modal[b-4jhphwpmqw] {
    width: min(760px, calc(100vw - 2rem));
}

.folder-picker-body[b-4jhphwpmqw] {
    display: grid;
    gap: .75rem;
}

.folder-path-bar[b-4jhphwpmqw] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .4rem;
    align-items: center;
    padding: .4rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
}

.folder-path-bar input[b-4jhphwpmqw] {
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: .84rem;
    outline: none;
}

.folder-loading[b-4jhphwpmqw] {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .75rem;
    color: var(--muted);
    font-size: .82rem;
}

.folder-picker-grid[b-4jhphwpmqw] {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: .75rem;
    min-height: 260px;
}

.folder-shortcuts[b-4jhphwpmqw],
.folder-list-pane[b-4jhphwpmqw] {
    display: grid;
    align-content: start;
    gap: .2rem;
    min-width: 0;
}

.folder-pane-label[b-4jhphwpmqw] {
    color: var(--muted-2);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 0 .15rem .2rem;
}

.folder-shortcut[b-4jhphwpmqw],
.folder-row[b-4jhphwpmqw] {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    padding: .45rem .5rem;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.folder-shortcut:hover[b-4jhphwpmqw],
.folder-row:hover[b-4jhphwpmqw] {
    background: var(--surface-2);
    border-color: var(--border);
}

.folder-shortcut.active[b-4jhphwpmqw] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-text);
}

.folder-shortcut .icon[b-4jhphwpmqw],
.folder-row .icon[b-4jhphwpmqw] {
    flex-shrink: 0;
    color: var(--muted);
}

.folder-shortcut > span[b-4jhphwpmqw] {
    display: grid;
    gap: .05rem;
    min-width: 0;
}

.folder-shortcut strong[b-4jhphwpmqw] {
    font-size: .81rem;
    line-height: 1.25;
}

.folder-shortcut small[b-4jhphwpmqw] {
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-list[b-4jhphwpmqw] {
    display: grid;
    align-content: start;
    gap: .1rem;
    max-height: 320px;
    overflow-y: auto;
    padding: .15rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
}

.folder-row span[b-4jhphwpmqw] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .84rem;
}

.folder-row small[b-4jhphwpmqw] {
    color: var(--muted-2);
    font-size: .68rem;
}

.folder-row-arrow[b-4jhphwpmqw] { color: var(--muted-2) !important; }

.folder-empty[b-4jhphwpmqw] {
    padding: .9rem .7rem;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.4;
}

.folder-new[b-4jhphwpmqw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .4rem;
}

.folder-new input[b-4jhphwpmqw] {
    min-width: 0;
    padding: .45rem .55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .82rem;
}

@media (max-width: 720px) {
    .folder-picker-grid[b-4jhphwpmqw] { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .folder-shortcuts[b-4jhphwpmqw] {
        grid-auto-flow: column;
        grid-auto-columns: minmax(150px, 1fr);
        overflow-x: auto;
        padding-bottom: .2rem;
    }
    .folder-shortcut small[b-4jhphwpmqw] { display: none; }
    .folder-list[b-4jhphwpmqw] { max-height: 42vh; }
    .folder-new[b-4jhphwpmqw] { grid-template-columns: minmax(0, 1fr); }
}

/* Read-only names, so a folder is recognizable without exposing bytes. */
.folder-files[b-4jhphwpmqw] {
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    padding: .1rem .6rem;
}
.folder-files summary[b-4jhphwpmqw] {
    cursor: pointer;
    padding: .45rem 0;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
}
.folder-file-list[b-4jhphwpmqw] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .55rem;
    padding: 0 0 .55rem;
    color: var(--muted-2);
    font-size: .72rem;
}
/* _content/MelodyBridge.Server/Components/Shared/LibraryIdentityPanel.razor.rz.scp.css */
/* Track identity legend, scoped to the panel component: term left,
   explanation right, one row per fact. */

.identity-grid[b-361w5ymapu] {
    display: grid;
    gap: .65rem;
}

.identity-item[b-361w5ymapu] {
    display: grid;
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
    gap: .3rem 1rem;
    align-items: baseline;
    padding: .75rem 1rem;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.identity-term[b-361w5ymapu] {
    font-size: .9rem;
    color: var(--text);
}

.identity-desc[b-361w5ymapu] {
    color: var(--muted);
    font-size: .8rem;
    margin: 0;
    overflow-wrap: anywhere;
}
/* _content/MelodyBridge.Server/Components/Shared/LibraryLocationCard.razor.rz.scp.css */
/* One scan-location card, scoped to the card component. */

.location-card[b-sozssk7rxp] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    transition: border-color .15s ease;
}

.location-card:hover[b-sozssk7rxp] { border-color: var(--border-strong); }

.location-icon[b-sozssk7rxp] {
    color: var(--muted);
    margin-top: .2rem;
    flex-shrink: 0;
}

.location-body[b-sozssk7rxp] {
    flex: 1;
    min-width: 0; /* lets the path shrink and wrap inside the card */
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: flex-start;
}

.path-tag[b-sozssk7rxp] {
    font-family: var(--font-mono);
    font-size: .82rem;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .2rem .5rem;
    color: var(--text);
    overflow-wrap: anywhere; /* a long path wraps inside the card, never the grid */
    display: inline-block;
    max-width: 100%;
}

/* One fact per segment: files, schedule, last scan. Wraps on narrow
   cards instead of pushing the action buttons off screen. */
.location-meta[b-sozssk7rxp] {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .5rem;
    color: var(--muted);
    margin: 0;
}

.location-meta span + span[b-sozssk7rxp]::before {
    /* Dot plus a non-breaking space: the separator never starts a line
       on its own when the meta wraps on a narrow card. */
    content: "\00b7\00a0";
    margin-right: .35rem;
    color: var(--muted);
}

/* One fact per line-fragment: a value like "last scan 2026-10-16 03:27"
   never splits mid-value on a narrow card. */
.location-meta span[b-sozssk7rxp] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-actions[b-sozssk7rxp] {
    margin-left: auto;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* _content/MelodyBridge.Server/Components/Shared/PlaylistActionsHeader.razor.rz.scp.css */
/* Six actions can take more room than the title has to spare. Keep a
   readable title column and let the action group wrap instead of
   squeezing the playlist name into three lines. */
.detail-header[b-5oy7ou68e4] {
    flex-wrap: wrap;
    row-gap: .65rem;
    align-items: flex-start;
}

.playlist-header[b-5oy7ou68e4] {
    flex: 1 1 22rem;
    min-width: 0;
}

.detail-actions[b-5oy7ou68e4] {
    flex: 1 1 auto;
}

@media (max-width: 900px) {
    /* The header stacks here, so a horizontal flex-basis would turn into
       a tall empty block above the title. */
    .playlist-header[b-5oy7ou68e4],
    .detail-actions[b-5oy7ou68e4] { flex: 0 1 auto; }
}

@media (min-width: 901px) {
    .playlist-header[b-5oy7ou68e4] { min-width: 22rem; }
}
/* _content/MelodyBridge.Server/Components/Shared/PluginConfigFieldEditor.razor.rz.scp.css */
/* One plugin setting: the shared .field/.field-hint primitives carry the
   label and the note (see app.css), so only the secret input and its
   reveal button are page-specific. */

.secret-input[b-70atvpkyhp] {
    display: flex;
    gap: .4rem;
    align-items: center;
}

.secret-input input[b-70atvpkyhp] { flex: 1; min-width: 0; }

.reveal-button[b-70atvpkyhp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--muted);
    cursor: pointer;
}

.reveal-button:hover[b-70atvpkyhp] { color: var(--text); border-color: var(--border-strong); }
/* _content/MelodyBridge.Server/Components/Shared/ReleaseNotesDialog.razor.rz.scp.css */
/* The dialog owns the first screen after an upgrade: readable line length,
   a scrolling body for long release lists, and the release link beside the
   single close action. */
.release-notes-overlay[b-tygyolxqx9] { z-index: 140; }
.release-notes-modal[b-tygyolxqx9] { width: min(44rem, calc(100vw - 2rem)); }
.release-notes-body[b-tygyolxqx9] {
    max-height: min(55vh, 30rem);
    overflow-y: auto;
    display: grid;
    gap: .55rem;
    padding-right: .35rem;
}
.release-notes-body[b-tygyolxqx9] (h3) { margin: .2rem 0 0; font-size: 1rem; }
.release-notes-body[b-tygyolxqx9] (h4) { margin: .4rem 0 0; font-size: .92rem; }
.release-notes-body[b-tygyolxqx9] (p) { margin: 0; color: var(--muted); }
.release-notes-body[b-tygyolxqx9] (ul) {
    margin: 0;
    padding-left: 1.15rem;
    display: grid;
    gap: .25rem;
}
.release-notes-body[b-tygyolxqx9] (li) { color: var(--foreground); }
/* _content/MelodyBridge.Server/Components/Shared/SearchProviderPanel.razor.rz.scp.css */
/* Search routing map on the Plugins page. A provider is one inner
   surface; its targets read as links to the source cards below. Shared
   card chrome comes from app.css. */

.search-provider-map[b-c78eaqgc3f] {
    margin-top: 1rem;
}

.search-provider-head[b-c78eaqgc3f] {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}

.search-provider-head[b-c78eaqgc3f]::-webkit-details-marker { display: none; }
.search-provider-head[b-c78eaqgc3f]::marker { content: ""; }

.search-provider-head h2[b-c78eaqgc3f] { margin: 0; }
.search-provider-head .panel-description[b-c78eaqgc3f] { margin: .35rem 0 0; max-width: 70ch; }

.search-provider-chevron[b-c78eaqgc3f] {
    flex: none;
    margin-top: .15rem;
    color: var(--muted);
    transition: transform .15s ease;
}

.search-provider-map[open] .search-provider-chevron[b-c78eaqgc3f] { transform: rotate(180deg); }

.search-provider-body[b-c78eaqgc3f] {
    display: grid;
    gap: 1rem;
    padding-top: 1rem;
}

/* The author display above otherwise overrides the browser's own
   "hide the body of a closed details" rule. */
.search-provider-map:not([open]) > .search-provider-body[b-c78eaqgc3f] {
    display: none;
}

.search-provider-count[b-c78eaqgc3f] {
    flex: none;
    padding: .2rem .55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .75rem;
    font-weight: 600;
}

.search-provider-list[b-c78eaqgc3f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: .65rem;
}

.search-provider[b-c78eaqgc3f] {
    display: grid;
    gap: .65rem;
    align-content: start;
    padding: .9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
}

.search-provider-title[b-c78eaqgc3f] {
    display: flex;
    align-items: start;
    gap: .6rem;
    min-width: 0;
}

.search-provider-title > div[b-c78eaqgc3f] {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.search-provider-title strong[b-c78eaqgc3f] { font-size: .92rem; }
.search-tier-badge[b-c78eaqgc3f] {
    margin-left: .3rem;
    padding: .05rem .3rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted-2);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: .08rem;
}
.search-tier-badge.official[b-c78eaqgc3f] {
    border-color: var(--accent);
    color: var(--accent-text);
}

.search-legacy-badge[b-c78eaqgc3f] {
    margin-left: .3rem;
    padding: .05rem .3rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted-2);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: .08rem;
}
.search-provider-title span:not(.search-provider-icon)[b-c78eaqgc3f] {
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.45;
}

.search-provider-icon[b-c78eaqgc3f] {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    flex: none;
    border-radius: 7px;
    background: var(--accent-soft);
    color: var(--accent-text);
}

.search-provider-reads[b-c78eaqgc3f] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}

.search-provider-targets[b-c78eaqgc3f] {
    display: grid;
    gap: .35rem;
}

.search-target-list[b-c78eaqgc3f] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.search-data-label[b-c78eaqgc3f] {
    color: var(--muted-2);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.search-data-badge[b-c78eaqgc3f] {
    display: inline-flex;
    align-items: center;
    padding: .1rem .45rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: .7rem;
    white-space: nowrap;
}

.search-target[b-c78eaqgc3f] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .18rem .5rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: .76rem;
    text-decoration: none;
}

.search-target:hover[b-c78eaqgc3f] { border-color: var(--accent); color: var(--accent-text); }
.search-target .icon[b-c78eaqgc3f] { color: var(--accent-text); flex: none; }
.search-target.is-disabled[b-c78eaqgc3f] { opacity: .55; }
.search-target-name[b-c78eaqgc3f] { font-weight: 600; }
.search-target-data[b-c78eaqgc3f] { color: var(--muted-2); }
.search-target-off[b-c78eaqgc3f] {
    color: var(--warning);
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
}

.search-target-primary[b-c78eaqgc3f] {
    padding: .02rem .28rem;
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent-text);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.search-provider-issues[b-c78eaqgc3f] {
    margin: 0;
    padding-left: 1.1rem;
}

.search-self-block[b-c78eaqgc3f] {
    display: grid;
    gap: .5rem;
    padding-top: .85rem;
    border-top: 1px solid var(--border);
}

.search-self-head h3[b-c78eaqgc3f] { margin: 0; font-size: .9rem; }
.search-self-head p[b-c78eaqgc3f] { margin: .15rem 0 0; color: var(--muted); font-size: .8rem; }

.search-self-list[b-c78eaqgc3f] {
    display: grid;
    gap: .25rem;
}

/* The list is an inventory, not the main content: two columns halve the
   height on a desktop without hiding the note. */
@media (min-width: 900px) {
    .search-self-list[b-c78eaqgc3f] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.search-self-row[b-c78eaqgc3f] {
    display: grid;
    grid-template-columns: minmax(150px, max-content) auto minmax(0, 1fr);
    align-items: baseline;
    gap: .5rem;
    min-width: 0;
    padding: .35rem .5rem;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--text);
    font-size: .78rem;
    text-decoration: none;
}

.search-self-row:hover[b-c78eaqgc3f] {
    border-color: var(--border);
    background: var(--surface-2);
}

.search-self-name[b-c78eaqgc3f] { font-weight: 600; white-space: nowrap; }
.search-fallback-badge[b-c78eaqgc3f] {
    margin-left: .3rem;
    padding: .05rem .3rem;
    border-radius: 999px;
    background: var(--warning-soft);
    color: var(--warning);
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: .05rem;
}
.search-self-note[b-c78eaqgc3f] {
    color: var(--muted-2);
    font-size: .72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-provider-warning[b-c78eaqgc3f] {
    display: flex;
    align-items: start;
    gap: .45rem;
}

.search-provider-warning .icon[b-c78eaqgc3f] { flex: none; margin-top: .1rem; color: var(--danger); }

@media (max-width: 640px) {
    .search-provider-head[b-c78eaqgc3f] { flex-direction: column; }
    .search-provider-list[b-c78eaqgc3f] { grid-template-columns: minmax(0, 1fr); }
    .search-self-row[b-c78eaqgc3f] { grid-template-columns: minmax(0, 1fr) auto; }
    /* On a phone the inventory is long enough already; the note is
       secondary and the source link opens the full card. */
    .search-self-note[b-c78eaqgc3f] { display: none; }
}
/* _content/MelodyBridge.Server/Components/Shared/SourcePicker.razor.rz.scp.css */
/* Source picker: one row per candidate the plugins offered, plugin name
   and confidence next to the pick button. The dialog is shared by the
   playlist page and the manual download page. */
.source-picker-modal[b-8cpax2teen] {
    max-width: 720px;
    width: min(720px, calc(100vw - 2rem));
}

[b-8cpax2teen] .source-candidate {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
}

[b-8cpax2teen] .source-candidate:last-child {
    border-bottom: none;
}

[b-8cpax2teen] .source-candidate-main {
    flex: 1;
    min-width: 0;
}

[b-8cpax2teen] .source-candidate-main strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-8cpax2teen] .source-candidate-main small {
    color: var(--muted);
}

/* Source picker: original length, live results and per-pick progress. */
.source-picker-title[b-8cpax2teen] { min-width: 0; }
.source-original[b-8cpax2teen] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    margin: .15rem 0 0;
    color: var(--muted);
    font-size: .85rem;
}
.source-length[b-8cpax2teen] { font-variant-numeric: tabular-nums; }
.source-original .source-length[b-8cpax2teen] {
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--surface-3);
    color: inherit;
}
.source-searching[b-8cpax2teen] {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--muted);
    font-size: .9rem;
}

/* Picker header: the requested target quality, spelled out. */
.source-target[b-8cpax2teen] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .5rem;
    margin: .5rem 0 0;
    font-size: .85rem;
}
.source-target .eyebrow[b-8cpax2teen] { margin: 0; }

/* Why a plugin is missing from the result list: the picker explains it
   instead of leaving the user with a shorter list and no reason. */
.source-auth-note[b-8cpax2teen] {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0;
    padding: .65rem .75rem;
    border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
    border-radius: 8px;
    background: var(--danger-soft);
}
.source-auth-note .icon[b-8cpax2teen] { flex-shrink: 0; margin-top: .1rem; color: var(--danger); }
.source-auth-note.warning[b-8cpax2teen] {
    border-color: color-mix(in srgb, var(--warning) 32%, transparent);
    background: var(--warning-soft);
}
.source-auth-note.warning .icon[b-8cpax2teen] { color: var(--warning); }

.source-note-row[b-8cpax2teen] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.source-note-row span[b-8cpax2teen] { min-width: 0; }
.source-note-row .btn-modern[b-8cpax2teen] { flex-shrink: 0; }

.source-filters[b-8cpax2teen] {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    margin: 0;
    padding: .55rem .7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
}

.source-filters label[b-8cpax2teen] {
    display: grid;
    gap: .15rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 600;
}

.source-filters select[b-8cpax2teen] {
    min-width: 120px;
    padding: .32rem .45rem;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .8rem;
}

.source-filter-check[b-8cpax2teen] {
    display: inline-flex !important;
    align-items: center;
    gap: .35rem !important;
    align-self: center;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 500;
}

.source-filter-check input[type=checkbox][b-8cpax2teen] {
    width: 16px;
    height: 16px;
    min-height: 0;
    padding: 0;
    flex: 0 0 auto;
    accent-color: var(--accent-strong);
}

.source-filter-count[b-8cpax2teen] {
    margin-left: auto;
    color: var(--muted-2);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.source-empty-actions[b-8cpax2teen] { display: flex; flex-wrap: wrap; gap: .4rem; }
.source-candidate-tools[b-8cpax2teen] { display: inline-flex; gap: .1rem; }
.source-candidate-tools .icon-button[b-8cpax2teen] { width: 30px; min-height: 30px; }
.source-auth-copy[b-8cpax2teen] { display: grid; gap: .15rem; min-width: 0; font-size: .85rem; }
.source-auth-copy strong[b-8cpax2teen] { font-size: .87rem; }
.source-auth-copy span[b-8cpax2teen] { color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }

@media (max-width: 640px) {
    /* On a phone the skipped-plugin notes can be taller than the whole
       dialog body. Keep the results and their filters first and move the
       notes below them, where they still explain the empty plugins. */
    .source-results[b-8cpax2teen] { display: flex; flex-direction: column; }
    .source-results > .source-auth-note[b-8cpax2teen] { order: 10; }
    .source-auth-note[b-8cpax2teen] { margin: 0; }
    .source-note-row[b-8cpax2teen] { align-items: stretch; flex-direction: column; }
    .source-note-row .btn-modern[b-8cpax2teen] { width: 100%; }
    /* The explanatory action is a link-sized control, not a second
       full-width button per note. */
    .source-note-row .source-why[b-8cpax2teen] { width: auto; align-self: flex-start; }
    .source-filters[b-8cpax2teen] { margin: 0; }
    .source-filters label[b-8cpax2teen],
    .source-filters select[b-8cpax2teen] { width: 100%; }
    .source-filter-count[b-8cpax2teen] { margin-left: 0; }
}

/* Per-candidate quality line: the exact source facts plus the target
   verdict pill, filled in as each plugin's probe answers. */
.source-quality[b-8cpax2teen] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .25rem;
    font-size: .82rem;
}
.source-quality-facts[b-8cpax2teen] { color: var(--accent-text); font-weight: 600; }
.source-quality-checking[b-8cpax2teen] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--muted);
}
.source-quality-checking .spinner[b-8cpax2teen] { width: 11px; height: 11px; }
.source-progress[b-8cpax2teen] {
    height: 3px;
    margin: 0 1.25rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-3);
}
.source-progress span[b-8cpax2teen] {
    display: block;
    width: 35%;
    height: 100%;
    border-radius: 999px;
    background: var(--accent-strong);
    animation: mb-slide-b-8cpax2teen 1.2s ease-in-out infinite;
}
@keyframes mb-slide-b-8cpax2teen {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}
[b-8cpax2teen] .source-candidate.busy { border-color: var(--accent-strong); background: var(--accent-soft); }
.source-delta[b-8cpax2teen] {
    margin-left: .35rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.source-downloading[b-8cpax2teen] {
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    color: var(--accent-text);
    font-size: .85rem;
}
[b-8cpax2teen] .source-failure { display: block; margin-top: .15rem; color: var(--danger); }

/* The picker must never touch the viewport edges, and on a phone each
   candidate wraps its pills and button under the title instead of
   pushing them off the screen. */
@media (max-width: 640px) {
    [b-8cpax2teen] .source-candidate {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    [b-8cpax2teen] .source-candidate-main { flex: 1 1 100%; }
    [b-8cpax2teen] .source-candidate .btn-modern { margin-left: auto; }
    .source-downloading[b-8cpax2teen] { margin-left: auto; }
    .source-picker-title p[b-8cpax2teen] { overflow-wrap: anywhere; }
}
/* _content/MelodyBridge.Server/Components/Shared/StatCard.razor.rz.scp.css */
/* Linked stat tiles: the whole card navigates, and a quiet chevron
   says so before the hover. */
a.stat-card[b-vrk33fsr3e] {
    display: block;
    position: relative;
    color: inherit;
    text-decoration: none;
}
a.stat-card:hover[b-vrk33fsr3e] { border-color: var(--border-strong); }
a.stat-card[b-vrk33fsr3e]  .stat-card-arrow {
    position: absolute;
    top: .95rem;
    right: .85rem;
    color: var(--muted-2);
    transition: transform .15s ease, color .15s ease;
}
a.stat-card:hover[b-vrk33fsr3e]  .stat-card-arrow {
    color: var(--accent-text);
    transform: translateX(2px);
}

/* An attention tone borrows the semantic token of the thing it measures,
   so the dashboard can be scanned before the numbers are read. */
.stat-card.tone-danger[b-vrk33fsr3e] {
    border-color: color-mix(in srgb, var(--danger) 32%, var(--border));
    background: var(--danger-soft);
}
.stat-card.tone-warning[b-vrk33fsr3e] {
    border-color: color-mix(in srgb, var(--warning) 32%, var(--border));
    background: var(--warning-soft);
}
.stat-card.tone-success[b-vrk33fsr3e] {
    border-color: color-mix(in srgb, var(--success) 24%, var(--border));
    background: var(--success-soft);
}
.stat-card.tone-danger[b-vrk33fsr3e]  .stat-icon { background: var(--danger-soft); color: var(--danger); }
.stat-card.tone-warning[b-vrk33fsr3e]  .stat-icon { background: var(--warning-soft); color: var(--warning); }
.stat-card.tone-success[b-vrk33fsr3e]  .stat-icon { background: var(--success-soft); color: var(--success); }
/* _content/MelodyBridge.Server/Components/Shared/TabStrip.razor.rz.scp.css */
/* TabStrip scoped styles. The global app.css ships a tab-nav base
   (flex row, bottom border); these add the unmistakable active state
   and hover/focus feedback that base never had, scoped to the strip
   so no other element picks them up. */

.tab-link[b-wwdbkcibxy] {
    border-radius: 8px 8px 0 0;
    transition: color .15s ease, border-bottom-color .15s ease,
        background .15s ease;
}

/* Inactive tabs keep a readable label and answer to hover: text
   brightens and a dim underline grows in, so they read as tabs and
   not grey boxes. */
.tab-link:not(.active):hover[b-wwdbkcibxy] {
    color: var(--text);
    border-bottom-color: var(--border);
    background: var(--surface-2);
}

/* Active tab: accent text, accent underline, faint accent wash. */
.tab-link.active[b-wwdbkcibxy] {
    color: var(--accent-strong);
    border-bottom: 2px solid var(--accent-strong);
    background: var(--accent-soft);
}

.tab-link:focus-visible[b-wwdbkcibxy] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}