:root {
    /* Base palette mirrors the SSP immersive landing page (ink/blue/cyan). */
    --fsa-mm-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fsa-mm-bg-start: #070b16;
    --fsa-mm-bg-end: #05070d;
    --fsa-mm-grid-color: #141d30;
    --fsa-mm-card-bg: #0a0e1a;
    --fsa-mm-card-border: #1d2740;
    --fsa-mm-title-color: #eaf1ff;
    --fsa-mm-text-color: #9aa6c4;
    --fsa-mm-label-color: #eaf1ff;
    --fsa-mm-accent: #2b6bff;
    --fsa-mm-accent-2: #6bcbff;
    --fsa-mm-cyan: #90fffb;
    --fsa-mm-input-bg: #0c1120;
    --fsa-mm-input-border: #1d2740;
    --fsa-mm-input-text: #eaf1ff;
    --fsa-mm-placeholder: #6b7794;
    --fsa-mm-button-bg: #2b6bff;
    --fsa-mm-button-text: #ffffff;
    --fsa-mm-title-size: 56px;
    --fsa-mm-body-size: 16px;
    --fsa-mm-label-size: 14px;
    --fsa-mm-input-size: 15px;
    --fsa-mm-radius: 18px;
    --fsa-mm-mgmt-title-size: 30px;
    --fsa-mm-mgmt-label-size: 10px;
    --fsa-mm-mgmt-panel-title-size: 16px;
    --fsa-mm-mgmt-table-head-size: 11px;
    --fsa-mm-mgmt-row-size: 13px;
    --fsa-mm-mgmt-muted-size: 12px;
    --fsa-mm-mgmt-heading-color: #eaf1ff;
    --fsa-mm-mgmt-text-color: #9aa6c4;
    --fsa-mm-mgmt-muted-color: #6b7794;
    --fsa-mm-mgmt-border-color: #1d2740;
    --fsa-mm-wrap-bg: linear-gradient(135deg, var(--fsa-mm-bg-start), var(--fsa-mm-bg-end));
    --fsa-mm-wrap-border: var(--fsa-mm-card-border);
    --fsa-mm-wrap-grid-opacity: 0.2;
    --fsa-mm-shell-bg: color-mix(in srgb, var(--fsa-mm-card-bg) 94%, transparent);
    --fsa-mm-shell-border: var(--fsa-mm-card-border);
    --fsa-mm-shell-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

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-form-wrap {
    position: relative;
    max-width: 760px;
    margin: 24px auto;
    padding: 24px;
    background: var(--fsa-mm-wrap-bg);
    border: 1px solid color-mix(in srgb, var(--fsa-mm-wrap-border) 48%, transparent);
    border-radius: calc(var(--fsa-mm-radius) + 6px);
    overflow: hidden;
    font-family: var(--fsa-mm-font-family);
}

.fsa-mm-form-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--fsa-mm-grid-color) 55%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--fsa-mm-grid-color) 55%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: var(--fsa-mm-wrap-grid-opacity);
    pointer-events: none;
}

/* Page Background = "This program's theme": suppress the site-wide SSP Immersive Home
   animated canvas + logo watermark so the program's own themed glossy-black backdrop reads
   clean. Covers the immersive program page (class lands on <body>) and shortcode surfaces
   like /manage, list & spotlight (class lands on a wrapper, matched via :has()). */
body.fsa-mm-bg-themed .ssp-bg-canvas,
body.fsa-mm-bg-themed .ssp-programs__bg,
body.fsa-mm-bg-themed .fsa-mm-program-watermark,
body:has(.fsa-mm-bg-themed) .ssp-bg-canvas,
body:has(.fsa-mm-bg-themed) .ssp-programs__bg {
    display: none !important;
}

/* Themed program pages: drop the accent glow the fixed backdrop otherwise paints (it washes
   the empty areas around a bare form with theme colour and reads as a tint overlay). Keep it a
   clean flat dark; the theme shows through the form's own accents, borders and buttons. */
body.fsa-mm-bg-themed .fsa-mm-program-bg {
    /* Brushed metal, dark black: a broad diagonal light sweep + fine light/dark horizontal grain
       (the brush) over a deep black gradient, so the page reads as one solid dark-metal block.
       Neutral (no theme hue) — the theme's colour stays in the accents/buttons/meteors. */
    background-image:
        linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, 0.03) 48%, rgba(255, 255, 255, 0.045) 51%, transparent 68%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.016) 0px, rgba(255, 255, 255, 0.016) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0px, rgba(0, 0, 0, 0.22) 1px, transparent 1px, transparent 5px),
        radial-gradient(120% 80% at 50% -8%, rgba(255, 255, 255, 0.028), transparent 58%),
        linear-gradient(180deg, #0a0a0c 0%, #060607 46%, #010102 100%) !important;
    background-color: #010102 !important;
}

/* Page Background = "Custom media": a fixed, full-bleed image/video backdrop with a dark scrim
   for legibility. Sits behind all content (the topbar/page/foot are lifted to z-index:1). */
.fsa-mm-program-bg-media {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.fsa-mm-program-bg-media__el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tile mode: repeat a pattern image at its natural size instead of covering. */
.fsa-mm-program-bg-media__tile-img {
    object-fit: unset;
    background-size: auto;
    background-color: #05070d;
}

.fsa-mm-program-bg-media__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #05070d calc(var(--fsa-mm-bg-dim, 0.7) * 100%), transparent),
            color-mix(in srgb, #05070d calc(min(0.92, var(--fsa-mm-bg-dim, 0.7) + 0.12) * 100%), transparent));
}

/* Themed surfaces: force NEUTRAL near-black container fills so no large card/box reads as a
   block of theme colour. The theme lives in the accents, borders and buttons — not the surface
   fill. !important overrides the per-program inline card/background vars, so it applies to
   already-saved programs too. Card BORDERS keep the theme colour (untouched). */
body.fsa-mm-bg-themed .fsa-mm-form-wrap,
.fsa-mm-management-wrap.fsa-mm-bg-themed,
.fsa-mm-submission-list-wrap.fsa-mm-bg-themed,
.fsa-mm-spotlight-list-wrap.fsa-mm-bg-themed {
    --fsa-mm-card-bg: #0a0b11 !important;
    --fsa-mm-input-bg: #080a0f !important;
    --fsa-mm-bg-start: #080b12 !important;
    --fsa-mm-bg-end: #05070d !important;
}

/* .fsa-mm-form-wrap (and therefore .fsa-mm-management-wrap, which shares that class) is already
   position:relative — but the list/spotlight wraps have no position of their own by default, so
   an absolutely-positioned child (the meteor field, below) would escape past them to whatever
   ancestor happens to be positioned next (an unpredictable page-theme/Elementor wrapper). Anchor
   them explicitly so the meteor field always scopes to the visible card, not the wrong ancestor. */
.fsa-mm-submission-list-wrap.fsa-mm-bg-themed,
.fsa-mm-spotlight-list-wrap.fsa-mm-bg-themed {
    position: relative;
}

/* Themed pages: the "submission form immersive overhaul" (below, ~line 8958) paints an accent
   radial GLOW on the wrap and a glassy accent-glow PANEL on the form shell — regardless of Bare
   Wrapper — which reads as a coloured tint box. Flatten both on themed pages so the form sits
   clean on the dark backdrop; the theme stays in the buttons, step chips and package border. */
body.fsa-mm-bg-themed .fsa-mm-form-wrap:not(.fsa-mm-management-wrap) {
    background: transparent !important;
}
body.fsa-mm-bg-themed .fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-form {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Themed program chrome adopts the program's accent (--fsa-mm-prog-accent, set in-head).
   Hero/bio box, spotlight cards + their shine, and the management player shell all share it. */
body.fsa-mm-bg-themed .fsa-mm-program-hero {
    border-color: color-mix(in srgb, var(--fsa-mm-prog-accent, #6bcbff) 42%, transparent) !important;
    background:
        radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--fsa-mm-prog-accent, #2b6bff) 18%, transparent), transparent 58%),
        rgba(10, 14, 26, 0.78) !important;
}

body.fsa-mm-bg-themed .fsa-mm-spotlight-card {
    border-color: color-mix(in srgb, var(--fsa-mm-prog-accent, #6bcbff) 30%, transparent) !important;
}
body.fsa-mm-bg-themed .fsa-mm-spotlight-card:hover {
    border-color: color-mix(in srgb, var(--fsa-mm-prog-accent, #6bcbff) 60%, transparent) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 28px 60px -24px rgba(0, 0, 0, 0.9),
        0 0 0 1px color-mix(in srgb, var(--fsa-mm-prog-accent, #6bcbff) 40%, transparent),
        0 0 36px -6px color-mix(in srgb, var(--fsa-mm-prog-accent, #6bcbff) 45%, transparent) !important;
}
/* Tint the shine sweep with the theme accent instead of plain white */
body.fsa-mm-bg-themed .fsa-mm-spotlight-card::before {
    background: linear-gradient(115deg,
        transparent 28%,
        color-mix(in srgb, var(--fsa-mm-prog-accent, #6bcbff) 24%, rgba(255, 255, 255, 0.08)) 48%,
        transparent 68%) !important;
}

/* Management player shell shares the themed accent border (accent lives on the mgmt wrap) and
   gets the glossy-metallic treatment: a bright top reflection + steel overhead sheen over a dark
   steel gradient, a crisp white top bevel and dark bottom bevel, plus the accent glow. Neutral
   metal so it reads premium for every theme; the accent stays on the border + glow. */
.fsa-mm-management-wrap.fsa-mm-bg-themed #fsa-mm-management-player > .fsa-mm-player-shell {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 48%, var(--fsa-mm-mgmt-border-color, #1d2740)) !important;
    /* Same brushed dark-metal block as the page, a touch lighter so the player still reads as a
       raised panel sitting on top of the backdrop rather than merging into it. */
    background-image:
        linear-gradient(118deg, transparent 28%, rgba(255, 255, 255, 0.035) 46%, rgba(255, 255, 255, 0.055) 50%, transparent 70%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0px, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0px, rgba(0, 0, 0, 0.22) 1px, transparent 1px, transparent 5px),
        radial-gradient(150% 95% at 50% -22%, rgba(190, 198, 214, 0.04), transparent 60%),
        linear-gradient(180deg, #101013 0%, #0a0a0c 46%, #030304 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.7),
        inset 0 3px 10px rgba(0, 0, 0, 0.40),
        0 0 24px -14px color-mix(in srgb, var(--fsa-mm-accent) 45%, transparent),
        0 18px 42px -26px rgba(0, 0, 0, 0.95) !important;
}

/* Themed pages: paint the PAGE itself dark and full-bleed (not a box on the wrap) so a Bare
   Wrapper surface sits on a clean immersive backdrop with no visible wrapper. The wrap stays
   transparent; the theme reads through the cards, accents and buttons on top. */
body:has(.fsa-mm-bg-themed) {
    /* Same brushed dark-metal block as the immersive program page, fixed so it reads as one solid
       full-bleed sheet behind bare-wrapper shortcode surfaces (/manage, list, spotlight). */
    background-image:
        linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, 0.03) 48%, rgba(255, 255, 255, 0.045) 51%, transparent 68%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.016) 0px, rgba(255, 255, 255, 0.016) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0px, rgba(0, 0, 0, 0.22) 1px, transparent 1px, transparent 5px),
        radial-gradient(120% 80% at 50% -8%, rgba(255, 255, 255, 0.028), transparent 58%),
        linear-gradient(180deg, #0a0a0c 0%, #060607 46%, #010102 100%) !important;
    background-color: #010102 !important;
    background-attachment: fixed !important;
}

/* Meteor shower: accent-coloured comet streaks continuously falling across every themed page
   (behind the content, above the metallic backdrop). Ported from Magic UI's Meteors component —
   angle/head/tail geometry match the original; colour now tracks the program's accent instead of
   a fixed grey. Server-rendered (see render_meteor_field() in class-fsa-mm-submissions.php) so
   it's guaranteed present in the HTML; the fall itself is one GPU-cheap CSS transform, no JS.
   Deliberately `position: absolute` (not fixed) and nested inside a confirmed position:relative/
   fixed parent at every call site — an ancestor elsewhere on the page (a theme or Elementor
   wrapper with transform/filter/will-change) can silently hijack `position: fixed`'s containing
   block and make it render somewhere unexpected; anchoring locally avoids that entirely. */
.fsa-mm-meteor-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.fsa-mm-meteor {
    position: absolute;
    top: -100px;
    width: 2px;
    height: 2px;
    border-radius: 999px;
    background: var(--fsa-mm-accent, #e3b23c);
    box-shadow: 0 0 8px 1px color-mix(in srgb, var(--fsa-mm-accent, #e3b23c) 70%, transparent);
    opacity: 0;
    animation-name: fsaMmMeteorFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Tail trails BEHIND the head. Travel is down-left (-400px, +800px), so the tail points up-right:
   atan2(-800, 400) ≈ -63deg, rotated about the head itself (transform-origin at its left edge). */
.fsa-mm-meteor::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 80px;
    height: 1px;
    transform-origin: 0 50%;
    transform: rotate(-63deg);
    background: linear-gradient(90deg, color-mix(in srgb, var(--fsa-mm-accent, #e3b23c) 85%, transparent), transparent);
}

/* Explicit down-left travel vector rather than Magic UI's rotate()+translateX() form: with their
   angle (rotate(-215deg) translateX(-500px)) the displacement works out to (+491, -344) — up and
   to the RIGHT — so streaks starting above the container only ever moved further off it. */
@keyframes fsaMmMeteorFall {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: translate3d(-400px, 800px, 0);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fsa-mm-meteor-field {
        display: none;
    }
}

/* Neutralize any opaque background on the Elementor wrappers around a themed MM shortcode so
   the page backdrop shows through instead of a boxed panel. */
body:has(.fsa-mm-bg-themed) .elementor-shortcode,
body:has(.fsa-mm-bg-themed) .elementor-widget-shortcode,
body:has(.fsa-mm-bg-themed) .elementor-widget-shortcode .elementor-widget-container {
    background: transparent !important;
}

.fsa-mm-form {
    position: relative;
    z-index: 1;
    background: var(--fsa-mm-shell-bg);
    border: 1px solid color-mix(in srgb, var(--fsa-mm-shell-border) 88%, transparent);
    border-radius: var(--fsa-mm-radius);
    box-shadow: var(--fsa-mm-shell-shadow);
    padding: 22px;
    animation: fsaMmFadeUp 360ms ease-out;
}

.fsa-mm-form h3 {
    margin: 0 0 10px;
    color: var(--fsa-mm-title-color);
    font-size: clamp(30px, 5.5vw, var(--fsa-mm-title-size));
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
}

.fsa-mm-form-host {
    margin: 0 0 16px;
    color: var(--fsa-mm-text-color);
    font-size: var(--fsa-mm-body-size);
}

.fsa-mm-step-progress {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(96px, max-content);
    gap: 5px;
    margin: 0 0 8px;
    overflow-x: auto;
    padding: 0 1px 3px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--fsa-mm-accent) 55%, transparent) transparent;
}

.fsa-mm-step-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 82%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 95%, #000000 5%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 84%, transparent)
        );
    color: var(--fsa-mm-text-color);
    text-align: left;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 2%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.22);
    transition: border-color 140ms ease, transform 140ms ease, background-color 140ms ease;
    will-change: transform, opacity;
}

.fsa-mm-step-progress::-webkit-scrollbar {
    height: 8px;
}

.fsa-mm-step-progress::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 58%, transparent);
    border-radius: 999px;
}

.fsa-mm-step-progress::-webkit-scrollbar-thumb {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--fsa-mm-accent) 72%, transparent),
        color-mix(in srgb, var(--fsa-mm-accent) 48%, #ffffff 8%)
    );
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 22%, transparent);
}

.fsa-mm-step-chip:hover {
    transform: translateY(-1px);
}

.fsa-mm-step-chip.is-active {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 80%, transparent);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-accent) 16%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-accent) 10%, var(--fsa-mm-input-bg) 90%)
        );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 4%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.2);
}

.fsa-mm-step-chip.is-complete {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 52%, transparent);
}

.fsa-mm-step-chip-index {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-accent) 20%, transparent),
            color-mix(in srgb, var(--fsa-mm-accent) 12%, transparent)
        );
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 4%, transparent);
    color: var(--fsa-mm-label-color);
    font-size: 10px;
    font-weight: 700;
}

.fsa-mm-step-chip-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fsa-mm-step-chip-copy strong {
    color: var(--fsa-mm-label-color);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.05;
}

.fsa-mm-step-chip-copy span {
    color: var(--fsa-mm-text-color);
    font-size: 8px;
    line-height: 1.05;
}

.fsa-mm-step-panel {
    margin-bottom: 10px;
}

.fsa-mm-form.is-enhanced .fsa-mm-step-panel:not(.is-active) {
    display: none;
}

.fsa-mm-step-head {
    margin-bottom: 10px;
}

.fsa-mm-step-kicker {
    margin: 0 0 6px;
    color: var(--fsa-mm-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fsa-mm-step-head h4 {
    margin: 0 0 4px;
    color: var(--fsa-mm-label-color);
    font-size: clamp(20px, 4.5vw, 28px);
    line-height: 1.05;
}

.fsa-mm-step-head p {
    margin: 0;
    color: var(--fsa-mm-text-color);
    font-size: var(--fsa-mm-body-size);
}

.fsa-mm-step-fields {
    display: grid;
    gap: 12px;
}

.fsa-mm-track-card {
    margin-bottom: 8px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-card-border) 85%, transparent);
    border-radius: calc(var(--fsa-mm-radius) - 6px);
    background: color-mix(in srgb, var(--fsa-mm-card-bg) 72%, transparent);
    padding: 14px;
    will-change: transform, opacity;
}

.fsa-mm-entry-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
    margin-bottom: 12px;
}

.fsa-mm-entry-option {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.fsa-mm-entry-option input {
    display: none !important;
}

.fsa-mm-entry-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: calc(var(--fsa-mm-button-size, var(--fsa-mm-body-size)) * 1.95);
    padding: 0.2em 12px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 82%, transparent);
    color: var(--fsa-mm-text-color);
    font-size: var(--fsa-mm-button-size, var(--fsa-mm-body-size)) !important;
    font-family: var(--fsa-mm-font-family);
    line-height: 1;
    letter-spacing: 0.02em;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 95%, #000000 5%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 84%, transparent)
        );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 2%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.22);
    transition: all 160ms ease;
}

.fsa-mm-entry-option input:checked + span {
    color: var(--fsa-mm-button-text);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-accent) 18%, #000000 2%),
            var(--fsa-mm-accent)
        );
    border-color: var(--fsa-mm-accent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 5%, transparent),
        inset 0 2px 6px rgba(0, 0, 0, 0.16);
}

.fsa-mm-boost-card {
    border: 1px solid color-mix(in srgb, var(--fsa-mm-card-border) 85%, transparent);
    border-radius: calc(var(--fsa-mm-radius) - 6px);
    background: color-mix(in srgb, var(--fsa-mm-card-bg) 72%, transparent);
    padding: 14px;
}

.fsa-mm-boost-card .fsa-mm-step-fields {
    margin-top: 10px;
}

.fsa-mm-boost-actions {
    margin-top: 10px;
}

.fsa-mm-track-title {
    margin: 0 0 10px;
    color: var(--fsa-mm-label-color);
    font-size: var(--fsa-mm-label-size);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.fsa-mm-track-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    align-items: stretch;
    margin-bottom: 8px;
}

.fsa-mm-tier-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.fsa-mm-field-tier {
    display: grid;
    gap: 8px;
    margin-bottom: 2px;
}

.fsa-mm-track-option {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.fsa-mm-track-option input {
    display: none !important;
}

.fsa-mm-track-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: calc(var(--fsa-mm-button-size, var(--fsa-mm-body-size)) * 1.95);
    padding: 0.18em 10px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 82%, transparent);
    color: var(--fsa-mm-text-color);
    font-size: clamp(11px, calc(var(--fsa-mm-button-size, var(--fsa-mm-body-size)) * 0.88), 13px) !important;
    font-family: var(--fsa-mm-font-family);
    line-height: 1;
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 95%, #000000 5%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 84%, transparent)
        );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 2%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.22);
    transition: all 160ms ease;
}

.fsa-mm-track-option input:checked + span {
    color: var(--fsa-mm-button-text);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-accent) 18%, #000000 2%),
            var(--fsa-mm-accent)
        );
    border-color: var(--fsa-mm-accent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 5%, transparent),
        inset 0 2px 6px rgba(0, 0, 0, 0.16);
}

.fsa-mm-track-panel {
    margin-top: 8px;
}

/* Multi-song package bundle: extra song slots (song 2..N) on the submit form. */
.fsa-mm-extra-songs-wrap {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed color-mix(in srgb, var(--fsa-mm-input-border) 80%, transparent);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fsa-mm-extra-songs-wrap[hidden] {
    display: none !important;
}
.fsa-mm-extra-songs-intro {
    margin: 0;
    font-size: 13px;
    opacity: 0.82;
}
.fsa-mm-extra-songs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fsa-mm-extra-song {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 82%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 55%, transparent);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fsa-mm-extra-song[hidden] {
    display: none !important;
}
.fsa-mm-extra-song-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fsa-mm-extra-song-num {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.75;
}
.fsa-mm-extra-song-remove {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    padding: 2px 6px;
    border-radius: 8px;
}
.fsa-mm-extra-song-remove:hover {
    opacity: 1;
}
/* The extra-song mode toggle reuses .fsa-mm-track-switch (side-by-side segmented pill),
   so don't override its grid here — just space it within the slot. */
.fsa-mm-extra-song-switch {
    margin: 2px 0 8px;
}
.fsa-mm-extra-song-panel[hidden] {
    display: none !important;
}
.fsa-mm-extra-song-body[hidden] {
    display: none !important;
}
/* Formats line moved above the dropzone (the redundant "Upload Audio File" label is gone). */
.fsa-mm-field-help--above {
    margin: 0 0 8px;
}
/* Compact "saved" summary for a finished extra song. */
.fsa-mm-extra-song-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.fsa-mm-extra-song-edit {
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 55%, transparent);
    background: transparent;
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 999px;
    cursor: pointer;
}
.fsa-mm-extra-song-edit:hover {
    background: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 14%, transparent);
}
.fsa-mm-extra-song-edit[hidden] {
    display: none !important;
}
.fsa-mm-extra-song-saved {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.fsa-mm-extra-song-saved[hidden] {
    display: none !important;
}
.fsa-mm-extra-song-head[hidden] {
    display: none !important;
}
/* Progressive reveal: hide these until earlier steps are done. */
.fsa-mm-track-controls[hidden],
.fsa-mm-extra-choose[hidden] {
    display: none !important;
}
/* Song 1's saved row sits directly in the track card, so it carries its own box. */
.fsa-mm-primary-saved {
    padding: 11px 16px;
    margin-bottom: 4px;
    border: 1px solid color-mix(in srgb, #59d98a 40%, var(--fsa-mm-input-border));
    border-radius: 12px;
    background: color-mix(in srgb, #59d98a 8%, color-mix(in srgb, var(--fsa-mm-input-bg) 55%, transparent));
}
/* Song input + Save on ONE row: the visible upload/link panel fills the width and the
   explicit "Save song" button sits beside it (nothing collapses until it's pressed). */
.fsa-mm-song-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.fsa-mm-song-input-row > .fsa-mm-track-panel,
.fsa-mm-song-input-row > .fsa-mm-extra-song-panel {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
}
.fsa-mm-song-save-slot {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
}
.fsa-mm-song-save-slot[hidden] {
    display: none !important;
}
/* Amber tint — deliberately NOT the green "Continue" gradient, so it reads as "save this
   one" and never as "proceed". */
.fsa-mm-song-save-btn {
    padding: 9px 18px;
    border-radius: 999px;
    border: none;
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    color: #241a00;
    background: linear-gradient(150deg, #f6c453, #f0a500);
    box-shadow: 0 6px 16px -8px rgba(240, 165, 0, 0.7);
    transition: opacity 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.fsa-mm-song-save-btn:hover:not(:disabled) {
    filter: brightness(1.06);
}
.fsa-mm-song-save-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
    filter: grayscale(0.4);
}
@media (max-width: 560px) {
    /* On a narrow phone the Save button drops below the input — center it (and Add another
       song) so the compact layout reads tidily instead of hugging an edge. */
    .fsa-mm-song-input-row {
        flex-wrap: wrap;
        justify-content: center;
    }
    .fsa-mm-song-input-row > .fsa-mm-track-panel,
    .fsa-mm-song-input-row > .fsa-mm-extra-song-panel {
        flex-basis: 100%;
    }
    .fsa-mm-song-save-slot {
        margin-top: 2px;
    }
    .fsa-mm-add-song-btn {
        align-self: center;
    }
}
.fsa-mm-extra-saved-check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: color-mix(in srgb, #59d98a 22%, transparent);
    color: #59d98a;
    font-size: 11px;
    font-weight: 900;
}
.fsa-mm-extra-saved-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* A saved slot reads as a tidy confirmed row. */
.fsa-mm-extra-song.is-saved {
    border-color: color-mix(in srgb, #59d98a 40%, var(--fsa-mm-input-border));
    background: color-mix(in srgb, #59d98a 7%, color-mix(in srgb, var(--fsa-mm-input-bg) 55%, transparent));
}
.fsa-mm-extra-dropzone {
    min-height: 52px;
    padding: 7px 12px;
    gap: 12px;
}
/* Trim the icon a touch so the shorter dropzone still reads cleanly next to Save song. */
.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-extra-dropzone .fsa-mm-upload-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    background-size: 17px 17px;
}
/* Uploaded state: the dropzone shows the file name (JS) on a success-tinted panel, and the
   status line becomes a "Re-upload" control. */
.fsa-mm-extra-upload.is-uploaded .fsa-mm-extra-dropzone {
    border-style: solid;
    border-color: color-mix(in srgb, #59d98a 55%, var(--fsa-mm-input-border));
    background: color-mix(in srgb, #59d98a 9%, transparent);
}
.fsa-mm-reupload-btn {
    border: none;
    background: transparent;
    color: var(--fsa-mm-accent-2, #3bdcff);
    font-weight: 700;
    font-size: 12px;
    padding: 2px 2px;
    cursor: pointer;
    text-decoration: underline;
}
.fsa-mm-reupload-btn:hover {
    opacity: 0.82;
}
.fsa-mm-extra-upload-status {
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.85;
    word-break: break-word;
}
.fsa-mm-extra-upload-status.is-error {
    color: #ff8a8a;
    opacity: 1;
}
.fsa-mm-extra-upload-status.is-done {
    color: #59d98a;
    opacity: 1;
}
.fsa-mm-add-song-btn {
    align-self: flex-start;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px dashed color-mix(in srgb, var(--fsa-mm-accent) 60%, transparent);
    background: transparent;
    color: inherit;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
}
.fsa-mm-add-song-btn[hidden] {
    display: none !important;
}
.fsa-mm-add-song-btn:hover {
    border-style: solid;
    background: color-mix(in srgb, var(--fsa-mm-accent) 14%, transparent);
}
/* "N songs" hint under a multi-song package in the entry picker. */
.fsa-mm-tier-label-songs {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.7;
}

.fsa-mm-upload-picker {
    margin-top: 6px;
}

.fsa-mm-upload-picker.has-file .fsa-mm-upload-dropzone {
    display: none;
}

.fsa-mm-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.fsa-mm-upload-dropzone {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 62px;
    box-sizing: border-box;
    border: 1px dashed color-mix(in srgb, var(--fsa-mm-accent) 68%, transparent);
    border-radius: 12px;
    padding: 10px 12px;
    background:
        color-mix(in srgb, var(--fsa-mm-card-bg) 68%, transparent);
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, background-color 140ms ease;
    will-change: transform, opacity;
}

.fsa-mm-upload-dropzone:hover,
.fsa-mm-upload-dropzone.is-dragging {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 92%, #ffffff 8%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fsa-mm-accent) 16%, transparent);
    transform: translateY(-1px);
}

.fsa-mm-upload-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fsa-mm-accent);
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 55%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-accent) 10%, transparent);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.fsa-mm-upload-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    gap: 2px;
}

.fsa-mm-upload-copy strong {
    color: var(--fsa-mm-label-color);
    font-size: calc(var(--fsa-mm-button-size, var(--fsa-mm-body-size)) * 0.72);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.08;
}

.fsa-mm-upload-copy span {
    color: var(--fsa-mm-text-color);
    font-size: calc(var(--fsa-mm-body-size) * 0.76);
    line-height: 1.08;
}

.fsa-mm-upload-filename {
    margin: 0;
    color: var(--fsa-mm-text-color);
    font-size: 13px;
    line-height: 1.2;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fsa-mm-upload-filename.has-file {
    color: var(--fsa-mm-label-color);
}

.fsa-mm-upload-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 88%, transparent);
    border-radius: 12px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 95%, #000000 5%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 84%, transparent)
        );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 3%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.24);
    will-change: transform, opacity;
}

.fsa-mm-upload-selected[hidden] {
    display: none !important;
}

.fsa-mm-upload-clear {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 82%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 92%, transparent);
    color: var(--fsa-mm-label-color);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 3%, transparent);
}
/* Clean "Replace" pill on the selected-file chip (no offset X, no pink hover). */
.fsa-mm-upload-replace {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 85%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 88%, transparent);
    color: color-mix(in srgb, var(--fsa-mm-text-color) 82%, transparent);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.fsa-mm-upload-replace:hover {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 60%, transparent);
    color: var(--fsa-mm-text-color);
    background: color-mix(in srgb, var(--fsa-mm-accent) 12%, transparent);
}
.fsa-mm-upload-replace-icon {
    flex: 0 0 auto;
    opacity: 0.85;
}

/* ---- Direct-upload progress: an obvious amber bar so submitters wait for the
   upload to finish before pressing Continue; turns green when complete. ---- */
.fsa-mm-upload-progress[hidden] {
    display: none !important;
}
.fsa-mm-upload-progress {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}
.fsa-mm-upload-progress-track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 68%, #000000 32%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}
.fsa-mm-upload-progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f5b301, #ffd45a);
    box-shadow: 0 0 12px rgba(245, 179, 1, 0.55);
    transition: width 200ms ease;
}
.fsa-mm-upload-picker.is-uploading-direct .fsa-mm-upload-progress-fill {
    background-image:
        linear-gradient(90deg, #f5b301, #ffd45a),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.22) 0 8px, transparent 8px 16px);
    background-size: 100% 100%, 28px 28px;
    animation: fsaMmUploadStripes 0.8s linear infinite;
}
@keyframes fsaMmUploadStripes {
    from { background-position: 0 0, 0 0; }
    to { background-position: 0 0, 28px 0; }
}
.fsa-mm-upload-progress-text {
    margin: 0;
    color: #ffce5a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.fsa-mm-upload-picker.is-uploading-direct .fsa-mm-upload-filename {
    color: #ffce5a;
}
.fsa-mm-upload-picker.is-uploading-direct .fsa-mm-upload-selected {
    border-color: color-mix(in srgb, #f5b301 58%, var(--fsa-mm-input-border) 42%);
}
/* Complete → green */
.fsa-mm-upload-picker.is-direct-uploaded .fsa-mm-upload-progress-fill {
    background: linear-gradient(90deg, #1fb96a, #4ade80);
    box-shadow: 0 0 12px rgba(40, 199, 111, 0.5);
    animation: none;
}
.fsa-mm-upload-picker.is-direct-uploaded .fsa-mm-upload-progress-text {
    color: #6ee7a8;
}
.fsa-mm-upload-picker.is-direct-uploaded .fsa-mm-upload-selected {
    border-color: color-mix(in srgb, #1fb96a 48%, var(--fsa-mm-input-border) 52%);
}
.fsa-mm-upload-picker.is-upload-error .fsa-mm-upload-filename {
    color: #ff9a9a;
}
@media (prefers-reduced-motion: reduce) {
    .fsa-mm-upload-picker.is-uploading-direct .fsa-mm-upload-progress-fill {
        animation: none;
    }
}

.fsa-mm-track-panel label,
.fsa-mm-field > label {
    display: block;
    margin-bottom: 5px;
    color: var(--fsa-mm-label-color);
    font-size: var(--fsa-mm-label-size);
    font-weight: 600;
}

.fsa-mm-track-panel .fsa-mm-upload-dropzone {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0;
}

.fsa-mm-track-panel .fsa-mm-upload-dropzone .fsa-mm-upload-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.fsa-mm-field {
    position: relative;
    margin-bottom: 0;
}

.fsa-mm-field .required {
    color: var(--fsa-mm-accent);
}

.fsa-mm-field input,
.fsa-mm-field textarea,
.fsa-mm-field select,
.fsa-mm-track-panel input {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 84%, transparent);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 96%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 86%, transparent)
        );
    color: var(--fsa-mm-input-text);
    font-size: var(--fsa-mm-input-size);
    padding: 8px 14px;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 2%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.26);
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.fsa-mm-field-floating input,
.fsa-mm-field-floating select,
.fsa-mm-field-floating textarea {
    min-height: 44px;
    padding: 16px 14px 5px;
}

.fsa-mm-field-floating textarea {
    min-height: 120px;
    padding: 22px 14px 10px;
    line-height: 1.5;
    resize: vertical;
}

.fsa-mm-field-textarea {
    grid-column: 1 / -1;
}

.fsa-mm-field.is-hidden-field {
    display: none;
}

.fsa-mm-field-floating label {
    position: absolute;
    top: 12px;
    left: 14px;
    margin: 0;
    color: var(--fsa-mm-placeholder);
    font-size: calc(var(--fsa-mm-input-size) * 0.88);
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
    transform-origin: left top;
    transition: transform 140ms ease, color 140ms ease;
}

.fsa-mm-field-floating.is-filled label,
.fsa-mm-field-floating.is-focused label,
.fsa-mm-field-select label {
    color: var(--fsa-mm-label-color);
    transform: translateY(-7px) scale(0.78);
}

.fsa-mm-field-select select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9d4ea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 96%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 86%, transparent)
        );
    background-position: calc(100% - 16px) 50%, 0 0;
    background-repeat: no-repeat, no-repeat;
    background-size: 12px 12px, 100% 100%;
    padding-right: 42px;
}

.fsa-mm-field select option,
.fsa-mm-field select optgroup {
    color: #0f172a;
    background: #f8fafc;
}

.fsa-mm-field input::placeholder,
.fsa-mm-field textarea::placeholder,
.fsa-mm-track-panel input::placeholder {
    color: var(--fsa-mm-placeholder);
    opacity: 1;
}

.fsa-mm-field input:focus,
.fsa-mm-field textarea:focus,
.fsa-mm-field select:focus,
.fsa-mm-track-panel input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 85%, #ffffff 15%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 3%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.28),
        0 0 0 3px color-mix(in srgb, var(--fsa-mm-accent) 12%, transparent);
}

.fsa-mm-track-panel input[type="file"] {
    padding: 8px;
}

.fsa-mm-field-help {
    margin: 4px 0 0;
    color: var(--fsa-mm-text-color);
    font-size: 10px;
    line-height: 1.25;
}

.fsa-mm-field-help.is-compact {
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.15;
    letter-spacing: 0.01em;
}

.fsa-mm-step-error {
    margin: 12px 0 0;
    color: #ffb7b7;
    font-size: 13px;
}

.fsa-mm-step-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

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

/* Honeypot: present in the DOM for bots, off-screen for humans + AT. */
.fsa-mm-hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Optional "create an account" opt-in card on the final step */
.fsa-mm-account-optin {
    margin: 14px 0 4px;
    padding: 14px 16px;
    border: 1px solid var(--fsa-mm-input-border, rgba(139, 150, 179, 0.28));
    border-radius: 14px;
    background: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 6%, transparent);
}
.fsa-mm-account-optin[hidden] {
    display: none !important;
}
.fsa-mm-account-optin-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fsa-mm-label-size, 14px);
    color: var(--fsa-mm-label-color, #eaf1ff);
}
.fsa-mm-account-optin-toggle input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--fsa-mm-accent, #2b6bff);
}
.fsa-mm-account-optin-body {
    margin-top: 12px;
}
.fsa-mm-account-optin-body .fsa-mm-field-floating input {
    padding-top: 18px;
    padding-bottom: 6px;
    min-height: 0;
    height: 46px;
}
.fsa-mm-account-optin-body .fsa-mm-field-floating label {
    top: 14px;
    font-size: 11px;
}
.fsa-mm-account-optin-body .fsa-mm-field-help {
    color: var(--fsa-mm-text-color, #9aa6c4);
}
.fsa-mm-account-optin-body[hidden] {
    display: none !important;
}

.fsa-mm-submit-progress[hidden] {
    display: none !important;
}

.fsa-mm-step-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 82%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 95%, #000000 5%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 84%, transparent)
        );
    color: var(--fsa-mm-label-color);
    font-family: var(--fsa-mm-font-family);
    font-size: clamp(10px, calc(var(--fsa-mm-button-size, var(--fsa-mm-body-size)) * 0.84), 13px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    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-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-button-bg) 84%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-button-bg) 18%, #000000 2%),
            var(--fsa-mm-button-bg)
        );
    color: var(--fsa-mm-button-text);
    font-family: var(--fsa-mm-font-family);
    font-size: clamp(10px, calc(var(--fsa-mm-button-size, var(--fsa-mm-body-size)) * 0.84), 13px);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    min-height: 31px;
    padding: 0 12px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 5%, transparent),
        inset 0 2px 6px rgba(0, 0, 0, 0.14),
        0 8px 18px color-mix(in srgb, var(--fsa-mm-button-bg) 16%, transparent);
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, color 120ms ease, filter 120ms ease;
}

.fsa-mm-submit:hover {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-button-hover-bg, var(--fsa-mm-button-bg)) 18%, #000000 2%),
            var(--fsa-mm-button-hover-bg, var(--fsa-mm-button-bg))
        );
    color: var(--fsa-mm-button-hover-text, var(--fsa-mm-button-text));
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 5%, transparent),
        inset 0 2px 6px rgba(0, 0, 0, 0.14),
        0 10px 20px color-mix(in srgb, var(--fsa-mm-button-hover-bg, var(--fsa-mm-button-bg)) 18%, transparent);
}

.fsa-mm-submit:active {
    transform: translateY(0);
}

.fsa-mm-form.is-submitting .fsa-mm-step-actions {
    opacity: 0.9;
}

.fsa-mm-form.is-submitting .fsa-mm-step-back,
.fsa-mm-form.is-submitting .fsa-mm-submit,
.fsa-mm-form.is-submitting .fsa-mm-payment-trigger {
    cursor: wait;
    filter: saturate(0.88);
}

.fsa-mm-submit-progress {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.fsa-mm-submit-progress-copy {
    margin: 0;
    color: color-mix(in srgb, var(--fsa-mm-text-color) 92%, #ffffff 8%);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.fsa-mm-submit-progress-bar {
    position: relative;
    height: 8px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 78%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 88%, #000000 12%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.22);
}

.fsa-mm-submit-progress-bar span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--fsa-mm-button-bg) 40%, transparent),
            var(--fsa-mm-button-bg),
            color-mix(in srgb, var(--fsa-mm-button-hover-bg, var(--fsa-mm-button-bg)) 72%, #ffffff 28%)
        );
    box-shadow: 0 0 18px color-mix(in srgb, var(--fsa-mm-button-bg) 22%, transparent);
    animation: fsaMmIndeterminateUpload 1.15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes fsaMmIndeterminateUpload {
    0% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(260%);
    }
}

.fsa-mm-payment-trigger,
.fsa-mm-inline-payment-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 82%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 95%, #000000 5%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 84%, transparent)
        );
    color: var(--fsa-mm-label-color);
    font-family: var(--fsa-mm-font-family);
    font-size: clamp(10px, calc(var(--fsa-mm-button-size, var(--fsa-mm-body-size)) * 0.82), 13px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 2%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.2);
    transition: transform 120ms ease, border-color 120ms ease, color 120ms ease;
}

.fsa-mm-step-actions .fsa-mm-payment-trigger {
    margin-left: auto;
}

.fsa-mm-payment-trigger:hover,
.fsa-mm-inline-payment-button:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--fsa-mm-button-bg) 42%, var(--fsa-mm-input-border) 58%);
    color: var(--fsa-mm-heading-color, #ffffff);
}

.fsa-mm-inline-payment-button {
    margin-left: 8px;
}

.fsa-mm-inline-payment-button-wrap.is-success {
    display: block;
    width: 100%;
    margin-top: 14px;
    text-align: center;
}

.fsa-mm-inline-payment-button.is-success {
    min-height: 44px;
    min-width: min(200px, 100%);
    margin-left: 0;
    padding: 0 28px;
    border-radius: 999px;
    border-color: color-mix(in srgb, var(--fsa-mm-button-bg) 70%, transparent);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, #ffffff 12%, var(--fsa-mm-button-bg) 88%),
            var(--fsa-mm-button-bg)
        );
    color: var(--fsa-mm-button-text);
    font-size: clamp(12px, calc(var(--fsa-mm-button-size, var(--fsa-mm-body-size)) * 0.9), 14px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent),
        0 10px 24px -8px color-mix(in srgb, var(--fsa-mm-button-bg) 55%, transparent);
}

.fsa-mm-inline-payment-button.is-success:hover {
    border-color: color-mix(in srgb, var(--fsa-mm-button-hover-bg, var(--fsa-mm-button-bg)) 80%, transparent);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, #ffffff 12%, var(--fsa-mm-button-hover-bg, var(--fsa-mm-button-bg)) 88%),
            var(--fsa-mm-button-hover-bg, var(--fsa-mm-button-bg))
        );
    color: var(--fsa-mm-button-hover-text, var(--fsa-mm-button-text));
}

/* Integrated Stripe "Pay Now" — the default/primary action when a host is connected */
.fsa-mm-inline-payment-button-wrap.is-paynow {
    display: block;
    width: 100%;
    margin: 14px 0 6px;
    text-align: center;
}

.fsa-mm-inline-payment-button.is-paynow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    min-width: min(240px, 100%);
    margin-left: 0;
    padding: 0 30px;
    border-radius: 999px;
    border: 1.5px solid #2fbf6c;
    background: linear-gradient(180deg, #56e295 0%, #2fbf6c 100%);
    color: #07210f;
    font-size: clamp(13px, calc(var(--fsa-mm-button-size, var(--fsa-mm-body-size)) * 0.95), 15px);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 10px 26px -10px rgba(47, 191, 108, 0.85);
}

.fsa-mm-autopay-hint {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    color: var(--fsa-mm-text-color);
    opacity: 0.75;
}

.fsa-mm-inline-payment-button.is-paynow:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #6bf0a6 0%, #34cf76 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 14px 30px -10px rgba(47, 191, 108, 0.95);
}

/* Cancel/dismiss a payment prompt — muted outline pill beside the pay button. */
.fsa-mm-inline-payment-button.is-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-left: 6px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--fsa-mm-text-color, #9aa6c4) 42%, transparent);
    background: transparent;
    color: var(--fsa-mm-text-color, #9aa6c4);
    font-size: clamp(12px, calc(var(--fsa-mm-button-size, var(--fsa-mm-body-size)) * 0.9), 14px);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fsa-mm-inline-payment-button.is-cancel:hover {
    background: color-mix(in srgb, var(--fsa-mm-text-color, #9aa6c4) 12%, transparent);
    color: var(--fsa-mm-heading-color, #eaf1ff);
}

/* "Add Another Submission" button shown after a submission (form collapsed behind it). */
.fsa-mm-add-another-wrap {
    display: flex;
    justify-content: center;
    margin: 14px 0 4px;
}

.fsa-mm-add-another {
    min-width: min(280px, 100%);
}

/* Keep the form collapsed after a submission until "Add Another Submission" is pressed.
   Uses a class (not the [hidden] attribute) because the entry-mode JS resets `hidden`. */
.fsa-mm-entry-panel.is-collapsed,
.fsa-mm-step-actions.is-collapsed {
    display: none !important;
}

/* Pay/Cancel button rows — compact, uniform, side by side (wrap on very narrow screens). */
.fsa-mm-pay-actions,
.fsa-mm-pay-fallback-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    margin: 14px 0 4px;
}

.fsa-mm-pay-actions .fsa-mm-inline-payment-button-wrap {
    display: contents; /* let the inner pay button flex directly alongside Cancel */
}

.fsa-mm-pay-actions .fsa-mm-inline-payment-button,
.fsa-mm-pay-fallback-row .fsa-mm-inline-payment-button {
    flex: 1 1 auto;
    min-width: 120px;
    max-width: none;
    min-height: 42px;
    height: auto;
    margin: 0;
    padding: 8px 16px;
    /* Let the pay label wrap instead of clipping (it was fixed-width + nowrap, so long
       package names like "Pay $10.00 - Double Play" were cut off). Buttons grow to fill
       the row side by side. */
    white-space: normal;
    text-align: center;
    line-height: 1.2;
}

/* After Cancel the notice collapses to a neutral "Cancelled". */
.fsa-mm-form-notice.is-cancelled {
    border-color: color-mix(in srgb, var(--fsa-mm-text-color, #9aa6c4) 28%, transparent);
    background: transparent;
    box-shadow: none;
}

.fsa-mm-cancelled-msg {
    margin: 0;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fsa-mm-text-color, #9aa6c4);
}

.fsa-mm-payment-modal[hidden] {
    display: none !important;
}

.fsa-mm-payment-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
}

.fsa-mm-payment-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 7, 14, 0.68);
    backdrop-filter: blur(6px);
}

.fsa-mm-payment-modal-card {
    position: relative;
    width: min(520px, calc(100vw - 28px));
    margin: min(10vh, 84px) auto 0;
    padding: 18px 20px 18px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 82%, transparent);
    border-radius: 18px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 96%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 86%, transparent)
        );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 3%, transparent),
        0 24px 56px rgba(0, 0, 0, 0.34);
}

.fsa-mm-payment-modal-head {
    display: grid;
    gap: 4px;
    margin: -2px 32px 14px 0;
    cursor: grab;
    user-select: none;
}

.fsa-mm-payment-modal-card.is-dragging .fsa-mm-payment-modal-head {
    cursor: grabbing;
}

.fsa-mm-payment-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 82%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 92%, transparent);
    color: var(--fsa-mm-label-color);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.fsa-mm-payment-modal-card h4 {
    margin: 0;
    color: color-mix(in srgb, var(--fsa-mm-heading-color, #f2f4f9) 96%, #ffffff 4%);
    font-size: calc(var(--fsa-mm-body-size) + 7px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.01em;
}

.fsa-mm-payment-modal-copy {
    margin: 0;
    color: color-mix(in srgb, var(--fsa-mm-text-color) 88%, #ffffff 12%);
    font-size: 13px;
    line-height: 1.4;
}

.fsa-mm-payment-method-list {
    display: grid;
    gap: 10px;
}

.fsa-mm-payment-method-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--fsa-mm-accent), var(--fsa-mm-accent-2));
    color: var(--fsa-mm-button-text, #ffffff);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-align: center;
    transition: background 160ms ease, transform 140ms ease, box-shadow 200ms ease, color 160ms ease;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent),
        0 14px 30px -14px color-mix(in srgb, var(--fsa-mm-accent) 90%, transparent);
}

.fsa-mm-payment-method-link:hover {
    background: linear-gradient(135deg, var(--fsa-mm-accent-2), var(--fsa-mm-cyan));
    color: #04101f;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent),
        0 18px 36px -16px color-mix(in srgb, var(--fsa-mm-accent-2) 90%, transparent);
}

.fsa-mm-form-notice {
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 14px;
    font-size: var(--fsa-mm-body-size);
    line-height: 1.55;
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 82%, transparent);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 95%, #000000 5%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 84%, transparent)
        );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 4%, transparent),
        0 18px 40px -22px rgba(0, 0, 0, 0.7);
}

/* Compact variant — used for the inline "log in to boost" prompt so it doesn't dominate. */
.fsa-mm-form-notice--compact {
    padding: 9px 14px;
    margin-bottom: 10px;
    border-radius: 10px;
    font-size: calc(var(--fsa-mm-body-size) * 0.92);
    line-height: 1.35;
    box-shadow: none;
}

.fsa-mm-form-notice--compact p {
    margin: 0;
}

/* Clean dark card with a green accent rather than a heavy green fill. */
.fsa-mm-form-notice.success {
    border-color: color-mix(in srgb, #34d399 42%, var(--fsa-mm-input-border) 58%);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 90%, #0f5f34 10%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 96%, transparent)
        );
    color: #eafff3;
}

.fsa-mm-form-notice.error {
    border-color: color-mix(in srgb, #f87171 42%, var(--fsa-mm-input-border) 58%);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 90%, #802424 10%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 96%, transparent)
        );
    color: #ffe2e2;
}

.fsa-mm-form-notice a {
    color: var(--fsa-mm-cyan, #6bcbff);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.fsa-mm-form-notice a:hover {
    color: #ffffff;
}

/* Portfolio gate notice */
.fsa-mm-portfolio-gate-notice {
    text-align: center;
    max-width: 400px;
    margin: 32px auto;
}

.fsa-mm-portfolio-gate-notice .fsa-mm-form-notice-text {
    margin: 0 0 16px;
    color: var(--fsa-mm-muted, #8899b2);
    font-size: 14px;
    line-height: 1.5;
}

.fsa-mm-pg-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Reset WP/theme button styles that bleed into the gate buttons */
.fsa-mm-pg-actions .fsa-mm-btn,
.fsa-mm-pg-actions a.fsa-mm-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    text-shadow: none;
    min-height: 0;
    height: auto;
    line-height: 1;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s;
}

.fsa-mm-pg-actions .fsa-mm-btn-primary {
    background: var(--fsa-mm-button-bg, var(--fsa-mm-accent, #6bcbff));
    color: var(--fsa-mm-button-text, #07111f);
    border: none;
}

.fsa-mm-pg-actions .fsa-mm-btn-secondary {
    background: transparent;
    color: var(--fsa-mm-cyan, #6bcbff);
    border: 1.5px solid color-mix(in srgb, var(--fsa-mm-cyan, #6bcbff) 50%, transparent);
}

.fsa-mm-pg-actions .fsa-mm-btn:hover {
    opacity: 0.82;
}

.fsa-mm-pg-login-panel {
    margin-top: 18px;
    text-align: left;
    border-top: 1px solid var(--fsa-mm-input-border, rgba(255,255,255,0.08));
    padding-top: 18px;
}

/* WP login form reset inside the gate panel */
.fsa-mm-pg-login-panel #loginform,
.fsa-mm-pg-login-panel .login-form-wrap {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.fsa-mm-pg-login-panel label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fsa-mm-muted, #8899b2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fsa-mm-pg-login-panel input[type="text"],
.fsa-mm-pg-login-panel input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 12px;
    padding: 9px 13px;
    border-radius: 8px;
    border: 1px solid var(--fsa-mm-input-border, rgba(255,255,255,0.12));
    background: var(--fsa-mm-input-bg, rgba(255,255,255,0.04));
    color: var(--fsa-mm-text, #e8f0ff);
    font-size: 14px;
    outline: none;
}

.fsa-mm-pg-login-panel input[type="text"]:focus,
.fsa-mm-pg-login-panel input[type="password"]:focus {
    border-color: color-mix(in srgb, var(--fsa-mm-cyan, #6bcbff) 60%, transparent);
}

.fsa-mm-pg-login-panel .forgetmenot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--fsa-mm-muted, #8899b2);
}

.fsa-mm-pg-login-panel .forgetmenot label {
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
    color: var(--fsa-mm-muted, #8899b2);
}

.fsa-mm-pg-login-panel input[type="submit"] {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    background: var(--fsa-mm-button-bg, var(--fsa-mm-accent, #6bcbff));
    color: var(--fsa-mm-button-text, #07111f);
    transition: opacity 0.15s;
}

.fsa-mm-pg-login-panel input[type="submit"]:hover {
    opacity: 0.88;
}

.fsa-mm-host-form-message {
    width: min(100%, 760px);
    margin: 0 auto 14px;
    padding: 10px 16px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-button-bg, var(--fsa-mm-accent)) 62%, var(--fsa-mm-input-border) 38%);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-button-bg, var(--fsa-mm-accent)) 18%, transparent),
            color-mix(in srgb, var(--fsa-mm-input-bg) 82%, transparent)
        );
    color: var(--fsa-mm-notice-text-color, var(--fsa-mm-heading-color));
    font-size: var(--fsa-mm-notice-size, 12px);
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent),
        0 10px 28px color-mix(in srgb, var(--fsa-mm-button-bg, var(--fsa-mm-accent)) 14%, transparent);
}

.fsa-mm-management-wrap {
    /* Edge-to-edge: fill the viewport (minus small gutters) so the queue can breathe. */
    max-width: none;
    margin: 24px clamp(12px, 2vw, 40px);
    overflow: visible;
}

.fsa-mm-management-wrap .fsa-mm-form {
    overflow: visible;
}

.fsa-mm-management-login-wrap {
    max-width: 980px;
    margin: 0 auto;
}

.fsa-mm-management-login-shell {
    display: grid;
    gap: 18px;
}

.fsa-mm-management-login-head {
    display: grid;
    gap: 6px;
    text-align: center;
}

.fsa-mm-management-login-head h3 {
    margin-bottom: 0;
    color: var(--fsa-mm-mgmt-heading-color);
    font-size: clamp(20px, 3vw, var(--fsa-mm-mgmt-title-size));
    line-height: 1.05;
}

.fsa-mm-management-login-head p {
    margin: 0;
    color: var(--fsa-mm-mgmt-text-color);
    font-size: max(12px, calc(var(--fsa-mm-mgmt-row-size) - 1px));
}

.fsa-mm-management-login-eyebrow {
    color: var(--fsa-mm-accent);
    font-size: max(9px, calc(var(--fsa-mm-mgmt-label-size) - 1px));
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fsa-mm-management-login-card {
    display: grid;
    gap: 14px;
    max-width: 420px;
    margin: 0 auto;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 18%, var(--fsa-mm-mgmt-border-color) 82%);
    border-radius: 18px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-card-bg) 92%, transparent),
            color-mix(in srgb, var(--fsa-mm-input-bg) 94%, #000000 6%)
        );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 5%, transparent),
        0 18px 36px rgba(0, 0, 0, 0.16);
}

.fsa-mm-management-login-program {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 82%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 94%, transparent);
}

.fsa-mm-management-login-program-label {
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: max(9px, calc(var(--fsa-mm-mgmt-label-size) - 1px));
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fsa-mm-management-login-program strong {
    color: var(--fsa-mm-mgmt-heading-color);
    font-size: max(12px, calc(var(--fsa-mm-mgmt-row-size) - 1px));
}

.fsa-mm-management-login-form form {
    display: grid;
    gap: 10px;
}

.fsa-mm-management-login-form p {
    margin: 0;
}

.fsa-mm-management-login-form label {
    display: block;
    margin: 0 0 6px;
    color: var(--fsa-mm-mgmt-heading-color);
    font-size: max(10px, var(--fsa-mm-mgmt-label-size));
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fsa-mm-management-login-form input[type="text"],
.fsa-mm-management-login-form input[type="password"] {
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 86%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 94%, transparent);
    color: var(--fsa-mm-mgmt-text-color);
}

.fsa-mm-management-login-form .login-remember label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: max(11px, calc(var(--fsa-mm-mgmt-row-size) - 2px));
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.fsa-mm-management-login-form .login-submit {
    padding-top: 4px;
}

.fsa-mm-management-login-form .button-primary {
    min-height: 38px;
    padding: 0 18px;
    border-radius: 999px;
}

.fsa-mm-management-login-links {
    text-align: center;
}

.fsa-mm-management-login-links a {
    color: var(--fsa-mm-accent);
    font-size: max(11px, calc(var(--fsa-mm-mgmt-row-size) - 2px));
    text-decoration: none;
}

.fsa-mm-management-login-links a:hover,
.fsa-mm-management-login-links a:focus {
    text-decoration: underline;
}

/* ============================================================
   Immersive login treatment — mirrors the SSP landing page
   (deep ink + blue/cyan glow, frosted glass, gradient heading,
   glowing pill button). Scoped to the /manage login only.
   ============================================================ */
.fsa-mm-management-login-wrap {
    position: relative;
    isolation: isolate;
}

/* soft ambient orbs behind the card, like the landing background */
.fsa-mm-management-login-wrap::before {
    content: "";
    position: absolute;
    inset: -40% -10% -20%;
    z-index: -1;
    background:
        radial-gradient(38% 42% at 28% 30%, color-mix(in srgb, var(--fsa-mm-accent) 32%, transparent), transparent 70%),
        radial-gradient(34% 40% at 76% 38%, color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 26%, transparent), transparent 72%),
        radial-gradient(46% 50% at 52% 92%, color-mix(in srgb, var(--fsa-mm-cyan, #90fffb) 14%, transparent), transparent 75%);
    filter: blur(18px);
    opacity: 0.9;
    pointer-events: none;
    animation: fsaMmLoginGlow 14s ease-in-out infinite alternate;
}

.fsa-mm-management-login-head h3 {
    background: linear-gradient(180deg, #ffffff 0%, #bcd4ff 58%, var(--fsa-mm-accent-2, #6bcbff) 120%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.01em;
    text-transform: none;
}

.fsa-mm-management-login-eyebrow {
    background: linear-gradient(90deg, var(--fsa-mm-accent), var(--fsa-mm-accent-2, #6bcbff));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.26em;
}

/* frosted glass card with an accent ring + glow */
.fsa-mm-management-login-card {
    position: relative;
    max-width: 440px;
    padding: 26px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 24%, var(--fsa-mm-mgmt-border-color) 76%);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
        color-mix(in srgb, var(--fsa-mm-card-bg) 70%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 1px 0 color-mix(in srgb, var(--fsa-mm-accent) 30%, transparent),
        0 30px 70px -24px rgba(0, 0, 0, 0.7),
        0 0 60px -22px color-mix(in srgb, var(--fsa-mm-accent) 60%, transparent);
    animation: fsaMmLoginIn 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* inputs: rounded, glassy, glow focus ring */
.fsa-mm-management-login-form input[type="text"],
.fsa-mm-management-login-form input[type="password"] {
    min-height: 46px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 90%, transparent);
    transition: border-color 200ms ease, box-shadow 240ms ease, background-color 200ms ease;
}

.fsa-mm-management-login-form input[type="text"]:focus,
.fsa-mm-management-login-form input[type="password"]:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 70%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 92%, transparent);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--fsa-mm-accent) 26%, transparent),
        0 0 26px -6px color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 60%, transparent);
}

/* primary button: cyan gradient pill with glow + hover lift (landing style) */
.fsa-mm-management-login-form .button-primary {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 999px;
    color: #04101f;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, var(--fsa-mm-accent-2, #6bcbff), var(--fsa-mm-cyan, #90fffb));
    box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 80%, transparent);
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease, filter 200ms ease;
}

.fsa-mm-management-login-form .button-primary:hover,
.fsa-mm-management-login-form .button-primary:focus {
    transform: translateY(-2px);
    box-shadow: 0 20px 44px -12px color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 90%, transparent);
    filter: brightness(1.05);
}

.fsa-mm-management-login-form .button-primary:active {
    transform: translateY(0);
}

@keyframes fsaMmLoginIn {
    from { opacity: 0; transform: translateY(16px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fsaMmLoginGlow {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1); opacity: 0.8; }
    to   { transform: translate3d(2%, 1.5%, 0) scale(1.06); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .fsa-mm-management-login-card { animation: none; }
    .fsa-mm-management-login-wrap::before { animation: none; }
    .fsa-mm-management-login-form .button-primary { transition: none; }
}

.fsa-mm-management-head {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
    text-align: center;
}

.fsa-mm-management-head h3 {
    margin-bottom: 0;
    color: var(--fsa-mm-mgmt-heading-color);
    font-size: clamp(22px, 3.2vw, var(--fsa-mm-mgmt-title-size));
    line-height: 1.05;
}

.fsa-mm-management-stats {
    display: grid;
    /* Six numeric stat cards flex; Analytics + Host Console size to their own content so their
       text/buttons always fit (no squeezed columns at mid widths). */
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto auto;
    gap: 7px;
    width: 100%;
}

.fsa-mm-management-stat-card-analytics,
.fsa-mm-management-stat-card-host-console {
    white-space: nowrap;
}

.fsa-mm-management-stat-card-analytics .fsa-mm-management-stat-actions {
    flex-wrap: nowrap;
}

.fsa-mm-management-stat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 26%, var(--fsa-mm-mgmt-border-color) 74%);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-accent) 10%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-card-bg) 92%, transparent)
        );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 3%, transparent),
        0 10px 24px rgba(0, 0, 0, 0.12);
}

.fsa-mm-management-stat-label {
    color: var(--fsa-mm-mgmt-heading-color);
    font-size: max(8px, calc(var(--fsa-mm-mgmt-label-size) - 1px));
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.fsa-mm-management-stat-value {
    color: var(--fsa-mm-accent);
    font-size: max(11px, calc(var(--fsa-mm-mgmt-row-size) + 1px));
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.fsa-mm-management-stat-card-action {
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.fsa-mm-management-stat-card-action:hover,
.fsa-mm-management-stat-card-action:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, #62f1ff 48%, var(--fsa-mm-mgmt-border-color) 52%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 4%, transparent),
        0 0 18px color-mix(in srgb, #62f1ff 18%, transparent),
        0 10px 24px rgba(0, 0, 0, 0.14);
    outline: none;
}

.fsa-mm-management-stat-card-analytics {
    justify-content: space-between;
}

.fsa-mm-management-stat-card-host-console {
    justify-content: center;
    white-space: nowrap;
    padding: 0 14px;
    font-size: max(9px, var(--fsa-mm-mgmt-label-size, 10px));
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: #03110a;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: #16a34a;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform 160ms ease, box-shadow 220ms ease, border-color 160ms ease;
}

.fsa-mm-management-stat-card-host-console:hover,
.fsa-mm-management-stat-card-host-console:focus-visible {
    transform: translateY(-1px);
    color: #03110a;
    border-color: #22c55e;
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    outline: none;
}

.fsa-mm-management-stat-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.fsa-mm-management-stat-link {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--fsa-mm-accent);
    font: inherit;
    font-size: max(10px, calc(var(--fsa-mm-mgmt-row-size) + 1px));
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
}

.fsa-mm-management-stat-link:hover,
.fsa-mm-management-stat-link:focus-visible {
    color: color-mix(in srgb, #ffffff 84%, var(--fsa-mm-accent) 16%);
    outline: none;
}

.fsa-mm-management.is-analytics-hidden .fsa-mm-management-stat-card:not(.fsa-mm-management-stat-card-analytics) .fsa-mm-management-stat-value,
.fsa-mm-management.is-analytics-hidden .fsa-mm-management-stat-card:not(.fsa-mm-management-stat-card-analytics) .fsa-mm-management-stat-label {
    color: rgba(255, 255, 255, 0.02);
    text-shadow: none;
}

.fsa-mm-management.is-analytics-hidden .fsa-mm-management-stat-card:not(.fsa-mm-management-stat-card-analytics) .fsa-mm-management-stat-value {
    background: rgba(255, 255, 255, 0.08);
    color: transparent;
    border-radius: 999px;
    min-width: 54px;
    min-height: 12px;
}

.fsa-mm-management.is-analytics-hidden .fsa-mm-management-stat-card:not(.fsa-mm-management-stat-card-analytics) .fsa-mm-management-stat-label {
    background: rgba(255, 255, 255, 0.06);
    color: transparent;
    border-radius: 999px;
    min-width: 28px;
    min-height: 10px;
}

.fsa-mm-management.is-analytics-hidden [data-management-stats-hide] {
    color: #ffd7d7;
}

.fsa-mm-management-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

/* Row 1 left: the Tools toggle (sits where Program used to be). */
.fsa-mm-management-toolbar-lead {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    order: 1;
}

/* Row 1 right: always-visible search + Update. */
.fsa-mm-management-toolbar-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    order: 4;
}

/* When the dock is collapsed, the filters are hidden, so the primary group carries the
   push-right instead. */
.fsa-mm-management-wrap.is-tools-collapsed .fsa-mm-management-toolbar-primary {
    margin-left: auto;
}

/* Collapsible "Tools" dock content (Settings/Customize + injected Events/Duel). Sits inline on
   row 1, right after the Tools toggle ("Tools > Settings > Customize > Events"); hidden when
   collapsed. */
.fsa-mm-management-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 1 auto;
    min-width: 0;
    gap: 8px;
    flex-wrap: wrap;
    order: 2;
}

/* --- Tools dock: collapsed state hides the stats row + the filters + the config actions --- */
.fsa-mm-management-wrap.is-tools-collapsed .fsa-mm-management-head,
.fsa-mm-management-wrap.is-tools-collapsed .fsa-mm-management-filters,
.fsa-mm-management-wrap.is-tools-collapsed .fsa-mm-management-toolbar-actions {
    display: none;
}

.fsa-mm-management-tools-toggle {
    gap: 6px;
}

.fsa-mm-management-tools-toggle-icon,
.fsa-mm-management-tools-toggle-chevron {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.fsa-mm-management-tools-toggle-icon {
    fill: currentColor;
}

.fsa-mm-management-tools-toggle-chevron {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.18s ease;
}

.fsa-mm-management-wrap:not(.is-tools-collapsed) .fsa-mm-management-tools-toggle-chevron {
    transform: rotate(180deg);
}

.fsa-mm-management-wrap:not(.is-tools-collapsed) .fsa-mm-management-tools-toggle {
    border-color: color-mix(in srgb, var(--fsa-mm-accent, #ff8b2b) 48%, var(--fsa-mm-mgmt-border-color, #2a3040) 52%);
    color: var(--fsa-mm-mgmt-heading-color, #f2f4f9);
}

@media (prefers-reduced-motion: reduce) {
    .fsa-mm-management-tools-toggle-chevron {
        transition: none;
    }
}

.fsa-mm-management-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    /* When expanded, Program/Status sit on the right of row 1 (next to Search/Update): the
       auto left-margin pushes the filters + primary cluster to the right, Tools stays left. */
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    order: 3;
    margin-left: auto;
}

.fsa-mm-management-filter,
.fsa-mm-management-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fsa-mm-management-filter {
    min-width: 0;
}

.fsa-mm-management-settings-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-height: 26px;
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 28%, var(--fsa-mm-mgmt-border-color) 72%);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-accent) 10%, #000000 3%),
            color-mix(in srgb, var(--fsa-mm-card-bg) 92%, transparent)
        );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 2%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.24);
    color: var(--fsa-mm-mgmt-heading-color);
    font-family: var(--fsa-mm-font-family);
    font-size: max(9px, calc(var(--fsa-mm-mgmt-row-size) - 2px));
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.fsa-mm-management-settings-button:hover,
.fsa-mm-management-settings-button:focus {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 58%, transparent);
}

.fsa-mm-management-filter span,
.fsa-mm-management-field span {
    color: var(--fsa-mm-mgmt-heading-color);
    font-size: max(9px, calc(var(--fsa-mm-mgmt-label-size) - 1px));
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.fsa-mm-management-filter select {
    width: auto;
    min-width: 170px;
    min-height: 24px;
    height: 24px;
    padding: 0 26px 0 8px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 80%, transparent);
    border-radius: 9px;
    appearance: none;
    -webkit-appearance: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9d4ea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 96%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 86%, transparent)
        );
    background-position: calc(100% - 8px) 50%, 0 0;
    background-repeat: no-repeat, no-repeat;
    background-size: 10px 10px, 100% 100%;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 2%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.24);
    color: var(--fsa-mm-mgmt-text-color);
    font-family: var(--fsa-mm-font-family);
    font-size: max(9px, calc(var(--fsa-mm-mgmt-row-size) - 2px));
    line-height: 1;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.fsa-mm-management-field input,
.fsa-mm-management-field select {
    width: 100%;
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 80%, transparent);
    border-radius: 10px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 96%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 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);
    color: var(--fsa-mm-mgmt-text-color);
    font-family: var(--fsa-mm-font-family);
    font-size: var(--fsa-mm-mgmt-row-size);
}

.fsa-mm-management-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9d4ea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 96%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 86%, transparent)
        );
    background-position: calc(100% - 11px) 50%, 0 0;
    background-repeat: no-repeat, no-repeat;
    background-size: 12px 12px, 100% 100%;
    padding-right: 34px;
}

.fsa-mm-management-filter select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 85%, #ffffff 15%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 3%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.28),
        0 0 0 3px color-mix(in srgb, var(--fsa-mm-accent) 12%, transparent);
}

.fsa-mm-management-field input:focus,
.fsa-mm-management-field select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 85%, #ffffff 15%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 3%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.28),
        0 0 0 3px color-mix(in srgb, var(--fsa-mm-accent) 12%, transparent);
}

.fsa-mm-management-filter select option,
.fsa-mm-management-filter select optgroup {
    color: #0f172a;
    background: #f8fafc;
}

.fsa-mm-management-viewbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.fsa-mm-management-split {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) 16px minmax(240px, 0.84fr);
    gap: 0;
    align-items: start;
}

/* Draggable divider between Queue and Pending. It's the middle grid track; a drag rewrites the
   two fr values via an inline style on the split (JS), which wins over the rules here. */
.fsa-mm-management-resizer {
    align-self: stretch;
    width: 16px;
    min-height: 40px;
    cursor: col-resize;
    position: relative;
    touch-action: none;
    user-select: none;
}
.fsa-mm-management-resizer::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: rgba(120, 170, 255, 0.22);
    border-radius: 2px;
    transition: background 0.15s ease, width 0.15s ease;
}
.fsa-mm-management-resizer:hover::before,
.fsa-mm-management-resizer:focus-visible::before,
.fsa-mm-management-resizer.is-dragging::before {
    background: rgba(107, 203, 255, 0.75);
    width: 4px;
}
.fsa-mm-management-resizer:focus-visible {
    outline: none;
}

/*
 * When Pending is empty, let Queue breathe and slim the Pending rail —
 * Pending stays visible (count + branded empty state) so reviewers still
 * see "nothing pending." Desktop-only so the ≤1180px stacked layout is
 * untouched. Auto-updates on AJAX refresh via :has() (no JS/PHP needed).
 */
@media (min-width: 1200px) {
    .fsa-mm-management-split:has(.fsa-mm-management-side-column .fsa-mm-management-empty) {
        grid-template-columns: minmax(0, 1fr) 16px minmax(248px, 0.46fr);
    }
}

.fsa-mm-management-panel {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.fsa-mm-management-primary-column,
.fsa-mm-management-side-column {
    min-width: 0;
}

/* Stacked, full-width board (mobile-friendly): Pending on top, Queue below — no columns/resizer. */
.fsa-mm-management-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
}

.fsa-mm-management-stack > .fsa-mm-management-panel {
    width: 100%;
    min-width: 0;
}

/* Split layout (opt-in via Customize → Active Layout) reuses the .fsa-mm-management-split grid
   + draggable resizer below. Collapse it to a single column under 1200px so phones/tablets keep
   the familiar stacked board: hide the divider, and reorder Pending (the side column) back on
   top of Queue to match the default stack. */
@media (max-width: 1199px) {
    .fsa-mm-management-split {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .fsa-mm-management-resizer {
        display: none;
    }

    .fsa-mm-management-split > .fsa-mm-management-side-column {
        order: -1;
    }
}

/* Pending panel: a bit more faded so it never overtakes the Queue; rows pop back on hover.
   Tint the EXISTING list box (no nested box) + mute the title/rows. */
.fsa-mm-management-pending-panel .fsa-mm-management-panel-title {
    color: color-mix(in srgb, var(--fsa-mm-mgmt-heading-color, #f2f4f9) 72%, transparent);
}

.fsa-mm-management-pending-panel .fsa-mm-management-list {
    background: color-mix(in srgb, var(--fsa-mm-card-bg, #0d1018) 62%, transparent);
}

.fsa-mm-management-pending-panel .fsa-mm-pending-row {
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.fsa-mm-management-pending-panel .fsa-mm-pending-row:hover {
    opacity: 1;
}

/* Awaiting-review cue: italic artist/song sets Pending apart from the Queue on every color
   theme (typographic, not color-dependent). */
.fsa-mm-management-pending-panel .fsa-mm-pending-row strong,
.fsa-mm-management-pending-panel .fsa-mm-pending-song {
    font-style: italic;
}

/* When Pending is empty, drop the big empty-state block — just the "Pending N" header line stays,
   so it doesn't eat vertical space above the Queue. */
.fsa-mm-management-pending-panel.is-empty .fsa-mm-management-list {
    display: none;
}

.fsa-mm-management-pending-panel.is-empty .fsa-mm-management-panel-head {
    margin-bottom: 0;
}

/* Desktop: pull the Pending meta/actions in to line up with the Queue's PYMT/DATE/STATUS cluster
   (the Queue's right columns are shrink-to-content, so they form a fixed-width block after the
   flexible artist column). Give the Pending side a matching fixed block so amount/date sit by
   PYMT/DATE and Approve lands at the right like STATUS — closing the big empty gap. */
@media (min-width: 768px) {
    .fsa-mm-management-pending-panel .fsa-mm-pending-side {
        flex: 0 0 auto;
        width: 600px;
        max-width: 62%;
        justify-content: flex-start;
        gap: 0 20px;
    }
    /* Approve/status hugs the right edge of that block (aligns with the Queue STATUS column). */
    .fsa-mm-management-pending-panel .fsa-mm-pending-status {
        margin-left: auto;
    }

    /* Center the Queue's PYMT / DATE / ACTIONS columns (header + cells). They're width:1%
       shrink-to-content by default, so give them real width first (higher specificity than the
       width:1% rule) — otherwise there's nothing to center within. */
    [data-management-panel="queue"] .fsa-mm-management-table .col-score {
        width: 60px;
        text-align: center;
    }
    [data-management-panel="queue"] .fsa-mm-management-table .col-donation {
        width: 80px;
        text-align: center;
    }
    [data-management-panel="queue"] .fsa-mm-management-table .col-date {
        width: 112px;
        text-align: center;
    }
    [data-management-panel="queue"] .fsa-mm-management-table .col-notes {
        width: 126px;
        text-align: center;
    }
    [data-management-panel="queue"] td.col-notes .fsa-mm-actions-cell {
        justify-content: center;
    }
}

/* Split layout: Pending sits in a narrow rail, so drop the fixed 600px meta block (it only
   exists to align Pending with the Queue columns in the STACKED board). In the rail that block
   starves the flexible artist/song column down to zero and the name disappears — let the meta
   shrink to its content so the name keeps the row. Higher specificity than the 768px rule above,
   and scoped to .side-column so the stacked board's alignment is untouched. */
.fsa-mm-management-pending-panel.fsa-mm-management-side-column .fsa-mm-pending-side {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
}

/* Compact pending rows — less height, tighter spacing. */
.fsa-mm-pending-row {
    padding: 2px 8px;
}

.fsa-mm-management-pending-panel .fsa-mm-pending-row .fsa-mm-player-trigger {
    width: 24px;
    height: 24px;
    min-height: 0;
}

.fsa-mm-management-pending-panel .fsa-mm-pending-row .fsa-mm-player-trigger svg {
    width: 12px;
    height: 12px;
}

/* Count-badge toggle: the panel count number is clickable and reveals/hides rows. Collapse
   state lives on the wrap (survives auto-refresh). Pending previews 3 rows; Queue previews 6. */
.fsa-mm-management-panel-count.is-toggle {
    appearance: none;
    cursor: pointer;
    gap: 6px;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* "Show" / "Hide" word beside the number so the toggle reads clearly. */
.fsa-mm-management-count-action {
    padding-left: 6px;
    border-left: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    font-size: max(9px, calc(var(--fsa-mm-mgmt-muted-size) - 2px));
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}

.fsa-mm-management-panel-count.is-toggle:hover,
.fsa-mm-management-panel-count.is-toggle:focus-visible {
    border-color: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 55%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 26%, transparent);
    color: var(--fsa-mm-mgmt-heading-color, #f2f4f9);
    outline: none;
}

/* Expanded badge reads as "on" so it's clear the table is fully shown. */
.fsa-mm-management-wrap.is-pending-expanded [data-management-count-toggle="pending"],
.fsa-mm-management-wrap.is-queue-expanded [data-management-count-toggle="queue"] {
    border-color: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 55%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 22%, transparent);
}

.fsa-mm-management-wrap:not(.is-pending-expanded) [data-management-panel="pending"] .fsa-mm-pending-row:nth-child(n+4) {
    display: none;
}

.fsa-mm-management-wrap:not(.is-queue-expanded) [data-management-panel="queue"] .fsa-mm-management-table tbody > tr:nth-child(n+7) {
    display: none;
}

/* While the Queue is collapsed, hide its "Load more" (expand via the count badge first). */
.fsa-mm-management-wrap:not(.is-queue-expanded) [data-management-panel="queue"] .fsa-mm-management-loadmore {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .fsa-mm-management-pending-panel .fsa-mm-pending-row {
        transition: none;
    }
}

.fsa-mm-management-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.fsa-mm-management-panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fsa-mm-management-panel-head h4 {
    margin: 0;
    color: var(--fsa-mm-mgmt-heading-color);
    font-size: var(--fsa-mm-mgmt-panel-title-size);
    line-height: 1.2;
}

.fsa-mm-management-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fsa-mm-management-panel-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 86%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-mgmt-panel-bg) 78%, var(--fsa-mm-mgmt-accent-color) 22%);
    color: color-mix(in srgb, var(--fsa-mm-mgmt-heading-color) 88%, #ffffff 12%);
    font-size: calc(var(--fsa-mm-mgmt-muted-size) - 1px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
}

.fsa-mm-management-panel-head p {
    margin: 0;
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: var(--fsa-mm-mgmt-muted-size);
    line-height: 1.35;
}

.fsa-mm-management-refresh-button {
    min-width: 74px;
    min-height: 26px;
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 80%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 95%, #000000 5%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 84%, transparent)
        );
    color: var(--fsa-mm-mgmt-text-color);
    font-family: var(--fsa-mm-font-family);
    font-size: max(9px, calc(var(--fsa-mm-mgmt-row-size) - 2px));
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.fsa-mm-management-refresh-button:hover,
.fsa-mm-management-refresh-button:focus-visible {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 72%, #ffffff 28%);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-accent) 26%, rgba(10, 14, 24, 0.96) 74%),
            color-mix(in srgb, var(--fsa-mm-accent) 12%, rgba(10, 14, 24, 0.96) 88%)
        );
    color: #ffffff;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--fsa-mm-accent) 24%, transparent),
        0 10px 24px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
    outline: none;
}

.fsa-mm-management-refresh-button:active {
    transform: translateY(0);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--fsa-mm-accent) 22%, transparent);
}

.fsa-mm-management-refresh-button.is-attention {
    border-color: color-mix(in srgb, #f4c84b 82%, transparent);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, #f4c84b 28%, rgba(8, 12, 20, 0.9) 72%),
            color-mix(in srgb, #f4c84b 14%, rgba(8, 12, 20, 0.92) 86%)
        );
    color: color-mix(in srgb, #fff2bc 88%, #ffffff 12%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, #f4c84b 22%, transparent),
        0 0 18px color-mix(in srgb, #f4c84b 16%, transparent);
}

.fsa-mm-management-refresh-button.is-attention:hover,
.fsa-mm-management-refresh-button.is-attention:focus-visible {
    border-color: color-mix(in srgb, #ffd86a 94%, transparent);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, #ffd86a 34%, rgba(8, 12, 20, 0.88) 66%),
            color-mix(in srgb, #f4c84b 18%, rgba(8, 12, 20, 0.9) 82%)
        );
    color: #fff9de;
    box-shadow:
        0 0 0 1px color-mix(in srgb, #ffd86a 28%, transparent),
        0 0 24px color-mix(in srgb, #f4c84b 22%, transparent);
}

.fsa-mm-management-refresh-button.is-refreshing {
    border-color: color-mix(in srgb, #55c7ff 74%, transparent);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, #55c7ff 24%, rgba(8, 12, 20, 0.9) 76%),
            color-mix(in srgb, #55c7ff 12%, rgba(8, 12, 20, 0.94) 88%)
        );
    color: #e9f8ff;
    box-shadow:
        0 0 0 1px color-mix(in srgb, #55c7ff 16%, transparent),
        0 0 22px color-mix(in srgb, #55c7ff 18%, transparent);
}

.fsa-mm-management-refresh-button.is-refreshing:hover,
.fsa-mm-management-refresh-button.is-refreshing:focus-visible {
    transform: none;
}

.fsa-mm-management-status-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 220px;
    min-width: 0;
    min-height: 34px;
    margin: 0 auto 0 0;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 70%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, rgba(10, 14, 24, 0.96) 92%, transparent);
    color: var(--fsa-mm-mgmt-heading-color);
    font-size: calc(var(--fsa-mm-mgmt-row-size) - 1px);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.fsa-mm-management-status-message.is-muted {
    border-color: color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 55%, transparent);
    color: color-mix(in srgb, var(--fsa-mm-mgmt-muted-color) 78%, #ffffff 22%);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}

.fsa-mm-management-status-message.is-info {
    border-color: color-mix(in srgb, #55c7ff 46%, transparent);
    color: color-mix(in srgb, #d9f2ff 88%, #ffffff 12%);
}

.fsa-mm-management-status-message.is-success {
    border-color: color-mix(in srgb, #4fe089 46%, transparent);
    color: color-mix(in srgb, #dffbe9 88%, #ffffff 12%);
}

.fsa-mm-management-status-message.is-warning {
    border-color: color-mix(in srgb, #f4c84b 46%, transparent);
    color: color-mix(in srgb, #fff2bc 88%, #ffffff 12%);
}

.fsa-mm-management-status-message.is-error {
    border-color: color-mix(in srgb, #ff7777 52%, transparent);
    color: color-mix(in srgb, #ffdede 88%, #ffffff 12%);
}

.fsa-mm-management-archive-button {
    min-height: 30px;
    padding: 4px 10px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 52%, var(--fsa-mm-input-border) 48%);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-accent) 20%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 84%, transparent)
        );
    color: var(--fsa-mm-mgmt-heading-color);
    font-family: var(--fsa-mm-font-family);
    font-size: var(--fsa-mm-mgmt-row-size);
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
}

.fsa-mm-management-archive-button[hidden],
.fsa-mm-management-select-all-button[hidden] {
    display: none !important;
}

.fsa-mm-management-archive-button.is-danger {
    border-color: color-mix(in srgb, #f26a6a 52%, var(--fsa-mm-input-border) 48%);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, #f26a6a 22%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 84%, transparent)
        );
    color: color-mix(in srgb, #ffd0d0 86%, #ffffff 14%);
}

.fsa-mm-management-archive-button.is-warning {
    border-color: color-mix(in srgb, #ff8c4a 52%, var(--fsa-mm-input-border) 48%);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, #ff8c4a 22%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 84%, transparent)
        );
    color: color-mix(in srgb, #ffe6d3 86%, #ffffff 14%);
}

.fsa-mm-management-select-all-button {
    min-height: 30px;
    padding: 4px 10px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 80%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 95%, #000000 5%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 84%, transparent)
        );
    color: var(--fsa-mm-mgmt-heading-color);
    font-family: var(--fsa-mm-font-family);
    font-size: var(--fsa-mm-mgmt-row-size);
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
}

.fsa-mm-management-select-all-button.is-positive {
    border-color: color-mix(in srgb, #22d36f 54%, var(--fsa-mm-input-border) 46%);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, #22d36f 26%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 82%, transparent)
        );
    color: color-mix(in srgb, #e7fff2 88%, #ffffff 12%);
    box-shadow: 0 10px 22px rgba(34, 211, 111, 0.16);
}

.fsa-mm-management-undo-button {
    min-height: 28px;
    padding: 3px 10px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 84%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 95%, #000000 5%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 84%, transparent)
        );
    color: var(--fsa-mm-mgmt-heading-color);
    font-family: var(--fsa-mm-font-family);
    font-size: var(--fsa-mm-mgmt-row-size);
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
}

.fsa-mm-management-search-button {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 80%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 95%, #000000 5%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 84%, transparent)
        );
    color: var(--fsa-mm-mgmt-heading-color);
    cursor: pointer;
}

.fsa-mm-management-search-button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fsa-mm-management-search-modal[hidden] {
    display: none;
}

.fsa-mm-management-search-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.fsa-mm-program-settings-modal[hidden] {
    display: none !important;
}

.fsa-mm-program-settings-modal,
.fsa-mm-customize-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
}

.fsa-mm-program-settings-backdrop,
.fsa-mm-customize-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 14, 0.62);
    backdrop-filter: blur(3px);
}

.fsa-mm-program-settings-dialog,
.fsa-mm-customize-dialog {
    position: relative;
    width: min(100vw - 28px, 680px);
    margin: 56px auto;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 92%, transparent);
    border-radius: 20px;
    background: color-mix(in srgb, var(--fsa-mm-card-bg) 99%, transparent);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.38);
}

.fsa-mm-customize-dialog {
    width: min(100vw - 28px, 860px);
}

.fsa-mm-program-settings-dialog.is-dragging,
.fsa-mm-customize-dialog.is-dragging {
    user-select: none;
}

.fsa-mm-program-settings-head,
.fsa-mm-customize-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    cursor: grab;
}

.fsa-mm-program-settings-head strong,
.fsa-mm-customize-head strong {
    display: block;
    color: var(--fsa-mm-mgmt-heading-color);
    font-size: 18px;
}

.fsa-mm-program-settings-head span,
.fsa-mm-customize-head span {
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: max(10px, calc(var(--fsa-mm-mgmt-muted-size) + 1px));
}

/* Points drawer (management toolbar → Points) — reuses the settings-modal shell + theme vars. */
.fsa-mm-points-panel { display: flex; flex-direction: column; gap: 10px; }
.fsa-mm-points-intro { margin: 0; color: var(--fsa-mm-mgmt-muted-color); font-size: max(11px, calc(var(--fsa-mm-mgmt-muted-size) + 1px)); }
.fsa-mm-points-empty { padding: 22px 10px; text-align: center; color: var(--fsa-mm-mgmt-muted-color); }
.fsa-mm-points-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.fsa-mm-points-log-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; padding: 9px 2px; border-top: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 70%, transparent); }
.fsa-mm-points-log-row:first-child { border-top: 0; }
.fsa-mm-points-log-artist { color: var(--fsa-mm-mgmt-heading-color); font-weight: 700; font-size: max(12px, var(--fsa-mm-mgmt-row-size)); }
.fsa-mm-points-log-amt { color: #f0b64a; font-weight: 800; font-variant-numeric: tabular-nums; }
.fsa-mm-points-log-meta { grid-column: 1 / -1; color: var(--fsa-mm-mgmt-muted-color); font-size: max(10px, var(--fsa-mm-mgmt-muted-size)); }
.fsa-mm-customize-hint { margin: 9px 2px 0; color: var(--fsa-mm-mgmt-muted-color); font-size: 12px; line-height: 1.45; }
.fsa-mm-customize-status { margin: 8px 2px 0; color: var(--fsa-mm-mgmt-muted-color); font-size: 12px; line-height: 1.4; }

/* Preview of the already-saved background media so hosts can see it's set
   (a file input always reads "No file chosen" on reopen). */
.fsa-mm-customize-media-current {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent, #6bcbff) 30%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-accent, #6bcbff) 8%, rgba(10, 14, 26, 0.6));
}
.fsa-mm-customize-media-thumb {
    flex: 0 0 auto;
    width: 84px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    background: #05070d;
    display: block;
}
.fsa-mm-customize-media-thumb video,
.fsa-mm-customize-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fsa-mm-customize-media-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fsa-mm-customize-media-meta strong { font-size: 13px; color: var(--fsa-mm-mgmt-heading-color, #eaf1ff); }
.fsa-mm-customize-media-meta span { font-size: 11.5px; color: var(--fsa-mm-mgmt-muted-color); line-height: 1.35; }

/* Compact hover/focus tooltip marker — moves long field copy off the panel. */
.fsa-mm-field-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 6px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: 10px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
    opacity: 0.75;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}
.fsa-mm-field-info:hover,
.fsa-mm-field-info:focus-visible {
    opacity: 1;
    border-color: currentColor;
    outline: none;
}
.fsa-mm-award-icon-preview { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; vertical-align: -4px; margin-left: 6px; }

/* Text "Close" pill rather than a bare glyph — matches the Events dialog and reads as a
   labelled action instead of an unexplained icon. */
.fsa-mm-program-settings-close {
    min-height: 30px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--fsa-mm-mgmt-muted-color);
    font-family: var(--fsa-mm-font-family);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.fsa-mm-program-settings-form {
    display: grid;
    gap: 14px;
}

.fsa-mm-customize-modal[hidden] {
    display: none !important;
}

.fsa-mm-customize-form {
    display: grid;
    gap: 12px;
}

.fsa-mm-customize-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fsa-mm-customize-tab {
    min-height: 30px;
    padding: 5px 11px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 86%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 92%, transparent);
    color: var(--fsa-mm-mgmt-muted-color);
    font-family: var(--fsa-mm-font-family);
    font-size: max(10px, calc(var(--fsa-mm-mgmt-row-size) - 1px));
    font-weight: 700;
    cursor: pointer;
}

.fsa-mm-customize-tab.is-active {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 60%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--fsa-mm-accent) 22%, #000000 5%), color-mix(in srgb, var(--fsa-mm-input-bg) 86%, transparent));
    color: var(--fsa-mm-mgmt-heading-color);
}

.fsa-mm-customize-panels {
    min-width: 0;
}

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

.fsa-mm-customize-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* Single-control rows (e.g. Background Source) shouldn't stretch the full width —
   keep them compact and left-aligned so the row doesn't waste horizontal space. */
.fsa-mm-customize-grid--compact {
    grid-template-columns: minmax(0, 320px);
}

/* Class-based conditional hide inside the Customization Studio (mirrors the
   Program Settings dialog). Inputs stay in the DOM, so hidden values still save. */
.fsa-mm-customize-dialog .is-ps-hidden {
    display: none !important;
}

/* Visualizer "Main Background" focal-point picker — drag the dot to set object-position. */
.fsa-mm-viz-focal {
    margin: 10px 0 2px;
    max-width: 360px;
}
.fsa-mm-viz-focal-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #05070d;
    border: 1px solid rgba(120, 160, 220, 0.28);
    cursor: crosshair;
    touch-action: none;
}
.fsa-mm-viz-focal-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.fsa-mm-viz-focal-dot {
    position: absolute;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    background: rgba(43, 107, 255, 0.92);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.fsa-mm-customize-check {
    align-self: end;
}

.fsa-mm-customize-dialog .fsa-mm-management-field {
    gap: 5px;
}

.fsa-mm-customize-dialog .fsa-mm-management-field span {
    font-size: max(9px, calc(var(--fsa-mm-mgmt-label-size) - 1px));
    letter-spacing: 0.045em;
}

.fsa-mm-customize-dialog .fsa-mm-management-field input,
.fsa-mm-customize-dialog .fsa-mm-management-field select {
    min-height: 34px;
    padding: 0 10px;
    border-radius: 12px;
    font-size: max(12px, calc(var(--fsa-mm-mgmt-row-size) - 1px));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 2%, transparent),
        inset 0 2px 6px rgba(0, 0, 0, 0.22);
}

.fsa-mm-customize-dialog .fsa-mm-management-field select {
    padding-right: 30px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23c9d4ea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 96%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 88%, transparent)
        );
    background-position: calc(100% - 10px) 50%, 0 0;
    background-repeat: no-repeat, no-repeat;
    background-size: 11px 11px, 100% 100%;
}

.fsa-mm-customize-number-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 8px;
    align-items: center;
}

.fsa-mm-customize-range {
    width: 100%;
    accent-color: var(--fsa-mm-accent);
    cursor: pointer;
}

.fsa-mm-customize-number-pair input[type="number"] {
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
}

.fsa-mm-customize-dialog input[type="color"] {
    width: 100%;
    min-height: 34px;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 88%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 96%, transparent);
}

/* Grouped sections (Text Size / Colors / Options) inside each Customize panel */
.fsa-mm-customize-group + .fsa-mm-customize-group {
    margin-top: 12px;
}

.fsa-mm-customize-group-title {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--fsa-mm-mgmt-muted-color, #6b7794) 78%, #ffffff 22%);
}

/* Segmented Small / Medium / Large / Extra Large text-size picker */
.fsa-mm-size-field .fsa-mm-size-seg {
    display: flex;
    gap: 4px;
    width: 100%;
    padding: 3px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg, #0d1424) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color, #1d2740) 88%, transparent);
    box-sizing: border-box;
}

.fsa-mm-size-opt {
    flex: 1 1 0;
    min-height: 30px;
    padding: 0 4px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: color-mix(in srgb, var(--fsa-mm-mgmt-text-color, #9aa6c4) 85%, #ffffff 15%);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.fsa-mm-size-opt:hover {
    background: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 18%, transparent);
}

.fsa-mm-size-opt.is-active {
    background: var(--fsa-mm-accent, #2b6bff);
    color: #ffffff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 40%, transparent);
}

.fsa-mm-size-opt:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 70%, #ffffff 30%);
    outline-offset: 1px;
}

/* Per-tab reset control */
.fsa-mm-customize-panel-foot {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color, #1d2740) 70%, transparent);
}

.fsa-mm-customize-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color, #1d2740) 90%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-input-bg, #0d1424) 90%, transparent);
    color: color-mix(in srgb, var(--fsa-mm-mgmt-text-color, #9aa6c4) 90%, #ffffff 10%);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.fsa-mm-customize-reset:hover {
    background: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 16%, transparent);
    color: #ffffff;
}

/* Setting Profiles bar (top of the Program Settings modal) */
.fsa-mm-preset-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 10px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 28%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--fsa-mm-accent) 7%, var(--fsa-mm-input-bg) 93%);
}

.fsa-mm-preset-bar-title {
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    flex: 0 0 auto;
}

.fsa-mm-preset-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
}

.fsa-mm-preset-chip {
    flex: 1 1 auto;
    min-width: 80px;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 78%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 60%, transparent);
    color: var(--fsa-mm-mgmt-label-color);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.15;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fsa-mm-preset-chip:hover {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 55%, transparent);
}

.fsa-mm-preset-chip.is-active {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 85%, transparent);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--fsa-mm-accent) 82%, transparent),
        color-mix(in srgb, var(--fsa-mm-accent) 58%, #ffffff 6%)
    );
    color: #ffffff;
}

.fsa-mm-preset-chip-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fsa-mm-preset-chip-name.is-editing {
    overflow: visible;
    outline: none;
    cursor: text;
    text-overflow: clip;
    border-bottom: 1px dashed currentColor;
}

.fsa-mm-program-settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
}

.fsa-mm-program-settings-section {
    grid-column: 1 / -1;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 78%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 38%, transparent);
    /* visible so field tooltips can overflow the section without being clipped */
    overflow: visible;
}

.fsa-mm-program-settings-section summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    color: var(--fsa-mm-mgmt-label-color);
    font-size: max(9px, calc(var(--fsa-mm-mgmt-label-size) - 1px));
    font-weight: 900;
    letter-spacing: 0.07em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.fsa-mm-program-settings-section summary::-webkit-details-marker {
    display: none;
}

.fsa-mm-program-settings-section summary::after {
    content: "+";
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 82%, transparent);
    border-radius: 999px;
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: 14px;
}

.fsa-mm-program-settings-section[open] summary::after {
    content: "-";
}

.fsa-mm-program-settings-column {
    display: grid;
    align-content: start;
    gap: 9px;
    min-width: 0;
    padding: 0 12px 12px;
}

.fsa-mm-program-settings-row-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
    padding: 0 12px 12px;
}

.fsa-mm-program-settings-row-grid .fsa-mm-management-field {
    min-width: 0;
}

/* Boxed sub-group inside a settings section: spans the full 2-col grid and keeps its own
   related fields together, so a 3-field cluster can't scatter and pair up with unrelated
   settings on the row beside it. */
.fsa-mm-program-settings-row-grid .fsa-mm-ps-subgroup {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
    padding: 9px 11px 11px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 62%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 42%, transparent);
}

.fsa-mm-program-settings-row-grid .fsa-mm-ps-subgroup-title {
    grid-column: 1 / -1;
    font-size: max(9px, calc(var(--fsa-mm-mgmt-label-size) - 1px));
    font-weight: 800;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--fsa-mm-mgmt-accent-color) 78%, var(--fsa-mm-mgmt-text-color) 22%);
}

@media (max-width: 782px) {
    .fsa-mm-program-settings-row-grid .fsa-mm-ps-subgroup {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Progressive disclosure: dependent settings stay hidden until their parent toggle is on.
   Class-based (never removed from the DOM) so hidden fields still submit their stored values. */
.fsa-mm-program-settings-dialog .is-ps-hidden {
    display: none !important;
}

/* Nested "when submissions are closed" block reads as a consequence of the Status toggle. */
.fsa-mm-program-settings-row-grid .fsa-mm-ps-when-closed {
    border-color: color-mix(in srgb, var(--fsa-mm-mgmt-accent-color) 42%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-mgmt-accent-color) 9%, transparent);
}

/* Compact Entry Packages: empty slots stay hidden until "+ Add Package" reveals the next one. */
.fsa-mm-tier-package-row.is-ps-tier-empty {
    display: none;
}

.fsa-mm-tier-add-package {
    justify-self: start;
    align-self: start;
    margin-top: 8px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    border: 1px dashed color-mix(in srgb, var(--fsa-mm-mgmt-accent-color) 55%, transparent);
    background: transparent;
    color: color-mix(in srgb, var(--fsa-mm-mgmt-accent-color) 85%, var(--fsa-mm-mgmt-text-color) 15%);
    cursor: pointer;
}

.fsa-mm-tier-add-package:hover {
    border-style: solid;
    background: color-mix(in srgb, var(--fsa-mm-mgmt-accent-color) 12%, transparent);
}

.fsa-mm-program-settings-dialog .fsa-mm-management-field {
    gap: 5px;
}

.fsa-mm-program-settings-dialog .fsa-mm-management-field > span:first-child {
    font-size: max(9px, calc(var(--fsa-mm-mgmt-label-size) - 1px));
    letter-spacing: 0.055em;
}

.fsa-mm-program-settings-dialog .fsa-mm-management-field input,
.fsa-mm-program-settings-dialog .fsa-mm-management-field select {
    min-height: 34px;
    padding: 0 10px;
    border-radius: 12px;
    font-size: max(12px, calc(var(--fsa-mm-mgmt-row-size) - 1px));
}

.fsa-mm-management-field-checkbox {
    grid-column: auto;
}

/* Keep the toggle inside its section on narrow widths. The base field is a content-width
   inline-flex with a nowrap label, so a long label + toggle can spill past the card edge
   when the column is narrow. Cap to the cell, let the label wrap, and allow the toggle to
   drop below the label rather than overflow. Desktop (wide cell) is unaffected — nothing
   wraps until it has to. */
.fsa-mm-program-settings-dialog .fsa-mm-management-field-checkbox {
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
    row-gap: 6px;
    justify-content: space-between;
}

.fsa-mm-program-settings-dialog .fsa-mm-management-field-checkbox > span:first-child {
    white-space: normal;
    min-width: 0;
}

.fsa-mm-program-settings-dialog .fsa-mm-management-field-checkbox .fsa-mm-program-settings-toggle-row {
    flex: 0 0 auto;
}

.fsa-mm-program-settings-offline-row {
    display: grid;
    grid-template-columns: minmax(132px, auto) minmax(96px, 0.45fr) minmax(220px, 1fr);
    gap: 10px;
    align-items: end;
    padding: 0 12px 12px;
}

.fsa-mm-program-settings-offline-message {
    min-width: 0;
}

.fsa-mm-program-settings-toggle-row {
    display: flex;
    align-items: center;
}

.fsa-mm-program-settings-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fsa-mm-program-settings-status-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 2px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 86%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 92%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 2%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.24);
    cursor: pointer;
}

.fsa-mm-program-settings-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 11px;
    border-radius: 999px;
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.fsa-mm-program-settings-toggle-input:checked + .fsa-mm-program-settings-status-toggle .is-open {
    color: #e5fff1;
    background: linear-gradient(180deg, rgba(26, 179, 108, 0.94), rgba(18, 137, 81, 0.92));
    box-shadow: 0 8px 18px rgba(18, 137, 81, 0.24);
}

.fsa-mm-program-settings-toggle-input:checked + .fsa-mm-program-settings-status-toggle .is-closed {
    color: var(--fsa-mm-mgmt-muted-color);
    background: transparent;
    box-shadow: none;
}

.fsa-mm-program-settings-toggle-input:not(:checked) + .fsa-mm-program-settings-status-toggle .is-open {
    color: var(--fsa-mm-mgmt-muted-color);
    background: transparent;
    box-shadow: none;
}

.fsa-mm-program-settings-toggle-input:not(:checked) + .fsa-mm-program-settings-status-toggle .is-closed {
    color: #ffe8e8;
    background: linear-gradient(180deg, rgba(192, 66, 66, 0.94), rgba(145, 41, 41, 0.92));
    box-shadow: 0 8px 18px rgba(145, 41, 41, 0.22);
}

.fsa-mm-program-settings-toggle-input:focus + .fsa-mm-program-settings-status-toggle {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 85%, #ffffff 15%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 3%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.28),
        0 0 0 3px color-mix(in srgb, var(--fsa-mm-accent) 12%, transparent);
}

.fsa-mm-program-settings-toggle-input:checked + .fsa-mm-program-settings-status-toggle.is-inverted .is-open {
    color: var(--fsa-mm-mgmt-muted-color);
    background: transparent;
    box-shadow: none;
}

.fsa-mm-program-settings-toggle-input:checked + .fsa-mm-program-settings-status-toggle.is-inverted .is-closed {
    color: #ffe8e8;
    background: linear-gradient(180deg, rgba(192, 66, 66, 0.94), rgba(145, 41, 41, 0.92));
    box-shadow: 0 8px 18px rgba(145, 41, 41, 0.22);
}

.fsa-mm-program-settings-toggle-input:not(:checked) + .fsa-mm-program-settings-status-toggle.is-inverted .is-open {
    color: #e5fff1;
    background: linear-gradient(180deg, rgba(26, 179, 108, 0.94), rgba(18, 137, 81, 0.92));
    box-shadow: 0 8px 18px rgba(18, 137, 81, 0.24);
}

.fsa-mm-program-settings-toggle-input:not(:checked) + .fsa-mm-program-settings-status-toggle.is-inverted .is-closed {
    color: var(--fsa-mm-mgmt-muted-color);
    background: transparent;
    box-shadow: none;
}

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

.fsa-mm-program-settings-dialog select option,
.fsa-mm-program-settings-dialog select optgroup,
.fsa-mm-management-stats-dialog select option,
.fsa-mm-management-stats-dialog select optgroup,
.fsa-mm-customize-dialog select option,
.fsa-mm-customize-dialog select optgroup {
    background: #11141d;
    color: #f4efe8;
}

.fsa-mm-management-stats-modal[hidden] {
    display: none !important;
}

.fsa-mm-management-stats-modal {
    position: fixed;
    inset: 0;
    z-index: 10030;
}

.fsa-mm-management-stats-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 7, 12, 0.74);
    backdrop-filter: blur(12px);
}

.fsa-mm-management-stats-dialog {
    position: relative;
    z-index: 1;
    width: min(100vw - 28px, 1080px);
    max-height: calc(100vh - 44px);
    margin: 22px auto;
    padding: 16px;
    border: 1px solid color-mix(in srgb, #4df4ff 24%, var(--fsa-mm-mgmt-border-color) 76%);
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, #4df4ff 10%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--fsa-mm-card-bg) 98%, #000000 2%), color-mix(in srgb, var(--fsa-mm-input-bg) 94%, transparent));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 4%, transparent),
        0 28px 80px rgba(0, 0, 0, 0.42);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, #48ff9b 34%, #2ad1ff 66%) color-mix(in srgb, var(--fsa-mm-input-bg) 70%, transparent);
}

.fsa-mm-management-stats-dialog::-webkit-scrollbar,
.fsa-mm-stats-forecast-table::-webkit-scrollbar,
.fsa-mm-stats-hourly-header::-webkit-scrollbar,
.fsa-mm-stats-hourly-grid::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.fsa-mm-management-stats-dialog::-webkit-scrollbar-track,
.fsa-mm-stats-forecast-table::-webkit-scrollbar-track,
.fsa-mm-stats-hourly-header::-webkit-scrollbar-track,
.fsa-mm-stats-hourly-grid::-webkit-scrollbar-track {
    border-radius: 999px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 78%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 46%, transparent);
}

.fsa-mm-management-stats-dialog::-webkit-scrollbar-thumb,
.fsa-mm-stats-forecast-table::-webkit-scrollbar-thumb,
.fsa-mm-stats-hourly-header::-webkit-scrollbar-thumb,
.fsa-mm-stats-hourly-grid::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(180deg, #2ad1ff 0%, #48ff9b 56%, #8a7dff 100%) padding-box;
    box-shadow:
        0 0 10px color-mix(in srgb, #2ad1ff 22%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent);
}

.fsa-mm-management-stats-dialog::-webkit-scrollbar-corner,
.fsa-mm-stats-forecast-table::-webkit-scrollbar-corner,
.fsa-mm-stats-hourly-header::-webkit-scrollbar-corner,
.fsa-mm-stats-hourly-grid::-webkit-scrollbar-corner {
    background: transparent;
}

.fsa-mm-management-stats-dialog.is-dragging {
    user-select: none;
}

.fsa-mm-management-stats-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    cursor: grab;
}

.fsa-mm-management-stats-head strong {
    display: block;
    color: #f7fbff;
    font-size: 22px;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.fsa-mm-management-stats-head span {
    display: block;
    margin-top: 4px;
    color: color-mix(in srgb, #8ec7d8 72%, #ffffff 28%);
    font-size: 12px;
    line-height: 1.45;
}

.fsa-mm-management-stats-head-close {
    flex: 0 0 auto;
    min-height: 36px;
    padding-inline: 14px;
}

.fsa-mm-management-stats-form {
    display: grid;
    grid-template-columns: minmax(128px, 0.75fr) minmax(128px, 0.75fr) minmax(174px, 1fr) minmax(156px, 0.9fr) minmax(180px, 1fr);
    gap: 8px 10px;
    align-items: end;
    margin-bottom: 14px;
}

.fsa-mm-management-stats-compare {
    align-self: stretch;
}

.fsa-mm-management-stats-forecast-actions {
    display: flex;
    align-items: end;
    gap: 8px;
}

.fsa-mm-management-stats-forecast-actions .fsa-mm-management-field {
    flex: 1 1 auto;
    min-width: 0;
}

.fsa-mm-management-stats-apply {
    flex: 0 0 auto;
    min-height: 42px;
    padding-inline: 16px;
}

.fsa-mm-management-field-date input[type="date"] {
    min-width: 0;
}

.fsa-mm-management-stats-actions {
    display: flex;
    align-items: center;
    gap: 0;
    justify-content: stretch;
}

.fsa-mm-management-stats-actions .fsa-mm-submit {
    width: 100%;
    min-height: 42px;
}

.fsa-mm-management-stats-content {
    display: grid;
    gap: 16px;
}

.fsa-mm-stats-loading,
.fsa-mm-stats-error,
.fsa-mm-stats-empty {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 78%, transparent);
    border-radius: 20px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 86%, transparent);
    color: var(--fsa-mm-mgmt-heading-color);
    font-weight: 700;
    text-align: center;
}

.fsa-mm-stats-error {
    color: #ffd8d8;
    border-color: color-mix(in srgb, #ff8181 32%, var(--fsa-mm-mgmt-border-color) 68%);
}

.fsa-mm-stats-report {
    display: grid;
    gap: 16px;
}

.fsa-mm-stats-hero {
    display: grid;
    gap: 14px;
}

.fsa-mm-stats-summary-section {
    gap: 10px;
}

.fsa-mm-stats-summary-table {
    display: grid;
    gap: 10px;
}

.fsa-mm-stats-summary-header {
    display: grid;
    grid-template-columns: minmax(140px, 1.1fr) repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
    padding: 0 10px;
}

.fsa-mm-stats-summary-header-program,
.fsa-mm-stats-summary-header-metric {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}

.fsa-mm-stats-summary-header-program {
    color: var(--fsa-mm-mgmt-muted-color);
}

.fsa-mm-stats-summary-header-metric.is-cyan {
    color: #62f5ff;
}

.fsa-mm-stats-summary-header-metric.is-green {
    color: #48ff9b;
}

.fsa-mm-stats-summary-header-metric.is-blue {
    color: #70beff;
}

.fsa-mm-stats-summary-header-metric.is-red {
    color: #ff8692;
}

.fsa-mm-stats-summary-row {
    display: grid;
    grid-template-columns: minmax(130px, 1.1fr) repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 74%, transparent);
    border-radius: 18px;
    background:
        linear-gradient(180deg, color-mix(in srgb, #ffffff 2%, transparent), transparent 40%),
        color-mix(in srgb, var(--fsa-mm-card-bg) 92%, transparent);
}

.fsa-mm-stats-summary-program {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 8px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 78%, transparent);
    color: #f7fbff;
    font-size: 16px;
    line-height: 1.08;
    letter-spacing: -0.03em;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    white-space: nowrap;
}

.fsa-mm-stats-summary-metric {
    display: grid;
    place-items: center;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 78%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 80%, transparent);
}

.fsa-mm-stats-summary-metric strong {
    color: #f7fbff;
    font-size: clamp(13px, 1.15vw, 16px);
    line-height: 1;
    letter-spacing: -0.03em;
    text-align: center;
}

.fsa-mm-stats-queue-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.fsa-mm-stats-mini-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 76%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 88%, transparent);
    color: var(--fsa-mm-mgmt-heading-color);
}

.fsa-mm-stats-mini-card span {
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fsa-mm-stats-mini-card strong {
    color: #f5fbff;
    font-size: 16px;
    line-height: 1;
}

.fsa-mm-stats-section {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 76%, transparent);
    border-radius: 22px;
    background:
        linear-gradient(180deg, color-mix(in srgb, #ffffff 2%, transparent), transparent 36%),
        color-mix(in srgb, var(--fsa-mm-input-bg) 84%, transparent);
}

.fsa-mm-stats-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.fsa-mm-stats-section-head strong {
    color: #f7fbff;
    font-size: 18px;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.fsa-mm-stats-section-head span {
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: 12px;
}

.fsa-mm-stats-forecast-table {
    display: grid;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.fsa-mm-stats-forecast-header,
.fsa-mm-stats-forecast-row {
    display: grid;
    grid-template-columns: minmax(110px, 1.1fr) repeat(8, minmax(38px, 0.58fr));
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.fsa-mm-stats-forecast-header {
    padding: 0 10px;
}

.fsa-mm-stats-forecast-header-program,
.fsa-mm-stats-forecast-header-day {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.fsa-mm-stats-forecast-header-program {
    color: var(--fsa-mm-mgmt-muted-color);
}

.fsa-mm-stats-forecast-header-day {
    color: color-mix(in srgb, #8ec7d8 78%, #ffffff 22%);
    text-align: center;
}

.fsa-mm-stats-forecast-header-day.is-today,
.fsa-mm-stats-forecast-value.is-today {
    color: #63f4ff;
}

.fsa-mm-stats-forecast-header-day.is-expected {
    color: #48ff9b;
}

.fsa-mm-stats-forecast-row {
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 74%, transparent);
    border-radius: 18px;
    background:
        linear-gradient(180deg, color-mix(in srgb, #ffffff 2%, transparent), transparent 40%),
        color-mix(in srgb, var(--fsa-mm-card-bg) 92%, transparent);
}

.fsa-mm-stats-forecast-program {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 78%, transparent);
    color: #f7fbff;
    font-size: 15px;
    line-height: 1.08;
    letter-spacing: -0.03em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fsa-mm-stats-forecast-value {
    display: grid;
    place-items: center;
    min-height: 34px;
    padding: 0 6px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 78%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 80%, transparent);
    color: #f7fbff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    text-align: center;
}

.fsa-mm-stats-forecast-value.is-today {
    border-color: color-mix(in srgb, #43f3ff 54%, var(--fsa-mm-mgmt-border-color) 46%);
    box-shadow: 0 0 14px color-mix(in srgb, #43f3ff 10%, transparent);
}

.fsa-mm-stats-forecast-value.is-expected {
    color: #48ff9b;
    border-color: color-mix(in srgb, #48ff9b 54%, var(--fsa-mm-mgmt-border-color) 46%);
    box-shadow: 0 0 14px color-mix(in srgb, #48ff9b 10%, transparent);
}

.fsa-mm-stats-hourly-header,
.fsa-mm-stats-hourly-grid {
    display: grid;
    grid-template-columns: repeat(24, minmax(20px, 1fr));
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.fsa-mm-stats-hourly-header {
    align-items: end;
    padding-bottom: 2px;
}

.fsa-mm-stats-hourly-header-label {
    color: color-mix(in srgb, #8ec7d8 78%, #ffffff 22%);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.fsa-mm-stats-hourly-grid {
    align-items: end;
    padding-bottom: 4px;
}

.fsa-mm-stats-hourly-bar-segment {
    --fsa-mm-hour-intensity: 0;
    --fsa-mm-hour-color:
        color-mix(
            in srgb,
            #2ad1ff calc(26% + (var(--fsa-mm-hour-intensity) * 34%)),
            #48ff9b calc(var(--fsa-mm-hour-intensity) * 24%),
            #8a7dff calc(var(--fsa-mm-hour-intensity) * 26%)
        );
    display: block;
    min-width: 20px;
    height: 26px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-hour-color) calc(16% + (var(--fsa-mm-hour-intensity) * 68%)), var(--fsa-mm-mgmt-border-color) calc(84% - (var(--fsa-mm-hour-intensity) * 34%)));
    border-radius: 999px;
    background:
        linear-gradient(180deg, color-mix(in srgb, #ffffff calc(var(--fsa-mm-hour-intensity) * 10%), transparent), transparent 44%),
        linear-gradient(180deg, color-mix(in srgb, var(--fsa-mm-hour-color) calc(14% + (var(--fsa-mm-hour-intensity) * 70%)), transparent), color-mix(in srgb, var(--fsa-mm-hour-color) calc(8% + (var(--fsa-mm-hour-intensity) * 42%)), transparent)),
        color-mix(in srgb, var(--fsa-mm-input-bg) calc(90% - (var(--fsa-mm-hour-intensity) * 18%)), transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff calc(2% + (var(--fsa-mm-hour-intensity) * 8%)), transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--fsa-mm-hour-color) calc(var(--fsa-mm-hour-intensity) * 22%), transparent),
        0 0 calc(2px + (var(--fsa-mm-hour-intensity) * 16px)) color-mix(in srgb, var(--fsa-mm-hour-color) calc(4% + (var(--fsa-mm-hour-intensity) * 26%)), transparent);
}

.fsa-mm-stats-hourly-bar-segment.is-peak {
    border-color: color-mix(in srgb, #62f3ff 82%, var(--fsa-mm-mgmt-border-color) 18%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent),
        inset 0 0 0 1px color-mix(in srgb, #62f3ff 26%, transparent),
        0 0 22px color-mix(in srgb, #62f3ff 36%, transparent);
}

.fsa-mm-stats-hourly-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fsa-mm-stats-hourly-legend-bar {
    display: block;
    width: 120px;
    height: 8px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, color-mix(in srgb, #2ad1ff 10%, transparent), #2ad1ff 42%, #48ff9b 72%, #8a7dff 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 60%, transparent);
}

.fsa-mm-stats-leaderboards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.fsa-mm-stats-leaderboard {
    display: grid;
    gap: 8px;
}

.fsa-mm-stats-leader-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 76%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--fsa-mm-card-bg) 92%, transparent);
}

.fsa-mm-stats-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, #4df4ff 14%, transparent);
    color: #8ef7ff;
    font-size: 12px;
    font-weight: 800;
}

.fsa-mm-stats-leader-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fsa-mm-stats-leader-copy strong {
    color: #f7fbff;
    font-size: 14px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fsa-mm-stats-leader-copy span {
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fsa-mm-stats-leader-metrics {
    display: grid;
    justify-items: end;
    gap: 2px;
}

.fsa-mm-stats-leader-metrics span {
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: 11px;
    font-weight: 700;
}

.fsa-mm-stats-leader-metrics strong {
    color: #48ff9b;
    font-size: 14px;
}

.fsa-mm-management-search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 7, 12, 0.68);
}

.fsa-mm-management-search-dialog {
    position: relative;
    z-index: 1;
    width: min(420px, calc(100vw - 24px));
    margin: 12vh auto 0;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 88%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--fsa-mm-card-bg) 98%, transparent);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

.fsa-mm-management-search-form {
    display: grid;
    gap: 12px;
}

.fsa-mm-management-search-field {
    display: grid;
    gap: 6px;
}

.fsa-mm-management-search-field span {
    color: var(--fsa-mm-mgmt-heading-color);
    font-size: var(--fsa-mm-mgmt-label-size);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fsa-mm-management-search-field input {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 84%, transparent);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 96%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 86%, transparent)
        );
    color: var(--fsa-mm-input-text);
    font-size: 14px;
    padding: 10px 14px;
}

.fsa-mm-management-search-actions,
.fsa-mm-management-search-chip {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fsa-mm-management-search-chip {
    margin: -4px 0 12px;
}

.fsa-mm-management-undo-notice {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    max-width: min(320px, calc(100% - 32px));
    margin: 0;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 28%, var(--fsa-mm-mgmt-border-color) 72%);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-accent) 10%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-card-bg) 92%, transparent)
        );
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.fsa-mm-management-undo-notice[hidden] {
    display: none !important;
}

.fsa-mm-management-undo-copy {
    color: var(--fsa-mm-mgmt-heading-color);
    font-size: var(--fsa-mm-mgmt-muted-size);
    line-height: 1.2;
    white-space: nowrap;
}

.fsa-mm-management-side-column {
    position: sticky;
    top: 16px;
}

.fsa-mm-management-side-column .col-program,
.fsa-mm-management-side-column .col-type,
.fsa-mm-management-side-column .col-assigned {
    display: none;
}

.fsa-mm-management-side-column .fsa-mm-management-table th,
.fsa-mm-management-side-column .fsa-mm-management-table td {
    padding: 7px 8px;
}

.fsa-mm-management-side-column .fsa-mm-management-table td {
    font-size: 12px;
}

.fsa-mm-management-toolbar .fsa-mm-submit {
    min-height: 26px;
    padding: 0 11px;
    font-size: max(9px, calc(var(--fsa-mm-mgmt-row-size) - 2px));
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 5%, transparent),
        inset 0 2px 6px rgba(0, 0, 0, 0.14);
}


.fsa-mm-inline-token {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 88%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 90%, transparent);
    color: var(--fsa-mm-mgmt-heading-color);
    font-size: var(--fsa-mm-mgmt-table-head-size);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fsa-mm-table-subcopy {
    margin-top: 3px;
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: var(--fsa-mm-mgmt-muted-size);
    line-height: 1.3;
}

.fsa-mm-management-list {
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 56%, transparent);
    border-radius: calc(var(--fsa-mm-radius) - 4px);
    background: color-mix(in srgb, var(--fsa-mm-card-bg) 84%, transparent);
    min-width: 0;
    overflow: hidden;
}

.fsa-mm-pending-list {
    display: grid;
    gap: 0;
}

.fsa-mm-pending-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 78%, transparent);
}

.fsa-mm-pending-row:last-child {
    border-bottom: 0;
}

.fsa-mm-pending-main,
.fsa-mm-pending-side {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.fsa-mm-pending-main {
    overflow: hidden;
}

.fsa-mm-pending-main strong,
.fsa-mm-pending-song,
.fsa-mm-pending-program {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fsa-mm-mgmt-row-size);
    line-height: 1.15;
}

.fsa-mm-pending-main strong {
    color: var(--fsa-mm-mgmt-heading-color);
    font-size: var(--fsa-mm-mgmt-row-size);
    line-height: 1.1;
}

.fsa-mm-pending-separator {
    color: var(--fsa-mm-mgmt-muted-color);
    flex: 0 0 auto;
}

.fsa-mm-pending-song {
    color: var(--fsa-mm-mgmt-text-color);
}

.fsa-mm-pending-program,
.fsa-mm-pending-date,
.fsa-mm-pending-tier {
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: var(--fsa-mm-mgmt-muted-size);
    white-space: nowrap;
}

.fsa-mm-pending-program::before,
.fsa-mm-pending-date::before,
.fsa-mm-pending-tier::before {
    content: "\2022";
    margin-right: 8px;
    color: color-mix(in srgb, var(--fsa-mm-mgmt-muted-color) 72%, transparent);
}

.fsa-mm-pending-tier.is-offline-review {
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-accent-color) 78%, transparent);
    border-radius: 999px;
    color: var(--fsa-mm-mgmt-heading-color);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    text-transform: uppercase;
}

.fsa-mm-pending-tier.is-offline-review::before {
    content: none;
}

.fsa-mm-pending-side {
    justify-content: flex-end;
    white-space: nowrap;
}

.fsa-mm-pending-check {
    flex: 0 0 auto;
}

.fsa-mm-pending-amount {
    color: var(--fsa-mm-mgmt-heading-color);
    font-size: var(--fsa-mm-mgmt-row-size);
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

/* Stripe payment status color-codes the PYMT amount in the management queue. */
.fsa-mm-pending-amount.is-stripe-paid {
    color: #4cdf8a;
    font-weight: 800;
}

.fsa-mm-pending-amount.is-stripe-error {
    color: #ffd23c;
    font-weight: 800;
}

.fsa-mm-pending-amount.is-stripe-refunded {
    color: #ff4c6f;
    font-weight: 800;
}

/* Held out of the active queue: awaiting = amber, cancelled = red. */
.fsa-mm-pending-amount.is-stripe-awaiting {
    color: #ffb347;
    font-weight: 800;
}

.fsa-mm-pending-amount.is-stripe-cancelled {
    color: #ff4c6f;
    font-weight: 800;
}

/* Round status badge to the right of the PYMT amount. */
.fsa-mm-pay-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    flex: 0 0 auto;
    cursor: help;
}

.fsa-mm-pay-icon[hidden] {
    display: none !important;
}

.fsa-mm-pay-icon.is-stripe-paid {
    background: rgba(76, 223, 138, 0.18);
    color: #4cdf8a;
    border: 1px solid rgba(76, 223, 138, 0.55);
}

.fsa-mm-pay-icon.is-stripe-error {
    background: rgba(255, 210, 60, 0.18);
    color: #ffd23c;
    border: 1px solid rgba(255, 210, 60, 0.55);
    font-size: 8px;
    letter-spacing: -1px;
}

.fsa-mm-pay-icon.is-stripe-awaiting {
    background: rgba(255, 179, 71, 0.18);
    color: #ffb347;
    border: 1px solid rgba(255, 179, 71, 0.55);
    font-size: 9px;
}

.fsa-mm-pay-icon.is-stripe-cancelled {
    background: rgba(255, 76, 111, 0.18);
    color: #ff4c6f;
    border: 1px solid rgba(255, 76, 111, 0.55);
    font-size: 11px;
}

.fsa-mm-pay-icon.is-stripe-refunded {
    background: rgba(255, 76, 111, 0.18);
    color: #ff4c6f;
    border: 1px solid rgba(255, 76, 111, 0.55);
    font-size: 12px;
}

.fsa-mm-pending-edit-slot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: visible;
}

.fsa-mm-pending-edit-slot .fsa-mm-edit-button {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 1px;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.fsa-mm-management-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 132px;
    padding: 28px 18px;
    text-align: center;
    border-radius: 14px;
    border: 1px dashed color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 66%, transparent);
    background:
        radial-gradient(
            120% 90% at 50% 0%,
            color-mix(in srgb, var(--fsa-mm-mgmt-accent-color) 9%, transparent),
            transparent 72%
        );
}

.fsa-mm-management-empty::before {
    content: "";
    width: 40px;
    height: 40px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%236bcbff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E")
        center / contain no-repeat;
    opacity: 0.82;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--fsa-mm-mgmt-accent-color) 40%, transparent));
}

.fsa-mm-management-empty p {
    margin: 0;
    max-width: 32ch;
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: var(--fsa-mm-mgmt-muted-size);
    line-height: 1.4;
}

.fsa-mm-management-table {
    width: 100%;
    min-width: 100%;
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

.fsa-mm-management-table th,
.fsa-mm-management-table td {
    padding: 9px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 78%, transparent);
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    vertical-align: middle;
    text-align: left;
    box-shadow: none !important;
}

.fsa-mm-management-table .col-select {
    width: 1%;
    padding-left: 12px;
    padding-right: 4px;
}

.fsa-mm-management-table th {
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: var(--fsa-mm-mgmt-table-head-size);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 92%, transparent);
}

.fsa-mm-management-table td {
    color: var(--fsa-mm-mgmt-text-color);
    font-size: var(--fsa-mm-mgmt-row-size);
    line-height: 1.35;
}

.fsa-mm-management-table .col-donation,
.fsa-mm-management-table .col-date,
.fsa-mm-management-table .col-notes,
.fsa-mm-management-table .col-program,
.fsa-mm-management-table .col-freeskip,
.fsa-mm-management-table .col-status {
    white-space: nowrap;
}

.fsa-mm-management-table .col-donation,
.fsa-mm-management-table .col-date,
.fsa-mm-management-table .col-notes,
.fsa-mm-management-table .col-program,
.fsa-mm-management-table .col-freeskip,
.fsa-mm-management-table .col-status {
    width: 1%;
}

.fsa-mm-management-table th.col-program,
.fsa-mm-management-table td.col-program {
    max-width: 78px;
}

.fsa-mm-management-table td.col-program {
    overflow: hidden;
    text-overflow: ellipsis;
}

.fsa-mm-management-table th.col-notes,
.fsa-mm-management-table td.col-notes {
    width: 1%;
    padding-left: 8px;
    padding-right: 8px;
}

.fsa-mm-management-table thead th:first-child {
    border-top-left-radius: calc(var(--fsa-mm-radius) - 10px);
}

.fsa-mm-management-table thead th:last-child {
    border-top-right-radius: calc(var(--fsa-mm-radius) - 10px);
}

.fsa-mm-management-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: calc(var(--fsa-mm-radius) - 10px);
}

.fsa-mm-management-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: calc(var(--fsa-mm-radius) - 10px);
}

.fsa-mm-management-table tbody tr:last-child td {
    border-bottom: 0;
}

.fsa-mm-management-row strong {
    color: var(--fsa-mm-mgmt-heading-color);
}

.fsa-mm-management-queue-position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    color: color-mix(in srgb, var(--fsa-mm-mgmt-muted-color) 88%, #ffffff 12%);
    font-size: calc(var(--fsa-mm-mgmt-row-size) - 1px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
}

.fsa-mm-management-section-row td {
    padding: 12px 10px 8px;
    background: color-mix(in srgb, var(--fsa-mm-card-bg) 92%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 85%, transparent);
}

.fsa-mm-management-section-row .fsa-mm-inline-token {
    margin-right: 8px;
}

.fsa-mm-management-section-row .fsa-mm-table-subcopy {
    display: inline;
    margin-top: 0;
}

.fsa-mm-management-group-row td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.fsa-mm-management-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fsa-mm-management-group-toggle:hover .fsa-mm-inline-token,
.fsa-mm-management-group-toggle:focus-visible .fsa-mm-inline-token {
    color: var(--fsa-mm-mgmt-heading-color);
}

.fsa-mm-management-group-toggle:focus-visible {
    outline: none;
}

.fsa-mm-management-group-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    min-width: 16px;
    color: color-mix(in srgb, var(--fsa-mm-mgmt-muted-color) 72%, #ffffff 28%);
    font-size: 11px;
    line-height: 1;
    transition: transform 140ms ease, color 140ms ease;
}

.fsa-mm-management-group-toggle[aria-expanded="false"] .fsa-mm-management-group-caret {
    transform: rotate(-90deg);
}

.fsa-mm-management-group-toggle:hover .fsa-mm-management-group-caret,
.fsa-mm-management-group-toggle:focus-visible .fsa-mm-management-group-caret {
    color: var(--fsa-mm-mgmt-heading-color);
}

.fsa-mm-management-row:hover {
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 48%, transparent);
}

.fsa-mm-management-row.is-spotlight {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--fsa-mm-accent) 12%, transparent),
            transparent 42%
        ),
        color-mix(in srgb, var(--fsa-mm-input-bg) 38%, transparent);
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--fsa-mm-accent) 82%, transparent);
}

.fsa-mm-management-row.is-spotlight:hover {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--fsa-mm-accent) 16%, transparent),
            transparent 42%
        ),
        color-mix(in srgb, var(--fsa-mm-input-bg) 52%, transparent);
}

.fsa-mm-management-row.is-offline-review {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, #3bdcff 12%, transparent),
            transparent 42%
        ),
        color-mix(in srgb, var(--fsa-mm-input-bg) 40%, transparent);
    box-shadow: inset 2px 0 0 color-mix(in srgb, #3bdcff 82%, transparent);
}

.fsa-mm-management-row.is-offline-review:hover {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, #3bdcff 17%, transparent),
            transparent 42%
        ),
        color-mix(in srgb, var(--fsa-mm-input-bg) 52%, transparent);
}

.fsa-mm-offline-review-badge {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0 7px;
    border: 1px solid color-mix(in srgb, #3bdcff 76%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, #3bdcff 13%, transparent);
    color: color-mix(in srgb, #bdf6ff 88%, #ffffff 12%);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.fsa-mm-offline-review-badge[hidden] {
    display: none !important;
}

/* Multi-song package bundle: rows from one purchase read as a unit. */
.fsa-mm-bundle-badge {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0 7px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 62%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fsa-mm-accent) 14%, transparent);
    color: color-mix(in srgb, var(--fsa-mm-accent) 82%, #ffffff 18%);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}
.fsa-mm-management-row.is-bundle {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--fsa-mm-accent) 60%, transparent);
}
.fsa-mm-management-row.is-bundle .fsa-mm-pending-amount {
    opacity: 0.9;
}

.fsa-mm-management-row.is-selected {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--fsa-mm-accent) 12%, transparent),
            transparent 34%
        ),
        color-mix(in srgb, var(--fsa-mm-input-bg) 52%, transparent);
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--fsa-mm-accent) 72%, transparent);
}

.fsa-mm-management-row.is-updated {
    animation: fsaMmRowFlash 900ms ease;
}

.fsa-mm-pending-row.is-updated {
    animation: fsaMmRowFlash 900ms ease;
}

.fsa-mm-management-row.is-pending-refresh,
.fsa-mm-pending-row.is-pending-refresh {
    position: relative;
    filter: blur(0.6px) saturate(0.88);
    opacity: 0.76;
}

.fsa-mm-management-row.is-pending-refresh::after,
.fsa-mm-pending-row.is-pending-refresh::after {
    content: "Refresh";
    position: absolute;
    top: 8px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, #f4c84b 62%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, #f4c84b 18%, rgba(8, 12, 20, 0.94) 82%);
    color: color-mix(in srgb, #f7e8a6 74%, #ffffff 26%);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none;
}


.fsa-mm-management-status-form {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    min-width: 0;
}

.fsa-mm-management-status-form [data-row-status] {
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: color-mix(in srgb, #f4c84b 82%, #fff4bf 18%);
    font-size: calc(var(--fsa-mm-mgmt-table-head-size) - 1px);
    font-weight: 800;
    letter-spacing: 0.05em;
}

.fsa-mm-management-status-select {
    display: none !important;
}

.fsa-mm-management-status-actions {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    min-width: 0;
}

.fsa-mm-management-status-secondary-wrap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.fsa-mm-management-status-secondary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(4px) scale(0.98);
    transform-origin: right center;
    transition:
        max-width 180ms ease,
        opacity 160ms ease,
        transform 180ms ease;
}

.fsa-mm-management-status-form.is-secondary-open .fsa-mm-management-status-secondary {
    max-width: 220px;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) scale(1);
}

.fsa-mm-management-status-primary,
.fsa-mm-management-status-menu-toggle,
.fsa-mm-management-status-menu-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 84%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 92%, #000000 8%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 80%, transparent)
        );
    color: var(--fsa-mm-mgmt-text-color);
    font-family: var(--fsa-mm-font-family);
    font-size: max(9px, calc(var(--fsa-mm-mgmt-row-size) - 2px));
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 4%, transparent),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.fsa-mm-management-status-primary {
    min-width: 64px;
    padding-inline: 11px;
}

.fsa-mm-management-status-primary.is-positive,
.fsa-mm-management-status-menu-action.is-positive {
    border-color: color-mix(in srgb, #3ee38c 44%, transparent);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, #3ee38c 28%, rgba(8, 12, 20, 0.94) 72%),
            color-mix(in srgb, #1b8e52 18%, rgba(8, 12, 20, 0.94) 82%)
        );
    color: color-mix(in srgb, #d8ffe8 88%, #ffffff 12%);
}

.fsa-mm-management-status-primary.is-neutral,
.fsa-mm-management-status-menu-action.is-neutral {
    border-color: color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 84%, transparent);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 92%, #000000 8%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 80%, transparent)
        );
    color: var(--fsa-mm-mgmt-text-color);
}

.fsa-mm-management-status-primary.is-danger,
.fsa-mm-management-status-menu-action.is-danger {
    border-color: color-mix(in srgb, #ff6c6c 42%, transparent);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, #ff6c6c 24%, rgba(8, 12, 20, 0.94) 76%),
            color-mix(in srgb, #ae2f2f 18%, rgba(8, 12, 20, 0.94) 82%)
        );
    color: color-mix(in srgb, #ffe2e2 88%, #ffffff 12%);
}

.fsa-mm-management-status-menu-action.is-edit {
    border-color: color-mix(in srgb, #3bdcff 45%, transparent);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, #3bdcff 22%, rgba(8, 12, 20, 0.94) 78%),
            color-mix(in srgb, #147c98 18%, rgba(8, 12, 20, 0.94) 82%)
        );
    color: color-mix(in srgb, #d6f9ff 88%, #ffffff 12%);
}

.fsa-mm-management-status-primary:hover,
.fsa-mm-management-status-primary:focus-visible,
.fsa-mm-management-status-menu-toggle:hover,
.fsa-mm-management-status-menu-toggle:focus-visible,
.fsa-mm-management-status-menu-action:hover,
.fsa-mm-management-status-menu-action:focus-visible {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 46%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--fsa-mm-accent) 22%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
    outline: none;
}

.fsa-mm-management-status-menu {
    position: relative;
}

.fsa-mm-management-status-menu-toggle {
    list-style: none;
    min-width: 26px;
    padding: 0 8px 1px;
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: calc(var(--fsa-mm-mgmt-table-head-size) - 1px);
    font-weight: 900;
    letter-spacing: 0;
    transition:
        color 140ms ease,
        border-color 140ms ease,
        transform 160ms ease;
}

.fsa-mm-management-status-menu-toggle::-webkit-details-marker {
    display: none;
}

.fsa-mm-management-status-form.is-secondary-open .fsa-mm-management-status-menu-toggle {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 38%, transparent);
    color: var(--fsa-mm-mgmt-heading-color);
    transform: rotate(0deg);
}

.fsa-mm-management-status-menu-action {
    justify-content: center;
    text-align: center;
    min-width: 0;
    padding-inline: 11px;
}

.is-status-editable {
    cursor: default;
}

.is-status-editable [data-row-status] {
    position: relative;
}

.fsa-mm-management-list.is-compact-view .fsa-mm-management-table th,
.fsa-mm-management-list.is-compact-view .fsa-mm-management-table td {
    padding: 5px 8px;
}

.fsa-mm-management-list.is-compact-view .fsa-mm-management-table .col-select {
    padding-left: 10px;
    padding-right: 4px;
}

.fsa-mm-management-list.is-compact-view .fsa-mm-management-table td {
    font-size: 11px;
}

.fsa-mm-management-list.is-compact-view .fsa-mm-management-table .col-artist {
    max-width: 0;
}

.fsa-mm-management-list.is-compact-view .fsa-mm-management-row .fsa-mm-management-title-row {
    min-width: 0;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
}

.fsa-mm-management-list.is-compact-view .fsa-mm-management-row .fsa-mm-player-trigger {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

.fsa-mm-management-list.is-compact-view .fsa-mm-management-row .fsa-mm-player-trigger svg {
    width: 10px;
    height: 10px;
}

.fsa-mm-management-list.is-compact-view .fsa-mm-management-row strong,
.fsa-mm-management-list.is-compact-view .fsa-mm-management-inline-song {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fsa-mm-management-list.is-compact-view .fsa-mm-inline-token {
    min-height: 20px;
    padding: 0 7px;
    font-size: 9px;
}

.fsa-mm-spotlight-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 86%, #ffe8b5 14%);
    font-size: 11px;
    line-height: 1;
    text-shadow:
        0 0 8px color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 34%, transparent),
        0 0 2px color-mix(in srgb, #ffffff 30%, transparent);
}

/* Per-program points chip on the public submission list (submitter's standing in
   THIS program, with the program's own award icon). Small, like the spotlight star. */
.fsa-mm-submission-card-points {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 2px 8px 2px 4px;
    border-radius: 999px;
    background: rgba(8, 10, 16, 0.45);
    border: 1px solid color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 30%, transparent);
    line-height: 1;
}
.fsa-mm-submission-card-points-icon {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    object-fit: cover;
    flex: none;
}
.fsa-mm-submission-card-points-value {
    font-size: 11px;
    font-weight: 800;
    color: #fff3d6;
}

.fsa-mm-signal-blocked-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: color-mix(in srgb, #ff6464 82%, #ffd0d0 18%);
    font-size: 11px;
    line-height: 1;
    text-shadow:
        0 0 8px color-mix(in srgb, #ff4545 38%, transparent),
        0 0 2px color-mix(in srgb, #ffffff 24%, transparent);
}

.fsa-mm-management-list.is-compact-view .fsa-mm-table-subcopy {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.15;
}

.fsa-mm-management-list.is-compact-view .fsa-mm-management-row strong {
    font-size: 11px;
    line-height: 1.1;
}

.fsa-mm-management-list.is-compact-view .fsa-mm-management-queue-position {
    min-width: 14px;
    font-size: 10px;
}

.fsa-mm-management-list.is-compact-view .fsa-mm-management-inline-song,
.fsa-mm-management-list.is-compact-view .fsa-mm-management-inline-separator {
    color: var(--fsa-mm-placeholder);
    font-size: 11px;
    line-height: 1.1;
}

[data-management-message].is-error {
    color: #ffd8d8;
}

.fsa-mm-submission-list-shell {
    display: grid;
    gap: 14px;
}

.fsa-mm-submission-list-head {
    display: flex;
    justify-content: center;
    text-align: center;
}

.fsa-mm-submission-list-head h3 {
    margin: 0;
    color: var(--fsa-mm-list-heading-color, var(--fsa-mm-mgmt-heading-color));
    font-size: clamp(18px, 3vw, var(--fsa-mm-list-title-size, var(--fsa-mm-mgmt-title-size)));
    line-height: 1.05;
}

/* ── Magic UI-style animated gradient border + shimmer ── */
@property --fsa-mm-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes fsa-mm-border-spin {
    to { --fsa-mm-border-angle: 360deg; }
}

@keyframes fsa-mm-text-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

.fsa-mm-submission-card-grid {
    display: grid;
    gap: 12px;
}

.fsa-mm-submission-card {
    position: relative;
    display: block;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 16px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 96%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-card-bg) 92%, transparent)
        );
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--fsa-mm-list-border-color, var(--fsa-mm-mgmt-border-color)) 45%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 4%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    transition: box-shadow 200ms ease;
}

/* Spinning conic gradient border — the Magic UI pill border effect */
.fsa-mm-submission-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: conic-gradient(
        from var(--fsa-mm-border-angle),
        transparent 72%,
        color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 90%, #a78bfa 10%) 82%,
        color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 55%, #ffffff 45%) 88%,
        color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 90%, #a78bfa 10%) 95%,
        transparent 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: fsa-mm-border-spin 6s linear infinite;
    pointer-events: none;
    z-index: 2;
}

/* Spotlight cards: faster spin, wider arc */
.fsa-mm-submission-card.is-spotlight::after {
    animation-duration: 3s;
    background: conic-gradient(
        from var(--fsa-mm-border-angle),
        transparent 60%,
        color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 90%, #a78bfa 10%) 75%,
        color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 55%, #ffffff 45%) 84%,
        color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 90%, #a78bfa 10%) 92%,
        transparent 100%
    );
}

/* Card content above the ::after gradient layer */
.fsa-mm-submission-card-head,
.fsa-mm-submission-boost-form {
    position: relative;
    z-index: 1;
}

.fsa-mm-submission-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 76%, transparent);
    opacity: 0.55;
}

.fsa-mm-submission-card:hover {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 40%, var(--fsa-mm-list-border-color, var(--fsa-mm-mgmt-border-color)) 60%),
        0 0 18px color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 14%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 5%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.22);
}

.fsa-mm-submission-card.is-spotlight::before {
    opacity: 1;
    box-shadow: 0 0 18px color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 26%, transparent);
}

.fsa-mm-submission-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
}

.fsa-mm-submission-card-rank-wrap {
    display: flex;
    align-items: center;
    grid-column: 1;
    grid-row: 1;
}

.fsa-mm-submission-card-rank {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: 28px;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-list-border-color, var(--fsa-mm-mgmt-border-color)) 80%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 90%, transparent);
    color: var(--fsa-mm-list-heading-color, var(--fsa-mm-mgmt-heading-color));
    font-size: var(--fsa-mm-list-rank-size, 10px);
    font-weight: 800;
    letter-spacing: 0.05em;
}

.fsa-mm-submission-card-group-rank {
    color: var(--fsa-mm-list-muted-color, var(--fsa-mm-mgmt-muted-color));
    font-size: var(--fsa-mm-list-meta-size, var(--fsa-mm-mgmt-muted-size));
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.fsa-mm-submission-card-rank-divider {
    color: var(--fsa-mm-list-muted-color, var(--fsa-mm-mgmt-muted-color));
    font-size: var(--fsa-mm-list-meta-size, var(--fsa-mm-mgmt-muted-size));
    font-weight: 700;
    line-height: 1;
}

.fsa-mm-submission-card-mainline {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.fsa-mm-submission-card-song,
.fsa-mm-submission-card-artist,
.fsa-mm-submission-card-separator {
    line-height: 1.1;
    white-space: nowrap;
}

.fsa-mm-submission-card-song {
    display: inline-block;
    font-size: var(--fsa-mm-list-row-size, var(--fsa-mm-mgmt-row-size));
    font-weight: 700;
    min-width: 0;
    max-width: min(26ch, 52%);
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    background: linear-gradient(
        90deg,
        var(--fsa-mm-list-heading-color, #eaf1ff) 0%,
        color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 85%, #ffffff 15%) 35%,
        color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 55%, #c4b5fd 45%) 50%,
        color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 85%, #ffffff 15%) 65%,
        var(--fsa-mm-list-heading-color, #eaf1ff) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fsa-mm-text-shimmer 5s linear infinite;
}

.fsa-mm-submission-card-artist,
.fsa-mm-submission-card-separator {
    color: var(--fsa-mm-list-text-color, var(--fsa-mm-mgmt-text-color));
    font-size: var(--fsa-mm-list-row-size, var(--fsa-mm-mgmt-row-size));
    font-weight: 600;
}

.fsa-mm-submission-card-artist {
    display: inline-block;
    min-width: 0;
    max-width: min(20ch, 40%);
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
}

.fsa-mm-submission-card-separator {
    flex: 0 0 auto;
}

/* Stripe payment status on submission cards */
.fsa-mm-submission-card-mainline.stripe-paid .fsa-mm-submission-card-song {
    color: #4cdf8a;
    font-weight: 800;
    -webkit-text-fill-color: #4cdf8a;
    background: none;
    animation: none;
}

.fsa-mm-submission-card-mainline.stripe-paid .fsa-mm-submission-card-artist,
.fsa-mm-submission-card-mainline.stripe-paid .fsa-mm-submission-card-separator {
    color: rgba(76, 223, 138, 0.7);
}

.fsa-mm-stripe-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex: 0 0 auto;
    cursor: default;
}

.fsa-mm-stripe-badge--paid {
    background: rgba(76, 223, 138, 0.12);
    color: #4cdf8a;
    border: 1px solid rgba(76, 223, 138, 0.35);
}

.fsa-mm-stripe-badge--refunded {
    background: rgba(255, 160, 60, 0.12);
    color: #ffa03c;
    border: 1px solid rgba(255, 160, 60, 0.35);
}

.fsa-mm-stripe-badge--error {
    background: rgba(255, 76, 111, 0.12);
    color: #ff4c6f;
    border: 1px solid rgba(255, 76, 111, 0.35);
}

.fsa-mm-submission-card-meta-line {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    grid-column: 3;
    grid-row: 1;
}

.fsa-mm-submission-card-boost-slot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    grid-column: 4;
    grid-row: 1;
}

.fsa-mm-submission-card-amount-pill {
    color: var(--fsa-mm-list-heading-color, var(--fsa-mm-mgmt-heading-color));
    /* match the artist / song name size */
    font-size: var(--fsa-mm-list-row-size, var(--fsa-mm-mgmt-row-size));
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    min-width: 30px;
    text-align: right;
}

.fsa-mm-submission-boost-toggle .fsa-mm-boost-icon {
    display: block;
}

.fsa-mm-submission-card-date {
    color: var(--fsa-mm-list-muted-color, var(--fsa-mm-mgmt-muted-color));
    font-size: var(--fsa-mm-list-meta-size, var(--fsa-mm-mgmt-muted-size));
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fsa-mm-submission-card-priority-inline {
    color: var(--fsa-mm-list-heading-color, var(--fsa-mm-mgmt-heading-color));
    font-size: var(--fsa-mm-list-priority-size, var(--fsa-mm-mgmt-row-size));
    font-weight: 700;
    line-height: 1;
}

.fsa-mm-submission-card-priority-note {
    color: var(--fsa-mm-list-muted-color, var(--fsa-mm-mgmt-muted-color));
    font-size: var(--fsa-mm-list-meta-size, var(--fsa-mm-mgmt-muted-size));
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fsa-mm-submission-boost-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 42%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 95%, #000000 5%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 84%, transparent)
        );
    color: var(--fsa-mm-list-button-text, var(--fsa-mm-button-text));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-list-button-bg, var(--fsa-mm-button-bg)) 94%, #ffffff 6%),
            color-mix(in srgb, var(--fsa-mm-list-button-bg, var(--fsa-mm-button-bg)) 78%, transparent)
        );
    font-family: var(--fsa-mm-font-family);
    font-size: clamp(10px, calc(var(--fsa-mm-list-meta-size, 11px) * 0.96), 12px);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.fsa-mm-submission-boost-toggle:hover,
.fsa-mm-submission-boost-toggle:focus-visible {
    color: var(--fsa-mm-list-button-hover-text, var(--fsa-mm-button-hover-text));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-list-button-hover-bg, var(--fsa-mm-button-hover-bg)) 94%, #ffffff 6%),
            color-mix(in srgb, var(--fsa-mm-list-button-hover-bg, var(--fsa-mm-button-hover-bg)) 78%, transparent)
        );
}

.fsa-mm-submission-boost-form {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 72%, transparent);
    flex-wrap: wrap;
}

.fsa-mm-submission-boost-form[hidden] {
    display: none !important;
}

.fsa-mm-submission-boost-form .fsa-mm-field {
    flex: 1 1 160px;
    min-width: 0;
}

.fsa-mm-submission-boost-form .fsa-mm-field label,
.fsa-mm-submission-boost-form .fsa-mm-field-floating label {
    letter-spacing: 0.04em;
}

.fsa-mm-submission-boost-form .fsa-mm-field-floating input {
    min-height: 38px;
}

.fsa-mm-submission-boost-form .fsa-mm-submit {
    min-height: 34px;
    padding: 0 14px;
    font-size: 10px;
}

.fsa-mm-submission-boost-help {
    flex: 1 1 100%;
    margin: 0;
    color: var(--fsa-mm-list-muted-color, var(--fsa-mm-mgmt-muted-color));
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
}

.fsa-mm-artist-list-shell {
    display: grid;
    gap: 16px;
}

.fsa-mm-artist-list-head {
    display: flex;
    justify-content: center;
    text-align: center;
}

.fsa-mm-artist-list-head h3 {
    margin: 0;
    color: var(--fsa-mm-list-heading-color, var(--fsa-mm-mgmt-heading-color));
    font-size: var(--fsa-mm-list-title-size, clamp(20px, 3vw, 26px));
    line-height: 1.05;
}

.fsa-mm-artist-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.fsa-mm-artist-card {
    position: relative;
    min-height: 244px;
    animation: fsaMmArtistCardIn 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transition: transform 220ms ease, filter 220ms ease;
}

.fsa-mm-artist-card:hover {
    transform: translateY(-4px) scale(1.01);
    filter: brightness(1.03);
}

.fsa-mm-artist-card:nth-child(2n) {
    animation-delay: 60ms;
}

.fsa-mm-artist-card:nth-child(3n) {
    animation-delay: 110ms;
}

.fsa-mm-artist-card-shell {
    position: relative;
    min-height: 244px;
    padding: 18px 18px 18px;
    border-radius: 28px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-list-border-color, var(--fsa-mm-mgmt-border-color)) 72%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, #ffffff 3%, transparent), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--fsa-mm-card-bg) 94%, #000000 6%), color-mix(in srgb, var(--fsa-mm-input-bg) 90%, transparent));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 5%, transparent),
        0 16px 34px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.fsa-mm-artist-card-shell::before {
    content: "";
    position: absolute;
    inset: 50px 18px 18px 18px;
    border-radius: 26px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 20%, #ffffff 4%),
            color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 12%, transparent)
        );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent),
        inset 0 -12px 26px rgba(0, 0, 0, 0.08);
    opacity: 0.9;
    pointer-events: none;
}

.fsa-mm-artist-card-avatar-wrap,
.fsa-mm-artist-card-panel,
.fsa-mm-artist-card-corner {
    position: relative;
    z-index: 1;
}

.fsa-mm-artist-card-avatar-wrap {
    position: absolute;
    top: 14px;
    left: 16px;
}

.fsa-mm-artist-card-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    border: 6px solid color-mix(in srgb, var(--fsa-mm-shell-bg, #101520) 90%, #ffffff 10%);
    background:
        radial-gradient(circle at 35% 35%, color-mix(in srgb, #ffffff 18%, transparent), transparent 32%),
        linear-gradient(180deg, color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 28%, #ffffff 4%), color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 14%, transparent));
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
    color: var(--fsa-mm-list-heading-color, var(--fsa-mm-mgmt-heading-color));
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.fsa-mm-artist-card-corner {
    position: absolute;
    top: 18px;
    right: 18px;
}

.fsa-mm-artist-card-iconlink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-list-border-color, var(--fsa-mm-mgmt-border-color)) 76%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 88%, transparent);
    color: color-mix(in srgb, var(--fsa-mm-list-accent, var(--fsa-mm-accent)) 78%, #ffffff 22%);
    text-decoration: none;
}

.fsa-mm-artist-card-iconlink svg {
    width: 14px;
    height: 14px;
}

.fsa-mm-artist-card-iconlink em {
    color: var(--fsa-mm-list-heading-color, var(--fsa-mm-mgmt-heading-color));
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
}

.fsa-mm-artist-card-panel {
    position: relative;
    display: grid;
    align-content: space-between;
    min-height: 208px;
    padding: 76px 12px 12px;
}

.fsa-mm-artist-card-copy {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.fsa-mm-artist-card-name {
    color: var(--fsa-mm-list-heading-color, var(--fsa-mm-mgmt-heading-color));
    font-size: clamp(18px, 2.5vw, 22px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fsa-mm-artist-card-track {
    margin: 0;
    color: var(--fsa-mm-list-heading-color, var(--fsa-mm-mgmt-heading-color));
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    max-width: 100%;
    min-height: calc(1.45em * 2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    opacity: 0.94;
}

.fsa-mm-artist-card-footer {
    display: block;
}

.fsa-mm-artist-card-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.fsa-mm-artist-card-program {
    color: var(--fsa-mm-list-muted-color, var(--fsa-mm-mgmt-muted-color));
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
}

.fsa-mm-artist-card-social {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-list-border-color, var(--fsa-mm-mgmt-border-color)) 76%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 86%, transparent);
    color: var(--fsa-mm-list-text-color, var(--fsa-mm-mgmt-text-color));
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fsa-mm-spotlight-shell {
    display: grid;
    gap: 18px;
}

.fsa-mm-spotlight-head {
    display: flex;
    justify-content: center;
    text-align: center;
}

.fsa-mm-spotlight-head h3 {
    margin: 0;
    color: var(--fsa-mm-spotlight-heading-color, var(--fsa-mm-list-heading-color, var(--fsa-mm-mgmt-heading-color)));
    font-size: var(--fsa-mm-spotlight-title-size, clamp(20px, 3vw, var(--fsa-mm-list-title-size, 26px)));
    line-height: 1.05;
}

.fsa-mm-spotlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

/* --- Two-zone spotlight card (consolidated by portfolio) + horizontal shelf --- */
.fsa-mm-spotlight-shelf {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.fsa-mm-spotlight-shelf.is-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.fsa-mm-spotlight-shelf.is-scroll > .fsa-mm-spotlight-card { scroll-snap-align: start; }

.fsa-mm-spotlight-card--zoned {
    display: flex;
    flex-direction: column;
    height: 360px;
    width: min(240px, calc(100vw - 72px));
    flex: 0 0 min(240px, calc(100vw - 72px));
    overflow: hidden;
    cursor: default;
}
/* No vertical lift on hover — it pushed the card up out of the marquee's clipped top,
   cutting off the card. Double class beats the base .fsa-mm-spotlight-card:hover tie so
   this wins regardless of source order. Keep the glow/border feedback, just don't move it. */
.fsa-mm-spotlight-card.fsa-mm-spotlight-card--zoned:hover {
    transform: none;
}
.fsa-mm-spotlight-card--zoned .fsa-mm-spotlight-card__top {
    position: relative;
    flex: 0 0 156px;
    overflow: hidden;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.fsa-mm-spotlight-card--zoned .fsa-mm-spotlight-card__bottom {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 11px 12px 12px;
    gap: 9px;
    background: linear-gradient(180deg, rgba(9, 12, 20, 0.4), rgba(5, 7, 13, 0.92));
    z-index: 2;
}
.fsa-mm-spotlight-card__idrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.fsa-mm-spotlight-card__id { min-width: 0; }
.fsa-mm-spotlight-card--zoned .fsa-mm-spotlight-artist {
    display: block;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.15;
    color: #eef4ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fsa-mm-spotlight-card--zoned .fsa-mm-spotlight-artist a { color: inherit; text-decoration: none; }
.fsa-mm-spotlight-card--zoned .fsa-mm-spotlight-artist a:hover { color: #90fffb; }
.fsa-mm-spotlight-card--zoned .fsa-mm-spotlight-program {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7fa8d8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fsa-mm-spotlight-card__badges {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fsa-mm-spotlight-points {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(8, 10, 16, 0.6);
    color: #ffd97a;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}
.fsa-mm-spotlight-card__follow-slot {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 6;
}
.fsa-mm-spotlight-follow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(107, 203, 255, 0.45);
    border-radius: 999px;
    background: rgba(6, 9, 16, 0.55);
    color: #cfeaff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.fsa-mm-spotlight-follow:hover { background: rgba(107, 203, 255, 0.2); color: #ffffff; }
.fsa-mm-spotlight-follow svg { display: block; }
/* Hide once followed — unfollowing is done from the profile (matches the directory). */
.fsa-mm-spotlight-follow.is-following { display: none; }
.fsa-mm-spotlight-follow.is-saving { opacity: 0.6; pointer-events: none; }
.fsa-mm-spotlight-points-icon {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    object-fit: contain;
    display: inline-block;
}
.fsa-mm-spotlight-card__songs {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    /* Endless-list feel: the bottom fades out so the loop never looks cut off. */
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.fsa-mm-spotlight-card__songs-track {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Songs scroll only while the card is hovered (and only when there are enough to
   overflow), so it never fights the horizontal marquee — hovering pauses the
   marquee and starts this card's list. Pure CSS transform: no JS, no server cost. */
.fsa-mm-spotlight-card--zoned:hover .fsa-mm-spotlight-card__songs.is-loop .fsa-mm-spotlight-card__songs-track {
    animation: fsaMmSongScroll var(--fsa-mm-song-scroll, 10s) linear infinite;
}
@keyframes fsaMmSongScroll {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .fsa-mm-spotlight-card__songs-track { animation: none !important; }
}
.fsa-mm-spotlight-song-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    border-radius: 8px;
}
.fsa-mm-spotlight-song-row:hover { background: rgba(255, 255, 255, 0.05); }
.fsa-mm-spotlight-song-row + .fsa-mm-spotlight-song-row { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.fsa-mm-spotlight-song-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #d8e4fa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fsa-mm-spotlight-card--zoned .fsa-mm-spotlight-song-row .fsa-mm-player-trigger {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    border-radius: 999px;
}

.fsa-mm-spotlight-marquee {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.75) 14%, #000 22%, #000 78%, rgba(0, 0, 0, 0.75) 86%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.75) 14%, #000 22%, #000 78%, rgba(0, 0, 0, 0.75) 86%, transparent);
}

.fsa-mm-spotlight-track {
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: max-content;
    animation: fsaMmSpotlightMarquee var(--fsa-mm-spotlight-marquee-duration, 42s) linear infinite;
    will-change: transform;
}

.fsa-mm-spotlight-marquee:hover .fsa-mm-spotlight-track {
    animation-play-state: paused;
}

/* JS-enhanced: grab-and-drag scroller. Drives scrollLeft instead of the CSS marquee
   animation, so we disable that and hide the native scrollbar. */
.fsa-mm-spotlight-marquee.is-draggable {
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* We own horizontal drags (JS pointer drag, touch included); the browser keeps
       vertical page scroll. Without this, touch either did nothing or fought the page. */
    touch-action: pan-y;
}
/* Artwork must not start a native drag — the whole card (image included) is a drag handle. */
.fsa-mm-spotlight-marquee.is-draggable .fsa-mm-spotlight-card__media {
    -webkit-user-drag: none;
    user-select: none;
}
.fsa-mm-spotlight-marquee.is-draggable::-webkit-scrollbar { display: none; }
.fsa-mm-spotlight-marquee.is-draggable.is-grabbing { cursor: grabbing; }
.fsa-mm-spotlight-marquee.is-draggable .fsa-mm-spotlight-track {
    animation: none;
    width: max-content;
}

/* --- Spotlight card: media-filled portrait card, mirrors portfolio directory cards --- */
.fsa-mm-spotlight-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 0 0 min(200px, calc(100vw - 72px));
    width: min(200px, calc(100vw - 72px));
    height: 280px;
    border-radius: 18px;
    border: 1px solid rgba(139, 150, 179, 0.2);
    /* Branded gradient base — visible when no media, gives depth to dark cards */
    background:
        radial-gradient(circle at 30% 18%, rgba(43, 107, 255, 0.38), transparent 52%),
        radial-gradient(circle at 80% 82%, rgba(107, 203, 255, 0.18), transparent 42%),
        #05070d;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 4px 24px -8px rgba(0, 0, 0, 0.65),
        0 24px 50px -28px rgba(0, 0, 0, 0.9);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, box-shadow 260ms ease;
    cursor: default;
}

/* Shine sweep on hover */
.fsa-mm-spotlight-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, 0.07) 48%, transparent 68%);
    transform: translateX(-130%);
    transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 5;
}
.fsa-mm-spotlight-card:hover::before { transform: translateX(130%); }

/* Glow ring on hover */
.fsa-mm-spotlight-card::after { content: none; }

.fsa-mm-spotlight-card:hover {
    transform: translateY(-8px) scale(1.012);
    border-color: rgba(107, 203, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 24px -8px rgba(0, 0, 0, 0.65),
        0 28px 60px -24px rgba(0, 0, 0, 0.9),
        0 0 0 1px rgba(107, 203, 255, 0.32),
        0 0 36px -6px rgba(107, 203, 255, 0.28);
}

/* Media fills the whole card */
.fsa-mm-spotlight-card__media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Logo: contain so it doesn't stretch; centered with a branded glow */
.fsa-mm-spotlight-card__media--logo {
    object-fit: contain;
    padding: 28px;
    filter: drop-shadow(0 0 22px rgba(43, 107, 255, 0.55));
    opacity: 0.9;
}

/* Initials placeholder — visible blue-tinted monogram */
.fsa-mm-spotlight-card__media--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    font-weight: 800;
    color: rgba(107, 203, 255, 0.22);
    letter-spacing: -0.02em;
}

/* Gradient scrim + text at the bottom */
.fsa-mm-spotlight-card-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 44px 13px 13px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(5, 7, 13, 0.65) 36%,
        rgba(5, 7, 13, 0.94) 100%);
    pointer-events: none;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Mute/unmute button — top-right, same aesthetic as portfolio cards */
.fsa-mm-spotlight-card__sound {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 6;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(139, 150, 179, 0.35);
    background: rgba(5, 7, 13, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #6bcbff;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.fsa-mm-spotlight-card__sound:hover,
.fsa-mm-spotlight-card__sound:focus-visible {
    border-color: rgba(107, 203, 255, 0.72);
    background: rgba(5, 7, 13, 0.72);
    transform: scale(1.1);
    outline: none;
}

.fsa-mm-spotlight-card__sound .fsa-mm-sound-icon-on  { display: none; }
.fsa-mm-spotlight-card__sound.is-unmuted .fsa-mm-sound-icon-off { display: none; }
.fsa-mm-spotlight-card__sound.is-unmuted .fsa-mm-sound-icon-on  { display: block; }

/* Play trigger inside the overlay */
.fsa-mm-spotlight-card-action {
    pointer-events: auto;
    margin-top: 4px;
}

.fsa-mm-spotlight-card-action .fsa-mm-player-trigger {
    min-width: 34px;
    min-height: 34px;
    padding: 0;
}

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

.fsa-mm-spotlight-player-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    /* The Mixer/Visual tabs make the dialog taller than the viewport — let the whole
       overlay scroll internally instead of spilling the dialog over the page below it. */
    overflow-y: auto;
    overscroll-behavior: contain;
}

.fsa-mm-spotlight-player-backdrop {
    /* Fixed (not absolute) so it always covers the viewport while the overlay scrolls;
       an absolute backdrop scrolled away and let the submission list show through. */
    position: fixed;
    inset: 0;
    background: rgba(4, 7, 13, 0.76);
    backdrop-filter: blur(10px);
}

.fsa-mm-spotlight-player-dialog {
    position: relative;
    z-index: 1;
    width: min(860px, calc(100vw - 40px));
    margin: min(7vh, 52px) auto max(24px, 7vh);
    padding: 16px;
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-spotlight-border-color, var(--fsa-mm-list-border-color, var(--fsa-mm-mgmt-border-color))) 78%, transparent);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--fsa-mm-spotlight-accent, var(--fsa-mm-list-accent, var(--fsa-mm-accent))) 10%, transparent), transparent 44%),
        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, #111522) 94%, transparent));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.4);
}

.fsa-mm-spotlight-player-dialog.is-dragging {
    user-select: none;
}

.fsa-mm-spotlight-player-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--fsa-mm-spotlight-heading-color, var(--fsa-mm-list-heading-color, var(--fsa-mm-mgmt-heading-color)));
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.fsa-mm-spotlight-player-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-spotlight-border-color, var(--fsa-mm-list-border-color, var(--fsa-mm-mgmt-border-color))) 84%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 92%, transparent);
    color: var(--fsa-mm-spotlight-muted-color, var(--fsa-mm-list-muted-color, var(--fsa-mm-mgmt-muted-color)));
    cursor: pointer;
}

.fsa-mm-spotlight-player-close:hover,
.fsa-mm-spotlight-player-close:focus-visible {
    color: var(--fsa-mm-spotlight-heading-color, var(--fsa-mm-list-heading-color, var(--fsa-mm-mgmt-heading-color)));
    border-color: color-mix(in srgb, var(--fsa-mm-spotlight-accent, var(--fsa-mm-list-accent, var(--fsa-mm-accent))) 45%, var(--fsa-mm-spotlight-border-color, var(--fsa-mm-list-border-color, var(--fsa-mm-mgmt-border-color))) 55%);
}

.fsa-mm-spotlight-player-dialog .fsa-mm-player-shell {
    padding: 14px 16px;
    border-radius: 18px;
}

.fsa-mm-spotlight-card-topline,
.fsa-mm-spotlight-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fsa-mm-spotlight-rank,
.fsa-mm-spotlight-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-spotlight-border-color, var(--fsa-mm-list-border-color, var(--fsa-mm-mgmt-border-color))) 80%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 92%, transparent);
    line-height: 1;
}

.fsa-mm-spotlight-rank {
    color: var(--fsa-mm-spotlight-heading-color, var(--fsa-mm-list-heading-color, var(--fsa-mm-mgmt-heading-color)));
    font-size: var(--fsa-mm-spotlight-rank-size, 11px);
    font-weight: 800;
    letter-spacing: 0.08em;
}

.fsa-mm-spotlight-badge {
    color: var(--fsa-mm-spotlight-accent, var(--fsa-mm-list-accent, var(--fsa-mm-accent)));
    font-size: var(--fsa-mm-spotlight-badge-size, 9px);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.62;
}

.fsa-mm-spotlight-card-copy {
    display: grid;
    gap: 3px;
    min-height: 0;
}

.fsa-mm-spotlight-song {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #eaf1ff;
    font-size: clamp(15px, 2.4vw, 18px);
    line-height: 1.12;
    letter-spacing: -0.022em;
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.fsa-mm-spotlight-artist {
    display: block;
    color: rgba(198, 212, 239, 0.88);
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fsa-mm-spotlight-program {
    color: rgba(198, 212, 239, 0.5);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* =========================================================================
   Spotlight card style variants (Immersive Home → Theme → Card style).
   Scoped to [data-ssp-cards] on the marquee/grid wrapper — mirrors MMP and
   /programs card variants so the whole site shares one look setting.
   ========================================================================= */

/* GLASS */
[data-ssp-cards="glass"] .fsa-mm-spotlight-card::before { display: none; }
[data-ssp-cards="glass"] .fsa-mm-spotlight-card {
    border-color: rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(10, 14, 26, 0.52));
    -webkit-backdrop-filter: blur(22px) saturate(1.1);
    backdrop-filter: blur(22px) saturate(1.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 20px 50px -30px rgba(0, 0, 0, 0.8);
}
[data-ssp-cards="glass"] .fsa-mm-spotlight-card:hover {
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        0 30px 60px -30px rgba(0, 0, 0, 0.85);
}

/* MINIMAL */
[data-ssp-cards="minimal"] .fsa-mm-spotlight-card::before { display: none; }
[data-ssp-cards="minimal"] .fsa-mm-spotlight-card {
    border-radius: 12px;
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(8, 11, 18, 0.84);
    box-shadow: none;
}
[data-ssp-cards="minimal"] .fsa-mm-spotlight-card:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: none;
}

/* EDITORIAL */
[data-ssp-cards="editorial"] .fsa-mm-spotlight-card::before { display: none; }
[data-ssp-cards="editorial"] .fsa-mm-spotlight-card {
    border: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
}
[data-ssp-cards="editorial"] .fsa-mm-spotlight-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: none;
}

/* NEON */
[data-ssp-cards="neon"] .fsa-mm-spotlight-card {
    border: 1.5px solid color-mix(in srgb, var(--ssp-accent-2, #6bcbff) 80%, transparent);
    background: rgba(6, 10, 20, 0.7);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--ssp-accent, #2b6bff) 30%, transparent),
        0 0 28px -6px color-mix(in srgb, var(--ssp-accent-2, #6bcbff) 70%, transparent),
        inset 0 0 24px -10px color-mix(in srgb, var(--ssp-accent-2, #6bcbff) 55%, transparent);
}
[data-ssp-cards="neon"] .fsa-mm-spotlight-card:hover {
    border-color: var(--ssp-cyan, #90fffb);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--ssp-cyan, #90fffb) 40%, transparent),
        0 0 44px -4px color-mix(in srgb, var(--ssp-accent-2, #6bcbff) 90%, transparent),
        inset 0 0 30px -8px color-mix(in srgb, var(--ssp-accent-2, #6bcbff) 65%, transparent);
}

@keyframes fsaMmSpotlightMarquee {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(calc(-50% - 9px), 0, 0);
    }
}

@keyframes fsaMmSpotlightShine {
    0% {
        opacity: 0;
        transform: translateX(var(--fsa-mm-spotlight-shine-shift-start, -34%));
    }

    18% {
        opacity: 0.88;
    }

    100% {
        opacity: 0;
        transform: translateX(var(--fsa-mm-spotlight-shine-shift-end, 34%));
    }
}

@keyframes fsaMmArtistCardIn {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.985);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fsa-mm-management-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.fsa-mm-management-check input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.fsa-mm-management-check span {
    width: 16px;
    height: 16px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 88%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 92%, transparent);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(255, 255, 255, 0.01);
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.fsa-mm-management-check input:checked + span {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 65%, transparent);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-accent) 18%, transparent),
            color-mix(in srgb, var(--fsa-mm-accent) 12%, var(--fsa-mm-input-bg) 88%)
        );
    box-shadow:
        inset 0 0 0 4px color-mix(in srgb, var(--fsa-mm-accent) 85%, transparent),
        inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.fsa-mm-management-check input:hover + span,
.fsa-mm-management-check input:focus-visible + span {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 48%, var(--fsa-mm-input-border) 52%);
}

.fsa-mm-notes-cell {
    position: relative;
}

.fsa-mm-actions-cell {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: max-content;
}

.fsa-mm-notes-button {
    position: relative;
    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) 84%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 96%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 86%, transparent)
        );
    color: var(--fsa-mm-placeholder);
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.fsa-mm-notes-button:hover,
.fsa-mm-notes-button:focus-visible,
.fsa-mm-notes-button.has-notes {
    color: var(--fsa-mm-label-color);
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 42%, var(--fsa-mm-input-border) 58%);
}

.fsa-mm-notes-button:hover,
.fsa-mm-notes-button:focus-visible {
    transform: translateY(-1px);
}

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

.fsa-mm-edit-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) 84%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 96%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 86%, transparent)
        );
    color: var(--fsa-mm-placeholder);
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.fsa-mm-edit-button:hover,
.fsa-mm-edit-button:focus-visible {
    color: var(--fsa-mm-label-color);
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 42%, var(--fsa-mm-input-border) 58%);
    transform: translateY(-1px);
}

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

.fsa-mm-notes-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 5;
    width: 220px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-card-border) 85%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--fsa-mm-card-bg) 98%, transparent);
    color: var(--fsa-mm-text-color);
    font-size: 11px;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
    transform: translate(-50%, 4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
}

.fsa-mm-notes-button:hover .fsa-mm-notes-tooltip,
.fsa-mm-notes-button:focus-visible .fsa-mm-notes-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
}

.fsa-mm-notes-popover {
    position: fixed;
    top: 36px;
    left: 50%;
    right: auto;
    z-index: 72;
    width: min(840px, calc(100vw - 32px));
    max-height: calc(100vh - 72px);
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-card-border) 86%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--fsa-mm-card-bg) 99%, transparent);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.34);
    transform: translateX(-50%);
    overflow: hidden;
}

.fsa-mm-notes-popover-head,
.fsa-mm-notes-entry-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.fsa-mm-notes-popover-head {
    margin-bottom: 10px;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.fsa-mm-notes-popover.is-dragging .fsa-mm-notes-popover-head {
    cursor: grabbing;
}

.fsa-mm-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
}

.fsa-mm-edit-modal[hidden] {
    display: none !important;
}

.fsa-mm-edit-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 14, 0.62);
    backdrop-filter: blur(3px);
}

.fsa-mm-draw-modal {
    position: fixed;
    inset: 0;
    z-index: 71;
}

.fsa-mm-draw-modal[hidden] {
    display: none !important;
}

.fsa-mm-draw-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 14, 0.62);
    backdrop-filter: blur(3px);
}

.fsa-mm-draw-dialog {
    position: relative;
    z-index: 1;
    width: min(920px, calc(100vw - 32px));
    margin: 36px auto;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-card-border) 86%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--fsa-mm-card-bg) 99%, transparent);
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.42);
}

.fsa-mm-draw-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.fsa-mm-draw-dialog.is-dragging .fsa-mm-draw-head {
    cursor: grabbing;
}

.fsa-mm-draw-head strong {
    display: block;
    color: var(--fsa-mm-label-color);
    font-size: 16px;
    line-height: 1.1;
}

.fsa-mm-draw-head span {
    display: block;
    margin-top: 4px;
    color: var(--fsa-mm-text-color);
    font-size: 12px;
}

.fsa-mm-draw-close {
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--fsa-mm-placeholder);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.fsa-mm-draw-body {
    display: grid;
    grid-template-columns: minmax(340px, 380px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.fsa-mm-draw-wheel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
}

.fsa-mm-draw-wheel-wrap[hidden],
.fsa-mm-draw-reel-wrap[hidden] {
    display: none !important;
}

.fsa-mm-draw-pointer {
    position: absolute;
    top: -3px;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 22px solid color-mix(in srgb, var(--fsa-mm-accent) 88%, #ffffff 12%);
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28));
    z-index: 2;
}

.fsa-mm-draw-wheel-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-card-border) 82%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 92%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 3%, transparent);
}

.fsa-mm-draw-wheel {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 36%, transparent);
    box-shadow: 0 20px 32px rgba(0, 0, 0, 0.28);
}

.fsa-mm-draw-wheel-label {
    position: absolute;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(8, 12, 20, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
    color: #f7fbff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    pointer-events: none;
    white-space: nowrap;
}

.fsa-mm-draw-wheel.is-compact .fsa-mm-draw-wheel-label {
    min-width: 24px;
    min-height: 24px;
    padding: 0 5px;
    font-size: 10px;
}

.fsa-mm-draw-wheel.is-tight .fsa-mm-draw-wheel-label {
    min-width: 22px;
    min-height: 22px;
    padding: 0 4px;
    font-size: 9px;
}

.fsa-mm-draw-wheel-label.is-winner {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.82);
    color: #0f1625;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.3);
}

.fsa-mm-draw-wheel-center {
    position: absolute;
    z-index: 2;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 98px;
    height: 98px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-card-border) 82%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-card-bg) 98%, transparent);
    color: var(--fsa-mm-label-color);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fsa-mm-draw-reel-wrap {
    position: relative;
    display: grid;
    align-content: center;
    width: min(380px, 100%);
    height: 350px;
    padding: 142px 14px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-card-border) 82%, transparent);
    border-radius: 26px;
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, #35c8ff 16%, transparent), transparent 48%),
        color-mix(in srgb, var(--fsa-mm-input-bg) 92%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 4%, transparent),
        0 18px 34px rgba(0, 0, 0, 0.26);
    overflow: hidden;
}

.fsa-mm-draw-reel-wrap::before,
.fsa-mm-draw-reel-wrap::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 84px;
    z-index: 2;
    pointer-events: none;
}

.fsa-mm-draw-reel-wrap::before {
    top: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--fsa-mm-input-bg) 98%, transparent), transparent);
}

.fsa-mm-draw-reel-wrap::after {
    bottom: 0;
    background: linear-gradient(0deg, color-mix(in srgb, var(--fsa-mm-input-bg) 98%, transparent), transparent);
}

.fsa-mm-draw-reel-window {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 14px;
    right: 14px;
    height: 68px;
    transform: translateY(-50%);
    border: 1px solid color-mix(in srgb, #35c8ff 76%, var(--fsa-mm-card-border) 24%);
    border-radius: 16px;
    background: color-mix(in srgb, #35c8ff 9%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, #35c8ff 16%, transparent),
        0 0 26px color-mix(in srgb, #35c8ff 22%, transparent);
    pointer-events: none;
}

.fsa-mm-draw-reel-track {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    will-change: transform;
}

.fsa-mm-draw-reel-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    height: 58px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-card-border) 76%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--fsa-mm-card-bg) 88%, transparent);
    color: var(--fsa-mm-text-color);
}

.fsa-mm-draw-reel-item.is-winner {
    border-color: color-mix(in srgb, #35c8ff 78%, #ffffff 8%);
    background:
        linear-gradient(90deg, color-mix(in srgb, #35c8ff 20%, transparent), transparent 70%),
        color-mix(in srgb, var(--fsa-mm-card-bg) 92%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #35c8ff 24%, transparent);
}

.fsa-mm-draw-side {
    display: grid;
    gap: 12px;
}

.fsa-mm-draw-winner {
    min-height: 40px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-card-border) 84%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 92%, transparent);
    color: var(--fsa-mm-label-color);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.fsa-mm-draw-winner strong,
.fsa-mm-draw-winner span {
    display: block;
}

.fsa-mm-draw-winner span {
    margin-top: 4px;
    color: var(--fsa-mm-text-color);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fsa-mm-draw-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fsa-mm-draw-actions .fsa-mm-management-refresh-button.is-draw-spin {
    border-color: color-mix(in srgb, #35c8ff 74%, #ffffff 8%);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, #35c8ff 42%, rgba(8, 12, 20, 0.78) 58%),
            color-mix(in srgb, #1177ff 30%, rgba(8, 12, 20, 0.9) 70%)
        );
    color: #f7fdff;
    box-shadow:
        0 0 0 1px color-mix(in srgb, #35c8ff 18%, transparent),
        0 8px 20px color-mix(in srgb, #118cff 26%, transparent);
}

.fsa-mm-draw-actions .fsa-mm-management-refresh-button.is-draw-spin:hover,
.fsa-mm-draw-actions .fsa-mm-management-refresh-button.is-draw-spin:focus-visible {
    border-color: color-mix(in srgb, #79e2ff 86%, #ffffff 14%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, #79e2ff 24%, transparent),
        0 10px 24px color-mix(in srgb, #35c8ff 34%, transparent);
}

.fsa-mm-draw-entries {
    display: grid;
    gap: 8px;
    max-height: 204px;
    overflow: auto;
    padding-right: 4px;
}

.fsa-mm-draw-entry {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-card-border) 82%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 90%, transparent);
}

.fsa-mm-draw-entry.is-winner {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 64%, var(--fsa-mm-card-border) 36%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fsa-mm-accent) 24%, transparent);
}

.fsa-mm-draw-entry-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 34%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fsa-mm-accent) 10%, transparent);
    color: var(--fsa-mm-label-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.fsa-mm-draw-entry-copy {
    min-width: 0;
    color: var(--fsa-mm-text-color);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fsa-mm-draw-entry-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid color-mix(in srgb, #ff7272 48%, var(--fsa-mm-card-border) 52%);
    border-radius: 999px;
    background: color-mix(in srgb, #ff7272 10%, var(--fsa-mm-input-bg) 90%);
    color: color-mix(in srgb, #ffdada 86%, #ffffff 14%);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    opacity: 0.72;
    transition: opacity 150ms ease, border-color 150ms ease, background 150ms ease;
}

.fsa-mm-draw-entry-remove:hover,
.fsa-mm-draw-entry-remove:focus-visible {
    opacity: 1;
    border-color: color-mix(in srgb, #ff8b8b 76%, #ffffff 10%);
    background: color-mix(in srgb, #ff7272 18%, var(--fsa-mm-input-bg) 82%);
}

.fsa-mm-edit-dialog {
    position: relative;
    z-index: 1;
    width: min(840px, calc(100vw - 32px));
    margin: 36px auto;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-card-border) 86%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--fsa-mm-card-bg) 99%, transparent);
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.42);
}

.fsa-mm-edit-form {
    display: grid;
    gap: 12px;
}

.fsa-mm-edit-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.fsa-mm-edit-dialog.is-dragging .fsa-mm-edit-head {
    cursor: grabbing;
}

.fsa-mm-edit-head strong {
    display: block;
    color: var(--fsa-mm-label-color);
    font-size: 16px;
    line-height: 1.1;
}

.fsa-mm-edit-head span {
    display: block;
    margin-top: 4px;
    color: var(--fsa-mm-text-color);
    font-size: 12px;
}

.fsa-mm-edit-close {
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--fsa-mm-placeholder);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.fsa-mm-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.fsa-mm-edit-grid > .is-wide {
    grid-column: 1 / -1;
}

.fsa-mm-edit-grid label {
    display: grid;
    gap: 5px;
}

.fsa-mm-edit-grid label.is-wide {
    grid-column: 1 / -1;
}

.fsa-mm-edit-grid label > span {
    color: var(--fsa-mm-label-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fsa-mm-edit-field-note {
    color: var(--fsa-mm-muted-color);
    font-size: 10px;
    font-style: normal;
    line-height: 1.3;
}

.fsa-mm-edit-money-group {
    display: grid;
    gap: 9px;
    padding: 10px 11px 11px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 78%, transparent);
    border-radius: 14px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 96%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 88%, transparent)
        );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 2%, transparent),
        inset 0 3px 8px rgba(0, 0, 0, 0.18);
}

.fsa-mm-edit-money-head {
    display: grid;
    gap: 2px;
}

.fsa-mm-edit-money-head strong {
    color: var(--fsa-mm-label-color);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fsa-mm-edit-money-head span {
    color: var(--fsa-mm-text-color);
    font-size: 10px;
    line-height: 1.35;
}

.fsa-mm-edit-money-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.fsa-mm-edit-checkbox {
    align-content: start;
    align-self: start;
}

.fsa-mm-edit-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 6px 0 0;
    accent-color: var(--fsa-mm-accent);
}

.fsa-mm-edit-grid input,
.fsa-mm-edit-grid textarea,
.fsa-mm-edit-grid select {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 84%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 96%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 86%, transparent)
        );
    color: var(--fsa-mm-input-text);
    font-family: var(--fsa-mm-font-family);
    font-size: 12px;
    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-edit-grid input,
.fsa-mm-edit-grid select {
    min-height: 36px;
    padding: 0 11px;
}

.fsa-mm-edit-money-grid input {
    min-height: 38px;
}

.fsa-mm-edit-grid select {
    appearance: none;
    background-image:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 96%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 86%, transparent)
        ),
        linear-gradient(45deg, transparent 50%, var(--fsa-mm-placeholder) 50%),
        linear-gradient(135deg, var(--fsa-mm-placeholder) 50%, transparent 50%);
    background-position:
        0 0,
        calc(100% - 18px) 15px,
        calc(100% - 12px) 15px;
    background-size:
        auto,
        6px 6px,
        6px 6px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

.fsa-mm-edit-grid select option,
.fsa-mm-edit-grid select optgroup {
    background: #11141d;
    color: #f4efe8;
}

.fsa-mm-edit-grid textarea {
    min-height: 96px;
    padding: 10px 12px;
    border-radius: 12px;
    resize: vertical;
}

.fsa-mm-edit-section {
    border: 1px solid color-mix(in srgb, var(--fsa-mm-card-border) 82%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 42%, transparent);
    overflow: hidden;
}

.fsa-mm-edit-section summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    color: var(--fsa-mm-label-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
    outline: none;
}

.fsa-mm-edit-section summary:focus-visible {
    color: var(--fsa-mm-label-color);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fsa-mm-accent) 42%, transparent);
}

.fsa-mm-edit-section summary::-webkit-details-marker {
    display: none;
}

.fsa-mm-edit-section summary::after {
    content: "+";
    color: var(--fsa-mm-placeholder);
    font-size: 14px;
    line-height: 1;
}

.fsa-mm-edit-section[open] summary::after {
    content: "-";
}

.fsa-mm-edit-section .fsa-mm-edit-grid,
.fsa-mm-edit-section .fsa-mm-edit-viewgrid,
.fsa-mm-edit-section .fsa-mm-edit-track-actions,
.fsa-mm-edit-section .fsa-mm-edit-metadata-grid {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
}

.fsa-mm-edit-track-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fsa-mm-edit-track-action {
    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) 84%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 95%, #000000 5%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 84%, transparent)
        );
    color: var(--fsa-mm-label-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
}

.fsa-mm-edit-track-action:hover,
.fsa-mm-edit-track-action:focus-visible {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 48%, var(--fsa-mm-input-border) 52%);
    color: var(--fsa-mm-label-color);
}

.fsa-mm-edit-metadata {
    border: 1px solid color-mix(in srgb, var(--fsa-mm-card-border) 82%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 42%, transparent);
    overflow: hidden;
}

.fsa-mm-edit-metadata summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    color: var(--fsa-mm-label-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.fsa-mm-edit-metadata summary::-webkit-details-marker {
    display: none;
}

.fsa-mm-edit-metadata summary::after {
    content: "+";
    color: var(--fsa-mm-placeholder);
    font-size: 14px;
    line-height: 1;
}

.fsa-mm-edit-metadata[open] summary::after {
    content: "−";
}

.fsa-mm-edit-metadata-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.fsa-mm-edit-metadata-item {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.fsa-mm-edit-metadata-item.is-wide {
    grid-column: 1 / -1;
}

.fsa-mm-edit-metadata-item strong {
    color: var(--fsa-mm-placeholder);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fsa-mm-edit-metadata-item span {
    color: var(--fsa-mm-text-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fsa-mm-edit-viewgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.fsa-mm-edit-viewcard {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-card-border) 84%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 58%, transparent);
    min-height: 0;
}

.fsa-mm-edit-viewcard strong {
    color: var(--fsa-mm-label-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fsa-mm-edit-viewcard p {
    margin: 0;
    color: var(--fsa-mm-text-color);
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.fsa-mm-edit-viewcard:first-child p {
    max-height: 250px;
    overflow: auto;
    padding-right: 6px;
}

.fsa-mm-edit-viewcard dl {
    display: grid;
    gap: 6px;
    margin: 0;
}

.fsa-mm-edit-viewcard dl div {
    display: grid;
    gap: 2px;
}

.fsa-mm-edit-viewcard dt {
    color: var(--fsa-mm-placeholder);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fsa-mm-edit-viewcard dd {
    margin: 0;
    color: var(--fsa-mm-text-color);
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.fsa-mm-edit-viewgrid .fsa-mm-edit-viewcard:last-child {
    align-self: start;
}

.fsa-mm-edit-viewcard-boost-signals {
    grid-column: 1 / -1;
    border-top: 1px solid color-mix(in srgb, var(--fsa-mm-card-border) 40%, transparent);
    padding-top: 10px;
    margin-top: 2px;
}

.fsa-mm-boost-signal-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fsa-mm-boost-signal-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--fsa-mm-card-bg) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--fsa-mm-card-border) 50%, transparent);
    border-radius: calc(var(--fsa-mm-radius) - 4px);
}

.fsa-mm-boost-signal-row.is-same-device {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 40%, transparent);
}

.fsa-mm-boost-signal-index {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--fsa-mm-accent) 12%, transparent);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    color: var(--fsa-mm-accent);
}

.fsa-mm-boost-signal-row dl {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 4px 12px;
    margin: 0;
}

.fsa-mm-boost-signal-row dl div {
    display: grid;
    gap: 1px;
}

.fsa-mm-boost-same-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fsa-mm-accent);
    background: color-mix(in srgb, var(--fsa-mm-accent) 12%, transparent);
    border-radius: 4px;
    padding: 1px 5px;
    vertical-align: middle;
    margin-left: 4px;
}

.fsa-mm-signal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.fsa-mm-signal-action {
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.fsa-mm-signal-action.is-blocked,
.fsa-mm-signal-action:disabled {
    opacity: 0.72;
    cursor: default;
}

.fsa-mm-signal-block-summary {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.fsa-mm-signal-block-summary strong {
    color: var(--fsa-mm-label-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fsa-mm-signal-block-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fsa-mm-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* Spotlight + Stripe controls relocated into the editor header, left of Close */
.fsa-mm-edit-actions .fsa-mm-edit-head-control {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 70%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-input-bg, #0d1929) 80%, transparent);
}

.fsa-mm-edit-head-control > span {
    color: var(--fsa-mm-label-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.fsa-mm-edit-head-control input[type="checkbox"] {
    margin: 0;
    accent-color: var(--fsa-mm-accent);
}

.fsa-mm-edit-stripe-control select {
    min-height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 84%, transparent);
    background: var(--fsa-mm-input-bg, #0d1929);
    color: var(--fsa-mm-text-color, #eaf1ff);
    font-size: 12px;
}

.fsa-mm-edit-stripe-control select option {
    background: #0d1929;
    color: #eaf1ff;
}

.fsa-mm-notes-close {
    min-width: 26px;
    min-height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fsa-mm-placeholder);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.fsa-mm-notes-history {
    display: grid;
    gap: 10px;
    max-height: min(460px, calc(100vh - 260px));
    overflow: auto;
}

.fsa-mm-notes-ledger-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--fsa-mm-placeholder);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.fsa-mm-notes-ledger-toggle input {
    margin: 0;
}

.fsa-mm-notes-popover:not(:has([data-notes-ledger-toggle]:checked)) .fsa-mm-notes-entry[data-entry-type="ledger"] {
    display: none;
}

.fsa-mm-note-compose {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--fsa-mm-card-border) 78%, transparent);
}

/* Reviewer score pips (1–10) above the note box. */
/* Event score published by a Song Royale round. Distinct from the host's own pip
   score above it: a different claim about the song, from a different set of people. */
.fsa-mm-event-scores {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0 4px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 212, 121, 0.32);
    border-radius: 9px;
    background: rgba(255, 212, 121, 0.08);
}
.fsa-mm-event-scores-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffd479;
}
.fsa-mm-event-scores-val { font-size: 15px; font-weight: 700; color: #ffe4a6; }
.fsa-mm-event-scores-meta { flex: 1 1 auto; font-size: 11px; opacity: 0.75; }
.fsa-mm-event-scores-clear {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 4px 11px;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #ffd479;
    background: transparent;
    border: 1px solid rgba(255, 212, 121, 0.45);
    border-radius: 999px;
    cursor: pointer;
}
.fsa-mm-event-scores-clear:hover { background: rgba(255, 212, 121, 0.18); }
.fsa-mm-event-scores-clear:disabled { opacity: 0.55; cursor: default; }

.fsa-mm-note-scores {
    display: grid;
    gap: 7px;
    padding: 2px 0 4px;
}

.fsa-mm-score-row {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    align-items: center;
    gap: 10px;
}

.fsa-mm-score-label {
    color: var(--fsa-mm-mgmt-muted-color, #7e879d);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.fsa-mm-score-pips {
    display: flex;
    align-items: center;
    gap: 4px;
    outline: none;
}

.fsa-mm-score-pip {
    appearance: none;
    cursor: pointer;
    flex: 1 1 0;
    min-width: 0;
    height: 14px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color, #2a3040) 90%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg, #0a0d14) 70%, transparent);
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}

.fsa-mm-score-pip:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 60%, transparent);
}

.fsa-mm-score-pip.is-on {
    border-color: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 70%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 90%, #ffffff 10%),
        var(--fsa-mm-accent, #2b6bff));
    box-shadow: 0 0 6px color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 35%, transparent);
}

.fsa-mm-score-pips:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 50%, transparent);
    border-radius: 999px;
}

.fsa-mm-score-value {
    min-width: 16px;
    text-align: center;
    color: var(--fsa-mm-mgmt-heading-color, #f2f4f9);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Average reviewer score badge in the Queue's Score column. */
.fsa-mm-management-table .col-score {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

.fsa-mm-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 55%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 18%, transparent);
    color: var(--fsa-mm-mgmt-heading-color, #f2f4f9);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fsa-mm-score-badge.is-empty {
    border-color: color-mix(in srgb, var(--fsa-mm-mgmt-border-color, #2a3040) 70%, transparent);
    background: transparent;
    color: var(--fsa-mm-mgmt-muted-color, #7e879d);
    font-weight: 600;
}

/* Queue: paid/skip rows are highlighted so they stand out above the free line. An accent-tinted
   fill + a left accent rail (theme-accent, so it works on every color theme). */
.fsa-mm-management-row.is-skip > td {
    background-color: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 14%, transparent);
}

.fsa-mm-management-row.is-skip > td:first-child {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 80%, transparent) !important;
}

.fsa-mm-management-row.is-skip:hover > td {
    background-color: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 20%, transparent);
}

.fsa-mm-note-compose textarea {
    width: 100%;
    min-height: 92px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 84%, transparent);
    border-radius: 12px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 96%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 86%, transparent)
        );
    color: var(--fsa-mm-input-text);
    font-family: var(--fsa-mm-font-family);
    font-size: 12px;
    resize: vertical;
    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-note-share {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 8px 0 4px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--fsa-mm-muted, #9fb2c9);
    cursor: pointer;
}

.fsa-mm-note-share input {
    margin: 1px 0 0;
    flex: 0 0 auto;
    accent-color: var(--fsa-mm-accent, #6bcbff);
}

.fsa-mm-note-compose-actions {
    display: flex;
    justify-content: flex-end;
}

.fsa-mm-note-compose-actions .fsa-mm-submit {
    min-height: 32px;
    padding: 0 14px;
    font-size: 11px;
}

.fsa-mm-notes-entry {
    display: grid;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--fsa-mm-card-border) 78%, transparent);
}

.fsa-mm-notes-entry:first-child {
    padding-top: 0;
    border-top: 0;
}

.fsa-mm-notes-entry-head strong {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fsa-mm-notes-entry.is-ledger.is-positive .fsa-mm-notes-entry-head strong {
    color: color-mix(in srgb, #66f0b2 82%, var(--fsa-mm-label-color) 18%);
}

.fsa-mm-notes-entry.is-ledger.is-negative .fsa-mm-notes-entry-head strong {
    color: color-mix(in srgb, #ff8a8a 78%, var(--fsa-mm-label-color) 22%);
}

.fsa-mm-notes-entry.is-ledger.is-positive {
    border-left: 2px solid color-mix(in srgb, #66f0b2 72%, transparent);
    padding-left: 10px;
}

.fsa-mm-notes-entry.is-ledger.is-negative {
    border-left: 2px solid color-mix(in srgb, #ff8a8a 68%, transparent);
    padding-left: 10px;
}

.fsa-mm-notes-entry.is-change_log {
    border-left: 2px solid color-mix(in srgb, #f4c84b 68%, transparent);
    padding-left: 10px;
}

.fsa-mm-notes-entry.is-change_log .fsa-mm-notes-entry-head strong {
    color: color-mix(in srgb, #ffe28d 82%, var(--fsa-mm-label-color) 18%);
}

.fsa-mm-notes-entry-head span {
    color: var(--fsa-mm-placeholder);
    font-size: 11px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.fsa-mm-notes-entry p,
.fsa-mm-notes-empty {
    margin: 0;
    color: var(--fsa-mm-text-color);
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Per-note Edit / Delete controls (reviewer notes only). Quiet by default so they don't
   compete with the note text; they lift on hover. */
.fsa-mm-notes-entry-actions {
    display: flex;
    gap: 8px;
}

.fsa-mm-notes-entry-action {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 2px 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--fsa-mm-label-color) 72%, transparent);
    cursor: pointer;
    transition: color 0.15s ease;
}

.fsa-mm-notes-entry-action:hover {
    color: var(--fsa-mm-accent);
    text-decoration: underline;
}

.fsa-mm-notes-entry-action.is-danger:hover {
    color: #ff8a8a;
}

.fsa-mm-notes-entry-action.is-primary {
    color: var(--fsa-mm-accent);
}

.fsa-mm-notes-entry-editor {
    display: grid;
    gap: 8px;
    margin-top: 4px;
}

.fsa-mm-notes-entry-editor textarea {
    width: 100%;
    min-height: 60px;
    resize: vertical;
    border-radius: 8px;
    border: 1px solid var(--fsa-mm-input-border, var(--fsa-mm-card-border));
    background: var(--fsa-mm-input-bg, color-mix(in srgb, var(--fsa-mm-card-bg) 88%, transparent));
    color: var(--fsa-mm-input-text, var(--fsa-mm-text-color));
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.45;
}

.fsa-mm-notes-entry-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.fsa-mm-note-compose-hint {
    margin: 6px 0 0;
    color: var(--fsa-mm-placeholder);
    font-size: 11px;
    line-height: 1.4;
    text-align: right;
}

@keyframes fsaMmRowFlash {
    0% {
        background: color-mix(in srgb, var(--fsa-mm-accent) 18%, transparent);
    }

    100% {
        background: transparent;
    }
}

@keyframes fsaMmFadeUp {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 767px) {
    .fsa-mm-artist-card-grid {
        grid-template-columns: 1fr;
    }

    .fsa-mm-artist-card {
        min-height: 226px;
    }

    .fsa-mm-artist-card-shell {
        min-height: 226px;
        padding: 16px;
    }

    .fsa-mm-artist-card-shell::before {
        inset: 46px 16px 16px 16px;
    }

    .fsa-mm-artist-card-avatar {
        width: 58px;
        height: 58px;
        font-size: 18px;
    }

    .fsa-mm-artist-card-panel {
        min-height: 194px;
        padding: 68px 10px 10px;
    }

    .fsa-mm-artist-card-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .fsa-mm-artist-card-stats {
        gap: 6px;
    }

    .fsa-mm-form-wrap {
        margin: 12px auto;
        padding: 12px;
    }

    .fsa-mm-form {
        padding: 14px;
    }

    .fsa-mm-step-progress {
        grid-auto-columns: minmax(48px, max-content);
        gap: 5px;
        margin-bottom: 8px;
    }

    .fsa-mm-step-chip {
        justify-content: center;
        min-width: 44px;
        padding: 4px 8px;
    }

    .fsa-mm-step-chip:not(.is-active) {
        gap: 0;
        padding-left: 6px;
        padding-right: 6px;
    }

    .fsa-mm-step-chip:not(.is-active) .fsa-mm-step-chip-copy {
        display: none;
    }

    .fsa-mm-step-chip.is-active {
        justify-content: flex-start;
        /* size to content + padding only. A fixed min-width here exceeds the grid
           track's max-content sizing (which ignores min-width), so the chip would
           overflow its cell and overlap the next chip. */
        padding-left: 10px;
        padding-right: 12px;
    }

    .fsa-mm-track-option span {
        min-height: 34px;
        padding: 0 9px;
        font-size: 11px !important;
    }

    .fsa-mm-entry-option span {
        min-height: 34px;
        padding: 0 9px;
        font-size: 11px !important;
    }

    .fsa-mm-management-undo-notice {
        position: static;
        display: flex;
        max-width: 100%;
        margin: 0 0 10px;
    }

    .fsa-mm-upload-dropzone {
        min-height: 60px;
        padding: 9px 10px;
        gap: 8px;
    }

    .fsa-mm-upload-copy strong {
        letter-spacing: 0.02em;
        font-size: 11px;
        line-height: 1.02;
    }

    .fsa-mm-upload-copy span {
        font-size: 10px;
        line-height: 1.02;
    }

    .fsa-mm-field-floating input,
    .fsa-mm-field-floating select {
        min-height: 48px;
        padding: 17px 12px 6px;
    }

    .fsa-mm-step-actions {
        gap: 8px;
    }

    .fsa-mm-submission-boost-form {
        flex-wrap: wrap;
    }

    .fsa-mm-submission-boost-form .fsa-mm-field,
    .fsa-mm-submission-boost-form .fsa-mm-submit {
        flex: 1 1 100%;
    }

    .fsa-mm-edit-dialog {
        width: min(100vw - 20px, 840px);
        margin: 24px auto;
        padding: 14px;
    }

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

    .fsa-mm-edit-money-grid {
        grid-template-columns: 1fr;
    }

    .fsa-mm-edit-viewgrid {
        grid-template-columns: 1fr;
    }

    .fsa-mm-program-settings-dialog {
        width: min(100vw - 20px, 620px);
        margin: 24px auto;
        padding: 12px;
    }

    .fsa-mm-program-settings-grid {
        grid-template-columns: 1fr;
    }

    .fsa-mm-program-settings-row-grid,
    .fsa-mm-program-settings-offline-row {
        grid-template-columns: 1fr;
    }

    .fsa-mm-notes-popover {
        top: 20px;
        width: min(100vw - 20px, 840px);
        max-height: calc(100vh - 40px);
        padding: 12px;
    }

    .fsa-mm-management-summary,
    .fsa-mm-management-meta,
    .fsa-mm-management-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .fsa-mm-management-split {
        grid-template-columns: 1fr;
    }

    .fsa-mm-management-resizer {
        display: none;
    }

    .fsa-mm-management-side-column {
        position: static;
    }

    .fsa-mm-management-list {
        overflow-x: auto;
    }

    .fsa-mm-management-table {
        min-width: 760px;
    }

    .fsa-mm-submission-card-head {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .fsa-mm-submission-card-mainline,
    .fsa-mm-submission-card-meta-line {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .fsa-mm-submission-card-song {
        white-space: normal;
    }

    .fsa-mm-step-back {
        flex: 0 0 auto;
        min-height: 30px;
        padding: 0 11px;
    }

    .fsa-mm-submit {
        flex: 0 0 auto;
        width: auto;
        min-height: 30px;
        padding: 0 11px;
    }

    .fsa-mm-payment-trigger {
        min-height: 30px;
        padding: 0 11px;
    }
}

@media (max-width: 1180px) {
    .fsa-mm-management-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fsa-mm-management-stats-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fsa-mm-management-stats-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .fsa-mm-stats-summary-header,
    .fsa-mm-stats-summary-row,
    .fsa-mm-stats-forecast-header,
    .fsa-mm-stats-forecast-row,
    .fsa-mm-stats-queue-grid,
    .fsa-mm-stats-leaderboards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fsa-mm-stats-summary-header {
        padding: 0;
        gap: 8px;
    }

    .fsa-mm-stats-summary-header-program,
    .fsa-mm-stats-summary-program,
    .fsa-mm-stats-forecast-header-program,
    .fsa-mm-stats-forecast-program {
        grid-column: 1 / -1;
    }

    .fsa-mm-stats-summary-header-program,
    .fsa-mm-stats-forecast-header-program {
        min-height: 0;
        margin-bottom: 2px;
    }

    .fsa-mm-stats-summary-program,
    .fsa-mm-stats-forecast-program {
        min-height: 48px;
    }

    .fsa-mm-management-split {
        grid-template-columns: 1fr;
    }

    .fsa-mm-management-resizer {
        display: none;
    }

    .fsa-mm-management-side-column {
        position: static;
    }
}

@media (max-width: 760px) {
    .fsa-mm-management-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fsa-mm-management-stat-card {
        min-height: 30px;
        padding: 0 9px;
    }

    .fsa-mm-management-stats-dialog {
        width: min(100vw - 20px, 980px);
        margin: 18px auto;
        padding: 14px;
    }

    .fsa-mm-management-stats-form,
    .fsa-mm-stats-summary-header,
    .fsa-mm-stats-summary-row,
    .fsa-mm-stats-forecast-header,
    .fsa-mm-stats-forecast-row,
    .fsa-mm-stats-queue-grid,
    .fsa-mm-stats-leaderboards {
        grid-template-columns: 1fr;
    }

    .fsa-mm-stats-hourly-header,
    .fsa-mm-stats-hourly-grid {
        grid-template-columns: repeat(24, minmax(18px, 1fr));
    }

    .fsa-mm-draw-body {
        grid-template-columns: 1fr;
    }

    .fsa-mm-draw-wheel-shell {
        width: min(350px, calc(100vw - 92px));
        height: min(350px, calc(100vw - 92px));
    }

    .fsa-mm-draw-reel-wrap {
        width: min(380px, calc(100vw - 92px));
        height: min(350px, calc(100vw - 92px));
    }
}

@media (max-width: 520px) {
    .fsa-mm-stats-hourly-header,
    .fsa-mm-stats-hourly-grid {
        grid-template-columns: repeat(24, minmax(16px, 1fr));
    }
}

/* Mobile: compact the Tools + Analytics area (matches the mobile layout target). */
@media (max-width: 767px) {
    /* Keep stat pills 2-up; Analytics + Host Console become full-width bars. */
    .fsa-mm-management-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fsa-mm-management-stat-card-analytics,
    .fsa-mm-management-stat-card-host-console {
        grid-column: 1 / -1;
    }

    .fsa-mm-management-stat-card-host-console {
        min-height: 42px;
        font-size: 12px;
    }

    /* Settings / Customize / Events → one full-width segmented control (compact height). */
    .fsa-mm-management-toolbar-actions {
        flex: 1 1 100%;
        width: 100%;
        gap: 0;
        border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 70%, transparent);
        border-radius: 12px;
        overflow: hidden;
        background: color-mix(in srgb, var(--fsa-mm-card-bg) 80%, transparent);
    }

    .fsa-mm-management-toolbar-actions > * {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        min-height: 34px;
        padding-top: 0;
        padding-bottom: 0;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .fsa-mm-management-toolbar-actions > * + * {
        border-left: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 55%, transparent) !important;
    }

    /* Keep Search + Update on the SAME row as the Tools toggle (right-aligned) so the
       collapsed bar is one tidy row instead of two with a big empty gap. */
    .fsa-mm-management-toolbar-primary {
        order: 2;
    }

    .fsa-mm-management-toolbar-actions {
        order: 3;
    }

    /* Program + Status: full-width stacked rows, select fills the width (matches the rest). */
    .fsa-mm-management-filters {
        flex: 1 1 100%;
        margin-left: 0;
        order: 4;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .fsa-mm-management-filter {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 8px;
    }

    .fsa-mm-management-filter > span {
        flex: 0 0 64px;
    }

    .fsa-mm-management-filter select {
        flex: 1 1 auto;
        width: 100%;
    }

    /* Search + Update sit at the right of the Tools row; hide the redundant "N pending" note. */
    .fsa-mm-management-toolbar-primary {
        flex: 0 0 auto;
        margin-left: auto;
        justify-content: flex-end;
        gap: 8px;
    }

    .fsa-mm-management-toolbar-primary [data-management-status-message] {
        display: none;
    }

    /* ---- Pending rows → 3-row card:
       row 1 = play · artist · song · (select, far right)
       row 2 = amount · date
       row 3 = Approve + menu (compact) ---- */
    .fsa-mm-pending-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "main check"
            "side side";
        align-items: center;
        column-gap: 8px;
        row-gap: 3px;
        padding: 6px 10px;
    }

    .fsa-mm-pending-main { grid-area: main; min-width: 0; }
    .fsa-mm-pending-check { grid-area: check; justify-self: end; align-self: center; }
    .fsa-mm-pending-edit-slot { display: none; }

    .fsa-mm-pending-side {
        grid-area: side;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;   /* amount + date left-aligned on row 2 */
        gap: 3px 8px;
    }

    /* The status control is the flex item here (a .fsa-mm-pending-status wrapper) — force IT to a
       full-width line so Approve is always on row 3, separate from amount/date on row 2. */
    .fsa-mm-pending-side .fsa-mm-pending-status {
        flex-basis: 100%;
        margin-top: 1px;
    }

    /* Drop the redundant "PENDING" word (already stated by the Pending table header). */
    .fsa-mm-pending-side [data-row-status] {
        display: none;
    }

    /* Compact action buttons across both lists' cards. */
    .fsa-mm-management-status-primary,
    .fsa-mm-management-status-menu-toggle,
    .fsa-mm-management-status-menu-action {
        min-height: 25px;
        padding: 0 9px;
        font-size: max(9px, calc(var(--fsa-mm-mgmt-row-size) - 3px));
    }

    /* The Approve row lives on its own full-width line and its buttons WRAP inside the card —
       so the expanded Edit/Archive/Deny menu never blows out the row width. */
    .fsa-mm-management-status-form {
        flex-basis: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: 2px;
    }

    .fsa-mm-management-status-actions,
    .fsa-mm-management-status-secondary-wrap {
        flex-wrap: wrap;
        min-width: 0;
    }

    /* Keep the collapsible menu itself on ONE line. It's hidden via max-width:0, so allowing it
       to wrap made its clipped buttons stack into a tall invisible box — which padded out the
       collapsed rows (taller than the expanded ones). */
    .fsa-mm-management-status-secondary {
        flex-wrap: nowrap;
    }

    /* Queue → 3-row card via the responsive-table pattern (block + inline-block). This is
       Safari-safe, unlike flex/grid on <tr>/<td> which starved the artist cell.
       Row 1 = number/play/Artist–Song · select(top-right)
       Row 2 = amount · free · date (inline)
       Row 3 = Archive + menu */
    [data-management-panel="queue"] .fsa-mm-management-table,
    [data-management-panel="queue"] .fsa-mm-management-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    [data-management-panel="queue"] .fsa-mm-management-table thead {
        display: none;
    }

    [data-management-panel="queue"] .fsa-mm-management-table tbody > tr {
        display: block;
        position: relative;
        padding: 8px 30px 8px 10px;   /* right room for the pinned select */
        border-bottom: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 55%, transparent);
    }

    [data-management-panel="queue"] .fsa-mm-management-table tbody > tr:last-child {
        border-bottom: 0;
    }

    [data-management-panel="queue"] .fsa-mm-management-table td {
        display: block;
        border: 0;
        padding: 0;
    }

    /* Row 1 — the compact-view rule `...is-compact-view .col-artist { max-width:0 }` (a desktop
       table-truncation trick) has higher specificity and was zeroing the cell width in this
       de-tabled block layout, clipping the name. Force it full-width. */
    [data-management-panel="queue"] .col-artist {
        max-width: none !important;
        width: 100%;
        min-width: 0;
        display: block;
    }

    /* Keep the title on one line (number · play · Artist – Song), truncating if long. */
    [data-management-panel="queue"] .fsa-mm-management-title-row {
        overflow: hidden;
        flex-wrap: nowrap;
    }

    /* Row 2 — amount · date flow on one inline line. !important beats the `td{display:block}`
       rule above (same specificity trap that was stacking them). */
    [data-management-panel="queue"] .col-donation,
    [data-management-panel="queue"] .col-date {
        display: inline-block !important;
        vertical-align: middle;
        margin: 3px 10px 0 0;
        color: var(--fsa-mm-mgmt-muted-color);
    }
    [data-management-panel="queue"] .col-donation { color: var(--fsa-mm-mgmt-heading-color); }

    /* Row 3 — the action buttons on their own line. */
    [data-management-panel="queue"] .col-status { display: block; margin-top: 6px; }

    /* Keep the queue's status row inline (Archive + "+" together, expanded menu inline on the
       full-width row) — the global Pending rule (`status-form { flex-basis:100%; flex-wrap }`)
       was forcing the "+" onto its own line and adding a whole extra row of height. */
    [data-management-panel="queue"] .fsa-mm-management-status-form {
        display: inline-flex !important;
        flex-basis: auto !important;
        flex-wrap: nowrap !important;
        margin-top: 0 !important;
    }
    [data-management-panel="queue"] .fsa-mm-management-status-actions,
    [data-management-panel="queue"] .fsa-mm-management-status-secondary-wrap {
        flex-wrap: nowrap !important;
    }

    /* Select pinned to the far right of row 1. */
    [data-management-panel="queue"] .col-select {
        position: absolute;
        top: 8px;
        right: 8px;
    }

    /* Hidden on phones — !important beats the `td { display:block }` rule above. These stray
       cells (program = "DA TESTER" clipped to "D", free skip = "-", the notes/edit/sync icons)
       were what offset the card. "APPROVED" is implied in the Queue too. */
    [data-management-panel="queue"] .col-notes,
    [data-management-panel="queue"] .col-program,
    [data-management-panel="queue"] .col-freeskip,
    [data-management-panel="queue"] .col-score {
        display: none !important;
    }

    [data-management-panel="queue"] [data-row-status] {
        display: none;
    }

    /* Paid/skip cards highlighted (single rule on the card, not per block-cell). */
    [data-management-panel="queue"] .fsa-mm-management-row.is-skip > td {
        background-color: transparent;
    }
    [data-management-panel="queue"] .fsa-mm-management-row.is-skip {
        background-color: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 14%, transparent);
        box-shadow: inset 3px 0 0 color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 80%, transparent);
    }

    /* Hide the "Live"/refresh pill on phones — auto-refresh still runs in the background. */
    .fsa-mm-management-refresh-button {
        display: none;
    }

    /* Reclaim width: trim the outer wrap padding/margins on phones for more card width. */
    .fsa-mm-management-wrap {
        margin: 10px 3px;
        padding: 5px;
    }

}

@media (max-width: 1100px) {
    .fsa-mm-submission-card-head {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: start;
        gap: 8px;
    }

    .fsa-mm-submission-card-rank-wrap {
        grid-column: 1;
        grid-row: 1;
    }

    .fsa-mm-submission-card-mainline {
        grid-column: 1 / 3;
        grid-row: 2;
        justify-content: flex-start;
        width: 100%;
        text-align: left;
    }

    .fsa-mm-submission-card.is-spotlight .fsa-mm-submission-card-mainline .fsa-mm-spotlight-star {
        position: absolute;
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
    }

    .fsa-mm-submission-card-meta-line {
        grid-column: 3;
        grid-row: 1;
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 6px;
        white-space: nowrap;
    }

    .fsa-mm-submission-card-boost-slot {
        grid-column: 3;
        grid-row: 2;
        align-self: center;
    }
}

/* Compact single-row submission card for narrow mobile — must come after the
   1100px block above so it wins the cascade. */
@media (max-width: 520px) {
    .fsa-mm-submission-card {
        padding: 10px 12px;
        border-radius: 12px;
    }

    .fsa-mm-submission-card-head {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
    }

    .fsa-mm-submission-card-rank-wrap {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .fsa-mm-submission-card-mainline {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-start;
        align-self: center;
        width: 100%;
        text-align: left;
        gap: 5px;
    }

    /* Keep the spotlight star inline in the title flow, not floating */
    .fsa-mm-submission-card.is-spotlight .fsa-mm-submission-card-mainline .fsa-mm-spotlight-star {
        position: static;
        transform: none;
        top: auto;
        left: auto;
    }

    .fsa-mm-submission-card-meta-line {
        display: none;
    }

    .fsa-mm-submission-card-boost-slot {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
    }
}

@media (min-width: 768px) {
    .fsa-mm-form {
        padding: 26px;
    }

    .fsa-mm-step-fields.has-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   Immersive modal makeover — Program Settings + Customization
   Studio. Mirrors the SSP landing (frosted glass, blue/cyan
   glow, gradient heading, glowing pill actions). Appended last
   so it refines the base modal rules above.
   ============================================================ */

/* darker, blurrier backdrop */
.fsa-mm-program-settings-backdrop,
.fsa-mm-customize-backdrop {
    background: radial-gradient(120% 120% at 50% 0%, rgba(10, 16, 32, 0.66), rgba(3, 5, 11, 0.82));
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
}

/* frosted-glass dialog with accent hairline + glow + entrance */
.fsa-mm-program-settings-dialog,
.fsa-mm-customize-dialog {
    max-height: calc(100vh - 80px);
    overflow: auto;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 26%, var(--fsa-mm-mgmt-border-color) 74%);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
        color-mix(in srgb, var(--fsa-mm-card-bg) 78%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 40px 90px -30px rgba(0, 0, 0, 0.8),
        0 0 80px -30px color-mix(in srgb, var(--fsa-mm-accent) 70%, transparent);
    animation: fsaMmModalIn 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--fsa-mm-accent) 55%, transparent) transparent;
}

.fsa-mm-program-settings-dialog::-webkit-scrollbar,
.fsa-mm-customize-dialog::-webkit-scrollbar { width: 10px; }
.fsa-mm-program-settings-dialog::-webkit-scrollbar-thumb,
.fsa-mm-customize-dialog::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
    background-color: color-mix(in srgb, var(--fsa-mm-accent) 45%, transparent);
}

/* header: gradient title + divider */
.fsa-mm-program-settings-head,
.fsa-mm-customize-head {
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 70%, transparent);
}

.fsa-mm-program-settings-head strong,
.fsa-mm-customize-head strong {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.01em;
    background: linear-gradient(180deg, #ffffff 0%, #bcd4ff 60%, var(--fsa-mm-accent-2, #6bcbff) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fsa-mm-program-settings-head span,
.fsa-mm-customize-head span {
    color: var(--fsa-mm-accent-2, #6bcbff);
    text-transform: lowercase;
    letter-spacing: 0.04em;
}

/* close button: glassy circle, hover glow */
.fsa-mm-program-settings-close {
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 70%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 70%, transparent);
    transition: color 160ms ease, background 200ms ease, border-color 200ms ease, transform 160ms ease;
}

.fsa-mm-program-settings-close:hover,
.fsa-mm-program-settings-close:focus {
    color: #ffffff;
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 60%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-accent) 22%, transparent);
    outline: none;
}

/* sections: glassy cards w/ accent glow when open */
.fsa-mm-program-settings-section {
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 64%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 30%, transparent);
    transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.fsa-mm-program-settings-section[open] {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 32%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 44%, transparent);
    box-shadow: 0 0 40px -22px color-mix(in srgb, var(--fsa-mm-accent) 80%, transparent);
}

.fsa-mm-program-settings-section summary {
    color: var(--fsa-mm-mgmt-heading-color);
    transition: color 160ms ease;
}

.fsa-mm-program-settings-section summary::after {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 45%, transparent);
    color: var(--fsa-mm-accent-2, #6bcbff);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background 200ms ease;
}

.fsa-mm-program-settings-section[open] summary::after {
    transform: rotate(180deg);
    background: color-mix(in srgb, var(--fsa-mm-accent) 18%, transparent);
}

/* Quick color-theme bar above the tabs */
.fsa-mm-customize-theme {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 28%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--fsa-mm-accent) 7%, var(--fsa-mm-input-bg) 93%);
}

.fsa-mm-customize-theme-label {
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    flex: 0 0 auto;
}

.fsa-mm-customize-theme-select {
    flex: 0 0 auto;
    min-width: 150px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 78%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 70%, transparent);
    color: var(--fsa-mm-mgmt-label-color);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.fsa-mm-customize-theme-select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 60%, transparent);
}

.fsa-mm-customize-theme-hint {
    flex: 1 1 180px;
    min-width: 0;
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: 10.5px;
    line-height: 1.25;
}

.fsa-mm-customize-theme-bg {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 18%, transparent);
}

.fsa-mm-customize-theme-bg .fsa-mm-customize-theme-select {
    min-width: 210px;
}

/* tabs: pill rail with glowing active state */
.fsa-mm-customize-tabs {
    gap: 8px;
    padding-bottom: 14px;
    margin-bottom: 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 70%, transparent);
}

.fsa-mm-customize-tab {
    transition: color 160ms ease, border-color 200ms ease, background 220ms ease, transform 140ms ease;
}

.fsa-mm-customize-tab:hover {
    color: var(--fsa-mm-mgmt-heading-color);
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 45%, transparent);
    transform: translateY(-1px);
}

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

/* color swatches: rounded with ring */
.fsa-mm-customize-dialog input[type="color"] {
    min-height: 38px;
    border-radius: 14px;
    border-color: color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 70%, transparent);
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 200ms ease;
}

.fsa-mm-customize-dialog input[type="color"]:hover {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fsa-mm-accent) 16%, transparent);
}

/* footer: divider + modern pill actions */
.fsa-mm-program-settings-actions {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 70%, transparent);
    gap: 10px;
}

.fsa-mm-program-settings-actions .fsa-mm-step-back {
    min-height: 42px;
    padding: 0 22px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 80%, transparent);
    background: rgba(255, 255, 255, 0.03);
    color: var(--fsa-mm-mgmt-text-color);
    box-shadow: none;
    transition: color 160ms ease, border-color 200ms ease, background 200ms ease, transform 160ms ease;
}

.fsa-mm-program-settings-actions .fsa-mm-step-back:hover {
    color: var(--fsa-mm-accent-2, #6bcbff);
    border-color: color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 55%, transparent);
    transform: translateY(-1px);
}

.fsa-mm-program-settings-actions .fsa-mm-submit {
    min-height: 42px;
    padding: 0 26px;
    border: 0;
    color: #04101f;
    font-weight: 700;
    background: linear-gradient(135deg, var(--fsa-mm-accent-2, #6bcbff), var(--fsa-mm-cyan, #90fffb));
    box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 80%, transparent);
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease, filter 200ms ease;
}

.fsa-mm-program-settings-actions .fsa-mm-submit:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 20px 44px -12px color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 90%, transparent);
}

.fsa-mm-program-settings-actions .fsa-mm-submit:active {
    transform: translateY(0);
}

@keyframes fsaMmModalIn {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .fsa-mm-program-settings-dialog,
    .fsa-mm-customize-dialog { animation: none; }
    .fsa-mm-program-settings-close:hover,
    .fsa-mm-program-settings-close:focus { transform: none; }
    .fsa-mm-program-settings-actions .fsa-mm-submit,
    .fsa-mm-program-settings-actions .fsa-mm-step-back,
    .fsa-mm-customize-tab { transition: none; }
}

/* ---- Modal density refinements (wider Program Settings, tighter
   Customization Studio, readable Offline Fee, small checkboxes) ---- */

/* Program Settings: wider dialog so the dense rows breathe */
.fsa-mm-program-settings-dialog {
    width: min(100vw - 28px, 760px);
}

/* smaller value text + tighter inputs inside Program Settings */
.fsa-mm-program-settings-dialog .fsa-mm-management-field input,
.fsa-mm-program-settings-dialog .fsa-mm-management-field select {
    min-height: 32px;
    font-size: max(11px, calc(var(--fsa-mm-mgmt-row-size) - 2px));
}

/* Offline Review row: give the fee its own readable column */
.fsa-mm-program-settings-offline-row {
    grid-template-columns: minmax(150px, auto) minmax(120px, 0.55fr) minmax(210px, 1.3fr);
}

/* Customization Studio: color swatches don't need to be full width */
.fsa-mm-customize-dialog input[type="color"] {
    width: 100%;
    max-width: 92px;
    min-height: 32px;
}

/* small, tidy checkboxes (Bare Wrapper) instead of full-size inputs */
.fsa-mm-customize-dialog .fsa-mm-management-field input[type="checkbox"],
.fsa-mm-program-settings-dialog .fsa-mm-management-field input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-height: 0;
    padding: 0;
    border-radius: 6px;
    accent-color: var(--fsa-mm-accent);
    box-shadow: none;
    cursor: pointer;
}

/* ============================================================
   Edit Submission modal — immersive restyle + condense.
   Frosted glass, gradient heading, glassy glow sections,
   modern pill actions, and tighter spacing to cut the height.
   ============================================================ */

/* backdrop */
.fsa-mm-edit-modal-backdrop {
    background: radial-gradient(120% 120% at 50% 0%, rgba(10, 16, 32, 0.66), rgba(3, 5, 11, 0.82));
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
}

/* dialog: frosted glass + glow + entrance; scrolls if still tall */
.fsa-mm-edit-dialog {
    max-height: calc(100vh - 48px);
    overflow: auto;
    margin: 24px auto;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 26%, var(--fsa-mm-mgmt-border-color) 74%);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
        color-mix(in srgb, var(--fsa-mm-card-bg) 78%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 40px 90px -30px rgba(0, 0, 0, 0.8),
        0 0 80px -30px color-mix(in srgb, var(--fsa-mm-accent) 70%, transparent);
    animation: fsaMmModalIn 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--fsa-mm-accent) 55%, transparent) transparent;
}

.fsa-mm-edit-dialog::-webkit-scrollbar { width: 10px; }
.fsa-mm-edit-dialog::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
    background-color: color-mix(in srgb, var(--fsa-mm-accent) 45%, transparent);
}

/* tighter overall rhythm */
.fsa-mm-edit-form { gap: 10px; }

/* header: gradient title + divider */
.fsa-mm-edit-head {
    align-items: center;
    margin-bottom: 2px;
    padding-bottom: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 70%, transparent);
}

.fsa-mm-edit-head strong {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.01em;
    background: linear-gradient(180deg, #ffffff 0%, #bcd4ff 60%, var(--fsa-mm-accent-2, #6bcbff) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fsa-mm-edit-head span {
    margin-top: 3px;
    color: var(--fsa-mm-accent-2, #6bcbff);
    letter-spacing: 0.02em;
}

/* close: glassy circle, rotate on hover */
.fsa-mm-edit-close {
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 70%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 70%, transparent);
    color: var(--fsa-mm-mgmt-muted-color);
    font-size: 20px;
    transition: color 160ms ease, background 200ms ease, border-color 200ms ease, transform 160ms ease;
}

.fsa-mm-edit-close:hover,
.fsa-mm-edit-close:focus {
    color: #ffffff;
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 60%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-accent) 22%, transparent);
    transform: rotate(90deg);
    outline: none;
}

/* sections: glassy cards, accent glow when open, circular +/- badge */
.fsa-mm-edit-section {
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 64%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 30%, transparent);
    transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.fsa-mm-edit-section[open] {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 30%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 42%, transparent);
    box-shadow: 0 0 40px -24px color-mix(in srgb, var(--fsa-mm-accent) 80%, transparent);
}

.fsa-mm-edit-section summary {
    color: var(--fsa-mm-mgmt-heading-color);
    font-weight: 800;
    letter-spacing: 0.07em;
}

.fsa-mm-edit-section summary::after {
    content: "+";
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 45%, transparent);
    border-radius: 999px;
    color: var(--fsa-mm-accent-2, #6bcbff);
    font-size: 14px;
    line-height: 1;
    transition: background 200ms ease;
}

.fsa-mm-edit-section[open] summary::after {
    content: "−";
    background: color-mix(in srgb, var(--fsa-mm-accent) 18%, transparent);
}

/* --- condense: tighter inputs + spacing --- */
.fsa-mm-edit-grid { gap: 8px 12px; }

.fsa-mm-edit-grid input,
.fsa-mm-edit-grid select {
    min-height: 32px;
}

.fsa-mm-edit-money-group {
    gap: 7px;
    padding: 8px 10px 9px;
}

.fsa-mm-edit-money-grid input { min-height: 32px; }

.fsa-mm-edit-section .fsa-mm-edit-grid,
.fsa-mm-edit-section .fsa-mm-edit-viewgrid,
.fsa-mm-edit-section .fsa-mm-edit-track-actions,
.fsa-mm-edit-section .fsa-mm-edit-metadata-grid {
    padding-bottom: 10px;
}

.fsa-mm-edit-metadata-grid { gap: 6px 12px; }

/* review context: don't let the (often empty) Artist Note card
   stretch to the tall Signals card; tighten both */
.fsa-mm-edit-viewgrid { gap: 10px; }

.fsa-mm-edit-viewcard {
    align-self: start;
    gap: 6px;
    padding: 11px;
    border-color: color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 64%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 40%, transparent);
}

.fsa-mm-edit-viewcard:first-child p { max-height: 160px; }

.fsa-mm-edit-viewcard dl { gap: 5px; }

/* footer: divider + modern pill actions (match the other modals) */
.fsa-mm-edit-actions {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 70%, transparent);
    gap: 10px;
}

.fsa-mm-edit-actions .fsa-mm-step-back {
    min-height: 42px;
    padding: 0 22px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 80%, transparent);
    background: rgba(255, 255, 255, 0.03);
    color: var(--fsa-mm-mgmt-text-color);
    box-shadow: none;
    transition: color 160ms ease, border-color 200ms ease, background 200ms ease, transform 160ms ease;
}

.fsa-mm-edit-actions .fsa-mm-step-back:hover {
    color: var(--fsa-mm-accent-2, #6bcbff);
    border-color: color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 55%, transparent);
    transform: translateY(-1px);
}

.fsa-mm-edit-actions .fsa-mm-submit {
    min-height: 42px;
    padding: 0 26px;
    border: 0;
    color: #04101f;
    font-weight: 700;
    background: linear-gradient(135deg, var(--fsa-mm-accent-2, #6bcbff), var(--fsa-mm-cyan, #90fffb));
    box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 80%, transparent);
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease, filter 200ms ease;
}

.fsa-mm-edit-actions .fsa-mm-submit:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 20px 44px -12px color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 90%, transparent);
}

.fsa-mm-edit-actions .fsa-mm-submit:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .fsa-mm-edit-dialog { animation: none; }
    .fsa-mm-edit-close:hover,
    .fsa-mm-edit-close:focus { transform: none; }
    .fsa-mm-edit-actions .fsa-mm-submit,
    .fsa-mm-edit-actions .fsa-mm-step-back { transition: none; }
}

/* ---- Edit modal layout: Spotlight in Track & Metadata,
        Review Context stacked with Signals laid out side-by-side ---- */

/* Track & Metadata header row: Open Source on the left, Spotlight pill on the right */
.fsa-mm-edit-track-actions {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.fsa-mm-edit-spotlight-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 0 auto;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 78%, transparent);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: border-color 180ms ease, background 200ms ease;
}

.fsa-mm-edit-spotlight-toggle:hover {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 50%, transparent);
}

.fsa-mm-edit-spotlight-toggle span {
    color: var(--fsa-mm-mgmt-heading-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fsa-mm-edit-spotlight-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--fsa-mm-accent);
    cursor: pointer;
}

/* Review Context: stack the two cards full-width so the Signals can
   spread horizontally (no more dead space beside a short Artist Note) */
.fsa-mm-edit-viewgrid { grid-template-columns: 1fr; }

/* Signals fields laid out side-by-side; long values span the full row */
.fsa-mm-edit-viewgrid .fsa-mm-edit-viewcard:last-child dl {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px 18px;
}

.fsa-mm-edit-viewgrid .fsa-mm-edit-viewcard:last-child dl div.is-wide {
    grid-column: 1 / -1;
}

/* ---- Actions live in the header (top right) now ---- */
.fsa-mm-edit-head {
    flex-wrap: wrap;
    row-gap: 10px;
}

.fsa-mm-edit-head .fsa-mm-edit-actions {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border-top: 0;
}

.fsa-mm-edit-head .fsa-mm-edit-actions .fsa-mm-step-back,
.fsa-mm-edit-head .fsa-mm-edit-actions .fsa-mm-submit {
    min-height: 38px;
}

/* ============================================================
   Statistics / Analytics modal — align with the immersive
   design (frosted glass, gradient heading + divider, modern
   pill Close/Apply). Appended last to refine the rules above.
   ============================================================ */

/* backdrop matches the other modals */
.fsa-mm-management-stats-backdrop {
    background: radial-gradient(120% 120% at 50% 0%, rgba(10, 16, 32, 0.66), rgba(3, 5, 11, 0.84));
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
}

/* frosted-glass dialog + accent glow + entrance */
.fsa-mm-management-stats-dialog {
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 26%, var(--fsa-mm-mgmt-border-color) 74%);
    background:
        radial-gradient(60% 50% at 50% -4%, color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 14%, transparent), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
        color-mix(in srgb, var(--fsa-mm-card-bg) 78%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 40px 90px -30px rgba(0, 0, 0, 0.82),
        0 0 90px -34px color-mix(in srgb, var(--fsa-mm-accent) 70%, transparent);
    animation: fsaMmModalIn 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
    scrollbar-color: color-mix(in srgb, var(--fsa-mm-accent) 55%, transparent) transparent;
}

/* header: centered with divider + gradient title */
.fsa-mm-management-stats-head {
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 70%, transparent);
}

.fsa-mm-management-stats-head strong {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, #ffffff 0%, #bcd4ff 60%, var(--fsa-mm-accent-2, #6bcbff) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fsa-mm-management-stats-head span {
    color: var(--fsa-mm-accent-2, #6bcbff);
}

/* Close (top-right): ghost pill */
.fsa-mm-management-stats-head-close {
    min-height: 38px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 80%, transparent);
    background: rgba(255, 255, 255, 0.03);
    color: var(--fsa-mm-mgmt-text-color);
    box-shadow: none;
    transition: color 160ms ease, border-color 200ms ease, background 200ms ease, transform 160ms ease;
}

.fsa-mm-management-stats-head-close:hover,
.fsa-mm-management-stats-head-close:focus {
    color: var(--fsa-mm-accent-2, #6bcbff);
    border-color: color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 55%, transparent);
    transform: translateY(-1px);
}

/* Apply: cyan gradient glow pill */
.fsa-mm-management-stats-apply {
    border: 0;
    color: #04101f;
    font-weight: 700;
    background: linear-gradient(135deg, var(--fsa-mm-accent-2, #6bcbff), var(--fsa-mm-cyan, #90fffb));
    box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 80%, transparent);
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease, filter 200ms ease;
}

.fsa-mm-management-stats-apply:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 20px 44px -12px color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 90%, transparent);
}

.fsa-mm-management-stats-apply:active { transform: translateY(0); }

/* section cards: glassy, subtle accent hairline */
.fsa-mm-stats-section {
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 60%, transparent);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 40%),
        color-mix(in srgb, var(--fsa-mm-input-bg) 30%, transparent);
}

.fsa-mm-stats-section-head strong {
    color: var(--fsa-mm-mgmt-heading-color);
}

@media (prefers-reduced-motion: reduce) {
    .fsa-mm-management-stats-dialog { animation: none; }
    .fsa-mm-management-stats-head-close,
    .fsa-mm-management-stats-apply { transition: none; }
}

/* ============================================================
   Random Drawing — modern wheel (glossy depth, accent ring +
   glow, refined pointer, brand-logo hub) and matching reel.
   ============================================================ */

/* pointer: cyan, glowing */
.fsa-mm-draw-pointer {
    top: -6px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 24px solid var(--fsa-mm-accent-2, #6bcbff);
    filter:
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45))
        drop-shadow(0 0 10px color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 70%, transparent));
}

/* shell: subtle gradient + accent glow */
.fsa-mm-draw-wheel-shell {
    width: 360px;
    height: 360px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 30%, var(--fsa-mm-card-border) 70%);
    background:
        radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 12%, transparent), transparent 55%),
        color-mix(in srgb, var(--fsa-mm-input-bg) 80%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 50px -18px color-mix(in srgb, var(--fsa-mm-accent) 60%, transparent);
}

/* wheel: deeper shadow, dark inner ring framing segments, glossy sheen */
.fsa-mm-draw-wheel {
    border: 2px solid color-mix(in srgb, var(--fsa-mm-accent) 30%, #ffffff 8%);
    box-shadow:
        0 24px 40px rgba(0, 0, 0, 0.42),
        inset 0 0 0 6px rgba(8, 12, 20, 0.55);
}

.fsa-mm-draw-wheel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.18), transparent 42%),
        radial-gradient(100% 100% at 50% 100%, rgba(0, 0, 0, 0.3), transparent 55%);
    mix-blend-mode: soft-light;
}

/* hub: glassy disc with a dark ring gap + accent glow, holds the logo */
.fsa-mm-draw-wheel-center {
    overflow: hidden;
    width: 104px;
    height: 104px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 50%, transparent);
    background:
        radial-gradient(120% 120% at 50% 22%, rgba(255, 255, 255, 0.08), transparent 60%),
        linear-gradient(180deg, color-mix(in srgb, var(--fsa-mm-card-bg) 92%, #ffffff 4%), color-mix(in srgb, var(--fsa-mm-input-bg) 96%, #000000 4%));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 22px rgba(0, 0, 0, 0.5),
        0 0 0 6px color-mix(in srgb, var(--fsa-mm-bg-end) 72%, transparent),
        0 0 34px -6px color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 70%, transparent);
}

.fsa-mm-draw-wheel-logo {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 60%;
    height: 60%;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--fsa-mm-accent) 50%, transparent));
    transition: opacity 240ms ease, transform 240ms ease;
}

.fsa-mm-draw-wheel-center-num {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 240ms ease, transform 240ms ease;
}

/* when a winner is chosen: swap logo → winner number */
.fsa-mm-draw-wheel-center.has-winner .fsa-mm-draw-wheel-logo {
    opacity: 0;
    transform: scale(0.6);
}

.fsa-mm-draw-wheel-center.has-winner .fsa-mm-draw-wheel-center-num {
    opacity: 1;
    transform: scale(1);
}

/* reel: align accent to the brand cyan */
.fsa-mm-draw-reel-window {
    border-color: color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 76%, var(--fsa-mm-card-border) 24%);
    background: color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 9%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 16%, transparent),
        0 0 26px color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 22%, transparent);
}

.fsa-mm-draw-reel-item.is-winner {
    border-color: color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 78%, #ffffff 8%);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 20%, transparent), transparent 70%),
        color-mix(in srgb, var(--fsa-mm-card-bg) 92%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 24%, transparent);
}

/* reel winner: make room for a mini brand logo on the right */
.fsa-mm-draw-reel-item.is-winner {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.fsa-mm-draw-reel-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--fsa-mm-accent-2, #6bcbff) 60%, transparent));
    animation: fsaMmDrawLogoPop 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fsaMmDrawLogoPop {
    from { opacity: 0; transform: scale(0.4) rotate(-12deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    .fsa-mm-draw-wheel-logo,
    .fsa-mm-draw-wheel-center-num { transition: none; }
    .fsa-mm-draw-reel-logo { animation: none; }
}

/* =========================================================================
   Submission form — immersive overhaul (scoped so management screens are
   untouched; the real submission form is the only .fsa-mm-form-wrap that is
   NOT also .fsa-mm-management-wrap).
   ========================================================================= */
.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) {
    background:
        radial-gradient(120% 90% at 50% -12%, color-mix(in srgb, var(--fsa-mm-accent) 16%, transparent), transparent 60%),
        var(--fsa-mm-wrap-bg);
}

/* Frosted, glowing shell */
.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-form {
    background:
        radial-gradient(150% 120% at 0% 0%, color-mix(in srgb, var(--fsa-mm-accent-2) 9%, transparent), transparent 55%),
        color-mix(in srgb, var(--fsa-mm-card-bg) 82%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.05);
    backdrop-filter: blur(14px) saturate(1.05);
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 24%, var(--fsa-mm-shell-border));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent),
        0 30px 60px -32px rgba(0, 0, 0, 0.9),
        0 0 70px -26px color-mix(in srgb, var(--fsa-mm-accent) 34%, transparent);
}

/* Gradient title (cohesive with the management headings) */
.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-form h3 {
    background: linear-gradient(118deg, var(--fsa-mm-title-color) 8%, var(--fsa-mm-accent-2) 62%, var(--fsa-mm-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Stepper — bolder active state, glowing index, legible copy */
.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-step-chip.is-active {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent),
        0 0 0 1px color-mix(in srgb, var(--fsa-mm-accent) 40%, transparent),
        0 10px 24px -14px color-mix(in srgb, var(--fsa-mm-accent) 80%, transparent);
}

.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-step-chip.is-active .fsa-mm-step-chip-index,
.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-step-chip.is-complete .fsa-mm-step-chip-index {
    background: linear-gradient(150deg, var(--fsa-mm-accent), var(--fsa-mm-accent-2));
    color: #04101f;
    box-shadow: 0 0 14px -3px color-mix(in srgb, var(--fsa-mm-accent-2) 80%, transparent);
}

.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-step-chip-copy strong {
    font-size: 10px;
    letter-spacing: 0.02em;
}

.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-step-chip-copy span {
    font-size: 9px;
}

/* Upload Song / Song Link — connected segmented control */
.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-track-switch {
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 88%, #000 12%);
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 80%, transparent);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.28);
}

.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-track-option span {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-track-option input:checked + span {
    background: linear-gradient(150deg, var(--fsa-mm-accent), var(--fsa-mm-accent-2));
    border-color: transparent;
    color: #04101f;
    box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--fsa-mm-accent) 80%, transparent);
}

/* Upload dropzone — bigger target, brand glyph, glow on drag */
.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-upload-dropzone {
    min-height: 72px;
    border-radius: 16px;
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--fsa-mm-accent) 8%, transparent), transparent 60%),
        color-mix(in srgb, var(--fsa-mm-card-bg) 70%, transparent);
}

.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-upload-dropzone:hover,
.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-upload-dropzone.is-dragging {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--fsa-mm-accent) 24%, transparent),
        0 0 40px -16px color-mix(in srgb, var(--fsa-mm-accent-2) 70%, transparent);
}

.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-upload-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    font-size: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236bcbff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4'/%3E%3Cpath d='M7.5 8.5 12 4l4.5 4.5'/%3E%3Cpath d='M4 16v2.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V16'/%3E%3C/svg%3E") center / 19px 19px no-repeat,
        color-mix(in srgb, var(--fsa-mm-accent) 12%, transparent);
}

/* Selected-file chip */
.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-upload-selected {
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 30%, var(--fsa-mm-input-border));
}

/* Primary action — brand gradient pill with glow */
.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-submit[data-step-next],
.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-submit[data-step-submit] {
    min-height: 42px;
    padding: 0 22px;
    font-size: 13px;
    letter-spacing: 0.04em;
    background: linear-gradient(135deg, var(--fsa-mm-accent), var(--fsa-mm-accent-2));
    border-color: transparent;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent),
        0 14px 30px -14px color-mix(in srgb, var(--fsa-mm-accent) 90%, transparent);
}

.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-submit[data-step-next]:hover,
.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-submit[data-step-submit]:hover {
    background: linear-gradient(135deg, var(--fsa-mm-accent-2), var(--fsa-mm-cyan));
    color: #04101f;
}

/* Secondary actions — ghost capsules */
.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-step-back,
.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-payment-trigger {
    min-height: 42px;
    padding: 0 18px;
    background: color-mix(in srgb, var(--fsa-mm-accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 34%, transparent);
    color: var(--fsa-mm-label-color);
}

.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-step-back:hover,
.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-payment-trigger:hover {
    border-color: color-mix(in srgb, var(--fsa-mm-accent-2) 60%, transparent);
    color: var(--fsa-mm-title-color);
}

/* Offline-review notice — calmer frosted alert */
.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) ~ .fsa-mm-host-form-message,
.fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-host-form-message {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    letter-spacing: 0.06em;
}

/* Mobile — full-width pills, larger tap targets */
@media (max-width: 767px) {
    .fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-step-actions {
        gap: 8px;
    }

    .fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-step-actions .fsa-mm-submit,
    .fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-step-actions .fsa-mm-step-back,
    .fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-step-actions .fsa-mm-payment-trigger {
        flex: 1 1 100%;
        min-height: 46px;
    }

    .fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-submit[data-step-submit][hidden],
    .fsa-mm-form-wrap:not(.fsa-mm-management-wrap) .fsa-mm-step-back[hidden] {
        display: none !important;
    }
}

/* =========================================================================
   Virtual per-program page (/program/{slug}) — hero + body wrapper.
   ========================================================================= */
.fsa-mm-program-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px 40px;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.fsa-mm-program-hero {
    position: relative;
    overflow: hidden;
    margin: 24px 0 22px;
    padding: clamp(34px, 6vw, 70px) clamp(22px, 4vw, 48px);
    border-radius: 24px;
    border: 1px solid rgba(107, 203, 255, 0.2);
    background:
        radial-gradient(130% 120% at 0% 0%, rgba(43, 107, 255, 0.18), transparent 58%),
        rgba(10, 14, 26, 0.78);
    color: #eaf1ff;
    isolation: isolate;
}
.fsa-mm-program-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    opacity: 0.5;
}
/* Scroll parallax (Immersive Home → Scroll parallax): oversize the hero media so
   the JS translate drift never exposes an edge. */
body.ssp-parallax-on .fsa-mm-program-hero__media {
    top: -16%;
    bottom: auto;
    height: 132%;
    will-change: transform;
}
.fsa-mm-program-hero.has-video::after,
.fsa-mm-program-hero.has-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(5, 7, 13, 0.5), rgba(5, 7, 13, 0.92));
}
.fsa-mm-program-hero__inner { position: relative; z-index: 1; max-width: 720px; }

/* ===== Program hero menu (top-right) + per-program Leaderboard overlay ===== */
.fsa-mm-program-hero__menu { position: absolute; top: clamp(14px, 2.4vw, 24px); right: clamp(14px, 2.4vw, 24px); z-index: 3; }
.fsa-mm-program-hero__menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-prog-accent, #6bcbff) 42%, transparent);
    background: rgba(10, 14, 26, 0.6);
    color: var(--fsa-mm-prog-accent, #cfe6ff);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.fsa-mm-program-hero__menu-toggle:hover { border-color: var(--fsa-mm-prog-accent, #6bcbff); background: rgba(15, 22, 40, 0.78); transform: translateY(-1px); }
.fsa-mm-program-hero__menu-list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 170px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-prog-accent, #6bcbff) 30%, transparent);
    background: rgba(9, 12, 22, 0.96);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}
.fsa-mm-program-hero__menu-list li { margin: 0; }
.fsa-mm-program-hero__menu-list button {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #eaf1ff;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.fsa-mm-program-hero__menu-list button:hover { background: color-mix(in srgb, var(--fsa-mm-prog-accent, #6bcbff) 20%, transparent); }

.fsa-mm-leaderboard-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.fsa-mm-leaderboard-overlay[hidden] { display: none; }
.fsa-mm-leaderboard-backdrop { position: absolute; inset: 0; background: rgba(3, 5, 10, 0.72); backdrop-filter: blur(4px); }
.fsa-mm-leaderboard-panel {
    position: relative;
    width: min(520px, 100%);
    max-height: min(78vh, 720px);
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-prog-accent, #6bcbff) 34%, transparent);
    background: linear-gradient(180deg, rgba(14, 18, 30, 0.98), rgba(8, 10, 18, 0.98));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.fsa-mm-leaderboard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.fsa-mm-leaderboard-title { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 18px; font-weight: 800; color: #f4f8ff; letter-spacing: 0.2px; }
.fsa-mm-leaderboard-title-icon { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; }
.fsa-mm-leaderboard-x { width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: #cfe0ff; font-size: 20px; line-height: 1; cursor: pointer; }
.fsa-mm-leaderboard-x:hover { background: rgba(255, 255, 255, 0.1); }
.fsa-mm-leaderboard-list { margin: 0; padding: 10px; list-style: none; overflow-y: auto; counter-reset: none; }
.fsa-mm-leaderboard-row {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 12px;
}
.fsa-mm-leaderboard-row + .fsa-mm-leaderboard-row { margin-top: 4px; }
.fsa-mm-leaderboard-row:nth-child(even) { background: rgba(255, 255, 255, 0.025); }
.fsa-mm-leaderboard-rank { font-size: 15px; font-weight: 800; text-align: center; color: #9fb3d8; font-variant-numeric: tabular-nums; }
.fsa-mm-leaderboard-row--1 .fsa-mm-leaderboard-rank { color: #ffd35a; }
.fsa-mm-leaderboard-row--2 .fsa-mm-leaderboard-rank { color: #d4dced; }
.fsa-mm-leaderboard-row--3 .fsa-mm-leaderboard-rank { color: #e6a86b; }
.fsa-mm-leaderboard-row--1 { background: linear-gradient(90deg, rgba(255, 211, 90, 0.14), transparent 70%); }
.fsa-mm-leaderboard-who { display: flex; align-items: center; gap: 11px; min-width: 0; text-decoration: none; color: inherit; }
a.fsa-mm-leaderboard-who:hover .fsa-mm-leaderboard-name { text-decoration: underline; }
.fsa-mm-leaderboard-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: color-mix(in srgb, var(--fsa-mm-prog-accent, #6bcbff) 22%, #10131f);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: #eaf1ff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.fsa-mm-leaderboard-name { font-size: 15px; font-weight: 600; color: #eef3ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsa-mm-leaderboard-pts { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; color: var(--fsa-mm-prog-accent, #6bcbff); font-variant-numeric: tabular-nums; }
.fsa-mm-leaderboard-pts-icon { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; }
body.fsa-mm-lb-open { overflow: hidden; }
.fsa-mm-program-hero__kicker {
    margin: 0 0 8px;
    color: #6bcbff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.fsa-mm-program-hero__title {
    margin: 0 0 12px;
    font-size: clamp(32px, 6vw, 64px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(118deg, #ffffff 6%, #6bcbff 64%, #90fffb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.fsa-mm-program-hero__bio {
    margin: 0 0 16px;
    max-width: 620px;
    color: #c6d4ef;
    font-size: clamp(14px, 1.7vw, 18px);
    line-height: 1.55;
}
.fsa-mm-program-hero__links { display: flex; flex-wrap: wrap; gap: 8px; }
.fsa-mm-program-hero__link {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(107, 203, 255, 0.3);
    background: rgba(10, 14, 26, 0.6);
    color: #cfe4ff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.fsa-mm-program-hero__link:hover {
    border-color: rgba(107, 203, 255, 0.7);
    background: rgba(15, 26, 48, 0.92);
    color: #eaf1ff;
}
.fsa-mm-program-page__body > * { margin-bottom: 26px; }

/* =========================================================================
   Program page hero variants (Immersive Home → Theme → Program page hero).
   Base .fsa-mm-program-hero above IS the "fullbleed" look (media behind centered
   text). These reshape it for "split" and "compact". Parallax-safe: they only
   touch width/opacity/scrim, leaving top/height to the parallax oversize rule.
   ========================================================================= */
/* SPLIT — media as a real panel on the left, text on the right. */
body.fsa-mm-program-hero-split .fsa-mm-program-hero {
    display: flex;
    align-items: center;
    min-height: clamp(340px, 52vh, 540px);
}
body.fsa-mm-program-hero-split .fsa-mm-program-hero__media {
    right: auto;
    width: 56%;
    opacity: 1;
}
body.fsa-mm-program-hero-split .fsa-mm-program-hero.has-image::after,
body.fsa-mm-program-hero-split .fsa-mm-program-hero.has-video::after {
    background: linear-gradient(90deg,
        rgba(5, 7, 13, 0.12) 0%,
        rgba(5, 7, 13, 0.32) 30%,
        rgba(10, 14, 26, 0.9) 58%,
        rgba(10, 14, 26, 0.98) 100%);
}
body.fsa-mm-program-hero-split .fsa-mm-program-hero__inner {
    margin-left: auto;
    width: min(46%, 520px);
}
/* Stack on small screens — falls back to the full-bleed treatment. */
@media (max-width: 720px) {
    body.fsa-mm-program-hero-split .fsa-mm-program-hero {
        display: block;
    }
    body.fsa-mm-program-hero-split .fsa-mm-program-hero__media {
        width: 100%;
        opacity: 0.5;
    }
    body.fsa-mm-program-hero-split .fsa-mm-program-hero__inner {
        margin-left: 0;
        width: auto;
    }
    body.fsa-mm-program-hero-split .fsa-mm-program-hero.has-image::after,
    body.fsa-mm-program-hero-split .fsa-mm-program-hero.has-video::after {
        background: linear-gradient(180deg, rgba(5, 7, 13, 0.5), rgba(5, 7, 13, 0.92));
    }
}

/* COMPACT — a short banner: tighter padding, smaller type, media stays a faded wash. */
body.fsa-mm-program-hero-compact .fsa-mm-program-hero {
    min-height: 0;
    padding: clamp(20px, 3vw, 32px) clamp(22px, 4vw, 40px);
}
body.fsa-mm-program-hero-compact .fsa-mm-program-hero__title {
    margin-bottom: 8px;
    font-size: clamp(24px, 4vw, 40px);
}
body.fsa-mm-program-hero-compact .fsa-mm-program-hero__kicker {
    margin-bottom: 6px;
}
body.fsa-mm-program-hero-compact .fsa-mm-program-hero__bio {
    margin-bottom: 12px;
    font-size: clamp(13px, 1.4vw, 15px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Immersive program page chrome — matches the SSP front page; honors the
   Immersive Home theme vars (--ssp-*) so it adapts when that theme changes. */
body.fsa-mm-program-immersive {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--ssp-ink, #05070d);
    color: #eaf1ff;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.fsa-mm-program-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--ssp-accent, #2b6bff) 22%, transparent), transparent 60%),
        linear-gradient(180deg, var(--ssp-ink, #05070d), #070b16 70%);
}
.fsa-mm-program-watermark {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.05;
}
.fsa-mm-program-watermark img { width: min(70vw, 720px); height: auto; }
.fsa-mm-program-immersive > .fsa-mm-program-topbar,
.fsa-mm-program-immersive > .fsa-mm-program-page,
.fsa-mm-program-immersive > .fsa-mm-program-foot { position: relative; z-index: 1; }

.fsa-mm-program-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 18px 22px 6px;
}
.fsa-mm-program-brand { display: inline-flex; align-items: center; text-decoration: none; }
.fsa-mm-program-brand img { height: 40px; width: auto; display: block; }
.fsa-mm-program-brand span { color: #eaf1ff; font-weight: 800; letter-spacing: 0.02em; }

.fsa-mm-program-topbar__auth {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.fsa-mm-program-topbar__auth-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.fsa-mm-program-topbar__auth-btn--login {
    color: var(--ssp-accent-2, #6bcbff);
    border: 1.5px solid color-mix(in srgb, var(--ssp-accent-2, #6bcbff) 50%, transparent);
    background: transparent;
}
.fsa-mm-program-topbar__auth-btn--login:hover {
    background: color-mix(in srgb, var(--ssp-accent-2, #6bcbff) 12%, transparent);
}
.fsa-mm-program-topbar__auth-btn--register {
    color: #0a0e1a;
    background: var(--ssp-accent-2, #6bcbff);
    border: 1.5px solid var(--ssp-accent-2, #6bcbff);
}
.fsa-mm-program-topbar__auth-btn--register:hover {
    background: color-mix(in srgb, var(--ssp-accent-2, #6bcbff) 80%, #fff);
    border-color: color-mix(in srgb, var(--ssp-accent-2, #6bcbff) 80%, #fff);
}

.fsa-mm-program-foot {
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 22px 50px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--ssp-muted, #8b96b3);
    font-size: 13px;
}
.fsa-mm-program-foot a { color: var(--ssp-accent-2, #6bcbff); text-decoration: none; }
.fsa-mm-program-foot-links { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* Hero accents driven by the immersive theme vars */
.fsa-mm-program-hero {
    background:
        radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--ssp-accent, #2b6bff) 18%, transparent), transparent 58%),
        rgba(10, 14, 26, 0.78);
    border-color: color-mix(in srgb, var(--ssp-accent-2, #6bcbff) 24%, transparent);
}
.fsa-mm-program-hero__kicker,
.fsa-mm-program-hero__link { color: var(--ssp-accent-2, #6bcbff); }
.fsa-mm-program-hero__title {
    background: linear-gradient(118deg, #ffffff 6%, var(--ssp-accent-2, #6bcbff) 64%, var(--ssp-cyan, #90fffb) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Immersive program page: the lists already run in the customizer's borderless
   "minimal wrapper" mode (forced via minimal="1"), so flatten the residual shell
   padding/margins and let cards sit flush on the immersive backdrop. Other surfaces
   keep whatever the host chose in Submission Manager > Customize. */
body.fsa-mm-program-immersive .fsa-mm-spotlight-list-wrap .fsa-mm-form,
body.fsa-mm-program-immersive .fsa-mm-submission-list-wrap .fsa-mm-form {
    padding: 0;
}

body.fsa-mm-program-immersive .fsa-mm-spotlight-list-wrap .fsa-mm-form-wrap,
body.fsa-mm-program-immersive .fsa-mm-submission-list-wrap .fsa-mm-form-wrap {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Hard reset: kill any border/outline/shadow the active theme (Blocksy, etc.)
   paints on these generic wrapper elements, so the lists sit flush on the
   immersive backdrop. Scoped to the immersive page only — every other surface
   still honors Submission Manager > Customize. */
body.fsa-mm-program-immersive .fsa-mm-spotlight-list-wrap,
body.fsa-mm-program-immersive .fsa-mm-spotlight-list-wrap .fsa-mm-form-wrap,
body.fsa-mm-program-immersive .fsa-mm-spotlight-list-wrap .fsa-mm-form,
body.fsa-mm-program-immersive .fsa-mm-submission-list-wrap,
body.fsa-mm-program-immersive .fsa-mm-submission-list-wrap .fsa-mm-form-wrap,
body.fsa-mm-program-immersive .fsa-mm-submission-list-wrap .fsa-mm-form {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* =========================================================================
   Billing paywall: when a Program's subscription is terminated/inactive, the
   Submission Management console is replaced entirely by this paywall — no
   submission data is queried or rendered. Writes are also blocked server-side.
   Admins never see it.
   ========================================================================= */
.fsa-mm-management-wrap.is-billing-locked {
    position: relative;
    isolation: isolate;
}
.fsa-mm-management-paywall {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    padding: 48px 24px;
    border-radius: 18px;
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(43, 107, 255, 0.16), transparent 60%),
        rgba(5, 7, 13, 0.62);
}
.fsa-mm-management-paywall__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: min(420px, 100%);
    padding: 28px 26px;
    text-align: center;
    border: 1px solid rgba(107, 203, 255, 0.28);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(16, 20, 30, 0.96), rgba(8, 11, 18, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 30px 70px -30px rgba(0, 0, 0, 0.95);
}
.fsa-mm-management-paywall__badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 12px;
    border: 1px solid rgba(255, 159, 80, 0.5);
    border-radius: 999px;
    background: rgba(255, 159, 80, 0.12);
    color: #ffd8b5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.fsa-mm-management-paywall__title {
    margin: 2px 0 0;
    color: #f3f8ff;
    font-size: 22px;
    line-height: 1.15;
}
.fsa-mm-management-paywall__copy {
    margin: 0;
    color: #b9c6df;
    font-size: 13px;
    line-height: 1.5;
}
.fsa-mm-management-paywall__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-top: 6px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #2b6bff, #1f57d6);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
    box-shadow: 0 14px 30px -12px rgba(43, 107, 255, 0.7);
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.fsa-mm-management-paywall__cta:hover,
.fsa-mm-management-paywall__cta:focus {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -12px rgba(43, 107, 255, 0.85);
    color: #ffffff;
}

/* =========================================================================
   Host Console — Spotlights tab (curate an ordered Top 10)
   ========================================================================= */
.fsa-mm-spotlights,
.fsa-mm-spotlights * {
    box-sizing: border-box;
}
.fsa-mm-spotlights {
    --fsa-mm-accent: #2b6bff;
    --fsa-mm-accent-2: #6bcbff;
    color: var(--fsa-mm-mgmt-text-color, #9aa6c4);
}
.fsa-mm-spotlights-blank {
    margin: 0;
    padding: 18px;
    border: 1px dashed color-mix(in srgb, var(--fsa-mm-accent) 30%, transparent);
    border-radius: 14px;
    color: var(--fsa-mm-mgmt-muted-color, #6b7794);
    font-size: 13px;
    line-height: 1.5;
}
.fsa-mm-spotlights-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.fsa-mm-spotlights-lead {
    margin: 0;
    flex: 1 1 220px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--fsa-mm-mgmt-muted-color, #6b7794);
}
.fsa-mm-spotlights-status {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    min-height: 22px;
    transition: color 160ms ease, background 160ms ease;
}
.fsa-mm-spotlights-status[data-state="saving"] {
    color: var(--fsa-mm-accent-2);
    background: color-mix(in srgb, var(--fsa-mm-accent) 18%, transparent);
}
.fsa-mm-spotlights-status[data-state="saved"] {
    color: #6ee7a8;
    background: rgba(110, 231, 168, 0.14);
}
.fsa-mm-spotlights-status[data-state="error"] {
    color: #ff8b8b;
    background: rgba(255, 139, 139, 0.16);
}
.fsa-mm-spotlights-player {
    margin-bottom: 16px;
}
.fsa-mm-spotlights-section {
    margin-top: 18px;
}
.fsa-mm-spotlights-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fsa-mm-mgmt-heading-color, #eaf1ff);
}
.fsa-mm-spotlights-pill {
    font-size: 11px;
    font-weight: 700;
    color: var(--fsa-mm-accent-2);
    background: color-mix(in srgb, var(--fsa-mm-accent) 16%, transparent);
    border-radius: 999px;
    padding: 2px 8px;
    letter-spacing: 0;
}
.fsa-mm-spotlights-empty {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--fsa-mm-mgmt-muted-color, #6b7794);
}
.fsa-mm-spotlights-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fsa-mm-spotlights-top {
    counter-reset: spotlight;
}
.fsa-mm-spotlight-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--fsa-mm-mgmt-border-color, #1d2740);
    border-radius: 12px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg, #0c1120) 85%, transparent);
}
.fsa-mm-spotlights-top .fsa-mm-spotlight-row {
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 38%, var(--fsa-mm-mgmt-border-color, #1d2740));
    background: color-mix(in srgb, var(--fsa-mm-accent) 8%, var(--fsa-mm-input-bg, #0c1120));
}
.fsa-mm-spotlight-rank {
    display: none;
    flex: 0 0 22px;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    color: var(--fsa-mm-accent-2);
}
.fsa-mm-spotlights-top .fsa-mm-spotlight-rank {
    display: block;
}
.fsa-mm-spotlight-move {
    display: none;
    flex-direction: column;
    gap: 2px;
}
.fsa-mm-spotlights-top .fsa-mm-spotlight-move {
    display: flex;
}
.fsa-mm-spotlight-arrow {
    width: 24px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--fsa-mm-mgmt-border-color, #1d2740);
    border-radius: 6px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg, #0c1120) 70%, transparent);
    color: var(--fsa-mm-label-color, #eaf1ff);
    cursor: pointer;
    transition: border-color 140ms ease, opacity 140ms ease;
}
.fsa-mm-spotlight-arrow svg {
    width: 14px;
    height: 14px;
}
.fsa-mm-spotlight-arrow:hover:not(:disabled) {
    border-color: var(--fsa-mm-accent);
}
.fsa-mm-spotlight-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}
.fsa-mm-spotlight-thumb {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--fsa-mm-accent) 12%, #000 8%);
}
.fsa-mm-spotlight-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fsa-mm-spotlight-thumb-mono {
    font-size: 18px;
    color: var(--fsa-mm-accent-2);
}
.fsa-mm-spotlight-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.fsa-mm-spotlight-song {
    font-size: 13px;
    font-weight: 700;
    color: var(--fsa-mm-label-color, #eaf1ff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fsa-mm-spotlight-artist {
    font-size: 11px;
    color: var(--fsa-mm-mgmt-muted-color, #6b7794);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fsa-mm-spotlights .fsa-mm-player-trigger {
    flex: 0 0 28px;
}
/* Toggle: a clear "Add" pill in the pool, a compact icon-only remove in the Top list. */
.fsa-mm-spotlight-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease;
}
.fsa-mm-spotlight-toggle svg {
    width: 15px;
    height: 15px;
}
.fsa-mm-spotlight-toggle:disabled {
    opacity: 0.3;
    cursor: default;
}
.fsa-mm-spotlight-toggle-add,
.fsa-mm-spotlight-toggle-rm {
    display: none;
    align-items: center;
    gap: 5px;
}
/* Pool rows: outlined "★ Add" pill. */
.fsa-mm-spotlights-all .fsa-mm-spotlight-toggle {
    padding: 6px 12px;
    border-color: color-mix(in srgb, var(--fsa-mm-accent) 40%, transparent);
    color: var(--fsa-mm-accent-2);
}
.fsa-mm-spotlights-all .fsa-mm-spotlight-toggle:hover:not(:disabled) {
    background: color-mix(in srgb, var(--fsa-mm-accent) 16%, transparent);
    border-color: var(--fsa-mm-accent);
}
.fsa-mm-spotlights-all .fsa-mm-spotlight-toggle-add {
    display: inline-flex;
}
/* Top rows: icon-only circular remove (×), muted with a red hover. */
.fsa-mm-spotlights-top .fsa-mm-spotlight-toggle {
    width: 30px;
    height: 30px;
    border-color: var(--fsa-mm-mgmt-border-color, #1d2740);
    color: var(--fsa-mm-mgmt-muted-color, #6b7794);
}
.fsa-mm-spotlights-top .fsa-mm-spotlight-toggle:hover:not(:disabled) {
    color: #ff8b8b;
    border-color: color-mix(in srgb, #ff8b8b 55%, transparent);
    background: rgba(255, 139, 139, 0.14);
}
.fsa-mm-spotlights-top .fsa-mm-spotlight-toggle-rm {
    display: inline-flex;
}
/* Drag-to-reorder: the rank badge is the grab handle in the Top list. */
.fsa-mm-spotlights-top .fsa-mm-spotlight-rank {
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.fsa-mm-spotlights-top .fsa-mm-spotlight-rank:active {
    cursor: grabbing;
}
.fsa-mm-spotlight-row.is-dragging {
    opacity: 0.6;
    border-style: dashed;
    border-color: var(--fsa-mm-accent);
    cursor: grabbing;
}
/* Embedded preview player blends into the panel (no boxed border/shadow). */
.fsa-mm-spotlights .fsa-mm-player-shell {
    border-color: transparent;
    box-shadow: none;
}

/* =========================================================================
   Submission form — "Line Choice Up Front" (Free vs Skip + amount at the top)
   ========================================================================= */
.fsa-mm-tier-upfront {
    margin: 0 0 18px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent) 45%, transparent);
    background:
        radial-gradient(120% 100% at 50% -20%, color-mix(in srgb, var(--fsa-mm-accent) 16%, transparent), transparent 70%),
        color-mix(in srgb, var(--fsa-mm-input-bg) 88%, transparent);
    box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--fsa-mm-accent) 80%, transparent);
}
.fsa-mm-tier-upfront-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fsa-mm-label-color, #eaf1ff);
}
/* Bigger, bolder option buttons than the in-step version. */
.fsa-mm-tier-upfront .fsa-mm-track-option span {
    min-height: 52px;
    font-size: 14px !important;
    letter-spacing: 0.03em;
    border-width: 2px;
}
/* Fill the row evenly (1 => full width, 2 => halves) instead of the base 2-col grid,
   which left a right-side gap when only one option showed. */
.fsa-mm-tier-switch--gate {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.fsa-mm-tier-switch--gate > .fsa-mm-track-option {
    flex: 1 1 160px;
    width: auto;
    min-width: 140px;
}
/* Two-line labels: main word with a smaller sub-line beneath (e.g. Free / Wait in Line). */
.fsa-mm-tier-switch--gate .fsa-mm-track-option > span {
    flex-direction: column;
    justify-content: center;
    gap: 0 !important;
    min-height: 0 !important;
    white-space: normal;
    overflow: visible;
    line-height: 1.1;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    /* Theme-accent chrome so both options read as buttons even unselected —
       same treatment as the packaged tier pills. */
    border: 1.5px solid color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 40%, transparent) !important;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 7%, transparent);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.fsa-mm-tier-switch--gate .fsa-mm-track-option:hover > span {
    border-color: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 75%, transparent) !important;
    background: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 14%, transparent);
}
.fsa-mm-tier-switch--gate .fsa-mm-track-option input:checked + span {
    border-color: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 90%, transparent) !important;
}
/* The inner label lines are plain text — strip the generic pill styling that the
   base `.fsa-mm-track-option span` rule applies to every span (it was stacking two
   52px pills, causing the huge button + big gap). */
.fsa-mm-tier-switch--gate .fsa-mm-tier-label-main,
.fsa-mm-tier-switch--gate .fsa-mm-tier-label-sub {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    width: auto !important;
}
.fsa-mm-tier-label-main {
    font-size: 13px !important;
    font-weight: 800;
    line-height: 1.15 !important;
    letter-spacing: 0.02em;
}
.fsa-mm-tier-label-sub {
    font-size: 10px !important;
    font-weight: 600;
    line-height: 1.1 !important;
    letter-spacing: 0.02em;
    opacity: 0.85;
}
/* ---- Packaged entry tiers -------------------------------------------------
   Host-configured fixed-price options. Unlike the two-up Skip/Free gate these
   stack vertically, because a package name plus its price needs a full row to
   stay readable at 4-5 options on a phone. */
/* The tier field must own the full form width — the step grid was slotting it into
   one column, squeezing the whole ladder into half the card while the other half
   sat empty. */
.fsa-mm-field-tier {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
}

/* Phone-first: one option per row, in ladder order (packages, Custom + its input,
   then Free). Desktop switches to 3 columns so 4 packages + Custom + Free land as
   two clean rows of three. */
/* Packaged entry gate: a vertical LIST of options, each a full-width row reading
   [radio] · [big price + name subtitle] · [song count] — scans instantly and stays
   comfortable on a phone (no cramped inline "value - name amount"). */
.fsa-mm-tier-switch--packaged {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
/* Desktop: with >3 options the single column wastes width — split into two columns, filled
   column-major (down the left, then the right) via --tier-rows. Phones keep one column. */
@media (min-width: 700px) {
    .fsa-mm-tier-switch--packaged.is-two-col {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(var(--tier-rows, 3), auto);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 14px;
        align-items: start;
    }
}
.fsa-mm-tier-switch--packaged > .fsa-mm-track-option,
.fsa-mm-tier-switch--packaged > .fsa-mm-tier-custom-cell {
    width: 100%;
    min-width: 0;
    margin: 0;
}
.fsa-mm-tier-switch--packaged .fsa-mm-track-option {
    display: block;
    cursor: pointer;
}
/* Neutralize the generic pill styling (.fsa-mm-track-option span) on every span inside a
   packaged row; the component rules below (higher specificity) then set the real look. */
.fsa-mm-tier-switch--packaged .fsa-mm-track-option span {
    min-height: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    letter-spacing: normal;
    text-align: left;
    color: inherit;
    width: auto;
    font-size: 1rem !important;
    line-height: 1.2;
}
.fsa-mm-tier-switch--packaged .fsa-mm-track-option .fsa-mm-tier-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 0;
    padding: 9px 18px;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-input-border) 78%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 55%, transparent);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.fsa-mm-tier-switch--packaged .fsa-mm-track-option:hover .fsa-mm-tier-row {
    border-color: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 55%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-input-bg) 78%, transparent);
}
.fsa-mm-tier-switch--packaged .fsa-mm-track-option .fsa-mm-tier-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
}
.fsa-mm-tier-switch--packaged .fsa-mm-track-option .fsa-mm-tier-price {
    font-size: clamp(14px, 3.6vw, 16px) !important;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: inherit;
    word-break: break-word;
}
.fsa-mm-tier-switch--packaged .fsa-mm-track-option .fsa-mm-tier-name {
    font-size: 11.5px !important;
    font-weight: 600;
    line-height: 1.2;
    opacity: 0.58;
    word-break: break-word;
}
.fsa-mm-tier-switch--packaged .fsa-mm-track-option .fsa-mm-tier-meta {
    flex: 0 0 auto;
    text-align: right;
    font-size: 12px !important;
    font-weight: 700;
    opacity: 0.55;
    white-space: nowrap;
}
/* Selected — highlight the whole row (no radio); brighten the price + count. */
.fsa-mm-tier-switch--packaged .fsa-mm-track-option > input[type="radio"]:checked + .fsa-mm-tier-row {
    color: inherit;
    border-color: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 85%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 13%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 45%, transparent);
}
.fsa-mm-tier-switch--packaged .fsa-mm-track-option > input[type="radio"]:checked + .fsa-mm-tier-row .fsa-mm-tier-price,
.fsa-mm-tier-switch--packaged .fsa-mm-track-option > input[type="radio"]:checked + .fsa-mm-tier-row .fsa-mm-tier-meta {
    color: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 86%, #ffffff 14%);
    opacity: 1;
}
.fsa-mm-tier-switch--packaged .fsa-mm-track-option > input[type="radio"]:checked + .fsa-mm-tier-row .fsa-mm-tier-name {
    opacity: 0.85;
}
/* Custom Amount and its input are one cell. Unselected: the row shows. Selected: the row
   is replaced by the amount input in the same slot. */
.fsa-mm-tier-custom-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.fsa-mm-tier-custom-cell .fsa-mm-field {
    margin: 0;
    width: 100%;
}
.fsa-mm-tier-custom-cell:has([data-submission-tier]:checked) .fsa-mm-track-option--custom {
    display: none;
}
.fsa-mm-tier-custom-cell .fsa-mm-field input {
    min-height: 46px;
    width: 100%;
    text-align: center;
    font-weight: 700;
}

/* Host-editable prompt above the options. */
.fsa-mm-tier-heading {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.9;
}

/* Admin Program Settings: the Entry Packages panel. Full width in its own section,
   so the three inputs get real room instead of being squeezed into the 2-col grid. */
.fsa-mm-tier-package-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 12px 12px;
}
.fsa-mm-tier-package-intro {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    /* Readable body copy, not a faded caption — this is the only explanation of
       how packages behave, so it has to survive on the dark panel. */
    color: color-mix(in srgb, var(--fsa-mm-mgmt-text-color) 78%, transparent);
}
.fsa-mm-tier-package-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fsa-mm-tier-package-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 74px 110px minmax(0, 1.4fr);
    gap: 8px;
    align-items: center;
}
.fsa-mm-tier-songs-input {
    text-align: center;
}
/* Column captions, so an empty repeater still explains itself. */
.fsa-mm-tier-package-row.is-head {
    padding: 0 2px;
}
.fsa-mm-tier-package-row.is-head span {
    font-size: max(9px, calc(var(--fsa-mm-mgmt-label-size) - 1px));
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--fsa-mm-mgmt-text-color) 62%, transparent);
}
/* Match the dialog's own inputs — these sit outside .fsa-mm-management-field, so
   without this they fall back to the browser default (white) and look pasted in. */
.fsa-mm-tier-package-row input {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-mgmt-border-color) 80%, transparent);
    border-radius: 12px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--fsa-mm-input-bg) 96%, #000000 4%),
            color-mix(in srgb, var(--fsa-mm-input-bg) 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);
    color: var(--fsa-mm-mgmt-text-color);
    font-family: var(--fsa-mm-font-family);
    font-size: max(12px, calc(var(--fsa-mm-mgmt-row-size) - 1px));
}
.fsa-mm-tier-package-row input::placeholder {
    color: color-mix(in srgb, var(--fsa-mm-mgmt-text-color) 42%, transparent);
}
.fsa-mm-tier-package-row input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--fsa-mm-mgmt-accent-color) 70%, transparent);
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.24),
        0 0 0 2px color-mix(in srgb, var(--fsa-mm-mgmt-accent-color) 26%, transparent);
}
@media (max-width: 782px) {
    .fsa-mm-tier-package-row {
        grid-template-columns: minmax(0, 1fr) 68px 100px;
    }
    .fsa-mm-tier-package-row input[type="url"] {
        grid-column: 1 / -1;
    }
    .fsa-mm-tier-package-row.is-head {
        display: none;
    }
}

/* Free line closed: emphasise the "skip line only" line. */
.fsa-mm-field-help-closed {
    line-height: 1.5;
}
.fsa-mm-skip-only-label {
    display: inline-block;
    margin: 2px 0;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--fsa-mm-accent-2, #6bcbff);
}
.fsa-mm-tier-upfront .fsa-mm-track-option input:checked + span {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent),
        0 0 0 1px var(--fsa-mm-accent),
        0 8px 22px -10px color-mix(in srgb, var(--fsa-mm-accent) 90%, transparent);
}
/* Skip amount reveal sits just under the choice, inside the card. */
.fsa-mm-tier-upfront .fsa-mm-field-conditional {
    margin-top: 12px;
    margin-bottom: 0;
}
.fsa-mm-tier-upfront .fsa-mm-field-help {
    margin-top: 8px;
    margin-bottom: 0;
}

/* Skip the Line = green, inviting primary CTA (sits on the left of the gate). */
.fsa-mm-tier-upfront .fsa-mm-track-option--skip span {
    color: #ffffff;
    border-color: #1f9d57;
    background: linear-gradient(180deg, #2ecf76, #16a34a);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 8px 20px -10px rgba(34, 197, 94, 0.85);
}
.fsa-mm-tier-upfront .fsa-mm-track-option--skip:hover span,
.fsa-mm-tier-upfront .fsa-mm-track-option--skip input:checked + span {
    color: #ffffff;
    border-color: #2ecf76;
    background: linear-gradient(180deg, #34e283, #19b657);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 0 2px rgba(46, 207, 118, 0.55),
        0 10px 26px -10px rgba(34, 197, 94, 0.95);
}

/* Program Settings — field label tooltips.
   Scoped under .fsa-mm-program-settings-section and using an extra class level so
   these win over the broad ".fsa-mm-management-field span" label styling (which
   would otherwise force the bubble text to uppercase/letter-spaced/tiny). */
.fsa-mm-ps-label-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* no min-width:0 — must stay rigid so the (white-space:nowrap) label text never
       collapses and overflows onto the adjacent input value */
    flex: 0 0 auto;
}
.fsa-mm-program-settings-section .fsa-mm-ps-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid rgba(140, 160, 200, 0.5);
    color: #9fb2d6;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    cursor: help;
    outline: none;
}
.fsa-mm-program-settings-section .fsa-mm-ps-tip:hover,
.fsa-mm-program-settings-section .fsa-mm-ps-tip:focus-visible {
    border-color: #63daff;
    color: #cdeeff;
}
.fsa-mm-program-settings-section .fsa-mm-ps-tip .fsa-mm-ps-tip-mark {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: lowercase;
    color: inherit;
}
.fsa-mm-program-settings-section .fsa-mm-ps-tip .fsa-mm-ps-tip-bubble {
    position: absolute;
    top: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 230px;
    padding: 8px 11px;
    border-radius: 8px;
    background: #0b1220;
    border: 1px solid rgba(99, 218, 255, 0.32);
    color: #e7f1ff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    white-space: normal;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    pointer-events: none;
    z-index: 60;
}
.fsa-mm-program-settings-section .fsa-mm-ps-tip .fsa-mm-ps-tip-bubble::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: #0b1220;
}
.fsa-mm-program-settings-section .fsa-mm-ps-tip:hover .fsa-mm-ps-tip-bubble,
.fsa-mm-program-settings-section .fsa-mm-ps-tip:focus-visible .fsa-mm-ps-tip-bubble {
    opacity: 1;
    visibility: visible;
}

/* Logged-in artist: place-in-line status banner on the submission form */
.fsa-mm-line-status {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    padding: 9px 13px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    background: rgba(127, 137, 160, 0.10);
    border: 1px solid rgba(127, 137, 160, 0.26);
}
.fsa-mm-line-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 3px rgba(127, 137, 160, 0.14);
}
.fsa-mm-line-status.is-pending .fsa-mm-line-status-dot { background: #f0a23c; }
.fsa-mm-line-status.is-approved .fsa-mm-line-status-dot { background: #28c269; }

.fsa-mm-line-status-resume {
    margin: 0 0 14px;
    text-align: center;
}
.fsa-mm-line-status-resume .fsa-mm-inline-payment-button.is-paynow {
    display: inline-flex;
    min-height: 40px;
    padding: 0 24px;
}
.fsa-mm-line-status-resume .fsa-mm-field-help {
    margin: 6px 0 0;
}

/* Queue "Load more" (row-cap pagination) */
.fsa-mm-management-loadmore {
    display: flex;
    justify-content: center;
    padding: 12px 8px 6px;
}
.fsa-mm-management-loadmore-button {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 42%, transparent);
    background: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 14%, transparent);
    color: var(--fsa-mm-heading-color, #eaf1ff);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
}
.fsa-mm-management-loadmore-button:hover {
    background: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 24%, transparent);
    border-color: color-mix(in srgb, var(--fsa-mm-accent, #2b6bff) 62%, transparent);
}
.fsa-mm-management-loadmore-button:disabled {
    opacity: 0.6;
    cursor: default;
}