/* =====================================================================
   album-edit.css — functional rules for the release create/edit screens.
   The 2026 visual design lives in the ".sz-*" block at the bottom of this
   file and in simuze-2026.css. Only behaviour-critical legacy rules
   (tab visibility, status badges, tags, notices, audio preview, overlay)
   are kept here; the old dark-card layout CSS was removed in the re-skin.
   ===================================================================== */

/* Track tab visibility — the JS toggles inline display on click; these set
   the initial state (only the .active track form is shown). */
.track-content { display: none; }
.track-content.active { display: block; }

/* Delete button */
.button-link-delete,
.delete-album { background: rgba(226,148,148,0.12); color: #e29494; border: 1px solid rgba(194,107,107,0.4); }
.button-link-delete:hover,
.delete-album:hover { background: rgba(226,148,148,0.2); color: #e29494; }

/* Status info + badges */
.status-info { margin-top: 4px; padding: 15px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; font-size: 0.9em; color: rgba(255,255,255,0.8); }
.current-status { margin-bottom: 10px; color: #fff; }
.status-badge {
    display: inline-flex !important; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px; font-size: 0.8em; font-weight: 600;
    position: relative !important; top: auto !important; right: auto !important; z-index: auto !important;
}
.header-status-badge {
    margin-left: 12px; font-size: 0.75em; vertical-align: middle;
    position: relative !important; top: auto !important; right: auto !important;
    display: inline-flex !important; z-index: auto !important;
}
.album-edit-header .header-status-badge,
.album-edit-header h2 .header-status-badge,
h2 .header-status-badge {
    position: relative !important; top: auto !important; right: auto !important;
    left: auto !important; bottom: auto !important; display: inline-flex !important;
    margin-left: 12px !important; float: none !important;
}
.status-draft { background: rgba(255,215,0,0.12); color: #ffd700; border: 1px solid rgba(255,215,0,0.5); }
.status-published { background: rgba(168,213,186,0.14); color: var(--sz-accent); border: 1px solid var(--sz-accent); }
.status-scheduled { background: rgba(168,197,255,0.12); color: #a8c5ff; border: 1px solid rgba(168,197,255,0.6); }
.status-under_review { background: rgba(255,168,168,0.12); color: #ffa8a8; border: 1px solid rgba(255,168,168,0.6); }

/* Loading overlay */
.loading-overlay { position: fixed; inset: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 9999; }
/* Saving indicator — only the Simuze S, gently pulsing (no spinner). */
.loading-mark { width: 72px; height: 72px; background: url('../images/favicon_simuze_white.svg') center/contain no-repeat; animation: sz-loading-pulse 1.1s ease-in-out infinite; }
@keyframes sz-loading-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.hidden { display: none !important; }

/* Tags input */
.tags-input-container { border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 10px; background: rgba(255,255,255,0.04); }
.tag-display { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tag-display:empty { margin-bottom: 0; }
.tag { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff; padding: 5px 10px; border-radius: 6px; font-size: 0.8em; display: inline-flex; align-items: center; gap: 8px; }
.remove-tag { cursor: pointer; font-weight: bold; padding: 0 2px; color: #e29494; }
.remove-tag:hover { background: rgba(226,148,148,0.18); border-radius: 3px; }
.tag-input { border: none; outline: none; width: 100%; padding: 5px 0; font-size: 14px; background: transparent; color: #fff; }

/* Notices */
.notice { padding: 14px 15px; margin-bottom: 18px; border-radius: 8px; }
.notice-success { background: rgba(168,213,186,0.12); color: var(--sz-accent); border: 1px solid var(--sz-accent); }
.notice-error { background: rgba(255,107,107,0.12); color: #ff8a8a; border: 1px solid rgba(255,107,107,0.6); }
.notice.is-dismissible { position: relative; padding-right: 40px; }
.notice.is-dismissible::after { content: '×'; position: absolute; top: 10px; right: 15px; font-size: 1.4em; cursor: pointer; color: rgba(255,255,255,0.5); }
.notice.is-dismissible:hover::after { color: #fff; }

/* Admin debug blocks */
.debug-info, .debug-track-info, .track-debug-info {
    background: rgba(0,0,0,0.35) !important; border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--sz-accent) !important; font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
    font-size: 12px; padding: 12px; border-radius: 8px; margin-bottom: 15px;
}
.debug-info strong, .debug-track-info strong, .track-debug-info strong { color: #fff !important; }
.debug-track-info pre, .track-debug-info pre { color: var(--sz-accent); background: transparent; margin: 8px 0 0 0; }

/* No-tracks empty message */
.no-tracks-message { color: rgba(255,255,255,0.6); padding: 14px 0; }
.no-tracks-hint { font-size: 13px; color: rgba(255,255,255,0.45); }

/* Audio preview player (track-edit + single file row) */
.simuze-track-preview { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 12px 16px; color: #fff; }
.simuze-track-preview .preview-play-btn { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; border: none; background: var(--sz-accent); color: #0a0a0a; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease; }
.simuze-track-preview .preview-play-btn:hover { background: var(--sz-accent-hover); }
.simuze-track-preview .preview-play-btn .sz-ic { width: 16px; height: 16px; }
.simuze-track-preview .preview-meta { flex: 1; min-width: 0; }
.simuze-track-preview .preview-title { display: block; color: #fff; font-size: 14px; font-weight: 500; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.simuze-track-preview .preview-scrubber { height: 6px; background: rgba(255,255,255,0.12); border-radius: 3px; cursor: pointer; overflow: hidden; position: relative; }
.simuze-track-preview .preview-progress { height: 100%; width: 0%; background: var(--sz-accent); border-radius: 3px; transition: width 0.1s linear; }
.simuze-track-preview .preview-time { color: rgba(255,255,255,0.5); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; }
.simuze-track-preview audio { display: none; }
/* =====================================================================
   2026 release-edit re-skin (ported from Simuze Design System)
   Scoped under .sz-release-edit so it overrides the legacy album-edit
   look without touching other screens. Form primitives (.sz-field,
   .sz-input, .sz-select, .sz-textarea, .sz-modal*) already live in
   simuze-2026.css and are reused as-is.
   ===================================================================== */
.sz-release-edit { background: transparent; color: #fff; padding: 0; border-radius: 0; max-width: none; }

/* edit header */
.sz-edit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 0 0 8px; }
.sz-edit-head__title { display: flex; align-items: center; gap: 12px; }
.sz-edit-head__title .sz-ic { width: 26px; height: 26px; color: var(--sz-accent); flex: none; }
.sz-edit-head__title h1 { margin: 0; }
.sz-edit-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sz-edit-lede { color: rgba(255,255,255,0.55); margin: 0 0 24px; max-width: 640px; }

/* sections */
.sz-editsec { container-type: inline-size; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; background: rgba(255,255,255,0.02); padding: 26px; margin: 0 0 22px; }
.sz-editsec__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 0 0 18px; margin: 0 0 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sz-editsec__title { display: flex; align-items: center; gap: 11px; font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 1.25rem; color: #fff; }
.sz-editsec__title .sz-ic { width: 21px; height: 21px; color: var(--sz-accent); flex: none; }
.sz-editsec__title small, .sz-editsec__title .track-count { font-weight: 500; font-size: 0.95rem; color: rgba(255,255,255,0.45); font-family: 'Inter Tight', sans-serif; }
.sz-editsec__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* artwork + fields block */
.sz-artblock { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.sz-artwork { flex: none; width: 200px; }
.sz-artwork__hint { font-size: 12.5px; color: rgba(255,255,255,0.4); margin: 12px 0 0; line-height: 1.5; max-width: 200px; }
.sz-artblock__fields { flex: 1; min-width: 280px; }
/* Artwork uploader: stacked 200px preview, then a Change-artwork + Remove row below
   it (mockup) — no card, no label. */
.sz-artwork .sz-upload--square { flex-direction: column; align-items: flex-start; gap: 0; }
.sz-artwork .sz-upload--square .sz-upload__preview { width: 200px; height: 200px; border-radius: 12px; }
/* "Change artwork" stays on one line; Remove wraps below it when there's no room. */
.sz-artwork__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 14px 0 0; }
.sz-artwork__row .sz-upload__actions { justify-content: flex-start; margin: 0; }
.sz-artwork .sz-upload__btn { white-space: nowrap; }
.sz-artwork__remove { font-size: 13px; color: rgba(226,148,148,0.85); cursor: pointer; background: 0; border: 0; padding: 0; font-family: inherit; }
.sz-artwork__remove:hover { color: #e29494; text-decoration: underline; }

/* two-pane track editor (left rail + right panel) — the left rail is the
   mockup's .sz-tracklist of .track-tab.sz-tkrow rows (the tab-switch JS keys
   on the .track-tab class, so <div> rows work the same as the old <li>). */
.sz-trackedit { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 22px; align-items: start; }
@container (max-width: 660px) { .sz-trackedit { grid-template-columns: minmax(0,1fr); } }
.sz-trackedit > div:first-child { min-width: 0; }
.sz-trackedit .tabs-content { min-width: 0; }
.sz-trackedit .sz-tracklist { display: flex; flex-direction: column; gap: 7px; min-width: 0; list-style: none; margin: 0; padding: 0; }
.sz-trackedit .sz-tracklist__add { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sz-tkrow { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.sz-tkrow:hover { border-color: rgba(255,255,255,0.18); }
.sz-tkrow.active, .sz-tkrow.is-active { border-color: var(--sz-accent); background: rgba(168,213,186,0.1); }
.sz-tkrow > div { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.sz-tkrow .drag-handle { color: rgba(255,255,255,0.3); cursor: grab; flex: none; display: flex; position: static; transform: none; left: auto; top: auto; z-index: auto; background: 0; border: 0; padding: 0; }
.sz-tkrow .drag-handle .sz-ic { width: 16px; height: 16px; }
.sz-tkrow .track-number { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
.sz-tkrow.active .track-number, .sz-tkrow.is-active .track-number { background: var(--sz-accent); color: #0a0a0a; }
.sz-tkrow .track-name { flex: 1; min-width: 0; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.sz-tkrow .track-linked-tag { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.sz-tkrow .remove-track-btn { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: rgba(255,255,255,0.4); background: 0; border: 0; cursor: pointer; opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease; }
.sz-tkrow:hover .remove-track-btn, .sz-tkrow.active .remove-track-btn, .sz-tkrow.is-active .remove-track-btn { opacity: 1; }
.sz-tkrow .remove-track-btn:hover { background: rgba(226,148,148,0.16); color: #e29494; }
.sz-tkrow .remove-track-btn .sz-ic { width: 14px; height: 14px; }

/* Drag/drop reorder (Sortable.js). The grip is the drag handle; the row body still
   clicks to switch tabs. */
.sz-tkrow .drag-handle { cursor: grab; }
.sz-tkrow .drag-handle:active { cursor: grabbing; }
/* Placeholder slot that previews where the track will drop — a dashed accent line. */
.sz-tkrow--ghost { opacity: 1; background: transparent; border: 1px dashed var(--sz-accent); box-shadow: none; }
.sz-tkrow--ghost > div { visibility: hidden; }
/* The row being dragged (the floating copy / chosen source). */
.sz-tkrow--chosen { cursor: grabbing; }
.sz-tkrow--drag { opacity: 0.9; border-color: var(--sz-accent); background: rgba(168,213,186,0.12); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }

.sz-trackpanel { border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: rgba(255,255,255,0.015); padding: 22px; min-width: 0; }
.sz-trackpanel__name { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 1.05rem; color: #fff; margin: 0 0 18px; display: flex; align-items: center; gap: 9px; }
.sz-trackpanel__name .sz-ic { width: 18px; height: 18px; color: var(--sz-accent); }
.sz-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 5px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); letter-spacing: 0.03em; }

/* mini player (track audio preview) */
.sz-miniplayer { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); margin: 4px 0 22px; }
.sz-miniplayer__play { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--sz-accent); color: #0a0a0a; display: grid; place-items: center; cursor: pointer; transition: background .15s ease, transform .1s ease; }
.sz-miniplayer__play:hover { background: var(--sz-accent-hover); }
.sz-miniplayer__play:active { transform: scale(0.94); }
.sz-miniplayer__play .sz-ic { width: 18px; height: 18px; }
.sz-miniplayer__main { flex: 1; min-width: 0; }
.sz-miniplayer__title { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sz-miniplayer__bar { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.sz-miniplayer__track { flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; cursor: pointer; }
.sz-miniplayer__fill { width: 0%; height: 100%; background: var(--sz-accent); border-radius: 999px; }
.sz-miniplayer__time { font-size: 12px; color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; flex: none; }

/* mood grid */
.sz-moodgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.sz-moodcard { min-width: 0; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: rgba(255,255,255,0.025); padding: 16px 18px; }
.sz-moodcard__name { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 14px; color: #fff; margin: 0 0 14px; }
.sz-moodcard__slider { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sz-moodcard__end { font-size: 12px; color: rgba(255,255,255,0.55); flex: none; }
.sz-moodcard__end--hi { text-align: right; }
.sz-moodcard__slider input[type=range] { flex: 1; min-width: 0; width: 100%; accent-color: var(--sz-accent); height: 4px; }
.sz-moodcard__val { flex: none; min-width: 30px; height: 28px; padding: 0 6px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; background: rgba(168,213,186,0.16); color: var(--sz-accent); }

/* add-track / existing-single / delete modals */
.sz-modal--wide { max-width: 600px; }
.sz-modal--wide .button { width: auto; }
.sz-modal__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); }
.sz-modal__foot .button { width: auto; margin: 0; }
.sz-filepick { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); flex-wrap: wrap; }
.sz-filepick__btn { flex: none; }
.sz-filepick__name { font-size: 13.5px; color: rgba(255,255,255,0.5); }
.sz-pick-list { display: flex; flex-direction: column; gap: 7px; max-height: 320px; overflow: auto; margin: 4px 0 0; }
.sz-pick-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.sz-pick-row:hover { border-color: rgba(255,255,255,0.2); }
.sz-pick-row.is-checked { border-color: var(--sz-accent); background: rgba(168,213,186,0.1); }
.sz-pick-row__art { flex: none; width: 40px; height: 40px; border-radius: 7px; background: linear-gradient(135deg,#1A1F2E,#2A3042); background-size: cover; background-position: center; }
.sz-pick-row__main { flex: 1; min-width: 0; }
.sz-pick-row__title { font-size: 14px; font-weight: 500; color: #fff; }
.sz-pick-row__meta { font-size: 12px; color: rgba(255,255,255,0.5); }
.sz-pick-row__check { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.25); display: grid; place-items: center; }
.sz-pick-row.is-checked .sz-pick-row__check { background: var(--sz-accent); border-color: var(--sz-accent); }
.sz-pick-row__check .sz-ic { width: 13px; height: 13px; color: #0a0a0a; opacity: 0; }
.sz-pick-row.is-checked .sz-pick-row__check .sz-ic { opacity: 1; }

/* status pill shown next to the edit title */
.sz-edit-head .status-badge { font-size: 12px; padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }

/* release-type toggle (read-only: reflects the type, non-current option disabled) */
.sz-typetoggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 11px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); margin: 0 0 24px; }
.sz-typetoggle button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 8px; border: 0; background: transparent; color: rgba(255,255,255,0.6); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; }
.sz-typetoggle button .sz-ic { width: 16px; height: 16px; }
.sz-typetoggle button.is-active { background: var(--sz-accent); color: #0a0a0a; }
.sz-typetoggle button:not(.is-active):hover { color: #fff; }
.sz-typetoggle button[disabled] { cursor: default; opacity: .5; }
.sz-typetoggle button[disabled]:hover { color: rgba(255,255,255,0.6); }

/* scope the album/single section visibility to the edit container (no global leak) */
.sz-release-edit[data-rt="single"] [data-album-only] { display: none !important; }
.sz-release-edit[data-rt="album"] [data-single-only] { display: none !important; }

/* bottom action bar — Delete pinned left (mockup), save buttons right */
.sz-form-actions .delete-album { margin-right: auto; }
.sz-form-actions .button { width: auto; margin: 0; }

/* delete-confirm modal icon */
.sz-confirm-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(226,145,143,0.15); margin: 0 0 16px; }
.sz-confirm-ic .sz-ic { width: 24px; height: 24px; color: #e2918f; }
.sz-modal__sub--muted { color: rgba(255,255,255,0.6) !important; }
.sz-modal .sz-check { margin: 4px 0; }

/* add-track panel — restyled to the 2026 card look (rendered inside #addTrackModal) */
.sz-addtrack { margin-top: 20px; }
.sz-modal.sz-addtrack { margin-top: 0; max-height: 88vh; overflow: auto; }
body.sz-modal-open { overflow: hidden; }
.sz-addtrack .sz-trackpanel__name button.sz-addtrack__close { margin-left: auto; background: 0; border: 0; color: rgba(255,255,255,0.5); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.sz-addtrack .sz-trackpanel__name button.sz-addtrack__close:hover { color: #fff; }
.sz-addtrack__files { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,0.7); }
.sz-addtrack__files ul { margin: 5px 0 0; padding-left: 20px; }
.sz-addtrack__progress { margin: 4px 0 16px; }
.sz-addtrack__progress .upload-progress-bar { width: 100%; height: 8px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.sz-addtrack__progress #upload-progress-fill { width: 0%; height: 100%; background: var(--sz-accent); transition: width .3s ease; }
.sz-addtrack__progress #upload-progress-text { margin-top: 6px; font-size: 12px; color: var(--sz-accent); }
.sz-addtrack__progress #upload-status-text { margin-top: 4px; font-size: 12px; color: rgba(255,255,255,0.5); }
.sz-addtrack__progress-list { margin-top: 20px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: rgba(255,255,255,0.02); padding: 16px 18px; }
#add-track-droparea.dragging { border-color: var(--sz-accent); background: rgba(168,213,186,0.06); }
.sz-addtrack__progress-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 0; padding: 10px; background: rgba(255,255,255,0.03); border-radius: 4px; border-left: 3px solid var(--sz-accent); }
.sz-addtrack__progress-item .filename { color: rgba(255,255,255,0.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-addtrack__progress-item .file-status { color: var(--sz-accent); flex-shrink: 0; }
.sz-addtrack__progress-item .file-status.is-err { color: #ff6b6b; }

/* Mood range input inside a moodcard — track + accent thumb (the legacy light
   .mood-slider base styling was removed from forms.css/components.css). */
.sz-moodcard__slider .mood-slider { background: rgba(255,255,255,0.18); accent-color: var(--sz-accent); }
.sz-moodcard__slider .mood-slider::-webkit-slider-thumb { background: var(--sz-accent); }
.sz-moodcard__slider .mood-slider::-moz-range-thumb { background: var(--sz-accent); }