:root {
    color-scheme: dark;
    --background: #0c0e10;
    --surface: #111417;
    --surface-2: #191c20;
    --surface-3: #292e34;
    --border: #353b43;
    --text: #f0f2f4;
    --muted: #a3acb7;
    --accent: #b59aff;
    --accent-rgb: 181 154 255;
    --accent-soft: rgb(var(--accent-rgb) / 12%);
    --accent-gradient: linear-gradient(135deg, #6541cc 0%, #8238b8 52%, #a72a91 100%);
    --success: #62d68b;
    --success-soft: rgb(98 214 139 / 12%);
    --track-duration: 240ms;
    --track-easing: ease-out;
    --danger: #ff9b94;
    --warning: #e8c66a;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --radius: .55rem;
    --radius-lg: 1rem;
    --shadow: 0 18px 48px #0005;
    --transition: 140ms ease;
    --focus-ring: 2px solid var(--accent);
    --sidebar-width: 224px;
    --player-height: 0px;
}
html { scrollbar-gutter: stable; scroll-padding-bottom: calc(var(--player-height) + 1rem); }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--background); color: var(--text); }
a { color: var(--text); text-underline-offset: .18em; }
a:hover { color: var(--accent); }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: 750; letter-spacing: -.035em; }
h2 { font-size: 1.1rem; font-weight: 700; }
h1:focus { outline: none; }
:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
button, input, select, textarea, summary, a { -webkit-tap-highlight-color: transparent; }
button, summary { touch-action: manipulation; }
button:disabled { cursor: not-allowed; }
.ti, .tif { font-size: 1.15rem; }
/* Tabler renders font glyphs: center the glyph inside its box as well as the box in its container. */
.ti, .tif, .tabler-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; flex-shrink: 0; line-height: 1; vertical-align: middle; }
.page-heading { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 1.25rem; }
.page-heading > div { min-width: 0; }
.page-heading h1 { margin-bottom: .35rem; }
.page-heading p { margin-bottom: 0; color: var(--muted); }
.page-transition { min-width: 0; animation: page-transition-enter 145ms cubic-bezier(.2, .72, .32, 1); }
.panel, .metric-card { min-width: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem; }
.panel-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.panel-title h2, .panel-title h3 { margin: 0; font-size: 1.05rem; }
.panel-subtitle, .muted, .track-meta, .form-text { color: var(--muted); font-size: .82rem; }
.dashboard-grid, .content-grid, .metric-grid { display: grid; gap: 1rem; }
.dashboard-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }
.metric-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.metric-label { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .05em; }
.metric-value { margin-top: .5rem; font-size: 1.4rem; font-weight: 750; }
.metric-value.small { font-size: 1rem; }
.status-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .55rem; border-radius: 99px; font-size: .72rem; font-weight: 650; background: var(--surface-3); color: var(--muted); }
.status-pill.ok { background: var(--success-soft); color: var(--success); }
.status-pill.bad { background: #ff9b9415; color: var(--danger); }
.status-pill.warn { background: #e8c66a15; color: var(--warning); }
.form-label { font-size: .8rem; font-weight: 650; color: var(--muted); }
.form-control, .form-select { min-width: 0; min-height: 44px; background-color: var(--surface); border-color: var(--border); border-radius: var(--radius); color: var(--text); }
.form-control:focus, .form-select:focus { color: var(--text); background-color: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.form-control::placeholder { color: #909ba8; }
.form-control:disabled, .form-select:disabled { color: var(--muted); background-color: var(--surface-3); opacity: .65; }
.form-select option { background: var(--surface); color: var(--text); }
.form-check-input { background-color: var(--surface); border-color: var(--border); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.form-check-input:checked { background-color: #7149cb; border-color: var(--accent); }
.input-group-text { background: var(--surface-3); color: var(--muted); border-color: var(--border); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; border-radius: var(--radius); font-weight: 650; transition: background-color var(--transition), border-color var(--transition); }
.btn-sm { font-size: .78rem; }
.btn-primary { --bs-btn-focus-shadow-rgb: 181, 154, 255; --bs-btn-active-bg: #5b36bd; --bs-btn-active-border-color: var(--accent); color: #fff; background: #6541cc; border-color: #8865df; }
.btn-primary:hover, .btn-primary:focus-visible { color: #fff; background: #7350d5; border-color: var(--accent); }
.btn-primary:disabled { color: var(--muted); background: var(--surface-3); border-color: var(--border); opacity: .6; }
.btn-success { color: #0c2716; background: var(--success); border-color: var(--success); }
.btn-success:hover { color: #0c2716; background: #80e3a3; border-color: #80e3a3; }
.btn-success:disabled { background: var(--success); border-color: var(--success); opacity: .5; }
.btn-primary-action { --bs-btn-active-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-focus-shadow-rgb: 181, 154, 255; color: #fff; background: var(--accent-gradient); border: 1px solid rgb(var(--accent-rgb) / 40%); box-shadow: 0 5px 18px rgb(126 65 211 / 18%), inset 0 1px rgb(255 255 255 / 12%); transition: box-shadow var(--transition), filter var(--transition), transform var(--transition); }
.btn-primary-action:hover { color: #fff; border-color: rgb(var(--accent-rgb) / 70%); filter: brightness(1.08); box-shadow: 0 7px 22px rgb(126 65 211 / 26%), inset 0 1px rgb(255 255 255 / 16%); }
.btn-primary-action:focus-visible { color: #fff; outline: var(--focus-ring); outline-offset: 3px; }
.btn-primary-action:active { color: #fff; transform: translateY(1px); filter: brightness(.95); }
.btn-primary-action:disabled, .btn-primary-action.disabled { color: var(--muted); background: var(--surface-3); border-color: var(--border); box-shadow: none; filter: none; transform: none; opacity: .6; }
.btn-outline-secondary { color: var(--text); border-color: var(--border); background: transparent; }
.btn-outline-secondary:hover, .btn-outline-secondary.active { color: var(--text); border-color: #727d8a; background: var(--surface-3); }
.btn-outline-secondary[aria-pressed=true], .favorite-track-button.added { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.btn-outline-danger { color: var(--danger); border-color: #a9514d; }
.btn-outline-warning { color: var(--warning); border-color: #a18a43; }
.icon-button, .cache-icon-button, .favorite-track-button:not(:has(.text-box-trim)) { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; gap: 0; }
.btn > .spinner-border { flex-shrink: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border); margin-bottom: 0; }
.table th { font-size: .75rem; color: var(--muted); font-weight: 650; }
.table td { vertical-align: middle; }
.empty-state { padding: 2rem 1rem; color: var(--muted); text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); }
.track-title { color: var(--text); font-size: .94rem; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; text-decoration: none; }
.track-meta { overflow-wrap: anywhere; }
.track-list { display: grid; }
.music-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: .8rem; align-items: center; min-width: 0; padding: .8rem .5rem; border-bottom: 1px solid var(--border); transition: background-color var(--transition); }
.music-row:hover, .music-row:focus-within { background: #ffffff05; }
.library-row { grid-template-columns: 56px minmax(0, 1fr) auto; }
.music-copy { min-width: 0; }
.music-duration { color: var(--muted); font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.music-actions { display: flex; align-items: center; justify-content: end; flex-wrap: wrap; gap: var(--space-2); }
.music-artwork { width: 96px; height: 54px; aspect-ratio: 16 / 9; display: grid; place-items: center; flex-shrink: 0; overflow: hidden; border-radius: var(--radius); background: var(--surface-3); color: var(--muted); }
.music-artwork img { width: 100%; height: 100%; object-fit: contain; }
.track-thumbnail { width: 56px; height: 56px; object-fit: cover; background: var(--surface-3); border-radius: var(--radius); }
.track-thumbnail-button, .cache-thumbnail-button { position: relative; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface-3); }
.track-thumbnail-overlay, .cache-thumbnail-overlay { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; color: white; background: #0008; }
.track-thumbnail-button:hover .track-thumbnail-overlay, .track-thumbnail-button:focus-visible .track-thumbnail-overlay, .cache-thumbnail-button:hover .cache-thumbnail-overlay, .cache-thumbnail-button:focus-visible .cache-thumbnail-overlay { opacity: 1; }
.track-thumbnail-placeholder { display: grid; place-items: center; }
.track-skeleton { min-height: 160px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); border-radius: var(--radius); }
.subtle-feedback { display: block; min-height: 1.25rem; color: var(--muted); font-size: .8rem; }
.app-dialog { width: min(580px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); color: var(--text); box-shadow: var(--shadow); overflow-y: auto; }
.app-dialog[open] { animation: modal-enter 180ms ease-out; overscroll-behavior: contain; }
.app-dialog::backdrop { background: var(--modal-backdrop, #000a); animation: modal-backdrop-enter 180ms ease-out; }
/* Keep the viewport and its scrollbar stable while any modal owns interaction. */
html { scrollbar-gutter: stable; }
html:has(.app-dialog[open]),
html:has(#components-reconnect-modal.reconnect-modal-visible:not(.components-reconnect-hide)),
body:has(.app-dialog[open]),
body:has(#components-reconnect-modal.reconnect-modal-visible:not(.components-reconnect-hide)) { overflow: hidden; overscroll-behavior: none; }
@keyframes modal-enter { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes modal-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.dialog-heading h2 { margin: 0; }
.alert-danger { background: #ff9b9412; border-color: #ff9b9460; color: var(--danger); }
.alert-success { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.alert-info { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.code-value { font-family: ui-monospace, monospace; font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.list-group-item { background: var(--surface); border-color: var(--border); color: var(--text); }
.pagination-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.validation-message, .invalid { color: var(--danger); }
.invalid { outline: 1px solid var(--danger); }
.text-muted { color: var(--muted) !important; }
.app-select-shell { position: relative; }
.app-select-leading, .app-select-chevron { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); }
.app-select-leading { left: .75rem; }
.app-select-chevron { right: .75rem; }
.form-select.app-select { appearance: none; padding-left: 2.4rem; padding-right: 2.4rem; background-image: none; }
.form-select.app-select-without-leading { padding-left: .75rem; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 10000; padding: .75rem; background: var(--surface-2); }
.skip-link:focus { top: 1rem; }
/* Sorting visuals are global: the compositor drop overlay is cloned outside the component. */
.queue-sortable-row { animation: ui-list-item-enter 180ms ease-out; grid-template-columns: 44px 96px minmax(0, 1fr) auto auto; position: relative; }
.queue-drag-handle { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 44px; width: 44px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: grab; touch-action: none; user-select: none; }
.queue-drag-handle:hover { color: var(--text); }
.queue-drag-handle.disabled { cursor: not-allowed; opacity: .5; }
.queue-position { font-size: .75rem; font-variant-numeric: tabular-nums; }
.queue-sortable-row.is-dragging { z-index: 3; background: var(--surface-3); box-shadow: var(--shadow); }
.queue-sortable-body.is-dragging .queue-sortable-row { animation: none; }
body.queue-sort-active, body.queue-sort-active * { cursor: grabbing !important; user-select: none !important; }
.queue-sort-drop-overlay { position: fixed; pointer-events: none; z-index: 5; margin: 0; }
.queue-sort-drop-overlay * { pointer-events: none !important; }
@media (max-width: 1050px) { .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: span 12; } }
@media (max-width: 650px) {
    .page-heading { flex-wrap: wrap; }
    .panel { padding: .9rem; }
    .music-row, .library-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: .6rem; }
    .music-artwork { width: 80px; height: 45px; }
    .music-actions { grid-column: 2 / -1; justify-content: start; }
    .queue-sortable-row { grid-template-columns: 44px 80px minmax(0, 1fr); }
    .queue-drag-handle { width: 44px; }
    .queue-sortable-row .music-duration { grid-column: 2; font-size: .73rem; }
    .queue-sortable-row .music-actions { grid-column: 3; justify-content: end; }
    .app-dialog { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.connection-gate { position: fixed; inset: 0; z-index: 100; overflow: auto; min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; background: var(--background); }
.connection-loading { display: flex; align-items: center; gap: 1rem; width: min(100%, 34rem); padding: 1.4rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); }
.connection-loading strong, .connection-loading > div span { display: block; }
.connection-loading span { color: var(--muted); font-size: .85rem; }
.connection-loading-error-icon { color: var(--danger); font-size: 1.5rem; }
.connection-loading-retry { margin-top: 1rem; }

.connection-loading > .spinner-border { flex: 0 0 2rem; }
.loading-state { min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 2rem 1rem; color: var(--muted); text-align: center; }
.loading-state > .spinner-border { flex-shrink: 0; }
details > summary { display: flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.disclosure-chevron, .control-chevron { transition: transform var(--transition); }
details[open] > summary .disclosure-chevron, [aria-expanded=true] > .control-chevron { transform: rotate(180deg); }
.form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3acb7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-size: 20px 20px; }
.ui-list-item-enter { animation: ui-list-item-enter 180ms ease-out; }
@keyframes page-transition-enter { from { opacity: .72; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ui-list-item-enter { from { opacity: 0; } to { opacity: 1; } }

.media-list { container-type: inline-size; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.media-row, .media-list-header { display: grid; grid-template-columns: minmax(200px, 1fr) repeat(var(--media-detail-columns, 1), minmax(4.5rem, auto)) auto; align-items: center; gap: .75rem; min-width: 0; padding: .75rem; }
.media-row { border-bottom: 1px solid var(--border); transition: background-color var(--transition); }
.media-row:last-child { border-bottom: 0; }
.media-row:hover, .media-row:focus-within { background: var(--surface-2); }
.media-track { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.media-track .track-title { display: block; }
.media-detail { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.media-detail::before { content: attr(data-label); display: block; color: var(--muted); font-size: .7rem; }
.media-row .music-actions { grid-column: auto; justify-content: flex-end; }
.media-row .track-meta { font-size: .8rem; }
.media-row .music-artwork { width: 96px; height: 54px; }
.media-list-header { border-bottom: 1px solid var(--border); color: var(--muted); font-size: .75rem; }
.media-list-detailed .media-row, .media-list-detailed .media-list-header { grid-template-columns: minmax(220px, 1fr) repeat(var(--media-detail-columns), minmax(4rem, .3fr)) minmax(150px, .7fr); }
.media-list .cache-thumbnail-button { flex: 0 0 auto; }
@container (max-width: 1050px) {
    .media-list-detailed .media-row { display: flex; flex-wrap: wrap; }
    .media-list-detailed .media-track { flex: 1 1 100%; }
    .media-list-detailed .media-detail { flex: 1 1 80px; }
    .media-list-detailed .music-actions { flex: 1 1 100%; }
    .media-list-detailed .media-list-header { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
    .media-list-detailed .media-list-header > span:last-child { display: none; }
}
@container (max-width: 650px) {
    .media-row { display: flex; flex-wrap: wrap; }
    .media-track { flex: 1 1 100%; }
    .media-detail { flex: 1 1 80px; }
    .media-row .music-actions { flex: 1 1 100%; }
    .media-row .music-artwork { width: 80px; height: 45px; }
}

.media-list-no-details > .media-row { grid-template-columns: minmax(0, 1fr) auto; }
.media-metadata { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; }

.media-row .music-artwork-square { width: 64px; height: 64px; aspect-ratio: 1; }
@media (max-width: 700px) { .media-row .music-artwork-square { width: 56px; height: 56px; } }