/* ─── Music Composer v2.0.0 — StemLabPro ─── */
/* Depends on stemlab-core.css for design tokens */


/* ═══════════════════════════════════════
   PAGE BACKGROUND
   Override header plugin's nuclear dark bg.
   ═══════════════════════════════════════ */

body:has(#music-composer-app),
html body:has(#music-composer-app) {
    background: var(--color-bg-base) !important;
    background-color: var(--color-bg-base) !important;
}

body:has(#music-composer-app) .elementor-element.e-con.e-parent,
body:has(#music-composer-app) .elementor-element.e-con {
    background-color: transparent !important;
    background-image: none !important;
}


/* ═══════════════════════════════════════
   APP WRAPPER
   ═══════════════════════════════════════ */

#music-composer-app {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-12) var(--space-5) var(--space-20);
    font-family: var(--font-sans);
    color: var(--color-text-primary);
}

#music-composer-app *,
#music-composer-app *::before,
#music-composer-app *::after {
    box-sizing: border-box;
}


/* ═══════════════════════════════════════
   HEADER — Overline brand title
   ═══════════════════════════════════════ */

#music-composer-app .mc-header {
    margin-bottom: var(--space-8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--space-4) !important;
}

#music-composer-app .mc-header-titles {
    display: flex !important;
    align-items: baseline !important;
    gap: var(--space-3) !important;
}

#music-composer-app .mc-header-label {
    font-size: var(--text-overline) !important;
    font-weight: var(--weight-medium) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--tracking-wider) !important;
    color: var(--color-text-subdued) !important;
}

#music-composer-app .mc-header-label--accent {
    color: var(--color-accent) !important;
    font-weight: var(--weight-semibold) !important;
}


/* ─── Ticket Meter (inline in header) ─── */

#music-composer-app .mc-meter {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    flex-shrink: 0 !important;
}

#music-composer-app .mc-meter-bar {
    width: 80px !important;
    height: 4px !important;
    border-radius: var(--radius-full) !important;
    background: var(--color-bg-tint) !important;
    overflow: hidden !important;
}

#music-composer-app .mc-meter-fill {
    height: 100% !important;
    border-radius: var(--radius-full) !important;
    background: var(--color-accent) !important;
    width: 100% !important;
    transition: width var(--duration-slow) var(--ease-standard) !important;
}

#music-composer-app .mc-meter-label {
    font-family: var(--font-mono) !important;
    font-size: var(--text-caption) !important;
    font-weight: var(--weight-medium) !important;
    color: var(--color-text-subdued) !important;
    white-space: nowrap !important;
}

#music-composer-app .mc-meter-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 2px !important;
}

#music-composer-app .mc-buy-more-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: var(--text-caption) !important;
    font-weight: var(--weight-medium) !important;
    color: var(--color-text-disabled) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color var(--duration-fast) var(--ease-standard) !important;
    line-height: 1 !important;
}

#music-composer-app .mc-buy-more-link:hover {
    color: var(--color-accent) !important;
    text-decoration: none !important;
}

#music-composer-app .mc-buy-more-link::after {
    content: '→';
    font-size: 0.85em;
    opacity: 0.8;
}


/* ═══════════════════════════════════════
   MAIN CARD — Clean elevation, no glass
   ═══════════════════════════════════════ */

#music-composer-app .mc-card {
    background: var(--color-bg-surface) !important;
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--color-border) !important;
    padding: var(--card-padding-xl) !important;
    max-width: 600px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

#music-composer-app .mc-section { display: none; }
#music-composer-app .mc-section.mc-active { display: block; }
#music-composer-app .mc-hidden { display: none !important; }


/* ═══════════════════════════════════════
   PROMPT BLOCK — Main description field
   ═══════════════════════════════════════ */

#music-composer-app .mc-prompt-block {
    margin-bottom: var(--space-5) !important;
}

#music-composer-app .mc-prompt-label {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    font-size: var(--text-body-sm) !important;
    font-weight: var(--weight-semibold) !important;
    color: var(--color-text-primary) !important;
    margin-bottom: var(--space-3) !important;
}

#music-composer-app .mc-prompt-label svg {
    stroke: var(--color-accent);
    flex-shrink: 0;
}

#music-composer-app .mc-prompt-textarea {
    min-height: 80px !important;
    resize: vertical !important;
    font-size: var(--text-body-sm) !important;
    line-height: 1.6 !important;
    border-color: var(--color-border-strong) !important;
}

#music-composer-app .mc-prompt-textarea:focus {
    border-color: var(--color-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--color-accent-tint) !important;
}


/* ═══════════════════════════════════════
   TEXTAREA (shared)
   ═══════════════════════════════════════ */

#music-composer-app .mc-textarea {
    width: 100% !important;
    min-height: 140px !important;
    resize: vertical !important;
    padding: var(--space-4) !important;
    background: var(--color-bg-base) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--text-body-sm) !important;
    line-height: 1.6 !important;
    outline: none !important;
    transition: border-color var(--duration-fast) var(--ease-standard) !important;
}

#music-composer-app .mc-textarea::placeholder {
    color: var(--color-text-disabled) !important;
}

#music-composer-app .mc-textarea:focus {
    border-color: var(--color-border-strong) !important;
    outline: none !important;
    box-shadow: none !important;
}

#music-composer-app .mc-textarea:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}


/* ═══════════════════════════════════════
   LYRICS BLOCK
   ═══════════════════════════════════════ */

#music-composer-app .mc-lyrics-block {
    margin-bottom: var(--space-5) !important;
}

#music-composer-app .mc-lyrics-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: var(--space-3) !important;
}

#music-composer-app .mc-lyrics-label {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    font-size: var(--text-body-sm) !important;
    font-weight: var(--weight-semibold) !important;
    color: var(--color-text-primary) !important;
}

#music-composer-app .mc-lyrics-label svg {
    stroke: var(--color-text-subdued);
}

/* Auto / Write Lyrics toggle — subtle pill toggle */
#music-composer-app .mc-lyrics-toggle {
    display: flex !important;
    background: var(--color-bg-base) !important;
    border-radius: var(--radius-full) !important;
    border: none !important;
    padding: 2px !important;
    gap: 2px !important;
}

#music-composer-app .mc-toggle-btn {
    padding: 6px 14px !important;
    font-size: var(--text-caption) !important;
    font-weight: var(--weight-medium) !important;
    font-family: var(--font-sans) !important;
    color: var(--color-text-subdued) !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--radius-full) !important;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-standard);
    white-space: nowrap;
    outline: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
}

#music-composer-app .mc-toggle-btn:hover {
    color: var(--color-text-primary) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#music-composer-app .mc-toggle-btn--active {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-primary) !important;
    font-weight: var(--weight-semibold) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    border: none !important;
}

#music-composer-app .mc-toggle-btn--active:hover {
    background: var(--color-bg-elevated) !important;
}

/* Instrumental toggle row */
#music-composer-app .mc-instrumental-row {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    margin-top: var(--space-3) !important;
    padding: 0 var(--space-1) !important;
}

#music-composer-app .mc-instrumental-label {
    font-size: var(--text-body-sm) !important;
    color: var(--color-text-subdued) !important;
    font-weight: var(--weight-medium) !important;
}

/* Toggle switch */
#music-composer-app .mc-toggle-switch {
    position: relative !important;
    display: inline-block !important;
    width: 40px !important;
    height: 22px !important;
    cursor: pointer !important;
}

#music-composer-app .mc-toggle-switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

#music-composer-app .mc-toggle-track {
    position: absolute !important;
    inset: 0 !important;
    background: var(--color-bg-tint) !important;
    border-radius: var(--radius-full) !important;
    border: 1px solid var(--color-border) !important;
    transition: background var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard) !important;
}

#music-composer-app .mc-toggle-track::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-text-subdued);
    border-radius: 50%;
    transition: transform var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
}

#music-composer-app .mc-toggle-switch input:checked + .mc-toggle-track {
    background: var(--color-accent-tint) !important;
    border-color: transparent !important;
}

#music-composer-app .mc-toggle-switch input:checked + .mc-toggle-track::before {
    transform: translateY(-50%) translateX(18px);
    background: var(--color-accent);
}


/* ═══════════════════════════════════════
   COLLAPSIBLE PANELS
   — NO overflow:hidden so dropdowns can escape
   ═══════════════════════════════════════ */

#music-composer-app .mc-collapsible {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: var(--space-3) !important;
    transition: border-color var(--duration-fast) var(--ease-standard) !important;
    position: relative !important;
}

#music-composer-app .mc-collapsible:hover {
    border-color: var(--color-border-strong) !important;
}

#music-composer-app .mc-collapsible-trigger {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: var(--space-4) !important;
    background: none !important;
    border: none !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--text-body-sm) !important;
    font-weight: var(--weight-semibold) !important;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard);
    text-align: left;
    line-height: 1;
    outline: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

#music-composer-app .mc-collapsible-trigger:hover {
    color: var(--color-text-primary) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

#music-composer-app .mc-collapsible-trigger:hover .mc-collapsible-arrow {
    color: var(--color-text-primary);
}

#music-composer-app .mc-collapsible-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
}

#music-composer-app .mc-collapsible-label svg {
    stroke: var(--color-text-subdued);
}

#music-composer-app .mc-collapsible-arrow {
    color: var(--color-text-disabled) !important;
    transition: transform var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard) !important;
    flex-shrink: 0 !important;
}

#music-composer-app .mc-collapsible.mc-open .mc-collapsible-arrow {
    transform: rotate(90deg) !important;
    color: var(--color-text-subdued) !important;
}

#music-composer-app .mc-collapsible-body {
    display: none;
    padding: 0 var(--space-4) var(--space-4);
}

#music-composer-app .mc-collapsible.mc-open .mc-collapsible-body {
    display: block;
}


/* ─── Style Text Input ─── */

#music-composer-app .mc-text-input {
    width: 100% !important;
    padding: var(--space-3) var(--space-4) !important;
    background: var(--color-bg-base) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--text-body-sm) !important;
    outline: none !important;
    transition: border-color var(--duration-fast) var(--ease-standard) !important;
}

#music-composer-app .mc-text-input::placeholder {
    color: var(--color-text-disabled) !important;
}

#music-composer-app .mc-text-input:focus {
    border-color: var(--color-border-strong) !important;
    outline: none !important;
    box-shadow: none !important;
}


/* ─── Genre Tags — soft, neutral borders only (no pink) ─── */

#music-composer-app .mc-genre-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: var(--space-3) !important;
}

#music-composer-app .mc-genre-tag {
    padding: 5px 12px !important;
    background: var(--color-bg-base) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-full) !important;
    color: var(--color-text-subdued) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--text-caption) !important;
    font-weight: var(--weight-medium) !important;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
    outline: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
}

#music-composer-app .mc-genre-tag:hover {
    background: var(--color-bg-tint) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-strong) !important;
    box-shadow: none !important;
}

#music-composer-app .mc-genre-tag--active {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border-strong) !important;
    color: var(--color-text-primary) !important;
    font-weight: var(--weight-semibold) !important;
}

#music-composer-app .mc-genre-tag--active:hover {
    background: var(--color-bg-elevated) !important;
}


/* ═══════════════════════════════════════
   AUDIO IMPORT PANEL
   ═══════════════════════════════════════ */

#music-composer-app .mc-import-dropzone {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    padding: var(--space-6) var(--space-4) !important;
    border: 2px dashed var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--color-bg-base) !important;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
    text-align: center;
}

#music-composer-app .mc-import-dropzone:hover,
#music-composer-app .mc-import-dropzone--drag {
    border-color: var(--color-accent) !important;
    background: var(--color-accent-tint) !important;
}

#music-composer-app .mc-import-dropzone--has-file {
    border-style: solid !important;
    border-color: var(--color-border-strong) !important;
    padding: var(--space-4) !important;
    cursor: default;
}

#music-composer-app .mc-import-dropzone--has-file .mc-import-icon,
#music-composer-app .mc-import-dropzone--has-file .mc-import-hint,
#music-composer-app .mc-import-dropzone--has-file .mc-import-formats {
    display: none !important;
}

#music-composer-app .mc-import-icon {
    color: var(--color-text-disabled);
    line-height: 1;
}

#music-composer-app .mc-import-icon svg {
    stroke: var(--color-text-disabled);
    display: block;
}

#music-composer-app .mc-import-hint {
    font-size: var(--text-body-sm) !important;
    color: var(--color-text-subdued) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

#music-composer-app .mc-import-browse {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--color-accent) !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: var(--weight-medium) !important;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    outline: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: inherit !important;
    min-height: 0 !important;
    min-width: 0 !important;
    display: inline !important;
    transition: text-decoration-color var(--duration-fast) var(--ease-standard);
}

#music-composer-app .mc-import-browse:hover {
    text-decoration-color: var(--color-accent) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

#music-composer-app .mc-import-formats {
    font-size: var(--text-caption) !important;
    color: var(--color-text-disabled) !important;
    margin: 0 !important;
    font-family: var(--font-mono) !important;
    letter-spacing: 0.04em !important;
}

/* File info row */
#music-composer-app .mc-import-info {
    margin-top: var(--space-3) !important;
}

#music-composer-app .mc-import-file-row {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    padding: var(--space-2) var(--space-3) !important;
    background: var(--color-bg-tint) !important;
    border-radius: var(--radius-sm) !important;
}

#music-composer-app .mc-import-file-row svg {
    stroke: var(--color-text-disabled);
    flex-shrink: 0;
}

#music-composer-app .mc-import-filename {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: var(--text-body-sm) !important;
    color: var(--color-text-primary) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#music-composer-app .mc-import-duration {
    font-family: var(--font-mono) !important;
    font-size: var(--text-caption) !important;
    color: var(--color-text-subdued) !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

#music-composer-app .mc-import-clear {
    background: none !important;
    border: none !important;
    padding: 4px !important;
    margin: 0 !important;
    color: var(--color-text-disabled) !important;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm) !important;
    outline: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    min-height: 0 !important;
    min-width: 0 !important;
    transition: color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
}

#music-composer-app .mc-import-clear:hover {
    color: var(--color-text-primary) !important;
    background: var(--color-bg-elevated) !important;
    border: none !important;
    box-shadow: none !important;
}

/* Mode buttons */
#music-composer-app .mc-import-modes {
    display: flex !important;
    gap: var(--space-2) !important;
    margin-top: var(--space-3) !important;
}

#music-composer-app .mc-import-mode-btn {
    flex: 1 !important;
    padding: var(--space-2) var(--space-3) !important;
    font-size: var(--text-caption) !important;
    font-weight: var(--weight-medium) !important;
    font-family: var(--font-sans) !important;
    background: var(--color-bg-base) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-text-subdued) !important;
    cursor: pointer;
    text-align: center;
    transition: all var(--duration-fast) var(--ease-standard);
    outline: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    min-height: 36px !important;
    min-width: 0 !important;
    margin: 0 !important;
}

#music-composer-app .mc-import-mode-btn:hover {
    border-color: var(--color-border-strong) !important;
    color: var(--color-text-primary) !important;
    background: var(--color-bg-tint) !important;
    box-shadow: none !important;
}

#music-composer-app .mc-import-mode-btn--active {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border-strong) !important;
    color: var(--color-text-primary) !important;
    font-weight: var(--weight-semibold) !important;
}

#music-composer-app .mc-import-mode-btn--active:hover {
    background: var(--color-bg-elevated) !important;
}

#music-composer-app .mc-import-mode-note {
    margin: var(--space-2) 0 0 !important;
    font-size: var(--text-caption) !important;
    color: var(--color-text-disabled) !important;
    line-height: 1.5 !important;
}

#music-composer-app .mc-import-mode-note--soon {
    color: var(--color-text-disabled) !important;
    font-style: italic !important;
}


/* ═══════════════════════════════════════
   AUDIO OPTIONS ROW
   ═══════════════════════════════════════ */

#music-composer-app .mc-audio-options {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
}

#music-composer-app .mc-option {
    flex: 1 1 0% !important;
    min-width: 0 !important;
}

#music-composer-app .mc-option label {
    display: block !important;
    font-size: var(--text-overline) !important;
    font-weight: var(--weight-semibold) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--tracking-wider) !important;
    color: var(--color-text-subdued) !important;
    margin-bottom: var(--space-2) !important;
}

#music-composer-app .mc-option-divider {
    width: 1px !important;
    background: var(--color-border) !important;
    margin: 0 var(--space-4) !important;
    align-self: stretch !important;
}

#music-composer-app .mc-option--duration {
    flex: 0 0 auto !important;
    min-width: 140px !important;
}


/* ─── Duration Slider ─── */

#music-composer-app .mc-duration-slider-wrap {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
}

#music-composer-app .mc-duration-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    flex: 1 !important;
    height: 4px !important;
    background: linear-gradient(
        to right,
        var(--color-accent) 0%,
        var(--color-accent) var(--slider-pct, 20.8%),
        var(--color-bg-tint) var(--slider-pct, 20.8%),
        var(--color-bg-tint) 100%
    ) !important;
    border-radius: var(--radius-full) !important;
    outline: none !important;
    cursor: pointer;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
}

#music-composer-app .mc-duration-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--color-accent);
    border: 2px solid var(--color-bg-surface);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    transition: transform var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
}

#music-composer-app .mc-duration-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

#music-composer-app .mc-duration-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--color-accent);
    border: 2px solid var(--color-bg-surface);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

#music-composer-app .mc-duration-slider::-moz-range-track {
    height: 4px;
    background: var(--color-bg-tint);
    border-radius: var(--radius-full);
}

#music-composer-app .mc-duration-slider::-moz-range-progress {
    height: 4px;
    background: var(--color-accent);
    border-radius: var(--radius-full);
}

#music-composer-app .mc-duration-display {
    font-family: var(--font-mono) !important;
    font-size: var(--text-caption) !important;
    font-weight: var(--weight-medium) !important;
    color: var(--color-text-primary) !important;
    white-space: nowrap !important;
    min-width: 44px !important;
    text-align: right !important;
    flex-shrink: 0 !important;
}


/* ─── Custom Selects ─── */

#music-composer-app .mc-custom-select {
    position: relative !important;
    z-index: 1 !important;
}

#music-composer-app .mc-custom-select:has(.mc-open),
#music-composer-app .mc-custom-select.mc-select-open {
    z-index: 100 !important;
}

#music-composer-app .mc-custom-select-trigger {
    width: 100% !important;
    padding: var(--space-3) var(--space-8) var(--space-3) var(--space-4) !important;
    background: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-text-primary) !important;
    font-size: var(--text-body-sm) !important;
    font-family: var(--font-sans) !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color var(--duration-fast) var(--ease-standard);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 44px !important;
}

#music-composer-app .mc-custom-select-trigger:hover {
    border-color: var(--color-accent-border) !important;
}

#music-composer-app .mc-custom-select-trigger svg {
    color: var(--color-text-subdued);
}

#music-composer-app .mc-custom-select-menu {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    background: var(--color-bg-overlay);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
    z-index: 50;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

#music-composer-app .mc-custom-select-menu.mc-open {
    display: block;
}

#music-composer-app .mc-custom-option {
    padding: var(--space-4) !important;
    font-size: var(--text-body-sm) !important;
    color: var(--color-text-secondary) !important;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

#music-composer-app .mc-custom-option:hover {
    background: var(--color-bg-tint) !important;
    color: var(--color-text-primary) !important;
}

#music-composer-app .mc-custom-option--active {
    background: var(--color-accent-tint) !important;
    color: var(--color-text-primary) !important;
}

#music-composer-app .mc-format-plus {
    color: var(--color-accent) !important;
    font-weight: var(--weight-semibold) !important;
}


/* ═══════════════════════════════════════
   TERMS
   ═══════════════════════════════════════ */

#music-composer-app .mc-terms-row {
    margin-top: var(--space-5) !important;
}

#music-composer-app .mc-terms {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    cursor: pointer;
}

#music-composer-app .mc-terms input[type="checkbox"] {
    accent-color: var(--color-accent) !important;
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
}

#music-composer-app .mc-terms span {
    font-size: var(--text-body-sm) !important;
    color: var(--color-text-subdued) !important;
}

#music-composer-app .mc-terms a {
    color: var(--color-accent) !important;
    text-decoration: none !important;
}

#music-composer-app .mc-terms a:hover {
    text-decoration: underline !important;
}


/* ═══════════════════════════════════════
   PRIMARY BUTTON
   ═══════════════════════════════════════ */

#music-composer-app .mc-btn-primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    height: auto !important;
    margin-top: var(--space-6) !important;
    background: var(--color-accent) !important;
    color: var(--color-text-on-accent) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-overline) !important;
    font-weight: var(--weight-medium) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--tracking-wider) !important;
    cursor: pointer;
    font-family: var(--font-sans) !important;
    transition: background var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard),
                transform var(--duration-fast) var(--ease-standard) !important;
    padding: 0 var(--space-6) !important;
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
}

#music-composer-app .mc-btn-primary:hover:not(:disabled) {
    background: var(--color-accent-hover) !important;
    box-shadow: 0 0 20px var(--color-accent-glow) !important;
    transform: translateY(-1px) !important;
}

#music-composer-app .mc-btn-primary:active:not(:disabled) {
    background: var(--color-accent-active) !important;
    box-shadow: none !important;
    transform: scale(0.98) !important;
}

#music-composer-app .mc-btn-primary:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

#music-composer-app .mc-btn-text {
    position: relative;
    z-index: 1;
}


/* ═══════════════════════════════════════
   SECONDARY BUTTON
   ═══════════════════════════════════════ */

#music-composer-app .mc-btn-secondary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    background: transparent !important;
    color: var(--color-text-secondary) !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-3) var(--space-5) !important;
    font-size: var(--text-body-sm) !important;
    font-weight: var(--weight-medium) !important;
    cursor: pointer;
    font-family: var(--font-sans) !important;
    transition: all var(--duration-fast) var(--ease-standard) !important;
    min-height: 44px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-top: var(--space-2) !important;
}

#music-composer-app .mc-btn-secondary:hover {
    border-color: var(--color-accent-border) !important;
    color: var(--color-accent) !important;
    background: var(--color-bg-elevated) !important;
}


/* ═══════════════════════════════════════
   PROCESSING
   ═══════════════════════════════════════ */

#music-composer-app .mc-processing-animation {
    padding: var(--space-16) 0 var(--space-6) !important;
    display: flex !important;
    justify-content: center !important;
}

#music-composer-app .mc-waveform {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    height: 44px !important;
}

#music-composer-app .mc-waveform span {
    display: block;
    width: 4px;
    height: 100%;
    background: var(--color-accent);
    border-radius: var(--radius-xs);
    animation: mc-wave 1s ease-in-out infinite;
}

#music-composer-app .mc-waveform span:nth-child(1)  { animation-delay: 0s;   height: 55%; }
#music-composer-app .mc-waveform span:nth-child(2)  { animation-delay: .1s;  height: 75%; }
#music-composer-app .mc-waveform span:nth-child(3)  { animation-delay: .2s;  height: 100%; }
#music-composer-app .mc-waveform span:nth-child(4)  { animation-delay: .3s;  height: 65%; }
#music-composer-app .mc-waveform span:nth-child(5)  { animation-delay: .4s;  height: 85%; }
#music-composer-app .mc-waveform span:nth-child(6)  { animation-delay: .5s;  height: 45%; }
#music-composer-app .mc-waveform span:nth-child(7)  { animation-delay: .6s;  height: 80%; }
#music-composer-app .mc-waveform span:nth-child(8)  { animation-delay: .7s;  height: 55%; }
#music-composer-app .mc-waveform span:nth-child(9)  { animation-delay: .8s;  height: 90%; }
#music-composer-app .mc-waveform span:nth-child(10) { animation-delay: .9s;  height: 70%; }

@keyframes mc-wave {
    0%, 100% { transform: scaleY(0.3); }
    50% { transform: scaleY(1); }
}

#music-composer-app .mc-processing-status {
    text-align: center !important;
    font-size: var(--text-body) !important;
    font-weight: var(--weight-semibold) !important;
    color: var(--color-text-primary) !important;
    margin: 0 0 var(--space-4) !important;
    transition: opacity 0.3s ease !important;
}

#music-composer-app .mc-progress-bar {
    height: 2px !important;
    background: var(--color-bg-tint) !important;
    border-radius: var(--radius-full) !important;
    overflow: hidden !important;
}

#music-composer-app .mc-progress-fill {
    height: 100% !important;
    background: var(--color-accent) !important;
    border-radius: var(--radius-full) !important;
    width: 0% !important;
    transition: width var(--duration-slow) var(--ease-standard) !important;
}

#music-composer-app .mc-processing-note {
    text-align: center !important;
    font-size: var(--text-body-sm) !important;
    color: var(--color-text-subdued) !important;
    margin: var(--space-4) 0 0 !important;
}


/* ═══════════════════════════════════════
   RESULTS
   ═══════════════════════════════════════ */

#music-composer-app .mc-results-title {
    font-size: var(--text-h4) !important;
    font-weight: var(--weight-bold) !important;
    color: var(--color-accent) !important;
    margin: 0 0 var(--space-3) !important;
}

#music-composer-app .mc-track-meta {
    font-size: var(--text-body-sm) !important;
    color: var(--color-text-subdued) !important;
    margin-bottom: var(--space-5) !important;
}

/* Custom Player */
#music-composer-app .mc-player {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    padding: var(--space-4) !important;
    background: var(--color-bg-base) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: var(--space-5) !important;
}

#music-composer-app .mc-player-play {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--color-accent) !important;
    color: var(--color-text-on-accent) !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard),
                transform var(--duration-fast) var(--ease-standard) !important;
    padding: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
}

#music-composer-app .mc-player-play:hover {
    background: var(--color-accent-hover) !important;
    transform: scale(1.05) !important;
    border: none !important;
    box-shadow: none !important;
}

#music-composer-app .mc-player-time {
    font-family: var(--font-mono) !important;
    font-size: var(--text-caption) !important;
    color: var(--color-text-subdued) !important;
    min-width: 36px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

#music-composer-app .mc-player-bar {
    flex: 1 !important;
    height: 6px !important;
    background: var(--color-bg-tint) !important;
    border-radius: var(--radius-full) !important;
    position: relative !important;
    cursor: pointer;
}

#music-composer-app .mc-player-progress {
    height: 100% !important;
    background: var(--color-accent) !important;
    border-radius: var(--radius-full) !important;
    width: 0%;
    transition: width 0.1s linear;
    pointer-events: none !important;
}

#music-composer-app .mc-player-thumb {
    position: absolute !important;
    top: 50% !important;
    left: 0%;
    width: 14px !important;
    height: 14px !important;
    background: var(--color-accent) !important;
    border: 2px solid var(--color-bg-surface) !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    transition: left 0.1s linear;
    box-shadow: 0 0 4px rgba(255, 46, 134, 0.3);
}


/* ═══════════════════════════════════════
   TRIM / CLIP REGION
   ═══════════════════════════════════════ */

#music-composer-app .mc-trim-block {
    margin-bottom: var(--space-5) !important;
}

#music-composer-app .mc-trim-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: var(--space-3) !important;
}

#music-composer-app .mc-trim-label {
    font-size: var(--text-body-sm) !important;
    font-weight: var(--weight-semibold) !important;
    color: var(--color-text-primary) !important;
}

#music-composer-app .mc-trim-times {
    font-family: var(--font-mono) !important;
    font-size: var(--text-caption) !important;
    color: var(--color-text-subdued) !important;
}

#music-composer-app .mc-trim-track {
    position: relative !important;
    height: 56px !important;
    background: var(--color-bg-base) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    cursor: pointer;
}

#music-composer-app .mc-trim-waveform {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 1px !important;
    padding: 4px !important;
    pointer-events: none !important;
}

#music-composer-app .mc-trim-bar {
    flex: 1 !important;
    background: var(--color-accent) !important;
    opacity: 0.2 !important;
    border-radius: 1px !important;
    min-width: 1px !important;
}

#music-composer-app .mc-trim-selected {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    background: var(--color-accent-tint) !important;
    border-top: 2px solid var(--color-accent) !important;
    border-bottom: 2px solid var(--color-accent) !important;
    pointer-events: none !important;
}

#music-composer-app .mc-trim-handle {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 12px !important;
    background: var(--color-accent) !important;
    cursor: ew-resize !important;
    z-index: 2 !important;
    transform: translateX(-50%) !important;
    border-radius: 2px !important;
    opacity: 0.8 !important;
    transition: opacity var(--duration-fast) var(--ease-standard) !important;
}

#music-composer-app .mc-trim-handle:hover {
    opacity: 1 !important;
}

#music-composer-app .mc-trim-playhead {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: var(--color-text-primary) !important;
    left: 0% !important;
    pointer-events: none !important;
    z-index: 3 !important;
    transition: left 0.1s linear !important;
}

#music-composer-app .mc-trim-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: var(--space-3) !important;
    gap: var(--space-3) !important;
}

#music-composer-app .mc-trim-play {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    padding: var(--space-2) var(--space-3) !important;
    background: var(--color-bg-base) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-text-primary) !important;
    font-size: var(--text-caption) !important;
    font-family: var(--font-sans) !important;
    font-weight: var(--weight-medium) !important;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard) !important;
    outline: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
}

#music-composer-app .mc-trim-play:hover {
    border-color: var(--color-accent-border) !important;
    background: var(--color-bg-base) !important;
    box-shadow: none !important;
}

#music-composer-app .mc-trim-toggle-wrap {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    font-size: var(--text-caption) !important;
    color: var(--color-text-subdued) !important;
    cursor: pointer;
}

#music-composer-app .mc-trim-toggle-wrap input[type="checkbox"] {
    accent-color: var(--color-accent) !important;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════
   FILENAME
   ═══════════════════════════════════════ */

#music-composer-app .mc-filename-block {
    margin-bottom: var(--space-5) !important;
}

#music-composer-app .mc-filename-label {
    display: block !important;
    font-size: var(--text-body-sm) !important;
    font-weight: var(--weight-semibold) !important;
    color: var(--color-text-primary) !important;
    margin-bottom: var(--space-2) !important;
}

#music-composer-app .mc-filename-row {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

#music-composer-app .mc-filename-input {
    flex: 1 !important;
    padding: var(--space-3) var(--space-4) !important;
    background: var(--color-bg-base) !important;
    border: 1px solid var(--color-border) !important;
    border-right: none !important;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--text-body-sm) !important;
    outline: none !important;
    min-height: 44px !important;
}

#music-composer-app .mc-filename-input:focus {
    border-color: var(--color-border-strong) !important;
    outline: none !important;
    box-shadow: none !important;
}

#music-composer-app .mc-filename-ext {
    display: flex !important;
    align-items: center !important;
    padding: var(--space-3) var(--space-4) !important;
    background: var(--color-bg-tint) !important;
    border: 1px solid var(--color-border) !important;
    border-left: none !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
    color: var(--color-text-subdued) !important;
    font-family: var(--font-mono) !important;
    font-size: var(--text-body-sm) !important;
    min-height: 44px !important;
}

/* Results actions — stacked */
#music-composer-app .mc-results-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}


/* ═══════════════════════════════════════
   ERROR
   ═══════════════════════════════════════ */

#music-composer-app .mc-error-icon {
    text-align: center !important;
    font-size: var(--text-display) !important;
    color: var(--color-error) !important;
    margin: var(--space-10) 0 var(--space-4) !important;
}

#music-composer-app .mc-error-title {
    text-align: center !important;
    font-size: var(--text-h4) !important;
    font-weight: var(--weight-bold) !important;
    color: var(--color-text-primary) !important;
    margin: 0 0 var(--space-2) !important;
}

#music-composer-app .mc-error-message {
    text-align: center !important;
    font-size: var(--text-body-sm) !important;
    color: var(--color-text-subdued) !important;
    margin: 0 0 var(--space-6) !important;
}


/* ═══════════════════════════════════════
   MODALS — Paywall & Usage (Luxury Dark Theme)
   Copied pattern-for-pattern from stem-splitter
   ═══════════════════════════════════════ */

.mc-paywall-overlay, .mc-usage-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    z-index: 200000; padding: 20px;
}

.mc-paywall-card, .mc-usage-modal {
    background: #1A1A22;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 48px 40px;
    max-width: 420px; width: 100%;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    animation: mc-modal-in 0.3s ease-out;
}

@keyframes mc-modal-in {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Title */
.mc-paywall-title, .mc-usage-modal h3,
.mc-usage-modal .mc-prompt-title {
    font-size: 1.375rem !important; font-weight: 700 !important;
    color: #F5F5F7 !important; margin: 0 0 12px !important;
    letter-spacing: -0.02em; line-height: 1.3;
}

/* Description */
.mc-paywall-desc, .mc-usage-modal p,
.mc-usage-modal .mc-prompt-text {
    color: #888896 !important; font-size: 0.9375rem !important;
    line-height: 1.6 !important; margin: 0 0 32px !important; font-weight: 300 !important;
}

/* Actions container */
.mc-paywall-actions,
.mc-usage-modal .mc-prompt-actions {
    display: flex; flex-direction: column; gap: 12px;
}

/* Buttons — luxury pill style */
.mc-paywall-btn,
.mc-usage-modal .mc-prompt-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 24px; border-radius: 50px;
    font-weight: 600; font-size: 0.9375rem;
    text-decoration: none; cursor: pointer; border: none;
    transition: all 0.2s ease; width: 100%; box-sizing: border-box; line-height: 1;
}

.mc-paywall-btn--primary,
.mc-usage-modal .mc-prompt-btn--primary {
    background: #FF2E86; color: #fff;
    box-shadow: 0 4px 24px rgba(255, 46, 134, 0.2);
}

.mc-paywall-btn--primary:hover,
.mc-usage-modal .mc-prompt-btn--primary:hover {
    background: #E0276F; box-shadow: 0 6px 32px rgba(255, 46, 134, 0.3);
    transform: translateY(-1px); color: #fff; text-decoration: none;
}

.mc-paywall-btn--ghost,
.mc-usage-modal .mc-prompt-btn--ghost {
    background: transparent; color: #E0E0E4;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
}

.mc-paywall-btn--ghost:hover,
.mc-usage-modal .mc-prompt-btn--ghost:hover {
    border-color: rgba(255, 255, 255, 0.35); color: #fff; text-decoration: none;
}

/* Maybe Later / close button in usage modal */
.mc-usage-modal .mc-btn-secondary,
.mc-usage-modal .mc-usage-close {
    background: transparent !important; color: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 50px !important;
    padding: 12px 24px !important; font-size: 0.875rem !important; font-weight: 500 !important;
    cursor: pointer; width: 100%; margin-top: 4px; transition: all 0.2s ease;
    min-height: auto !important;
}

.mc-usage-modal .mc-btn-secondary:hover,
.mc-usage-modal .mc-usage-close:hover {
    color: rgba(255, 255, 255, 0.7) !important; border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Hide old divider */
.mc-usage-divider { display: none !important; }

/* Override inline-styled buttons inside usage modal */
.mc-usage-modal .mc-btn-primary {
    background: #FF2E86 !important; color: #fff !important;
    border-radius: 50px !important; padding: 14px 24px !important;
    font-weight: 600 !important; font-size: 0.9375rem !important;
    box-shadow: 0 4px 24px rgba(255, 46, 134, 0.2) !important;
    border: none !important; text-decoration: none !important;
    width: 100% !important; box-sizing: border-box !important; margin-bottom: 8px !important;
    display: block !important; text-align: center !important;
    min-height: auto !important; text-transform: none !important; letter-spacing: normal !important;
}

.mc-usage-modal .mc-btn-primary:hover {
    background: #E0276F !important;
}


/* ═══════════════════════════════════════
   FADE-IN ANIMATION
   ═══════════════════════════════════════ */

#music-composer-app .mc-header,
#music-composer-app .mc-card {
    animation: mc-fade-up var(--duration-medium) var(--ease-decelerate) both;
}

#music-composer-app .mc-card {
    animation-delay: 0.1s;
}

@keyframes mc-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */

@media (max-width: 640px) {
    #music-composer-app {
        padding: var(--space-6) var(--space-4) var(--space-16) !important;
    }

    #music-composer-app .mc-card {
        padding: var(--card-padding) !important;
        border-radius: var(--radius-lg) !important;
    }

    #music-composer-app .mc-header {
        margin-bottom: var(--space-6) !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: var(--space-3) !important;
    }

    #music-composer-app .mc-meter-bar {
        width: 60px !important;
    }

    #music-composer-app .mc-audio-options {
        flex-direction: column !important;
        gap: var(--space-4) !important;
    }

    #music-composer-app .mc-option-divider {
        display: none !important;
    }

    #music-composer-app .mc-option--duration {
        min-width: 0 !important;
        width: 100% !important;
    }

    #music-composer-app .mc-custom-select-trigger {
        min-height: 48px !important;
        padding: var(--space-4) var(--space-8) var(--space-4) var(--space-4) !important;
        font-size: var(--text-body) !important;
    }

    #music-composer-app .mc-custom-option {
        padding: var(--space-4) !important;
        font-size: var(--text-body) !important;
    }

    #music-composer-app .mc-btn-primary {
        min-height: 48px !important;
        font-size: var(--text-overline) !important;
        letter-spacing: var(--tracking-wider) !important;
    }

    #music-composer-app .mc-trim-actions {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .mc-paywall-card, .mc-usage-modal {
        padding: var(--space-8) var(--space-5) !important;
    }
}