/* The music studio's side panels: the mixer (.mu-mx-*), the sample browser (.mu-sb-*) and the tabs inside it: Make (AI) (.mu-ai-*),
   Online (.mu-ol-*) and Add (.mu-ad-*), built by js/music-panels*.js. Like the audio studio it borrows the photo editor's chrome
   (.pe-btn, .pe-input, .pe-seg, .pe-menu, dialogs, toasts) and the video editor's tab bar (.ve-tabs/.ve-tab); the colours come
   from the app's tokens, so both themes follow the rest of the site. Only canvas colours, meters and LEDs are defined here. */

.mu-sb, .mu-mx {
    --mu-line: var(--pe-line, var(--rl-border));
    --mu-wave: var(--rl-accent);
    --mu-wave-dim: var(--rl-text-muted);
    --mu-meter-bg: #d3d8e0;
    --mu-peak: #1b2230;
    --mu-groove: #c3c9d3;
    --mu-led-off: #d7dbe3;
    --mu-warn: #b45309;
    --mu-cut: var(--rl-danger);
    --mu-slice-shade: rgba(47, 109, 246, .09);
    --mu-cap-a: #fdfdfe;
    --mu-cap-b: #dfe3ea;
}
@media (prefers-color-scheme: dark) {
    .mu-sb, .mu-mx {
        --mu-meter-bg: #0f1114; --mu-peak: #f4f6fa; --mu-groove: #0c0e11; --mu-led-off: #2a2f38; --mu-warn: #f5a524; --mu-cut: var(--rl-danger);
        --mu-slice-shade: rgba(111, 155, 255, .12); --mu-cap-a: #5b6372; --mu-cap-b: #3a404b;
    }
}
:root[data-theme="light"] .mu-sb, :root[data-theme="light"] .mu-mx {
    --mu-meter-bg: #d3d8e0; --mu-peak: #1b2230; --mu-groove: #c3c9d3; --mu-led-off: #d7dbe3; --mu-warn: #b45309; --mu-cut: var(--rl-danger);
    --mu-slice-shade: rgba(47, 109, 246, .09); --mu-cap-a: #fdfdfe; --mu-cap-b: #dfe3ea;
}
:root[data-theme="dark"] .mu-sb, :root[data-theme="dark"] .mu-mx {
    --mu-meter-bg: #0f1114; --mu-peak: #f4f6fa; --mu-groove: #0c0e11; --mu-led-off: #2a2f38; --mu-warn: #f5a524; --mu-cut: var(--rl-danger);
    --mu-slice-shade: rgba(111, 155, 255, .12); --mu-cap-a: #5b6372; --mu-cap-b: #3a404b;
}

.mu-sb [hidden], .mu-mx [hidden] { display: none !important; }
.mu-sb *, .mu-mx * { box-sizing: border-box; }
.mu-grow { flex: 1 1 0; min-width: 0; }

/* ---- shared bits ---- */
.mu-btn { border: 1px solid var(--mu-line); background: var(--rl-surface-raised); color: var(--rl-text); border-radius: 8px; padding: .35rem .75rem; cursor: pointer; font: inherit; line-height: 1.25; white-space: nowrap; }
.mu-btn:hover:not(:disabled) { background: var(--rl-surface-sunken); }
.mu-btn:disabled { opacity: .5; cursor: default; }
.mu-btn--sm { padding: .2rem .55rem; font-size: .76rem; }
.mu-btn--primary { background: var(--rl-accent); border-color: var(--rl-accent); color: var(--rl-accent-contrast); font-weight: 600; }
.mu-btn--primary:hover:not(:disabled) { background: var(--rl-accent); filter: brightness(1.08); }
.mu-btn--quiet { border-color: transparent; background: transparent; color: var(--rl-text-muted); }
.mu-btn[aria-pressed="true"] { background: var(--rl-accent); border-color: var(--rl-accent); color: var(--rl-accent-contrast); }
.mu-btn:focus-visible, .mu-chip:focus-visible, .mu-sb-play:focus-visible, .mu-way:focus-visible, .mu-ms:focus-visible, .mu-clip:focus-visible { outline: 2px solid var(--rl-accent); outline-offset: 2px; }

.mu-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.mu-chip { border: 1px solid var(--mu-line); background: var(--rl-surface); color: var(--rl-text); border-radius: 999px; padding: .15rem .65rem; font: inherit; font-size: .74rem; cursor: pointer; white-space: nowrap; line-height: 1.4; }
.mu-chip:hover { background: var(--rl-surface-sunken); }
.mu-chip.is-on { background: var(--rl-accent); color: var(--rl-accent-contrast); border-color: var(--rl-accent); }
.mu-chip--soft { background: var(--rl-surface-raised); }

.mu-pill { font-size: .64rem; padding: 0 .4rem; border-radius: 999px; background: var(--rl-surface-sunken); color: var(--rl-text-muted); border: 1px solid var(--mu-line); line-height: 1.55; white-space: nowrap; }
.mu-pill--cat { background: color-mix(in srgb, var(--rl-accent) 14%, transparent); color: var(--rl-text); border-color: color-mix(in srgb, var(--rl-accent) 30%, transparent); }

.mu-lic { font-size: .64rem; padding: 0 .42rem; border-radius: 999px; border: 1px solid currentColor; line-height: 1.55; white-space: nowrap; cursor: help; }
.mu-lic--free { color: var(--rl-ok); background: color-mix(in srgb, var(--rl-ok) 12%, transparent); }
.mu-lic--credit { color: var(--rl-accent); background: color-mix(in srgb, var(--rl-accent) 12%, transparent); }
.mu-lic--restricted { color: var(--mu-warn); background: color-mix(in srgb, var(--mu-warn) 13%, transparent); }
.mu-lic--unknown { color: var(--rl-text-muted); }

.mu-h { margin: .2rem 0 -.1rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rl-text-muted); font-weight: 650; }

.mu-state { border: 1px solid var(--mu-line); border-left-width: 4px; border-radius: 10px; padding: .6rem .75rem; background: var(--rl-surface-raised); display: flex; flex-direction: column; gap: .3rem; }
.mu-state p { margin: 0; color: var(--rl-text-muted); line-height: 1.4; }
.mu-state--error { border-left-color: var(--rl-danger); }
.mu-state--warn { border-left-color: var(--mu-warn); }
.mu-state--info { border-left-color: var(--rl-accent); }
.mu-state__acts { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .15rem; }

.mu-skel { display: flex; flex-direction: column; gap: .3rem; padding: .2rem 0; }
.mu-skel__row { display: flex; align-items: center; gap: .6rem; height: 3rem; padding: 0 .5rem; }
.mu-skel__row i, .mu-skel__row span, .mu-skel__row b { border-radius: 8px; background: linear-gradient(90deg, var(--rl-surface-sunken), var(--rl-surface-raised), var(--rl-surface-sunken)); background-size: 220% 100%; animation: mu-shimmer 1.4s linear infinite; }
.mu-skel__row i { width: 1.9rem; height: 1.9rem; border-radius: 50%; flex: none; }
.mu-skel__row span { flex: 1; height: .9rem; }
.mu-skel__row b { width: 3.6rem; height: 1.5rem; }
@keyframes mu-shimmer { to { background-position: -220% 0; } }

.mu-empty { display: flex; flex-direction: column; gap: .45rem; padding: .8rem; border: 2px dashed var(--mu-line); border-radius: 12px; color: var(--rl-text-muted); }
.mu-empty strong { color: var(--rl-text); }
.mu-empty p { margin: 0; line-height: 1.4; }
.mu-empty__ways { display: flex; flex-direction: column; gap: .35rem; }
.mu-way { display: flex; align-items: center; gap: .6rem; text-align: left; border: 1px solid var(--mu-line); background: var(--rl-surface); color: var(--rl-text); border-radius: 10px; padding: .45rem .6rem; cursor: pointer; font: inherit; }
.mu-way:hover { border-color: var(--rl-accent); background: var(--rl-surface-raised); }
.mu-way span { display: flex; flex-direction: column; gap: .05rem; }
.mu-way small { color: var(--rl-text-muted); font-size: .72rem; }

.mu-dlg-text { margin: .2rem 0; line-height: 1.45; }
.mu-menu { min-width: 14rem; }
.mu-menu__danger { color: var(--rl-danger); }
.mu-menu .pe-menu__item { font-size: .8rem; }

/* ---- virtual list ---- */
.mu-vl { position: relative; overflow-y: auto; overflow-x: hidden; outline: none; overscroll-behavior: contain; }
.mu-vl:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rl-accent) 55%, transparent); border-radius: 8px; }
.mu-vl__inner { position: relative; width: 100%; }

/* ---- play button, shared by every row that can be auditioned ---- */
.mu-sb-play { position: relative; flex: none; width: 1.95rem; height: 1.95rem; border-radius: 50%; border: 1px solid var(--mu-line); background: var(--rl-surface-raised); color: var(--rl-text); display: inline-grid; place-items: center; padding: 0; cursor: pointer; }
.mu-sb-play:hover:not(:disabled) { background: var(--rl-accent); color: var(--rl-accent-contrast); border-color: var(--rl-accent); }
.mu-sb-play:disabled { opacity: .4; cursor: default; }
.mu-sb-play .mu-ico-stop, .mu-sb-play .mu-spin { display: none; }
.is-playing > .mu-sb-play .mu-ico-play, .is-playing .mu-sb-play .mu-ico-play { display: none; }
.is-playing > .mu-sb-play .mu-ico-stop, .is-playing .mu-sb-play .mu-ico-stop { display: inline-flex; }
.is-playing > .mu-sb-play, .is-playing .mu-sb-play { background: var(--rl-accent); color: var(--rl-accent-contrast); border-color: var(--rl-accent); }
.is-loading > .mu-sb-play .mu-ico-play, .is-loading .mu-sb-play .mu-ico-play { display: none; }
.is-loading > .mu-sb-play .mu-spin, .is-loading .mu-sb-play .mu-spin { display: block; }
.mu-spin { width: .9rem; height: .9rem; border: 2px solid var(--mu-line); border-top-color: var(--rl-accent); border-radius: 50%; animation: mu-spin .7s linear infinite; }
@keyframes mu-spin { to { transform: rotate(360deg); } }

/* ---- sample browser shell ---- */
.mu-sb { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; background: var(--rl-surface); color: var(--rl-text); font-size: .8rem; container-type: inline-size; user-select: none; -webkit-user-select: none; }
.mu-sb .ve-tabs { grid-template-columns: repeat(4, 1fr); flex: none; }
.mu-sb .ve-tab { padding: .4rem .1rem .3rem; }
.mu-sb .ve-tab:focus-visible { outline: 2px solid var(--rl-accent); outline-offset: -2px; }
.mu-sb-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mu-sb-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5rem; padding: .55rem; overflow-y: auto; overscroll-behavior: contain; }
.mu-sb-drop { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; text-align: center; padding: 1rem; background: color-mix(in srgb, var(--rl-surface) 90%, transparent); border: 2px dashed var(--rl-accent); border-radius: 12px; pointer-events: none; color: var(--rl-text); }
.mu-sb-drop span { color: var(--rl-text-muted); }

/* ---- library ---- */
.mu-sb-lib { overflow: hidden; gap: .4rem; }
.mu-sb-tools { display: flex; gap: .4rem; }
.mu-sb-search-wrap { position: relative; flex: 1; display: block; }
.mu-sb-search-ico { position: absolute; left: .5rem; top: 50%; transform: translateY(-50%); color: var(--rl-text-muted); display: inline-flex; pointer-events: none; }
.mu-sb-search { width: 100%; padding: .32rem .5rem .32rem 1.7rem; font-size: .8rem; user-select: text; }
.mu-sb-lib .mu-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: .15rem; flex: none; }
.mu-chips--sub { padding-top: 0; }
.mu-sb-state { flex: none; }
.mu-sb-lib .mu-sb-state:empty { display: none; }
.mu-sb-list { flex: 1 1 0; min-height: 6rem; }
.mu-sb-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .15rem .2rem 0; color: var(--rl-text-muted); font-size: .74rem; }

.mu-sb-row { display: flex; align-items: center; gap: .55rem; padding: 0 .45rem; border-radius: 9px; border: 1px solid transparent; cursor: pointer; overflow: hidden; }
.mu-sb-row:hover { background: var(--rl-surface-sunken); }
.mu-sb-row.is-sel { background: color-mix(in srgb, var(--rl-accent) 10%, transparent); border-color: color-mix(in srgb, var(--rl-accent) 55%, transparent); }
.mu-sb-row.is-playing { background: color-mix(in srgb, var(--rl-accent) 14%, transparent); }
.mu-sb-row.is-new { animation: mu-flash 2.4s ease-out; }
@keyframes mu-flash { 0% { background: color-mix(in srgb, var(--rl-ok) 35%, transparent); } 100% { background: transparent; } }
.mu-sb-row[draggable="true"] { cursor: grab; }
.mu-sb-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.mu-sb-row__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-sb-row__meta { display: flex; align-items: center; gap: .3rem; overflow: hidden; white-space: nowrap; }
.mu-sb-row__sec { font-size: .7rem; color: var(--rl-text-muted); font-variant-numeric: tabular-nums; }
.mu-sb-row__wave { flex: none; width: 4.8rem; height: 1.75rem; color: var(--rl-text-muted); }
.mu-sb-more { flex: none; width: 1.7rem; height: 1.7rem; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--rl-text-muted); border-radius: 7px; cursor: pointer; padding: 0; }
.mu-sb-more:hover { background: var(--rl-surface-raised); color: var(--rl-text); }
@container (max-width: 19rem) { .mu-sb-row__wave { display: none; } }

/* ---- take cards (Make (AI) results, spoken lines) ---- */
.mu-takes { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; }
.mu-take { display: flex; flex-direction: column; gap: .3rem; padding: .45rem; border: 1px solid var(--mu-line); border-radius: 10px; background: var(--rl-surface-raised); cursor: grab; min-width: 0; }
.mu-take:hover { border-color: color-mix(in srgb, var(--rl-accent) 55%, transparent); }
.mu-take.is-kept { border-color: var(--rl-ok); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rl-ok) 40%, transparent); }
.mu-take.is-playing { border-color: var(--rl-accent); }
.mu-take__top { position: relative; display: flex; align-items: center; gap: .4rem; }
.mu-take__wave { flex: 1; min-width: 0; height: 2.6rem; width: 100%; color: var(--rl-text-muted); border-radius: 6px; background: var(--rl-surface-sunken); }
.mu-take__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-take__meta { font-size: .7rem; color: var(--rl-text-muted); min-height: 1em; }
.mu-take__err { margin: 0; font-size: .72rem; color: var(--rl-danger); }
.mu-take__acts { display: flex; gap: .25rem; flex-wrap: wrap; }

/* ---- Make (AI) ---- */
.mu-ai { gap: .55rem; }
.mu-ai-banner:empty { display: none; }
.mu-ai-types { gap: .3rem; }
.mu-ai-prompt { width: 100%; resize: vertical; min-height: 3.2rem; font-size: .8rem; user-select: text; font-family: inherit; }
.mu-ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.6rem, 1fr)); gap: .5rem .7rem; align-items: start; }
.mu-ai-field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.mu-ai-field__ctl { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.mu-ai-field .pe-input { width: auto; min-width: 0; max-width: 8.5rem; }
.mu-ai-field .pe-rng { width: 100%; }
.mu-ai-field .pe-rng input[type=range] { flex: 1; min-width: 4rem; }
.mu-ai-bar { position: sticky; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: .35rem; margin: 0 -.55rem -.55rem; padding: .5rem .55rem; background: var(--rl-surface); border-top: 1px solid var(--mu-line); }
.mu-ai-bar .mu-ad-note:empty { display: none; }
.mu-ai-actions { display: flex; gap: .5rem; align-items: center; }
.mu-ai-field .pe-rng__label { display: none; }
.mu-ai-go { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1.1rem; }
.mu-ai-error { border: 1px solid var(--rl-danger); border-left-width: 4px; border-radius: 10px; padding: .55rem .7rem; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; background: color-mix(in srgb, var(--rl-danger) 8%, transparent); }
.mu-ai-error p { margin: 0; user-select: text; }
.mu-ai-results { display: flex; flex-direction: column; gap: .7rem; }
.mu-batch { display: flex; flex-direction: column; gap: .4rem; }
.mu-batch header { display: flex; align-items: baseline; gap: .5rem; }
.mu-batch__prompt { font-size: .74rem; color: var(--rl-text-muted); }
.mu-batch__prompt summary { cursor: pointer; width: max-content; }
.mu-batch__prompt p { margin: .3rem 0 0; padding: .4rem .5rem; background: var(--rl-surface-sunken); border-radius: 7px; user-select: text; line-height: 1.4; }

/* ---- Online ---- */
.mu-ol { overflow-y: auto; }
.mu-ol-notice { display: flex; gap: .45rem; align-items: flex-start; margin: 0; padding: .4rem .55rem; border-radius: 8px; background: color-mix(in srgb, var(--mu-warn) 10%, transparent); color: var(--rl-text); font-size: .72rem; line-height: 1.4; flex: none; }
.mu-ol-notice .pe-ico { color: var(--mu-warn); margin-top: .1rem; }
/* The view takes what is left of the pane (at least 18rem, then the pane scrolls) and the list takes what is left of the view: a list
   sized by its content would put all 400 rows in the DOM and defeat the virtual list. */
.mu-ol-view { flex: 1 1 0; display: flex; flex-direction: column; gap: .45rem; min-height: 18rem; }
.mu-ol-list { flex: 1 1 0; min-height: 8rem; }
.mu-ol-packs { display: flex; flex-direction: column; gap: .45rem; flex: 1 1 0; min-height: 0; overflow-y: auto; }
.mu-ol-pack { display: flex; flex-direction: column; gap: .3rem; padding: .6rem .7rem; border: 1px solid var(--mu-line); border-radius: 10px; background: var(--rl-surface-raised); cursor: pointer; outline: none; }
.mu-ol-pack:hover, .mu-ol-pack:focus-visible { border-color: var(--rl-accent); }
.mu-ol-pack p { margin: 0; color: var(--rl-text-muted); line-height: 1.4; font-size: .76rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mu-ol-pack__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.mu-ol-pack__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.mu-ol-link { display: inline-flex; align-items: center; gap: .2rem; color: var(--rl-accent); font-size: .74rem; text-decoration: none; }
.mu-ol-link:hover { text-decoration: underline; }
.mu-ol-back { display: inline-flex; align-items: center; gap: .25rem; align-self: flex-start; border: 0; background: transparent; color: var(--rl-accent); cursor: pointer; padding: .1rem .25rem .1rem 0; font: inherit; }
.mu-ol-back:hover { text-decoration: underline; }
.mu-ol-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .6rem; }
.mu-ol-licence { margin: 0; padding: .35rem .5rem; border-radius: 8px; font-size: .74rem; line-height: 1.4; border: 1px solid var(--mu-line); background: var(--rl-surface-raised); user-select: text; }
.mu-ol-licence--free { border-color: color-mix(in srgb, var(--rl-ok) 50%, transparent); }
.mu-ol-licence--restricted { border-color: color-mix(in srgb, var(--mu-warn) 60%, transparent); }
.mu-ol-group { display: flex; align-items: center; gap: .5rem; height: 100%; padding: 0 .55rem; border-radius: 9px; cursor: pointer; border: 1px solid transparent; }
.mu-ol-group:hover { background: var(--rl-surface-sunken); border-color: var(--mu-line); }
.mu-ol-group__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mu-ol-group__main strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-ol-file, .mu-ol-hit { display: flex; align-items: center; gap: .55rem; padding: 0 .4rem; border-radius: 9px; border: 1px solid transparent; cursor: pointer; }
.mu-ol-file:hover, .mu-ol-hit:hover { background: var(--rl-surface-sunken); }
.mu-ol-file.is-playing, .mu-ol-hit.is-playing { background: color-mix(in srgb, var(--rl-accent) 12%, transparent); }
.mu-ol-file__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-ol-hit__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.mu-ol-add { flex: none; min-width: 4.4rem; }
.mu-ol-file.is-added .mu-ol-add, .mu-ol-hit.is-added .mu-ol-add { color: var(--rl-ok); }

/* ---- Add ---- */
.mu-ad { gap: .55rem; }
.mu-ad-seg { display: block; flex: none; }
.mu-ad-seg .pe-seg__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); width: 100%; }
.mu-ad-seg .pe-seg__b { padding: .3rem .2rem; }
.mu-ad-stage { display: flex; flex-direction: column; gap: .55rem; }
.mu-ad-mode { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.mu-ad-drop { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; padding: 1.1rem .8rem; border: 2px dashed var(--mu-line); border-radius: 12px; background: transparent; color: var(--rl-text-muted); cursor: pointer; font: inherit; }
.mu-ad-drop strong { color: var(--rl-text); }
.mu-ad-drop:hover, .mu-ad-drop.is-over { border-color: var(--rl-accent); background: color-mix(in srgb, var(--rl-accent) 7%, transparent); }
.mu-ad-drop.is-loading { opacity: .6; cursor: progress; }
.mu-ad-note { margin: 0; font-size: .74rem; color: var(--rl-text-muted); line-height: 1.4; }
.mu-ad-note.is-bad, .mu-ad-msg.is-bad { color: var(--rl-danger); }
.mu-ad-msg.is-ok { color: var(--rl-ok); }
.mu-ad-row { display: flex; gap: .5rem; align-items: flex-start; flex-wrap: wrap; }
.mu-ad-inline { display: inline-flex; align-items: center; gap: .4rem; }
.mu-ad-inline .pe-field__label, .pe-field__label { color: var(--rl-text-muted); font-size: .72rem; }
.mu-sb .pe-field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.mu-sb .pe-input { min-width: 0; font-size: .8rem; user-select: text; }
.mu-sb input.pe-input, .mu-sb select.pe-input { min-height: 1.95rem; }
.mu-ad-num { width: 4.6rem !important; }
.mu-ad-cat { max-width: 9.5rem; }
.mu-ad-opts { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; font-size: .76rem; }
.mu-ad-bulk { width: auto; margin-left: auto; font-size: .74rem; padding: .15rem .3rem; }
.mu-ad-review { display: flex; flex-direction: column; gap: .5rem; }
.mu-ad-items { display: flex; flex-direction: column; gap: .4rem; }
.mu-ad-item { display: flex; flex-direction: column; gap: .3rem; padding: .45rem; border: 1px solid var(--mu-line); border-radius: 10px; background: var(--rl-surface-raised); }
.mu-ad-item[data-status="done"] { border-color: color-mix(in srgb, var(--rl-ok) 55%, transparent); }
.mu-ad-item[data-status="error"], .mu-ad-item.has-error { border-color: color-mix(in srgb, var(--rl-danger) 55%, transparent); }
.mu-ad-item.is-playing { border-color: var(--rl-accent); }
.mu-ad-item__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem; align-items: center; }
.mu-ad-item__sub { display: grid; grid-template-columns: minmax(0, 1fr) 4.6rem; gap: .3rem; align-items: center; }
.mu-ad-item .pe-input { padding: .22rem .4rem; }
.mu-ad-item .mu-ad-cat { max-width: none; width: 100%; }
.mu-ad-bpm { width: 100%; text-align: right; }
.mu-ad-item__meta { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.mu-ad-info { font-size: .72rem; color: var(--rl-text-muted); font-variant-numeric: tabular-nums; }
.mu-ad-play { width: 1.7rem; height: 1.7rem; }
.mu-ad-rm { min-width: 1.6rem; height: 1.6rem; color: var(--rl-text-muted); }
.mu-ad-msg { font-size: .74rem; line-height: 1.35; user-select: text; }
.mu-ad-bar { position: relative; height: .3rem; border-radius: 999px; background: var(--rl-surface-sunken); overflow: hidden; flex: none; }
.mu-ad-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--rl-accent); border-radius: inherit; transition: width .15s linear; }
.mu-ad-bar.is-indeterminate i { width: 35%; animation: mu-indet 1.2s ease-in-out infinite; transition: none; }
@keyframes mu-indet { 0% { left: -35%; } 100% { left: 100%; } }
.mu-ad-foot { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
/* The review list can be long; its Add button must not scroll away. */
.mu-ad-review > .mu-ad-foot { position: sticky; bottom: 0; z-index: 3; margin: 0 -.55rem -.55rem; padding: .5rem .55rem; background: var(--rl-surface); border-top: 1px solid var(--mu-line); }
.mu-ad-summary { font-size: .76rem; color: var(--rl-text-muted); }

.mu-ad-recbar { display: flex; align-items: center; gap: .5rem; }
.mu-rec { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--mu-line); background: var(--rl-surface-raised); color: var(--rl-text); font: inherit; font-weight: 650; cursor: pointer; }
.mu-rec i { width: .85rem; height: .85rem; border-radius: 50%; background: var(--rl-danger); flex: none; }
.mu-rec:hover:not(:disabled) { background: var(--rl-surface-sunken); }
.mu-rec.is-on { background: var(--rl-danger); border-color: var(--rl-danger); color: #fff; }
.mu-rec.is-on i { background: #fff; border-radius: 2px; animation: mu-pulse 1.1s ease-in-out infinite; }
.mu-rec:disabled { opacity: .6; cursor: progress; }
@keyframes mu-pulse { 50% { opacity: .55; } }
.mu-ad-time { font: 600 .9rem ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
.mu-ad-level { width: 100%; height: 1.1rem; border-radius: 5px; display: block; }

.mu-ad-slicehead { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.mu-ad-slicehead strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.mu-ad-slicewave { width: 100%; height: 6rem; border-radius: 8px; background: var(--rl-surface-sunken); cursor: crosshair; touch-action: none; display: block; color: var(--rl-text-muted); }
.mu-ad-slicewave:focus-visible { outline: 2px solid var(--rl-accent); outline-offset: 2px; }
.mu-ad-slicetools { display: flex; flex-direction: column; gap: .4rem; }
.mu-ad-slicetools .pe-rng { flex: 1; min-width: 9rem; }
.mu-ad-slicetools .pe-rng input[type=range] { flex: 1; width: auto; min-width: 3rem; }
.mu-ad-slices { display: flex; flex-direction: column; gap: .15rem; max-height: 11rem; overflow-y: auto; }
.mu-ad-slice-row { display: flex; align-items: center; gap: .45rem; padding: .15rem .3rem; border-radius: 8px; }
.mu-ad-slice-row.is-playing { background: color-mix(in srgb, var(--rl-accent) 12%, transparent); }
.mu-ad-slice-row input[type=checkbox] { accent-color: var(--rl-accent); width: 1rem; height: 1rem; }
.mu-ad-slice-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-ad-slice-len { font-size: .72rem; color: var(--rl-text-muted); font-variant-numeric: tabular-nums; }
.mu-ad-saveopts { display: flex; flex-direction: column; gap: .45rem; padding-top: .4rem; border-top: 1px solid var(--mu-line); }
.mu-ad-text { width: 100%; resize: vertical; min-height: 4rem; font-family: inherit; }
.mu-ad-voiceform { display: flex; flex-direction: column; gap: .5rem; }
.mu-ad-voicestate:empty { display: none; }

/* ======================================================== mixer ======================================================== */
.mu-mx { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; background: var(--rl-surface); color: var(--rl-text); font-size: .78rem; user-select: none; -webkit-user-select: none; outline: none; }
.mu-mx-bar { flex: none; display: flex; align-items: center; gap: .6rem; padding: .3rem .6rem; border-bottom: 1px solid var(--mu-line); }
.mu-mx-hint { color: var(--rl-text-muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mu-mx-body { flex: 1; min-height: 0; display: flex; align-items: stretch; overflow: auto; }
.mu-mx-strips { display: flex; gap: .3rem; padding: .45rem; align-items: stretch; min-width: min-content; }
.mu-mx-masterwrap { position: sticky; right: 0; margin-left: auto; display: flex; padding: .45rem; background: var(--rl-surface); border-left: 1px solid var(--mu-line); z-index: 2; }
.mu-mx-empty { margin: 0; align-self: center; padding: 1rem; color: var(--rl-text-muted); max-width: 18rem; line-height: 1.4; }

.mu-mx-strip { --cap: 1.5rem; width: 6.2rem; flex: none; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .35rem .3rem .4rem; border: 1px solid var(--mu-line); border-radius: 11px; background: var(--rl-surface-raised); }
.mu-mx-strip.is-sel { border-color: var(--rl-accent); box-shadow: 0 0 0 1px var(--rl-accent); }
.mu-mx-strip.is-dim .mu-mx-head, .mu-mx-strip.is-dim .mu-mx-knobs { opacity: .5; }
.mu-mx-strip--master { width: 6.8rem; background: var(--rl-surface-sunken); }
.mu-mx-head { width: 100%; border: 0; background: transparent; padding: 0; display: flex; flex-direction: column; gap: .05rem; text-align: left; cursor: pointer; color: inherit; font: inherit; min-width: 0; }
.mu-mx-head--master { cursor: default; }
.mu-mx-color { display: block; height: 4px; border-radius: 3px; background: var(--tc, var(--rl-text-muted)); margin-bottom: .25rem; }
.mu-mx-head--master .mu-mx-color { background: var(--rl-text); opacity: .7; }
.mu-mx-name { font-weight: 650; font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-mx-kind { font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rl-text-muted); }
.mu-mx-knobs { display: flex; justify-content: space-between; width: 100%; padding: 0 .1rem; }
.mu-mx-spacer { height: 2.55rem; }
.mu-mx-tone { display: none; }
.mu-mx--tone .mu-mx-tone { display: flex; }
.mu-mx-ms { display: flex; align-items: center; justify-content: center; gap: .25rem; width: 100%; min-height: 1.6rem; }
.mu-ms { width: 1.75rem; height: 1.55rem; border-radius: 6px; border: 1px solid var(--mu-line); background: var(--rl-surface); color: var(--rl-text); font: 700 .72rem system-ui, sans-serif; cursor: pointer; padding: 0; }
.mu-ms:hover { background: var(--rl-surface-sunken); }
.mu-ms--m.is-on { background: var(--rl-danger); border-color: var(--rl-danger); color: #fff; }
.mu-ms--s.is-on { background: #eab308; border-color: #eab308; color: #1b1500; }
.mu-clip { width: .85rem; height: .85rem; border-radius: 50%; border: 1px solid var(--mu-line); background: var(--mu-led-off); padding: 0; cursor: pointer; flex: none; }
.mu-clip.is-on { background: var(--rl-danger); border-color: var(--rl-danger); box-shadow: 0 0 7px var(--rl-danger); }
.mu-lim { font-size: .58rem; font-weight: 700; letter-spacing: .05em; padding: .12rem .3rem; border-radius: 5px; border: 1px solid var(--mu-line); color: var(--rl-text-muted); background: var(--mu-led-off); }
.mu-lim.is-on { background: #f59e0b; border-color: #f59e0b; color: #1b1500; }

.mu-mx-fa { --cap: 1.5rem; flex: 1; min-height: 8rem; width: 100%; display: flex; justify-content: center; gap: .3rem; align-items: stretch; }
.mu-fader { --cap: 1.5rem; --p: .75; position: relative; width: 3.1rem; height: 100%; touch-action: none; cursor: ns-resize; outline: none; flex: none; }
.mu-fader:focus-visible .mu-fader__cap { outline: 2px solid var(--rl-accent); outline-offset: 2px; }
.mu-fader__rail { position: absolute; left: 0; right: 0; top: calc(var(--cap) / 2); bottom: calc(var(--cap) / 2); }
.mu-fader__groove { position: absolute; left: 62%; top: 0; bottom: 0; width: 6px; transform: translateX(-50%); border-radius: 3px; background: var(--mu-groove); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.mu-fader__tick { position: absolute; left: 0; width: 52%; transform: translateY(50%); display: flex; align-items: center; gap: 2px; font-size: .55rem; line-height: 1; color: var(--rl-text-muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.mu-fader__tick i { flex: 1; height: 1px; background: currentColor; opacity: .55; order: 2; }
.mu-fader__tick.is-unity { color: var(--rl-text); font-weight: 700; }
.mu-fader__tick.is-unity i { opacity: 1; height: 2px; }
.mu-fader__cap { position: absolute; left: 62%; bottom: calc(var(--p) * 100%); width: 2.1rem; height: var(--cap); transform: translate(-50%, 50%); border-radius: 6px; border: 1px solid var(--mu-line); background: linear-gradient(var(--mu-cap-a), var(--mu-cap-b)); box-shadow: 0 2px 5px rgba(0, 0, 0, .35); display: grid; place-items: center; }
.mu-fader__cap i { width: 80%; height: 2px; border-radius: 1px; background: var(--rl-accent); }
.mu-fader.is-active .mu-fader__cap { border-color: var(--rl-accent); }
.mu-mx-meter { width: .85rem; align-self: center; height: calc(100% - var(--cap)); border-radius: 3px; display: block; flex: none; }
.mu-mx-meter.is-wide { width: 1.15rem; }
.mu-mx-read { width: 4.4rem; text-align: center; font: 600 .74rem ui-monospace, Consolas, monospace; padding: .18rem .1rem; border: 1px solid var(--mu-line); border-radius: 6px; background: var(--rl-surface); color: var(--rl-text); user-select: text; }
.mu-mx-read:focus { outline: 2px solid var(--rl-accent); outline-offset: 1px; }

.mu-knob { width: 1.8rem; display: flex; flex-direction: column; align-items: center; cursor: ns-resize; outline: none; touch-action: none; border-radius: 6px; flex: none; }
.mu-knob:focus-visible { outline: 2px solid var(--rl-accent); outline-offset: 2px; }
.mu-knob__svg { width: 1.8rem; height: 1.8rem; display: block; overflow: visible; }
.mu-knob__track { fill: none; stroke: var(--mu-groove); stroke-width: 3; stroke-linecap: round; }
.mu-knob__val { fill: none; stroke: var(--rl-accent); stroke-width: 3; stroke-linecap: round; }
.mu-knob__body { fill: var(--rl-surface); stroke: var(--mu-line); stroke-width: 1; }
.mu-knob:hover .mu-knob__body, .mu-knob.is-active .mu-knob__body { stroke: var(--rl-accent); }
.mu-knob__ptr { stroke: var(--rl-text); stroke-width: 2.2; stroke-linecap: round; }
.mu-knob__lbl { font-size: .56rem; line-height: 1; color: var(--rl-text-muted); margin-top: .1rem; white-space: nowrap; max-width: 2.6rem; overflow: hidden; text-overflow: clip; text-align: center; font-variant-numeric: tabular-nums; }
.mu-knob.is-active .mu-knob__lbl { color: var(--rl-text); font-weight: 650; }

@media (prefers-reduced-motion: reduce) {
    .mu-skel__row i, .mu-skel__row span, .mu-skel__row b, .mu-spin, .mu-sb-row.is-new, .mu-rec.is-on i, .mu-ad-bar.is-indeterminate i { animation: none; }
}

/* ---- the strip's insert slots and the plugin editor ---- */
.mu-mx-fx { display: flex; flex-direction: column; gap: 2px; margin: 2px 0; }
.mu-fx { height: 1.2rem; border: 1px solid var(--pe-line, var(--rl-border)); border-radius: 4px; background: color-mix(in srgb, var(--rl-accent) 20%, var(--rl-surface-raised)); font-size: .64rem; font-weight: 600; padding: 0 .3rem; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; color: var(--rl-text); }
.mu-fx.is-off { opacity: .5; text-decoration: line-through; }
.mu-fx.is-missing { border-style: dashed; }
.mu-fx--add { background: transparent; color: var(--rl-text-muted); font-weight: 500; border-style: dashed; text-align: center; }
.mu-fxpick section { margin-bottom: .5rem; }
.mu-fxpick h4 { margin: 0 0 .25rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rl-text-muted); }
.mu-fxpick__row { display: flex; flex-wrap: wrap; gap: .35rem; }
.mu-fxedit__top { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.mu-fxgr { font: .72rem ui-monospace, Consolas, monospace; color: #f59e0b; }
.mu-fxedit .pe-rng { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; align-items: center; gap: .35rem; width: 100%; }
.mu-fxedit .pe-rng input[type=range] { width: 100%; min-width: 0; }
.mu-fxedit .pe-rng__num { width: 4rem; }
.mu-fxedit .pe-sel { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: .35rem; }