:root {
    color-scheme: dark;
    --bg: #09090b;
    --surface: rgba(24, 24, 27, .55);
    --surface-2: #131318;
    --surface-3: #1a1a20;
    --border: rgba(39, 39, 42, .6);
    --border-strong: #3f3f46;
    --text: #fafafa;
    --muted: #a1a1aa;
    --muted-2: #71717a;
    --accent: #2dd4bf;
    --accent-strong: #14b8a6;
    --accent-soft: rgba(45, 212, 191, .10);
    --success: #34d399;
    --success-soft: rgba(52, 211, 153, .10);
    --warning: #fbbf24;
    --warning-soft: rgba(251, 191, 36, .10);
    --danger: #fb7185;
    --danger-soft: rgba(251, 113, 133, .10);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 28px rgba(0, 0, 0, .25);
    --radius: 10px;
    --sidebar-width: 248px;
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #fafafa;
    --surface: #ffffff;
    --surface-2: #f4f4f5;
    --surface-3: #ebebeb;
    --border: #e4e4e7;
    --border-strong: #d4d4d8;
    --text: #18181b;
    --muted: #52525b;
    --muted-2: #71717a;
    --accent: #0f766e;
    --accent-strong: #0f766e;
    --accent-soft: rgba(15, 118, 110, .10);
    --success: #059669;
    --success-soft: rgba(5, 150, 105, .10);
    --warning: #b45309;
    --warning-soft: rgba(180, 83, 9, .10);
    --danger: #e11d48;
    --danger-soft: rgba(225, 29, 72, .10);
    --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 24px rgba(15, 23, 42, .08);
}

/* Accent palettes: the base teal ships on :root; data-accent on the
   html element swaps the three accent tokens. Dark variants first,
   then each palette's light-mode pair (same pattern as data-theme). */
:root[data-accent="teal"] {
    --accent: #2dd4bf;
    --accent-strong: #14b8a6;
    --accent-soft: rgba(45, 212, 191, .10);
}
:root[data-accent="teal"][data-theme="light"] {
    --accent: #0f766e;
    --accent-strong: #0f766e;
    --accent-soft: rgba(15, 118, 110, .10);
}
:root[data-accent="blue"] {
    --accent: #60a5fa;
    --accent-strong: #3b82f6;
    --accent-soft: rgba(59, 130, 246, .10);
}
:root[data-accent="blue"][data-theme="light"] {
    --accent: #2563eb;
    --accent-strong: #1d4ed8;
    --accent-soft: rgba(37, 99, 235, .10);
}
:root[data-accent="violet"] {
    --accent: #c084fc;
    --accent-strong: #a855f7;
    --accent-soft: rgba(168, 85, 247, .10);
}
:root[data-accent="violet"][data-theme="light"] {
    --accent: #7c3aed;
    --accent-strong: #6d28d9;
    --accent-soft: rgba(109, 40, 217, .10);
}
:root[data-accent="rose"] {
    --accent: #fb7185;
    --accent-strong: #f43f5e;
    --accent-soft: rgba(244, 63, 94, .10);
}
:root[data-accent="rose"][data-theme="light"] {
    --accent: #e11d48;
    --accent-strong: #be123c;
    --accent-soft: rgba(190, 18, 60, .10);
}
:root[data-accent="amber"] {
    --accent: #fbbf24;
    --accent-strong: #f59e0b;
    --accent-soft: rgba(245, 158, 11, .10);
}
:root[data-accent="amber"][data-theme="light"] {
    --accent: #d97706;
    --accent-strong: #b45309;
    --accent-soft: rgba(180, 83, 9, .10);
}

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

* { box-sizing: border-box; }
a { color: inherit; }
button, input, select { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 1.625rem; line-height: 1.2; letter-spacing: -.01em; font-weight: 650; margin-bottom: .5rem; }
h2 { font-size: 1rem; line-height: 1.3; font-weight: 650; margin-bottom: .35rem; }
h3 { font-size: .9rem; font-weight: 600; }
p { color: var(--muted); line-height: 1.55; }
small { color: var(--muted-2); }
code { color: var(--accent-strong); background: var(--accent-soft); border-radius: 6px; padding: .08rem .35rem; }

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    background: var(--bg);
}

.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 1rem;
    background: var(--surface);
    border-right: 1px solid var(--border);
}

.app-main { min-width: 0; }

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 64px;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
}

.topbar-title strong { display: block; font-size: .95rem; }
.topbar-actions { display: flex; align-items: center; gap: .65rem; }
.app-content { width: min(1180px, calc(100vw - var(--sidebar-width) - 3rem)); padding: 1.5rem; }

.brand-block {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .35rem .25rem 1rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--border);
}

.brand-logo {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: block;
}

.brand-block strong { display: block; font-size: .95rem; }
.brand-block span { display: block; color: var(--muted); font-size: .8rem; }
.navbar-toggler { display: none; }

.app-nav {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.nav-section {
    margin-bottom: 1rem;
}

.nav-section-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 0.75rem;
    margin-bottom: 0.5rem;
}

.app-nav .nav-link {
    min-height: 40px;
    display: flex;
    gap: .65rem;
    align-items: center;
    padding: .55rem .65rem;
    border-radius: 8px;
    color: var(--muted);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 650;
}

.app-nav .nav-link span {
    width: 20px;
    display: inline-grid;
    place-items: center;
    color: var(--muted-2);
}

.app-nav .nav-link:hover { background: var(--surface-2); color: var(--text); }
.app-nav .nav-link.active { background: var(--accent-soft); color: var(--accent-strong); }
.app-nav .nav-link.active span { color: var(--accent-strong); }

.sidebar-footer {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    gap: .65rem;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.sidebar-footer small { display: block; color: var(--muted-2); }
.theme-toggle {
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 1.05rem;
    color: var(--muted);
    padding: .2rem .4rem;
    border-radius: 6px;
    line-height: 1;
}
.theme-toggle:hover { background: var(--bg); color: var(--text); }

.eyebrow {
    display: block;
    color: var(--muted-2);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: .35rem;
}

.hero-panel,
.panel-card,
.stat-card,
.hero-card,
.account-card,
.profile-row {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color .15s ease;
}

.panel-card:hover,
.stat-card:hover,
.account-card:hover,
.profile-row:hover { border-color: var(--border-strong); }

.hero-panel {
    min-height: 260px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 1.25rem;
    align-items: end;
    padding: 1.5rem;
}
.hero-panel p { max-width: 680px; font-size: 1rem; }
.hero-card { padding: 1rem; background: var(--surface-2); box-shadow: none; }
.hero-card strong { display: block; margin-top: .6rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }

.page-title {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
}
.page-title p { max-width: 720px; margin-bottom: 0; }

.stat-grid,
.content-grid { display: grid; gap: 1rem; margin-top: 1rem; }
.stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.panel-card,
.stat-card { padding: 1rem; }
.stat-card { min-height: 0; }
.panel-header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: 1rem; }
.stat-icon,
.provider-icon {
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--accent-strong);
}
.stat-icon { width: 36px; height: 36px; margin-bottom: .75rem; }
.provider-icon { width: 42px; height: 42px; font-size: 1.05rem; }
.about-card p { color: var(--muted); margin-bottom: 1rem; }
.github-link { width: fit-content; gap: .5rem; }
.stat-card label { display: block; color: var(--muted); font-size: .8rem; line-height: 1.3; }
.stat-card strong { display: block; margin: .25rem 0 .15rem; line-height: 1.2; font-size: 1.625rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat-card small { display: block; color: var(--muted-2); font-size: .78rem; line-height: 1.4; margin-top: .1rem; }

.btn-modern,
.icon-button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.btn-modern { gap: .45rem; padding: .55rem .85rem; }
.btn-modern.small { padding: .32rem .6rem; font-size: .82rem; min-height: 0; }
.icon-button { width: 38px; padding: 0; font-size: 1rem; }
.btn-modern.primary { background: var(--accent-strong); border-color: transparent; color: white; }
.btn-modern.primary:hover { background: #0d9488; }
.btn-modern.danger { background: transparent; border-color: rgba(251, 113, 133, .25); color: var(--danger); }
.btn-modern.danger:hover { background: rgba(159, 18, 57, .45); color: var(--danger); }
.btn-modern.primary-outline { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn-modern.secondary,
.btn-modern.subtle { background: var(--surface-2); border-color: var(--border); color: #e4e4e7; }
.btn-modern.secondary:hover,
.btn-modern.subtle:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn-modern.ghost { background: transparent; border-color: var(--border); color: var(--muted); }
.btn-modern.ghost:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.btn-modern:hover,
.icon-button:hover { border-color: var(--border-strong); }
.btn-modern:disabled { opacity: .55; cursor: wait; }
/* Keyboard users get a ring; mouse users keep the plain hover. */
.btn-modern:focus-visible,
.icon-button:focus-visible,
.filter-chip:focus-visible,
.tab-link:focus-visible,
.nav-link:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 22px;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
    background: var(--surface-2);
    color: var(--muted);
}
.pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    animation: pill-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes pill-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.8); }
}
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.account-card { display: flex; flex-direction: column; gap: .6rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); }
.account-card .pill { align-self: flex-start; }
.account-card label { margin: 0; }

.qi-warn { color: var(--warning); font-weight: 600; margin-left: .5rem; }

.pill.ok { color: var(--success); background: var(--success-soft); border-color: rgba(52, 211, 153, .2); }
.pill.warn, .pill.warning { color: var(--warning); background: var(--warning-soft); border-color: rgba(251, 191, 36, .2); }
.pill.err { color: var(--danger); background: var(--danger-soft); border-color: rgba(251, 113, 133, .2); }
.pill.neutral { color: var(--muted); background: var(--surface-2); border-color: var(--border); }
.pill.info { color: var(--accent-strong); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 20%, transparent); }
:root[data-theme="light"] .pill.neutral { background: #f4f4f5; color: #52525b; border-color: #e4e4e7; }

.status-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.status-dot.online { background: var(--success); }
.status-dot.warning { background: var(--warning); }

input,
select {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .55rem .7rem;
    background: var(--bg);
    color: var(--text);
    outline: none;
}
input:focus,
select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grid.single { grid-template-columns: 1fr; }
.form-grid label { color: var(--muted); font-size: .82rem; font-weight: 700; display: grid; gap: .4rem; }
.form-grid .wide { grid-column: 1 / -1; }

.timeline-list,
.health-list,
.provider-list { display: grid; gap: .65rem; }
.timeline-item,
.health-list > div,
.provider-row {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .75rem;
    border-radius: 8px;
    background: var(--surface-3);
}
.timeline-item span:first-child {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--bg);
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}
.timeline-item.done span:first-child,
.timeline-item.active span:first-child { background: var(--accent-soft); color: var(--accent-strong); }
.timeline-item p,
.health-list small,
.provider-row small { margin: 0; }
.health-list > div { justify-content: start; }
.account-card { display: grid; gap: .85rem; }
.account-meta { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.provider-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: .65rem;
    align-items: center;
}
.provider-row.enabled { border-left: 3px solid var(--accent-soft); }
.provider-row.disabled { opacity: .55; }
.provider-row.builtin { border-left: 3px solid var(--border); }
.provider-icon { font-size: 1.3rem; line-height: 1; }
/* Connection rows (dashboard): icon column, flexible info, right pill. */
.connection-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .75rem;
    border-radius: 8px;
    background: var(--surface-3);
    border-bottom: 1px solid rgba(39, 39, 42, .4);
}
.connection-row small { font-size: .78rem; color: var(--muted); margin: 0; }
.connection-row .pill { justify-self: end; }
.connection-row.enabled { border-left: 3px solid var(--accent-soft); }
.connection-icon { color: var(--muted); flex-shrink: 0; }
.connection-info { min-width: 0; }
.connection-info small {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.4;
    word-break: break-all;
}
.provider-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.provider-info small { font-size: .78rem; color: var(--muted); white-space: normal; }
.provider-tags,
.provider-platforms { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .2rem; }
.provider-qualities { display: flex; gap: .25rem; flex-wrap: wrap; }
/* Shared badge base for small capability/fact chips (playlist cards,
   plugin quality lines). Shape tweaks live in the owning page's
   scoped css so the two contexts stay independent. */
.quality-badge {
    font-size: .72rem;
    padding: .18rem .55rem;
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--border);
}
.pill.outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: .7rem;
}
.pill.outline.small { font-size: .65rem; padding: .05rem .35rem; }

/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 22px;
    transition: .2s;
}
.toggle-slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background: var(--muted);
    border-radius: 50%;
    transition: .2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent-soft); border-color: var(--accent-strong); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); background: var(--accent-strong); }
.panel-description { font-size: .85rem; color: var(--muted); margin: -.25rem 0 .75rem; }
.hint-box {
    padding: .8rem;
    border-radius: 8px;
    color: var(--muted);
    background: var(--surface-3);
    border: 1px solid rgba(39, 39, 42, .4);
}
.mount-warning {
    display: flex;
    gap: .7rem;
    padding: .8rem;
    border-radius: 8px;
    color: var(--text);
    background: var(--danger-soft);
    border: 1px solid rgba(251, 113, 133, .25);
    font-size: .85rem;
    line-height: 1.55;
}
.mount-warning-icon { color: var(--danger); flex-shrink: 0; margin-top: .1rem; }
.mount-warning code { color: var(--accent); }
.empty-state {
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
    gap: .35rem;
    padding: 2.5rem 1.25rem;
    color: var(--muted-2);
    background: rgba(24, 24, 27, .35);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.empty-state .empty-icon { color: var(--muted-2); }
.empty-state .empty-title { font-size: .95rem; color: var(--text); }
.empty-state .empty-desc { font-size: .85rem; color: var(--muted-2); line-height: 1.5; }
.empty-state .empty-actions { margin-top: .5rem; display: flex; gap: .5rem; justify-content: center; }
:root[data-theme="light"] .empty-state { background: rgba(24, 24, 27, .03); }
.result-box {
    margin: 0;
    white-space: pre-wrap;
    overflow: auto;
    max-height: 360px;
    padding: 1rem;
    border-radius: 8px;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
}
.toast-preview {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    padding: .8rem .9rem;
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

/* Wizard modal */
.wizard-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
}
.wizard-modal {
    width: min(580px, calc(100vw - 2rem));
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .3);
}
/* Modals that carry a table (account playlists): room for the action
   column instead of a squeezed scroll area. */
.wizard-modal.wide {
    width: min(880px, calc(100vw - 2rem));
}
/* Confirm dialogs share the wizard shell but stay compact. */
.wizard-modal.confirm-modal {
    width: min(440px, calc(100vw - 2rem));
}
.confirm-message {
    margin: 0 0 .9rem;
    font-size: .95rem;
    line-height: 1.5;
}
.wizard-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: .75rem;
    padding: 1.25rem 1.25rem 0;
}
.wizard-header h2 { font-size: 1.15rem; }
.wizard-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}
/* Section titles inside import/import wizards (Spotify / From a file…). */
.wizard-body h3 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin: .25rem 0 .25rem;
}
.wizard-body h3:not(:first-child) { margin-top: 1.5rem; }
.wizard-footer {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--border);
}
.review-list {
    display: grid;
    gap: .6rem;
}
.review-list > div {
    padding: .55rem .7rem;
    border-radius: 6px;
    background: var(--surface-3);
    font-size: .9rem;
}
.log-entry {
    display: flex;
    gap: .65rem;
    align-items: start;
    padding: .65rem .75rem;
    border-radius: 8px;
    background: var(--surface-3);
    margin-bottom: .5rem;
}
.log-entry > div { min-width: 0; flex: 1; }
.log-entry strong { display: block; }
.log-entry p { margin: .15rem 0; font-size: .85rem; }
.log-entry small { font-size: .78rem; }
.job-meta {
    display: flex;
    gap: 1rem;
    margin-top: .35rem;
}
textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .55rem .7rem;
    background: var(--bg);
    color: var(--text);
    outline: none;
    font-family: inherit;
    resize: vertical;
}
textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* -- Blazor reconnect dialog (markup lives in _Host.cshtml) -------- */
.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
    display: none;
}
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-paused .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
}
#components-reconnect-modal {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border-strong);
    width: min(22rem, calc(100vw - 2rem));
    margin: 20vh auto;
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
#components-reconnect-modal::backdrop {
    background-color: rgba(0, 0, 0, .5);
}
.components-reconnect-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
#components-reconnect-modal p { margin: 0; text-align: center; color: var(--muted); }
#components-reconnect-modal button {
    border: 0;
    background: var(--accent-strong);
    color: white;
    padding: .4rem 1.5rem;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}
#components-reconnect-modal button:hover { background: var(--accent); }
.components-rejoining-animation { position: relative; width: 80px; height: 80px; }
.components-rejoining-animation div {
    position: absolute;
    border: 3px solid var(--accent);
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.components-rejoining-animation div:nth-child(2) { animation-delay: -.5s; }
@keyframes components-rejoining-animation {
    0%, 4.9% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; }
    5% { top: 40px; left: 40px; width: 0; height: 0; opacity: 1; }
    100% { top: 0; left: 0; width: 80px; height: 80px; opacity: 0; }
}

#blazor-error-ui {
    display: none;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1000;
    padding: .85rem 3rem .85rem 1rem;
    border-radius: 8px;
    background: #7f1d1d;
    color: white;
    box-shadow: var(--shadow);
}
#blazor-error-ui .reload { color: white; font-weight: 700; margin-left: .75rem; }
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .85rem;
    top: .6rem;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
    padding: .25rem;
}
#blazor-error-ui .dismiss:hover { color: white; }
#blazor-error-ui .dismiss:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--success); }
.invalid { outline: 1px solid var(--danger); }
.validation-message { color: var(--danger); }
.blazor-error-boundary { background: #7f1d1d; padding: 1rem; color: white; border-radius: 8px; }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* -- Playlists ------------------------------------------- */
/* Cards are divs, not links: only the cover and the title navigate,
   so the metadata lines stay plain text. */
.playlist-card { display: flex; flex-direction: column; gap: .6rem; }
.playlist-card h2 { font-size: 1.05rem; margin: 0; }
.playlist-card h2 a { color: var(--text); text-decoration: none; }
.playlist-card h2 a:hover { color: var(--accent-strong); text-decoration: underline; }
.playlist-card .eyebrow { font-size: .66rem; }
.playlist-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.playlist-grid .playlist-card { flex-direction: row; align-items: center; }
.playlist-grid .playlist-cover { aspect-ratio: 1; width: 88px; flex-shrink: 0; }
.playlist-cover {
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.playlist-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.playlist-cover-placeholder { font-size: 2.6rem; color: var(--muted-2); }
.playlist-cover.small { width: 88px; aspect-ratio: 1; flex-shrink: 0; }
.playlist-header { display: flex; gap: 1.1rem; align-items: center; }
.playlist-header h1 { margin-bottom: .2rem; }
.playlist-header p { margin: 0; font-size: .95rem; }
.toggle-row { display: flex; align-items: center; gap: .6rem; }
.toggle-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent-strong); }

/* -- Modern table ---------------------------------------- */
.table-wrap { overflow-x: auto; }
.modern-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.modern-table th {
    text-align: left;
    padding: .55rem .75rem;
    color: var(--muted-2);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.modern-table td {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.modern-table tbody tr:hover { background: var(--surface-2); }
.modern-table td strong { font-weight: 600; }
.text-muted { color: var(--muted-2); }
/* File paths in table cells: clip, never blow up the layout. */
td.file-path {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--mono, monospace);
    font-size: .78rem;
}

/* -- Result box ------------------------------------------ */
.result-box { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .92rem; }
.result-box.ok { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent); }
.result-box.error { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); }

/* Pill variants live once, near the base component. */

/* -- Dev panel ------------------------------------------- */
.dev-layout { display: grid; gap: 1.25rem; }
.flex-actions { display: flex; gap: .5rem; align-items: center; }
.search-controls { display: flex; flex-direction: column; gap: .6rem; }
.search-row { display: flex; gap: .6rem; }
.search-input,
.search-provider-select {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .55rem .7rem;
    background: var(--bg);
    color: var(--text);
    outline: none;
}
.search-input:focus, .search-provider-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-provider-select { flex: 0 0 180px; }
.dev-result {
    margin-top: .75rem;
    padding: .75rem;
    border-radius: 8px;
    background: var(--surface-2);
    font-size: .88rem;
    overflow-x: auto;
}
.dev-result.ok { border: 1px solid var(--success); }
.dev-result.err { border: 1px solid var(--danger); }
.qi-result { display: grid; gap: .5rem; }
.qi-item { display: flex; gap: .6rem; align-items: center; padding: .5rem .6rem; border-radius: 6px; background: var(--surface-2); }
.qi-icon { width: 22px; text-align: center; font-size: .95rem; }
.qi-icon.ok { color: var(--success); }
.qi-icon.err { color: var(--danger); }
.qi-icon.pending { color: var(--muted-2); }
.qi-status { min-width: 70px; }
.qi-provider { font-weight: 600; min-width: 90px; }
.qi-meta, .qi-path { color: var(--muted-2); font-size: .8rem; }
.qi-error { color: var(--danger); font-size: .8rem; }
.btn-icon { margin-right: .3rem; }
.btn-icon-only { border: 0; background: none; cursor: pointer; color: var(--muted); padding: .25rem .45rem; border-radius: 6px; }
.btn-icon-only:hover { background: var(--surface-2); color: var(--text); }
.btn-filter {
    border: 1px solid var(--border);
    background: none;
    color: var(--muted);
    padding: .25rem .7rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: .8rem;
}
.btn-filter.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.log-section { max-height: 420px; display: flex; flex-direction: column; }
.log-filters { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.log-container { overflow-y: auto; display: flex; flex-direction: column; gap: .25rem; max-height: 300px; }
.log-line {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    padding: .3rem .5rem;
    border-radius: 4px;
    background: var(--surface-2);
    display: flex;
    gap: .6rem;
    align-items: baseline;
}
.log-line.trace, .log-line.debug { color: var(--muted-2); }
.log-line.info { color: var(--text); }
.log-line.warn { color: var(--warning); }
.log-line.error, .log-line.critical { color: var(--danger); }
.log-time { color: var(--muted-2); white-space: nowrap; }
.log-cat { color: var(--accent-strong); white-space: nowrap; }
.log-msg { flex: 1; min-width: 0; word-break: break-word; white-space: pre-wrap; }
.log-detail { margin-top: .35rem; padding: .5rem; border-radius: 6px; background: var(--bg); font-size: .75rem; color: var(--muted); white-space: pre-wrap; }
.log-empty { color: var(--muted-2); padding: 1rem 0; text-align: center; }
.hint { font-size: .82rem; color: var(--muted-2); }

@media (max-width: 1100px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-sidebar { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
    .app-content { width: 100%; }
    .sidebar-footer { position: static; margin-top: 1rem; }
    .app-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hero-panel,
    .content-grid.two,
    .content-grid.three,
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .app-topbar { padding: 0 1rem; }
    .app-content { padding: 1rem; }
    .app-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-panel,
    .content-grid.two,
    .content-grid.three,
    .stat-grid,
    .form-grid { grid-template-columns: 1fr; }
    .page-title { display: block; }
    .provider-row { grid-template-columns: 32px 1fr auto; }
    .provider-qualities { display: none; }
}
/* -- Downloads page: waterfall rank numbers --------------------- */
.provider-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent, #7F5AF0) 14%, transparent);
    color: var(--accent-strong, #7F5AF0);
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex: none;
}

/* -- PlaylistDetails: live download progress --------------------- */
.download-live {
    margin-top: .9rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border, rgba(128, 128, 128, .25));
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, #7F5AF0) 6%, transparent);
}

.download-live-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    margin-bottom: .55rem;
    font-size: .85rem;
}

.download-live-head span {
    color: var(--text-muted, #999);
    font-variant-numeric: tabular-nums;
}

.progress-track {
    height: 6px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--border, #888) 25%, transparent);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--accent, #7F5AF0), var(--success, #2CB67D));
    transition: width .5s ease;
}

.download-live .qi-meta {
    margin-top: .5rem;
    font-size: .75rem;
    color: var(--text-muted, #999);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Logs page ─────────────────────────────────────────────────── */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .9rem;
}

.filter-chip {
    border: 1px solid var(--border, rgba(128, 128, 128, .3));
    background: transparent;
    color: var(--text-muted, #999);
    border-radius: 99px;
    padding: .22rem .8rem;
    font-size: .74rem;
    cursor: pointer;
    transition: all .15s ease;
}

.filter-chip:hover {
    color: var(--text, #eee);
    border-color: var(--accent, #7F5AF0);
}

.filter-chip.active {
    background: color-mix(in srgb, var(--accent, #7F5AF0) 18%, transparent);
    color: var(--accent-strong, #7F5AF0);
    border-color: var(--accent, #7F5AF0);
    font-weight: 600;
}

.log-error-banner {
    border-color: rgba(251, 113, 133, .4);
    margin-bottom: 1.2rem;
}

.log-error-head {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: .7rem;
}

.log-error-head .qi-icon {
    flex: none;
}

.log-error-head strong {
    display: block;
    color: var(--danger);
}

.log-error-head p {
    margin: 0;
    font-size: .78rem;
    color: var(--text-muted, #999);
}

.log-error-head button {
    margin-left: auto;
    flex: none;
}

.log-row.clickable {
    cursor: pointer;
    grid-template-columns: 4.2rem minmax(6rem, 12rem) 1fr;
}

.logs-list {
    display: flex;
    flex-direction: column;
    max-height: 62vh;
    overflow-y: auto;
    border: 1px solid var(--border, rgba(128, 128, 128, .25));
    border-radius: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .74rem;
}

.log-row {
    display: grid;
    grid-template-columns: 4.2rem 4.2rem minmax(8rem, 16rem) 1fr;
    gap: .6rem;
    padding: .45rem .7rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border, #888) 60%, transparent);
    align-items: baseline;
    line-height: 1.45;
}

.log-row:last-child {
    border-bottom: none;
}

.log-row.err {
    background: var(--danger-soft);
}

.log-row.warn {
    background: var(--warning-soft);
}

.log-time {
    color: var(--text-muted, #999);
    font-variant-numeric: tabular-nums;
}

.log-level {
    font-weight: 700;
}

.log-row.err .log-level {
    color: var(--danger);
}

.log-row.warn .log-level {
    color: var(--warning);
}

.log-row.info .log-level {
    color: var(--accent-strong, #7F5AF0);
}

.log-category {
    color: var(--text-muted, #999);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.log-message {
    white-space: pre-wrap;
    word-break: break-word;
}

.logs-count {
    margin-top: .5rem;
    font-size: .72rem;
    color: var(--text-muted, #999);
    text-align: right;
}

/* ── Home page: three-step workflow ────────────────────────────── */
.workflow-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: .9rem;
}

.workflow-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--border, rgba(128, 128, 128, .25));
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, background .15s ease;
}

.workflow-step:hover {
    border-color: var(--accent, #7F5AF0);
    background: color-mix(in srgb, var(--accent, #7F5AF0) 5%, transparent);
}

.workflow-step.done {
    border-color: color-mix(in srgb, var(--success, #2CB67D) 45%, transparent);
}

.workflow-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent, #7F5AF0) 14%, transparent);
    color: var(--accent-strong, #7F5AF0);
    font-weight: 700;
    flex: none;
}

.workflow-step.done .workflow-number {
    background: color-mix(in srgb, var(--success, #2CB67D) 16%, transparent);
    color: var(--success, #2CB67D);
}

.workflow-step strong {
    display: block;
    margin-bottom: .15rem;
}

.workflow-step p {
    margin: 0;
    font-size: .82rem;
    color: var(--text-muted, #999);
}

.workflow-step small {
    color: var(--accent-strong, #7F5AF0);
    font-size: .72rem;
}

.workflow-step.done small {
    color: var(--success, #2CB67D);
}

.workflow-arrow {
    margin-left: auto;
    color: var(--text-muted, #999);
    flex: none;
}

/* ── Settings tabs ─────────────────────────────────────────────── */
.tab-nav {
    display: flex;
    gap: .35rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
    overflow-x: auto;
}
.tab-link {
    border: 0;
    background: none;
    padding: .6rem .95rem;
    cursor: pointer;
    color: var(--muted);
    font-weight: 600;
    font-size: .9rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.tab-link:hover { color: var(--text); }
.tab-link.active { color: var(--accent-strong); border-bottom-color: var(--accent-strong); }

/* Base for icon-button pairs (plugins priority, track row actions).
   Page tweaks live in the scoped .razor.css of the page that uses them. */
.btn-group { display: inline-flex; gap: .25rem; }

/* ── Playlist card badges ───────────────────────────────────────── */
.playlist-cover { position: relative; }
.cover-badge {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    padding: .2rem .55rem;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 700;
    backdrop-filter: blur(6px);
    color: white;
}
.cover-badge.downloading { background: color-mix(in srgb, var(--accent) 85%, transparent); }
.cover-badge.paused { background: rgba(251, 191, 36, .9); }
.cover-badge.complete { background: rgba(52, 211, 153, .9); }
.cover-badge.partial { background: rgba(90, 100, 120, .85); }

/* ── Track row actions ──────────────────────────────────────────── */
.track-actions { white-space: nowrap; text-align: right; }
.track-actions .btn-modern { margin-left: .3rem; }

/* ── Quality picker (two selects side by side) ───────────────────── */
.quality-picker { display: flex; gap: 1rem; flex-wrap: wrap; }
.quality-picker label { flex: 1 1 180px; }

/* ── Wide toggle rows (Advanced page) ────────────────────────────── */
/* The base .toggle-switch is a 40px inline-block built for bare
   switches; the wide variant keeps that track but lays the label text
   out beside it instead of inside the 40px box. */
.toggle-switch.wide {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: auto;
    cursor: pointer;
}
.toggle-switch.wide input { position: absolute; opacity: 0; width: 0; height: 0; }
/* position:relative kills the base inset sizing, so the track needs its
   40x22 box back or it collapses and the knob overlaps the label text. */
.toggle-switch.wide .toggle-slider { position: relative; flex-shrink: 0; width: 40px; height: 22px; }

/* ── Guided tour ────────────────────────────────────────────────── */
.tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
}
.tour-spotlight {
    position: absolute;
    display: none;
    border: 2px solid var(--accent-strong);
    border-radius: var(--radius);
    box-shadow: 0 0 0 4000px color-mix(in srgb, #000 62%, transparent);
    transition: all .3s ease;
    pointer-events: none;
}
.tour-card {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    max-width: 30rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.4));
    pointer-events: auto;
}
.tour-card h3 { margin: .2rem 0 .4rem; }
.tour-card p { margin: 0 0 .8rem; color: var(--muted); font-size: .92rem; }

/* ── Toasts ──────────────────────────────────────────────────────── */
.toast-stack {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 300;
    display: grid;
    gap: .5rem;
    width: min(22rem, calc(100vw - 2rem));
}
.toast-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .9rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    font-size: .88rem;
    animation: toast-in .25s ease;
}
.toast-item.success { border-left: 3px solid var(--success, #2CB67D); }
.toast-item.warn { border-left: 3px solid var(--warning); }
.toast-item.error { border-left: 3px solid var(--danger); }
.toast-item.info { border-left: 3px solid var(--accent-strong); }
.toast-item .toast-close {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(.5rem); }
    to { opacity: 1; transform: translateY(0); }
}


/* ── Connections profiles ─────────────────────────────────────── */
.profile-list { display: grid; gap: .6rem; margin-top: .75rem; }
.profile-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

/* InputFile renders a plain file input; let it sit next to buttons. */
input[type="file"].btn-modern {
    display: inline-flex;
    align-items: center;
    font-size: .85rem;
    color: var(--muted);
}
input[type="file"].btn-modern::file-selector-button {
    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--surface-2);
    color: var(--text);
    padding: .45rem .95rem;
    margin-right: .6rem;
    cursor: pointer;
    font: inherit;
}
/* ── Polish pass: toggles, labels, tables, action rows ────────────── */
/* Wide toggles (Advanced, Library): text never overlaps the switch.
   Label flexes, switch keeps its box, whole row is one click target. */
.toggle-switch.wide {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: auto;
    min-height: 38px;
    margin-bottom: .5rem;
    cursor: pointer;
    user-select: none;
}
.toggle-switch.wide > span:last-child { flex: 1; min-width: 0; }

/* Plain checkbox rows (Playlists, SyncJobs): text sits beside the box,
   never under it, and the row does not eat taps meant for other links.
   .form-grid .toggle-row (0,2,0) must beat .form-grid label (0,1,1, display:grid),
   which otherwise stacks the checkbox above the text. */
.form-grid .toggle-row,
.toggle-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 38px;
    cursor: pointer;
    user-select: none;
}
.toggle-row span { flex: 1; min-width: 0; }

/* Two quality dropdowns side by side with breathing room; the guidance
   line below keeps its own space. */
.quality-picker { align-items: end; gap: 1.25rem; }
.quality-picker label { flex: 1 1 200px; min-width: 0; }

/* Auto-save state pill in the panel header: quiet by design, colored
   only while it means something (saving/saved/failed). */
.save-state {
    font-size: .75rem;
    font-weight: 500;
    padding: .15rem .6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--text-muted, #8a8f98);
    white-space: nowrap;
}
.save-state.saving { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }
.save-state.saved { color: var(--success); border-color: rgba(52, 211, 153, .25); background: var(--success-soft); }
.save-state.failed { color: var(--danger); border-color: rgba(251, 113, 133, .25); background: var(--danger-soft); }

/* The advanced quality filters are a sub-setting of the quality dropdown:
   indented, framed, and quieter than the surrounding form, so they read
   as belonging to the select above them, not as a peer field. */
.advanced-quality {
    flex-basis: 100%;
    margin: .25rem 0 0 1.25rem;
    padding: .75rem .9rem;
    border-left: 3px solid var(--accent, #4f7cff);
    background: var(--bg-2, rgba(127, 127, 127, .06));
    border-radius: 0 .5rem .5rem 0;
}
.advanced-quality .hint-box { margin-bottom: .75rem; font-size: .82rem; }

/* Why a track failed, in small quiet text under the status pill; the
   full story stays available on the pill's hover. */
.fail-note { font-size: .75rem; color: var(--text-muted, #888); margin-top: .15rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Track table: stable columns, sortable headers, pill status cells ── */
/* Fixed layout plus explicit col widths: rows cannot wobble, borders
   line up, and the actions column never gets squeezed off screen. */
.track-table { table-layout: fixed; }
.track-table .col-pos { width: 3rem; }
.track-table .col-title { width: 22%; }
.track-table .col-artist { width: 17%; }
.track-table .col-num { width: 6rem; }
.track-table .col-format { width: 5.5rem; }
.track-table .col-status { width: 9.5rem; }
.track-table .col-file { width: 12rem; }
.track-table .col-actions { width: auto; min-width: 11rem; }

/* Numeric columns hug their numbers, headers included. */
.track-table th.num, .track-table td.num { text-align: right; }
.track-table th.num .th-sort { justify-content: flex-end; }

/* Sortable header: a real button so keyboard and screen readers work. */
.track-table .th-sort {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}
.track-table .th-sort:hover { color: var(--text); }
.track-table .sort-arrow { font-size: .7rem; line-height: 1; }

/* Title, artist and File cells clip long values instead of stretching the row. */
.track-table .cell-title, .track-table .cell-artist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-table .cell-file span { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* Status cells: pill plus error note stack without stretching the row. */
.track-table .cell-status { line-height: 1.35; }
.track-table .pill-tight { padding: .05rem .45rem; min-height: 18px; }
.track-table .empty-row { text-align: center; padding: 1.5rem .75rem; color: var(--muted-2); }

/* Screen-reader-only text: the actions header is unlabeled on purpose. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Playlist detail action bar ── */
/* The action group stays one horizontal row and wraps below the title
   block on narrow screens instead of overflowing it. */
.detail-header { align-items: flex-start; }
.detail-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: .5rem;
}
@media (max-width: 900px) {
    .detail-header { flex-direction: column; }
    .detail-actions { justify-content: flex-start; }
}

/* Form labels: stacked text over input with enough vertical rhythm. */
.form-grid label { margin-bottom: .35rem; }

/* Placeholders are suggestions, not values: visibly lighter than typed text. */
input::placeholder, textarea::placeholder { color: var(--muted-2, #8a8f98); opacity: 1; }

/* Action rows: buttons plus adjacent description text (Settings test
   results, PlaylistDetails source link) get honest spacing. */
.flex-actions { gap: .75rem; flex-wrap: wrap; }
.flex-actions .text-muted,
.flex-actions .hint {
    align-self: center;
    margin-left: .35rem;
    font-size: .85rem;
}

/* Panel header action area: a lone button never hugs the heading. */
.panel-header > .flex-actions { margin-left: auto; }

/* Wide data tables (PlaylistDetails tracks, Library, Playlists, Home):
   a floor width keeps columns readable; .table-wrap scrolls the rest. */
.table-wrap .modern-table { min-width: 640px; }

/* Toast preview on Advanced keeps clear of the panel edge. */
.toast-preview { z-index: 300; max-width: min(24rem, calc(100vw - 2rem)); }

/* ── Wizard & step lists ─────────────────────────────────────────── */
/* Boxed wide toggles inside wizard bodies read as a list of choices
   instead of floating switches; tokens follow the active theme. */
.wizard-body .toggle-switch.wide {
    padding: .55rem .8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    margin-bottom: .5rem;
}

/* ── Skeleton loaders: shown while lists and grids fetch ───────── */
.skeleton {
    background: linear-gradient(90deg, rgba(39, 39, 42, .5) 25%, rgba(63, 63, 70, .6) 50%, rgba(39, 39, 42, .5) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
}
:root[data-theme="light"] .skeleton {
    background: linear-gradient(90deg, #e4e4e7 25%, #d4d4d8 50%, #e4e4e7 75%);
    background-size: 200% 100%;
}
@keyframes skeleton-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}
.skeleton-line { height: 12px; border-radius: 999px; margin: .4rem 0; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-card { height: 96px; border-radius: var(--radius); }
.skeleton-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.skeleton-row { display: grid; gap: 1rem; grid-template-columns: 2rem 3fr 2fr 1fr 1fr auto; padding: .6rem .75rem; }
.skeleton-cell { height: 14px; }
.skeleton-block { display: block; }

/* Icon sizing inside buttons and rows keeps text alignment stable. */
svg.icon { flex-shrink: 0; }