:root {
    --fsa-mm-player-surface: color-mix(in srgb, var(--fsa-mm-card-bg, #0d1018) 94%, transparent);
    --fsa-mm-player-border: color-mix(in srgb, var(--fsa-mm-card-border, #282f40) 84%, transparent);
}

html.fsa-mm-debug-ui [data-fsa-mm-debug] {
    position: relative;
    outline: 1px dashed rgba(255, 139, 43, 0.7);
    outline-offset: 2px;
}

html.fsa-mm-debug-ui [data-fsa-mm-debug]::after {
    content: attr(data-fsa-mm-debug-label);
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 12px);
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 232, 181, 0.96);
    border: 1px solid rgba(255, 139, 43, 0.92);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    color: #1f1408;
    font-family: "Consolas", "SFMono-Regular", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.fsa-mm-player {
    position: relative;
    z-index: 1;
}

.fsa-mm-management .fsa-mm-player {
    margin: 0 0 14px;
}

.fsa-mm-player-shell {
    display: grid;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--fsa-mm-player-border);
    border-radius: 16px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 96%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-card-bg, #0d1018) 86%, transparent)
        );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 2%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.24);
}

.fsa-mm-player-shell audio {
    display: none;
}

.fsa-mm-player-copy,
.fsa-mm-player-controls {
    display: grid;
    gap: 10px;
}

.fsa-mm-player-kicker-row,
.fsa-mm-player-time,
.fsa-mm-player-actions,
.fsa-mm-management-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fsa-mm-player-kicker-row {
    justify-content: space-between;
}

/* Management player: 3-zone header so the Autoplay Queue button sits dead-center
   (above the song/artist line), with the mode switch left and head stack right. */
.fsa-mm-player-kicker-row.has-autoplay {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    column-gap: 8px;
}
.fsa-mm-player-kicker-row.has-autoplay > .fsa-mm-player-mode-switch {
    justify-self: start;
}
.fsa-mm-player-kicker-row.has-autoplay > .fsa-mm-player-autoplay {
    justify-self: center;
}
.fsa-mm-player-kicker-row.has-autoplay > .fsa-mm-player-head-stack {
    justify-self: end;
}
@media (max-width: 640px) {
    .fsa-mm-player-kicker-row.has-autoplay {
        grid-template-columns: 1fr auto;
    }
    .fsa-mm-player-kicker-row.has-autoplay > .fsa-mm-player-autoplay {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        margin-top: 4px;
    }
    .fsa-mm-player-kicker-row.has-autoplay > .fsa-mm-player-head-stack {
        grid-column: 2;
        grid-row: 1;
    }
}

.fsa-mm-player-head-stack {
    display: grid;
    justify-items: end;
    gap: 6px;
    min-width: 0;
    margin-left: auto;
}

.fsa-mm-player-head-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 30px;
}

.fsa-mm-player-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
}

.fsa-mm-player-mode {
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease, opacity 140ms ease;
}

.fsa-mm-player-mode.is-active {
    border-color: color-mix(in srgb, var(--fsa-mm-accent, #ff8b2b) 48%, var(--fsa-mm-input-border, #2a3040) 52%);
    color: var(--fsa-mm-label-color, #f2f4f9);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-accent, #ff8b2b) 22%, var(--fsa-mm-input-bg, #0a0d14) 78%),
            color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 86%, transparent)
        );
}

.fsa-mm-player-mode[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.fsa-mm-player-kicker-row .fsa-mm-player-head-action {
    margin-left: 0;
}

.fsa-mm-player-kicker {
    min-height: 24px;
}

.fsa-mm-player-state {
    color: var(--fsa-mm-placeholder, #7e879d);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fsa-mm-player-now-playing h4 {
    margin: 0 0 4px;
    color: var(--fsa-mm-label-color, #f2f4f9);
    font-size: 17px;
    line-height: 1.1;
}

.fsa-mm-player-now-playing h4:empty {
    display: none;
}

.fsa-mm-player-now-playing {
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
}

.fsa-mm-player-summary-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    position: relative;
}

.fsa-mm-player-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border, #2a3040) 84%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 95%, #000000 5%),
            color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 84%, transparent)
        );
    color: var(--fsa-mm-label-color, #f2f4f9);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 2%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.2);
}

.fsa-mm-player-quick-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fsa-mm-player-quick-actions[hidden] {
    display: none !important;
}

.fsa-mm-player-quick-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border, #2a3040) 84%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 95%, #000000 5%),
            color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 84%, transparent)
        );
    color: var(--fsa-mm-placeholder, #7e879d);
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.fsa-mm-player-quick-button svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fsa-mm-player-quick-button.is-active,
.fsa-mm-player-quick-button:hover,
.fsa-mm-player-quick-button:focus-visible {
    color: var(--fsa-mm-label-color, #f2f4f9);
    border-color: color-mix(in srgb, var(--fsa-mm-accent, #ff8b2b) 48%, var(--fsa-mm-input-border, #2a3040) 52%);
}

.fsa-mm-player-note-popover {
    display: grid;
    gap: 8px;
    width: min(360px, calc(100vw - 48px));
    margin-top: 8px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border, #2a3040) 84%, transparent);
    border-radius: 14px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 97%, #000000 3%),
            color-mix(in srgb, var(--fsa-mm-card-bg, #0d1018) 90%, transparent)
        );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 2%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.22);
}

.fsa-mm-player-note-popover[hidden] {
    display: none !important;
}

.fsa-mm-player-note-popover textarea {
    width: 100%;
    min-height: 74px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border, #2a3040) 84%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 96%, transparent);
    color: var(--fsa-mm-label-color, #f2f4f9);
    font-family: var(--fsa-mm-font-family, "Space Grotesk", sans-serif);
    font-size: 12px;
    resize: vertical;
}

.fsa-mm-player-note-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.fsa-mm-player-controls {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "main progress";
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
}

.fsa-mm-player-main-button,
.fsa-mm-player-action,
.fsa-mm-player-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border, #2a3040) 84%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 95%, #000000 5%),
            color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 84%, transparent)
        );
    color: var(--fsa-mm-label-color, #f2f4f9);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 2%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.22);
}

.fsa-mm-player-main-button {
    grid-area: main;
    min-height: 34px;
    padding: 0 12px;
    font-family: var(--fsa-mm-font-family, "Space Grotesk", sans-serif);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.fsa-mm-player-main-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.fsa-mm-player-main-button svg,
.fsa-mm-player-trigger svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.fsa-mm-player-progress-wrap {
    grid-area: progress;
    display: grid;
    gap: 6px;
    align-self: center;
}

.fsa-mm-player-progress-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(132px, 180px);
    align-items: center;
    gap: 10px;
}

.fsa-mm-player-progress {
    width: 100%;
    margin: 0;
    accent-color: var(--fsa-mm-accent, #ff8b2b);
}

.fsa-mm-player-time {
    justify-content: flex-start;
    color: var(--fsa-mm-placeholder, #7e879d);
    font-size: 11px;
}

.fsa-mm-player-volume-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    width: 100%;
    justify-self: stretch;
}

.fsa-mm-player-volume-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fsa-mm-placeholder, #7e879d);
}

.fsa-mm-player-volume-icon svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.fsa-mm-player-volume {
    width: 100%;
    margin: 0;
    accent-color: var(--fsa-mm-accent, #ff8b2b);
}

.fsa-mm-player-actions {
    grid-area: actions;
    justify-content: flex-end;
    flex-wrap: wrap;
    justify-self: start;
    display: none;
}

.fsa-mm-player-action {
    min-height: 30px;
    padding: 0 10px;
    appearance: none;
    cursor: pointer;
    font-family: var(--fsa-mm-font-family, "Space Grotesk", sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
}

.fsa-mm-player-head-secondary[hidden] {
    display: none !important;
}

.fsa-mm-player-action:hover,
.fsa-mm-player-main-button:hover,
.fsa-mm-player-trigger:hover,
.fsa-mm-player-action:focus-visible,
.fsa-mm-player-main-button:focus-visible,
.fsa-mm-player-trigger:focus-visible {
    border-color: color-mix(in srgb, var(--fsa-mm-accent, #ff8b2b) 48%, var(--fsa-mm-input-border, #2a3040) 52%);
    color: var(--fsa-mm-label-color, #f2f4f9);
}

/* Autoplay Queue armed state — accent fill + soft glow so it reads as "on". */
.fsa-mm-player-autoplay.is-active {
    border-color: color-mix(in srgb, var(--fsa-mm-accent, #ff8b2b) 70%, transparent);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-accent, #ff8b2b) 32%, var(--fsa-mm-input-bg, #0a0d14) 68%),
            color-mix(in srgb, var(--fsa-mm-accent, #ff8b2b) 18%, var(--fsa-mm-input-bg, #0a0d14) 82%)
        );
    color: var(--fsa-mm-label-color, #f2f4f9);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--fsa-mm-accent, #ff8b2b) 30%, transparent),
        0 6px 18px -8px color-mix(in srgb, var(--fsa-mm-accent, #ff8b2b) 80%, transparent);
}
.fsa-mm-player-autoplay.is-active::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--fsa-mm-accent, #ff8b2b);
    box-shadow: 0 0 8px color-mix(in srgb, var(--fsa-mm-accent, #ff8b2b) 90%, transparent);
    animation: fsaMmAutoplayPulse 1.4s ease-in-out infinite;
}
@keyframes fsaMmAutoplayPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
    .fsa-mm-player-autoplay.is-active::before { animation: none; }
}

.fsa-mm-player-message {
    margin-top: -2px;
    color: #ffd8d8;
    font-size: 12px;
    line-height: 1.35;
}

.fsa-mm-player-fx-panel {
    display: grid;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border, #2a3040) 82%, transparent);
    border-radius: 14px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 96%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-card-bg, #0d1018) 80%, transparent)
        );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 2%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.2);
}

.fsa-mm-player-fx-panel[hidden] {
    display: none !important;
}

.fsa-mm-player-visualizer {
    width: 100%;
    height: 104px;
    display: block;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 28%, var(--fsa-mm-input-border, #1d2740) 72%);
    border-radius: 14px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg, #0a0e1a) 94%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 34px -18px color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 70%, transparent);
}

.fsa-mm-player-eq-grid {
    display: none; /* replaced by draggable canvas dots */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.fsa-mm-player-eq-band {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.fsa-mm-player-eq-label,
.fsa-mm-player-eq-value {
    color: var(--fsa-mm-placeholder, #7e879d);
    font-size: 10px;
    line-height: 1.2;
}

.fsa-mm-player-eq-label {
    color: var(--fsa-mm-label-color, #f2f4f9);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.fsa-mm-player-eq-band input[type="range"] {
    width: 100%;
    margin: 0;
    accent-color: var(--fsa-mm-accent, #ff8b2b);
}

.fsa-mm-player-eq-hint {
    margin: -2px 0 0;
    font-size: 10px;
    line-height: 1.3;
    color: var(--fsa-mm-mgmt-muted-color, #7e879d);
    text-align: center;
}

.fsa-mm-player-eq-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 2px;
}

.fsa-mm-player-eq-presets:empty {
    display: none;
}

.fsa-mm-player-eq-preset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border, #2a3040) 84%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 95%, #000000 5%),
            color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 84%, transparent)
        );
    color: var(--fsa-mm-placeholder, #8b96b3);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.fsa-mm-player-eq-preset:hover,
.fsa-mm-player-eq-preset:focus-visible {
    color: var(--fsa-mm-label-color, #eaf1ff);
    border-color: color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 46%, var(--fsa-mm-input-border, #2a3040) 54%);
    transform: translateY(-1px);
    outline: none;
}

.fsa-mm-player-eq-preset.is-active {
    color: #04101f;
    border-color: transparent;
    background: linear-gradient(135deg, var(--fsa-mm-accent-2, #6bcbff), var(--fsa-mm-cyan, #90fffb));
    box-shadow: 0 4px 16px -6px color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 80%, transparent);
}

/* One row, three zones spread edge-to-edge: presets (left), dials (center),
   limiter (right) — no dead space in the middle. */
.fsa-mm-player-fx-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.fsa-mm-player-fx-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

/* Inside the row the dials are compact (not stretched full width). */
.fsa-mm-player-fx-row .fsa-mm-player-fx-controls {
    display: flex;
    gap: 26px;
}

/* EQ presets stacked into a compact 2-column grid on the far left. */
.fsa-mm-player-fx-row .fsa-mm-player-eq-presets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    width: 172px;
}

.fsa-mm-player-fx-row .fsa-mm-player-eq-preset {
    width: 100%;
}

.fsa-mm-player-fx-control {
    display: grid;
    gap: 6px;
    min-width: 0;
    justify-items: center;
}

.fsa-mm-player-fx-label,
.fsa-mm-player-fx-value {
    color: var(--fsa-mm-placeholder, #7e879d);
    font-size: 10px;
    line-height: 1.2;
}

.fsa-mm-player-fx-label {
    color: var(--fsa-mm-label-color, #f2f4f9);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.fsa-mm-player-fx-input {
    display: none;
}

.fsa-mm-player-dial {
    --fsa-mm-dial-progress: 0.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border, #2a3040) 84%, transparent);
    border-radius: 999px;
    background:
        conic-gradient(
            from -135deg,
            color-mix(in srgb, var(--fsa-mm-accent, #ff8b2b) 78%, transparent) calc(var(--fsa-mm-dial-progress) * 270deg),
            rgba(255, 255, 255, 0.06) 0
        ),
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.08), transparent 38%),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 96%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-card-bg, #0d1018) 86%, transparent)
        );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 3%, transparent),
        inset 0 5px 10px rgba(0, 0, 0, 0.26);
    cursor: ns-resize;
}

.fsa-mm-player-dial-face {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border, #2a3040) 70%, transparent);
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.08), transparent 34%),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-card-bg, #0d1018) 92%, #000000 8%),
            color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 90%, transparent)
        );
}

.fsa-mm-player-dial-indicator {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 2px;
    height: 12px;
    border-radius: 999px;
    background: var(--fsa-mm-accent, #ff8b2b);
    transform-origin: 50% calc(100% - 2px);
    transform: translateX(-50%) rotate(-135deg);
    box-shadow: 0 0 10px color-mix(in srgb, var(--fsa-mm-accent, #ff8b2b) 34%, transparent);
}

/* Grouped Limiter controls: Gain dial + GR meter + Engage toggle in one box. */
.fsa-mm-player-limiter-group {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    gap: 16px;
    padding: 14px 16px 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 30%, var(--fsa-mm-input-border, #2a3040) 70%);
    border-radius: 14px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 8%, transparent), rgba(0, 0, 0, 0.12));
}

/* The title chip is the engage toggle. */
.fsa-mm-player-limiter-group-title {
    position: absolute;
    top: -10px;
    left: 12px;
    padding: 3px 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fsa-mm-accent-2, #6bcbff);
    background: var(--fsa-mm-card-bg, #0d1018);
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 34%, transparent);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.fsa-mm-player-limiter-group-title:hover {
    border-color: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 60%, transparent);
}

.fsa-mm-player-limiter-group-title.is-active {
    color: #04101f;
    background: var(--fsa-mm-accent-2, #6bcbff);
    border-color: var(--fsa-mm-accent-2, #6bcbff);
    box-shadow: 0 0 12px color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 55%, transparent);
}

/* Dim the whole module until engaged, to signal it is off. */
.fsa-mm-player-limiter-group.is-engaged {
    border-color: color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 45%, transparent);
}

.fsa-mm-player-limiter-group-body {
    display: flex;
    align-items: flex-end;
    gap: 16px;
}

/* Gain / Attack are inactive until the limiter is engaged. */
.fsa-mm-player-limiter-group [data-player-limiter-control] {
    opacity: 0.38;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.fsa-mm-player-limiter-group.is-engaged [data-player-limiter-control] {
    opacity: 1;
    pointer-events: auto;
}

/* Live gain-reduction meter for the limiter (fills upward as it clamps). */
.fsa-mm-player-gr {
    position: relative;
    width: 16px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border, #2a3040) 78%, transparent);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.18));
}

.fsa-mm-player-gr-fill {
    display: block;
    width: 100%;
    height: 0;
    background: linear-gradient(0deg, #ffce5a 0%, #ff7a3c 55%, #ff5a5a 100%);
    box-shadow: 0 0 8px rgba(255, 120, 80, 0.5);
}

.fsa-mm-player-fx-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.fsa-mm-player-capture-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fsa-mm-player-capture-actions[hidden] {
    display: none !important;
}

.fsa-mm-player-record-timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border, #2a3040) 80%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 90%, transparent);
    color: var(--fsa-mm-label-color, #f2f4f9);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.fsa-mm-player-fx-bypass,
.fsa-mm-player-fx-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border, #2a3040) 84%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 95%, #000000 5%),
            color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 84%, transparent)
        );
    color: var(--fsa-mm-label-color, #f2f4f9);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.fsa-mm-player-fx-bypass.is-active {
    border-color: color-mix(in srgb, var(--fsa-mm-accent, #ff8b2b) 48%, var(--fsa-mm-input-border, #2a3040) 52%);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-accent, #ff8b2b) 22%, var(--fsa-mm-input-bg, #0a0d14) 78%),
            color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 84%, transparent)
        );
}

.fsa-mm-player-capture-actions [hidden] {
    display: none !important;
}

.fsa-mm-player-dial:hover,
.fsa-mm-player-dial:focus-visible {
    border-color: color-mix(in srgb, var(--fsa-mm-accent, #ff8b2b) 48%, var(--fsa-mm-input-border, #2a3040) 52%);
}

.fsa-mm-player-embed {
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border, #2a3040) 80%, transparent);
    border-radius: 12px;
    overflow: hidden;
    background: color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 90%, transparent);
}

.fsa-mm-player-embed[hidden] {
    display: none !important;
}

.fsa-mm-player-embed iframe {
    display: block;
    width: 100%;
    min-height: 168px;
    border: 0;
    background: #000;
}

.fsa-mm-player[data-player-hide-fx-panel="1"] .fsa-mm-player-fx-panel {
    display: none !important;
}

.fsa-mm-player[data-player-hide-mode-switch="1"] .fsa-mm-player-mode-switch {
    display: none !important;
}

.fsa-mm-player.is-embed-mode .fsa-mm-player-main-button,
.fsa-mm-player.is-embed-mode .fsa-mm-player-progress-wrap,
.fsa-mm-player.is-embed-mode .fsa-mm-player-volume-wrap,
.fsa-mm-player.is-embed-mode .fsa-mm-player-fx-panel,
.fsa-mm-player.is-embed-mode .fsa-mm-player-state {
    display: none;
}

.fsa-mm-player.is-embed-mode .fsa-mm-player-controls {
    grid-template-columns: 1fr;
    grid-template-areas: "progress";
}

.fsa-mm-player-trigger {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    padding: 0;
    color: var(--fsa-mm-accent, #ff8b2b);
    cursor: pointer;
}

.fsa-mm-player-trigger svg {
    width: 12px;
    height: 12px;
    margin-left: 1px;
}

.fsa-mm-management-title-row strong {
    min-width: 0;
}

.fsa-mm-pending-main .fsa-mm-player-trigger {
    flex: 0 0 24px;
}

@media (max-width: 767px) {
    .fsa-mm-player-shell {
        padding: 12px;
    }

    .fsa-mm-player-controls {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "progress";
    }

    .fsa-mm-player-progress-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .fsa-mm-player-eq-grid {
        grid-template-columns: 1fr;
    }

    .fsa-mm-player-fx-controls {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Spotlight Playlist — visual player on top, grouped track list
   ============================================================ */
/* This self-contained immersive page has no global border-box reset, so element
   padding (e.g. the player shell) was expanding widths and overflowing. */
.fsa-mm-playlist-wrap,
.fsa-mm-playlist-wrap * {
    box-sizing: border-box;
}

.fsa-mm-playlist-wrap {
    font-family: var(--fsa-mm-font-family, inherit);
    color: #eaf1ff;
    /* The section must never carry a frame — some themes outline <section>. */
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* The playlist provides its own glass card, so strip the generic form wrappers'
   background, border, box-shadow, padding AND the grid overlay (::before) that
   otherwise shows as faint vertical lines. Kept here (cache-busted) so it works
   regardless of host page or server opcache state. */
.fsa-mm-playlist-wrap .fsa-mm-form-wrap,
.fsa-mm-playlist-wrap .fsa-mm-form {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

.fsa-mm-playlist-wrap .fsa-mm-form-wrap::before {
    display: none !important;
}

.fsa-mm-playlist-shell {
    display: flex;
    flex-direction: column;
    gap: 22px;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Page hero — big title at the very top. */
.fsa-mm-playlist-hero {
    text-align: center;
    padding: 4px 8px 0;
}

.fsa-mm-playlist-hero-title {
    margin: 0;
    font-size: clamp(30px, 5.4vw, 56px);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    background: linear-gradient(120deg, #fff 0%, var(--ssp-cyan, var(--fsa-mm-cyan, #90fffb)) 55%, var(--ssp-accent, var(--fsa-mm-accent, #6bcbff)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ssp-cyan, #90fffb);
}

.fsa-mm-playlist-hero-sub {
    margin: 10px 0 0;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(220, 230, 255, 0.5);
}

/* Glassy card holding the player + list. */
.fsa-mm-playlist-panel {
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(180deg, rgba(18, 24, 40, 0.62), rgba(10, 14, 26, 0.55));
    border-radius: 22px;
    padding: 16px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.fsa-mm-playlist-player {
    margin-bottom: 14px;
}

/* Hero player: the visualizer is embedded inline and IS the player. The standard
   player chrome (transport, mode tabs, "no track loaded") is hidden but kept in
   the DOM so the embedded visualizer can drive its audio + controls. */
.fsa-mm-playlist-player--hero {
    position: relative;
}

.fsa-mm-playlist-player--hero .fsa-mm-player {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
    pointer-events: none;
}

/* Give the embedded player the immersive cyan palette — otherwise the dials,
   indicators and accents fall back to the stock orange-red (#ff8b2b). */
.fsa-mm-playlist-wrap .fsa-mm-player {
    --fsa-mm-accent: #2b6bff;
    --fsa-mm-accent-2: #6bcbff;
    --fsa-mm-cyan: #90fffb;
    --fsa-mm-input-bg: rgba(10, 15, 30, 0.6);
    --fsa-mm-input-border: rgba(107, 203, 255, 0.22);
    --fsa-mm-placeholder: rgba(234, 241, 255, 0.55);
    --fsa-mm-label-color: #eaf1ff;
    --fsa-mm-title-color: #eaf1ff;
    --fsa-mm-text-color: #eaf1ff;
    --fsa-mm-card-bg: rgba(18, 24, 40, 0.55);
    --fsa-mm-card-border: rgba(107, 203, 255, 0.18);
}

.fsa-mm-viz-embed {
    position: relative;
    width: 100%;
    height: clamp(340px, 48vh, 480px);
    border-radius: 16px;
    overflow: hidden;
    background: #050810;
    border: 1px solid rgba(107, 203, 255, 0.18);
    box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.9);
}

.fsa-mm-viz-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Style selector lives in the top bar, between the track count and the toggles. */
.fsa-mm-playlist-style {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fsa-mm-playlist-style-label {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(234, 241, 255, 0.5);
}

.fsa-mm-playlist-style-select {
    max-width: 150px;
    background: rgba(10, 15, 30, 0.92);
    border: 1px solid rgba(107, 203, 255, 0.25);
    color: #eaf1ff;
    font-size: 12px;
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    outline: none;
}

/* Mixer mode: hide the iframe, reveal the native player FX panel + transport in
   the page so the mixer keeps its real, page-tested styling. */
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-viz-embed {
    display: none !important;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    pointer-events: auto !important;
}

/* Inset all mixer content so nothing (e.g. the Play button) sits against the
   clipped/rounded shell edge and gets shaved. */
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-shell {
    padding: 14px !important;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-copy,
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-embed,
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-message {
    display: none !important;
}

/* The page mixer assumes a global border-box reset; this immersive document has
   none, so the shell's padding pushed everything past the edge. Constrain it. */
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-shell,
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-controls,
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-fx-panel,
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-visualizer {
    max-width: 100% !important;
}

/* Compact inline mixer: drop the EQ presets, and swap the rotary dials for
   touch-friendly horizontal sliders (the dials' backing range inputs), laid out
   as a clean full-width vertical list that fits tight/mobile widths. */
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-eq-presets,
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-dial {
    display: none !important;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-fx-row {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-fx-controls {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-limiter-group {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
}

/* Stepper rows: label + [ − value + ], packed tight to the left. */
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-fx-control {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-fx-label {
    flex: 0 0 60px !important;
    text-align: left !important;
    font-size: 11px !important;
}

/* The slider and the rotary dial are both hidden — steppers drive the value. */
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-fx-input {
    display: none !important;
}

.fsa-mm-fx-stepper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-fx-value {
    min-width: 58px !important;
    text-align: center !important;
    font-size: 12px !important;
    font-variant-numeric: tabular-nums;
    color: var(--fsa-mm-cyan, #90fffb) !important;
}

.fsa-mm-fx-step {
    flex: 0 0 auto !important;
    width: 30px !important;
    height: 30px !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    border: 1px solid rgba(107, 203, 255, 0.32) !important;
    background: rgba(107, 203, 255, 0.10) !important;
    color: var(--fsa-mm-cyan, #90fffb) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.fsa-mm-fx-step:active {
    background: rgba(107, 203, 255, 0.26) !important;
}

/* Advanced collapse: hide Pitch / Filter / Limiter until the toggle is opened. */
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-fx-advanced {
    display: none !important;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-fx-row.fx-advanced-open .fsa-mm-player-fx-control.fsa-mm-fx-advanced {
    display: flex !important;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-fx-row.fx-advanced-open .fsa-mm-player-limiter-group.fsa-mm-fx-advanced {
    display: flex !important;
}

.fsa-mm-fx-advanced-toggle {
    align-self: flex-start;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 2px 0 !important;
    padding: 5px 11px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(107, 203, 255, 0.25) !important;
    background: transparent !important;
    color: rgba(234, 241, 255, 0.7) !important;
    cursor: pointer !important;
}

.fsa-mm-fx-adv-caret {
    display: inline-block;
    transition: transform 0.15s ease;
}

.fsa-mm-player-fx-row.fx-advanced-open .fsa-mm-fx-advanced-toggle .fsa-mm-fx-adv-caret {
    transform: rotate(90deg);
}

/* The limiter's controls sit in a separate flex-row body — stack it too. */
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-limiter-group-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
}

/* Float the LIMITER chip onto the box's top border (like the standalone mixer).
   Needs an OPAQUE background so it cleanly cuts the border line — the page's
   --fsa-mm-card-bg is translucent, which let the border show through. */
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-limiter-group {
    margin-top: 6px !important;
    overflow: visible !important;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-limiter-group-title {
    position: absolute !important;
    top: -10px !important;
    left: 14px !important;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-limiter-group-title:not(.is-active) {
    background: #131b2c !important;
}

/* Force-compact the native player buttons — the immersive page's button styles
   otherwise inflate them into huge overlapping blocks. Play is icon-only here
   (like the visualizer's) to save space. */
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-main-button {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(107, 203, 255, 0.30) !important;
    background: rgba(107, 203, 255, 0.10) !important;
    color: var(--fsa-mm-cyan, #90fffb) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-main-button [data-player-toggle-label] {
    display: none !important;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-main-button svg {
    width: 12px !important;
    height: 12px !important;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-fx-bypass,
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-fx-reset,
.fsa-mm-playlist-player--hero.is-mixer [data-player-mono],
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-limiter-group-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 4px 9px !important;
    width: auto !important;
    max-width: 100% !important;
    border-radius: 999px !important;
}

/* Transport in one row: [Play] [time] [====seek====] [vol]. */
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-controls {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    max-width: 100% !important;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-main-button {
    flex: 0 0 auto !important;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-progress-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Drop the time label in the mixer transport — it crowded the row and forced the
   seek bar to be clipped. The seek position already conveys progress. */
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-time {
    display: none !important;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-progress-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-progress {
    flex: 1 1 auto !important;
    min-width: 60px !important;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-volume-wrap {
    flex: 0 0 auto !important;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-volume {
    width: 52px !important;
    min-width: 0 !important;
}

/* Phone: tuck Mono / Bypass / Reset into the empty space at the top-right of the
   FX controls, stacked and right-aligned. (≥640px restores them in-flow below.) */
.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-fx-controls {
    position: relative !important;
}

.fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-fx-actions {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 48% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 16px !important;
}

.fsa-mm-playlist-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fsa-mm-playlist-bar-count {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(220, 230, 255, 0.5);
}

.fsa-mm-playlist-toggles {
    display: flex;
    gap: 6px;
}

/* Small icon+label pill. Off = dull/dim, On = bright accent. Sizing/layout are
   forced (!important + scoped specificity) so the page's generic button styles
   can't inflate them into the big stacked blocks. */
.fsa-mm-playlist-toggles .fsa-mm-playlist-toggle {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center;
    gap: 5px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(220, 230, 255, 0.62);
    font-size: 10px !important;
    font-weight: 600;
    line-height: 1 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0.55;
    box-shadow: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.fsa-mm-playlist-toggles .fsa-mm-playlist-toggle:hover {
    opacity: 0.9;
    color: #f4f7ff;
    border-color: var(--fsa-mm-accent, #2b6bff);
}

.fsa-mm-playlist-toggles .fsa-mm-playlist-toggle.is-on {
    opacity: 1;
    background: var(--fsa-mm-accent, #2b6bff);
    border-color: color-mix(in srgb, var(--fsa-mm-cyan, #90fffb) 70%, var(--fsa-mm-accent, #2b6bff));
    color: #fff;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--fsa-mm-cyan, #90fffb) 30%, transparent),
                0 4px 12px -7px color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 90%, transparent);
}

.fsa-mm-playlist-toggles .fsa-mm-playlist-toggle svg {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
    flex: 0 0 auto;
}

.fsa-mm-playlist-toggle-label {
    line-height: 1;
}

/* Icon-only on phones — labels collapse to free up the bar. */
@media (max-width: 600px) {
    .fsa-mm-playlist-toggle-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .fsa-mm-playlist-toggles .fsa-mm-playlist-toggle {
        padding: 7px !important;
    }
    .fsa-mm-playlist-toggles .fsa-mm-playlist-toggle svg {
        width: 14px !important;
        height: 14px !important;
    }
}

/* Scroll the track list instead of letting the page grow without bound — the
   player + toggles stay in view while the tracks scroll inside the card. */
.fsa-mm-playlist-groups {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: clamp(220px, 40vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 203, 255, 0.4) transparent;
}

.fsa-mm-playlist-groups::-webkit-scrollbar {
    width: 8px;
}

.fsa-mm-playlist-groups::-webkit-scrollbar-track {
    background: transparent;
}

.fsa-mm-playlist-groups::-webkit-scrollbar-thumb {
    background: rgba(107, 203, 255, 0.32);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.fsa-mm-playlist-groups::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 203, 255, 0.55);
    background-clip: padding-box;
}

.fsa-mm-playlist-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.fsa-mm-playlist-group-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px;
    margin-bottom: 2px;
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(13, 18, 31, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 6px;
}

.fsa-mm-playlist-group-name {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fsa-mm-accent, #6bcbff);
}

.fsa-mm-playlist-group-count {
    font-size: 10px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(220, 230, 255, 0.55);
}

.fsa-mm-playlist-tracks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.fsa-mm-playlist-track {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.fsa-mm-playlist-track:hover {
    background: rgba(255, 255, 255, 0.05);
}

.fsa-mm-playlist-track.is-playing {
    background: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 38%, transparent);
}

.fsa-mm-playlist-track-thumb {
    position: relative;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fsa-mm-playlist-track-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fsa-mm-playlist-track-mono {
    font-size: 15px;
    color: rgba(220, 230, 255, 0.5);
}

/* Animated EQ bars on the currently playing row's thumbnail. */
.fsa-mm-playlist-track-eq {
    position: absolute;
    inset: 0;
    display: none;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    padding-bottom: 7px;
    background: rgba(6, 9, 18, 0.5);
}

.fsa-mm-playlist-track.is-playing .fsa-mm-playlist-track-eq {
    display: flex;
}

.fsa-mm-playlist-track-eq i {
    width: 2.5px;
    height: 5px;
    border-radius: 2px;
    background: var(--fsa-mm-cyan, #90fffb);
    animation: fsa-mm-playlist-eq 0.9s ease-in-out infinite;
}

.fsa-mm-playlist-track-eq i:nth-child(2) { animation-delay: 0.18s; }
.fsa-mm-playlist-track-eq i:nth-child(3) { animation-delay: 0.36s; }

@keyframes fsa-mm-playlist-eq {
    0%, 100% { height: 4px; }
    50% { height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .fsa-mm-playlist-track-eq i { animation: none; height: 9px; }
}

/* Song + artist on ONE line: "Song · Artist", ellipsis when tight. */
.fsa-mm-playlist-track-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    overflow: hidden;
}

.fsa-mm-playlist-track-song {
    font-size: 13px;
    font-weight: 600;
    color: var(--fsa-mm-mgmt-text-color, #eaf0ff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
}

.fsa-mm-playlist-track-artist {
    font-size: 11.5px;
    color: rgba(220, 230, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

.fsa-mm-playlist-track-artist::before {
    content: "·";
    margin-right: 6px;
    color: rgba(220, 230, 255, 0.32);
}

/* Compact circular play button on each row. Forced square so it can't render
   as an oval when the row's flex layout tries to stretch/shrink it. */
.fsa-mm-playlist-track .fsa-mm-player-trigger {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px;
    aspect-ratio: 1 / 1;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(107, 203, 255, 0.30);
    background: rgba(107, 203, 255, 0.10);
    color: var(--fsa-mm-cyan, #90fffb);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.fsa-mm-playlist-track .fsa-mm-player-trigger:hover {
    background: rgba(107, 203, 255, 0.20);
    border-color: rgba(107, 203, 255, 0.55);
}

.fsa-mm-playlist-track .fsa-mm-player-trigger svg {
    width: 12px !important;
    height: 12px !important;
}

.fsa-mm-playlist-track.is-playing .fsa-mm-player-trigger {
    background: var(--fsa-mm-accent, #2b6bff);
    border-color: var(--fsa-mm-accent, #2b6bff);
    color: #fff;
}

@media (max-width: 600px) {
    .fsa-mm-playlist-panel { padding: 12px; border-radius: 18px; }
    .fsa-mm-playlist-groups { gap: 12px; }
    .fsa-mm-viz-embed { height: clamp(260px, 42vh, 360px); }
}

/* Tablet+ : there's room for everything, so drop the Advanced collapse and show
   all controls. Main FX flow into 2 columns; the limiter becomes a 2-col grid
   (Gain/Roof in column 1, Attack/Release in column 2) — far less vertical room.
   Placed last so it overrides the single-column base mixer rules above. */
@media (min-width: 640px) {
    .fsa-mm-playlist-player--hero.is-mixer .fsa-mm-fx-advanced-toggle {
        display: none !important;
    }

    .fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-fx-control.fsa-mm-fx-advanced {
        display: flex !important;
    }

    .fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-limiter-group.fsa-mm-fx-advanced {
        display: flex !important;
    }

    .fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-fx-controls {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
        gap: 12px 26px !important;
    }

    .fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-limiter-group-body {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 26px !important;
    }

    /* Actions return to flow as a grid cell (lands under Width), horizontal. */
    .fsa-mm-playlist-player--hero.is-mixer .fsa-mm-player-fx-actions {
        position: static !important;
        max-width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        align-self: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }
}