/* ─── Fonts loaded via PHP wp_enqueue_style (see fems-music-player.php) ─── */

/* ─── Design tokens ──────────────────────────────────────────────────────── */
.fems-player-wrap.fems-skin-dark,
.fems-bottom-bar.fems-skin-dark {
    --fems-bg-base:        #0d0d0f;
    --fems-bg-card:        #131316;
    --fems-bg-elevated:    #1a1a1e;
    --fems-bg-hover:       rgba(255,255,255,0.06);
    --fems-border:         rgba(255,255,255,0.08);
    --fems-border-subtle:  rgba(255,255,255,0.04);
    --fems-text-primary:   #f0f0f2;
    --fems-text-secondary: #a0a0b0;
    --fems-text-tertiary:  #565668;
}

.fems-player-wrap.fems-skin-light,
.fems-bottom-bar.fems-skin-light {
    --fems-bg-base:        #f5f5f7;
    --fems-bg-card:        #ffffff;
    --fems-bg-elevated:    #f0f0f4;
    --fems-bg-hover:       rgba(0,0,0,0.05);
    --fems-border:         rgba(0,0,0,0.08);
    --fems-border-subtle:  rgba(0,0,0,0.04);
    --fems-text-primary:   #111114;
    --fems-text-secondary: #555566;
    --fems-text-tertiary:  #aaaabc;
}

/* ─── Font size modifiers ────────────────────────────────────────────────── */
.fems-player-wrap.fems-fs-small  { font-size: 13px !important; }
.fems-player-wrap.fems-fs-medium { font-size: 15px !important; }
.fems-player-wrap.fems-fs-large  { font-size: 17px !important; }

/* ─── Scoped reset ───────────────────────────────────────────────────────── */
.fems-player-wrap *,
.fems-player-wrap *::before,
.fems-player-wrap *::after,
.fems-bottom-bar *,
.fems-bottom-bar *::before,
.fems-bottom-bar *::after {
    box-sizing:      border-box !important;
    margin:          0 !important;
    padding:         0 !important;
    border:          none !important;
    outline:         none !important;
    background:      transparent !important;
    font-family:     'Syne', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size:       inherit !important;
    line-height:     1.4 !important;
    color:           inherit !important;
    text-decoration: none !important;
    list-style:      none !important;
    -webkit-appearance: none !important;
    appearance:      none !important;
}

/* Preserve background-image on artwork thumbnails */
.fems-player-wrap .fems-q-thumb[style*="background-image"],
.fems-bottom-bar  .fems-bp-thumb[style*="background-image"] {
    background: unset !important;
    background-size:     cover !important;
    background-position: center !important;
    background-repeat:   no-repeat !important;
}

/* ─── Player wrapper ─────────────────────────────────────────────────────── */
.fems-player-wrap {
    font-family: 'Syne', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size:   13px !important;
    line-height: 1.4 !important;
    color:       var(--fems-text-primary) !important;
    position:    relative !important;
    max-width:   100% !important;
}

/* ─── Card — two-panel layout ────────────────────────────────────────────── */
.fems-player-wrap .fems-card {
    background:    var(--fems-bg-card) !important;
    border-radius: 16px !important;
    overflow:      hidden !important;
    display:       flex !important;
    flex-direction:column !important;
    height:        640px !important; /* Fixed total height */
    box-shadow:    0 8px 40px rgba(0,0,0,0.45) !important;
}

/* ── Upper panel — fixed 50%, artwork-driven background ──────────────────── */
.fems-player-wrap .fems-upper-panel {
    flex:          0 0 50% !important;
    display:       flex !important;
    flex-direction:column !important;
    position:      relative !important;
    overflow:      hidden !important;
    background:    var(--fems-art-gradient, linear-gradient(180deg,#1a1a2e 0%,#0d0d0f 100%)) !important;
    transition:    background 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background-blend-mode: normal !important;
}

/* Noise texture overlay for depth */
.fems-player-wrap .fems-upper-panel::after {
    content:  '' !important;
    position: absolute !important;
    inset:    0 !important;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E") !important;
    pointer-events: none !important;
    z-index:  1 !important;
}

/* ── Header: artwork + title ─────────────────────────────────────────────── */
.fems-player-wrap .fems-header {
    display:        flex !important;
    align-items:    center !important;
    gap:            18px !important;
    padding:        24px 22px 16px !important;
    position:       relative !important;
    z-index:        2 !important;
    flex:           1 !important;
}

.fems-player-wrap .fems-artwork {
    width:         100px !important;
    height:        100px !important;
    border-radius: 10px !important;
    flex-shrink:   0 !important;
    overflow:      hidden !important;
    position:      relative !important;
    box-shadow:    0 8px 24px rgba(0,0,0,0.55) !important;
    background:    var(--fems-bg-elevated) !important;
}

.fems-player-wrap .fems-artwork-img {
    position:   absolute !important;
    inset:      0 !important;
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    display:    block !important;
}

.fems-player-wrap .fems-artwork-bars {
    position:    relative !important;
    z-index:     1 !important;
    display:     flex !important;
    align-items: flex-end !important;
    gap:         2px !important;
    height:      100% !important;
    padding:     0 8px 8px !important;
}

.fems-player-wrap .fems-track-info {
    flex:      1 !important;
    min-width: 0 !important;
}

.fems-player-wrap .fems-track-title {
    font-size:      20px !important;
    font-weight:    700 !important;
    color:          #ffffff !important;
    white-space:    nowrap !important;
    overflow:       hidden !important;
    text-overflow:  ellipsis !important;
    margin-bottom:  5px !important;
    letter-spacing: -0.02em !important;
    display:        block !important;
    text-shadow:    0 1px 8px rgba(0,0,0,0.4) !important;
}

.fems-player-wrap .fems-track-sub {
    font-family:  'Syne', sans-serif !important;
    font-size:    13px !important;
    font-weight:  400 !important;
    color:        rgba(255,255,255,0.65) !important;
    display:      block !important;
    margin-bottom:8px !important;
}

.fems-player-wrap .fems-dur-badge {
    font-family:   'DM Mono', 'Courier New', monospace !important;
    font-size:     10px !important;
    color:         rgba(255,255,255,0.45) !important;
    background:    rgba(0,0,0,0.25) !important;
    border-radius: 4px !important;
    padding:       2px 7px !important;
    display:       inline-block !important;
}

/* ── Waveform + controls ──────────────────────────────────────────────────── */
.fems-player-wrap .fems-controls {
    padding:  0 22px 16px !important;
    position: relative !important;
    z-index:  2 !important;
}

.fems-player-wrap .fems-waveform-row {
    display: none !important;
}

.fems-player-wrap .fems-time {
    font-family: 'DM Mono', 'Courier New', monospace !important;
    font-size:   10px !important;
    font-weight: 300 !important;
    color:       rgba(255,255,255,0.4) !important;
    min-width:   28px !important;
    display:     inline-block !important;
}
.fems-player-wrap .fems-time--total { text-align: right !important; }

.fems-player-wrap .fems-waveform {
    display: none !important;
}

/* Mirrored waveform columns */
.fems-player-wrap .fems-wf-col {
    flex:             1 !important;
    display:          flex !important;
    flex-direction:   column !important;
    align-items:      center !important;
    justify-content:  center !important;
    gap:              2px !important;
    cursor:           pointer !important;
}

.fems-player-wrap .fems-wf-top,
.fems-player-wrap .fems-wf-bot {
    width:         100% !important;
    border-radius: 2px 2px 0 0 !important;
    display:       block !important;
    min-height:    2px !important;
    transition:    opacity 0.08s !important;
}

.fems-player-wrap .fems-wf-bot {
    border-radius: 0 0 2px 2px !important;
    transform:     scaleY(-1) !important;
}

.fems-player-wrap .fems-wf-col--played   .fems-wf-top { background: rgba(255,255,255,0.9) !important; opacity: 1 !important; }
.fems-player-wrap .fems-wf-col--played   .fems-wf-bot { background: rgba(255,255,255,0.9) !important; opacity: 0.2 !important; }
.fems-player-wrap .fems-wf-col--cursor   .fems-wf-top { background: rgba(255,255,255,0.7) !important; opacity: 1 !important; }
.fems-player-wrap .fems-wf-col--cursor   .fems-wf-bot { background: rgba(255,255,255,0.7) !important; opacity: 0.15 !important; }
.fems-player-wrap .fems-wf-col--unplayed .fems-wf-top { background: rgba(255,255,255,1) !important; opacity: 0.18 !important; }
.fems-player-wrap .fems-wf-col--unplayed .fems-wf-bot { background: rgba(255,255,255,1) !important; opacity: 0.05 !important; }

/* Controls row */
.fems-player-wrap .fems-ctrl-row {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    gap:             10px !important;
}


/* ── Inline metadata: BPM · Key · Duration in controls row ──────────────── */
.fems-player-wrap .fems-meta-inline {
    display:     flex !important;
    align-items: center !important;
    gap:         10px !important;
    flex:        1 !important;
    justify-content: center !important;
}

.fems-player-wrap .fems-meta-inline-item {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    gap:            2px !important;
}

.fems-player-wrap .fems-meta-inline .fems-meta-key {
    font-family:    'DM Mono', 'Courier New', monospace !important;
    font-size:      8px !important;
    font-weight:    400 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color:          rgba(255,255,255,0.35) !important;
    display:        block !important;
    margin-bottom:  0 !important;
}

.fems-player-wrap .fems-meta-inline .fems-meta-val {
    font-size:   14px !important;
    font-weight: 700 !important;
    color:       rgba(255,255,255,0.9) !important;
    display:     block !important;
}

.fems-player-wrap .fems-meta-inline-sep {
    color:      rgba(255,255,255,0.2) !important;
    font-size:  16px !important;
    font-weight:300 !important;
    margin-top: 10px !important;
}

.fems-player-wrap .fems-ctrl-group {
    display:     flex !important;
    align-items: center !important;
    gap:         4px !important;
}

.fems-player-wrap .fems-btn {
    width:           34px !important;
    height:          34px !important;
    border-radius:   50% !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    cursor:          pointer !important;
    color:           rgba(255,255,255,0.65) !important;
    background:      transparent !important;
    transition:      background 0.12s, color 0.12s !important;
    flex-shrink:     0 !important;
}
.fems-player-wrap .fems-btn:hover {
    background: rgba(255,255,255,0.12) !important;
    color:      #ffffff !important;
}

.fems-player-wrap .fems-btn--play {
    width:         46px !important;
    height:        46px !important;
    border-radius: 50% !important;
    background:    #ffffff !important;
    color:         #0d0d0f !important;
    margin:        0 6px !important;
    box-shadow:    0 4px 16px rgba(0,0,0,0.35) !important;
    transition:    transform 0.1s, opacity 0.12s !important;
}
.fems-player-wrap .fems-btn--play:hover {
    background: #ffffff !important;
    opacity:    0.9 !important;
    color:      #0d0d0f !important;
}
.fems-player-wrap .fems-btn--play:active { transform: scale(0.95) !important; }

.fems-player-wrap .fems-vol-group {
    display:     flex !important;
    align-items: center !important;
    gap:         6px !important;
}

.fems-player-wrap .fems-vol-slider {
    -webkit-appearance: none !important;
    width:         60px !important;
    height:        3px !important;
    border-radius: 2px !important;
    background:    rgba(255,255,255,0.2) !important;
    cursor:        pointer !important;
    display:       block !important;
}
.fems-player-wrap .fems-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width:         12px !important;
    height:        12px !important;
    border-radius: 50% !important;
    background:    #ffffff !important;
    cursor:        pointer !important;
}
.fems-player-wrap .fems-vol-slider::-moz-range-thumb {
    width:         12px !important;
    height:        12px !important;
    border-radius: 50% !important;
    background:    #ffffff !important;
    border:        none !important;
}

/* ── Metadata strip ───────────────────────────────────────────────────────── */
.fems-player-wrap .fems-meta-strip {
    display: none !important;
}

.fems-player-wrap .fems-meta-cell {
    padding: 0 12px 0 0 !important;
}
.fems-player-wrap .fems-meta-cell:first-child { padding-left: 0 !important; }

.fems-player-wrap .fems-meta-key {
    font-family:    'DM Mono', 'Courier New', monospace !important;
    font-size:      9px !important;
    font-weight:    400 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color:          rgba(255,255,255,0.4) !important;
    margin-bottom:  3px !important;
    display:        block !important;
}

.fems-player-wrap .fems-meta-val {
    font-size:   15px !important;
    font-weight: 700 !important;
    color:       rgba(255,255,255,0.9) !important;
    display:     block !important;
}

/* ── Footer: tags + CTAs ──────────────────────────────────────────────────── */
.fems-player-wrap .fems-footer {
    padding:  0 22px 20px !important;
    position: relative !important;
    z-index:  2 !important;
}

.fems-player-wrap .fems-tags {
    display:       flex !important;
    gap:           5px !important;
    flex-wrap:     wrap !important;
    margin-bottom: 12px !important;
}

.fems-player-wrap .fems-tag {
    font-family:   'DM Mono', 'Courier New', monospace !important;
    font-size:     10px !important;
    color:         rgba(255,255,255,0.55) !important;
    background:    rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    padding:       3px 10px !important;
    display:       inline-block !important;
}

.fems-player-wrap .fems-cta-row {
    display:     flex !important;
    align-items: center !important;
    gap:         6px !important;
    flex-wrap:   wrap !important;
    padding:     0 !important;
}

.fems-player-wrap .fems-btn-dl {
    display:       flex !important;
    align-items:   center !important;
    gap:           5px !important;
    font-family:   'Syne', sans-serif !important;
    font-size:     11px !important;
    font-weight:   600 !important;
    color:         #0d0d0f !important;
    background:    #ffffff !important;
    border-radius: 20px !important;
    padding:       6px 13px !important;
    cursor:        pointer !important;
    white-space:   nowrap !important;
    transition:    opacity 0.12s !important;
    text-transform:none !important;
    flex-shrink:   0 !important;
}
.fems-player-wrap .fems-btn-dl:hover { opacity: 0.85 !important; }

.fems-player-wrap .fems-btn-dl--secondary {
    background: rgba(255,255,255,0.15) !important;
    color:      rgba(255,255,255,0.9) !important;
    flex-shrink:0 !important;
}
.fems-player-wrap .fems-btn-dl--secondary:hover {
    background: rgba(255,255,255,0.2) !important;
    opacity:    1 !important;
}

.fems-player-wrap .fems-btn-alts {
    font-family:           'Syne', sans-serif !important;
    font-size:             11px !important;
    font-weight:           400 !important;
    color:                 rgba(255,255,255,0.5) !important;
    background:            transparent !important;
    cursor:                pointer !important;
    text-decoration:       underline !important;
    text-underline-offset: 3px !important;
    text-decoration-color: rgba(255,255,255,0.2) !important;
    white-space:           nowrap !important;
    text-transform:        none !important;
    flex-shrink:           1 !important;
    min-width:             0 !important;
}
.fems-player-wrap .fems-btn-alts:hover { color: rgba(255,255,255,0.75) !important; }

/* ── Lower panel — scrollable queue ──────────────────────────────────────── */
.fems-player-wrap .fems-lower-panel {
    flex:       0 0 50% !important;
    display:    flex !important;
    flex-direction: column !important;
    background: var(--fems-bg-card) !important;
    overflow:   hidden !important;
    position:   relative !important;
}

.fems-player-wrap .fems-queue {
    flex:       1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.1) transparent !important;
}

.fems-player-wrap .fems-queue::-webkit-scrollbar {
    width: 4px !important;
}
.fems-player-wrap .fems-queue::-webkit-scrollbar-track {
    background: transparent !important;
}
.fems-player-wrap .fems-queue::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1) !important;
    border-radius: 2px !important;
}

.fems-player-wrap .fems-queue-header {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    padding:         14px 22px 10px !important;
    font-family:     'DM Mono', 'Courier New', monospace !important;
    font-size:       10px !important;
    letter-spacing:  0.1em !important;
    text-transform:  uppercase !important;
    color:           var(--fems-text-tertiary) !important;
    position:        sticky !important;
    top:             0 !important;
    background:      var(--fems-bg-card) !important;
    z-index:         2 !important;
    box-shadow:      0 1px 0 var(--fems-border-subtle) !important;
}

.fems-player-wrap .fems-queue-count {
    background:    var(--fems-bg-elevated) !important;
    border-radius: 20px !important;
    padding:       2px 8px !important;
    font-size:     10px !important;
    color:         var(--fems-text-tertiary) !important;
}

.fems-player-wrap .fems-queue-item {
    display:        flex !important;
    align-items:    center !important;
    gap:            12px !important;
    padding:        10px 22px !important;
    cursor:         pointer !important;
    transition:     background 0.1s !important;
    pointer-events: auto !important;
    user-select:    none !important;
    -webkit-user-select: none !important;
}

.fems-player-wrap .fems-queue-item > * {
    pointer-events: none !important;
}

.fems-player-wrap .fems-queue-item:hover      { background: var(--fems-bg-hover) !important; }
.fems-player-wrap .fems-queue-item.is-active  { background: var(--fems-bg-elevated) !important; }

.fems-player-wrap .fems-q-num {
    font-family: 'DM Mono', 'Courier New', monospace !important;
    font-size:   11px !important;
    font-weight: 300 !important;
    color:       var(--fems-text-tertiary) !important;
    min-width:   18px !important;
    text-align:  center !important;
    display:     inline-block !important;
}
.fems-player-wrap .fems-queue-item.is-active .fems-q-num {
    color:       var(--fems-accent, #c8ff00) !important;
    font-weight: 500 !important;
    opacity:     0 !important;
}

.fems-player-wrap .fems-q-thumb {
    width:         36px !important;
    height:        36px !important;
    border-radius: 6px !important;
    flex-shrink:   0 !important;
    background:    var(--fems-bg-elevated) !important;
    display:       block !important;
    overflow:      hidden !important;
    position:      relative !important;
}

.fems-player-wrap .fems-q-thumb-img {
    width:         100% !important;
    height:        100% !important;
    object-fit:    cover !important;
    display:       block !important;
    border-radius: 6px !important;
    position:      absolute !important;
    inset:         0 !important;
}

.fems-player-wrap .fems-q-info { flex: 1 !important; min-width: 0 !important; }

.fems-player-wrap .fems-q-title {
    font-size:     12px !important;
    font-weight:   500 !important;
    color:         var(--fems-text-primary) !important;
    white-space:   nowrap !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 2px !important;
    display:       block !important;
}
.fems-player-wrap .fems-queue-item.is-active .fems-q-title {
    color: var(--fems-accent, #c8ff00) !important;
}

.fems-player-wrap .fems-q-meta {
    font-family: 'DM Mono', 'Courier New', monospace !important;
    font-size:   10px !important;
    color:       var(--fems-text-tertiary) !important;
    display:     block !important;
}

.fems-player-wrap .fems-q-play-icon {
    color:       var(--fems-accent, #c8ff00) !important;
    flex-shrink: 0 !important;
    opacity:     0 !important;
    transition:  opacity 0.1s !important;
    display:     block !important;
    width:       18px !important;
    height:      18px !important;
    margin-left: 4px !important;
}
.fems-player-wrap .fems-queue-item.is-active .fems-q-play-icon    { opacity: 1 !important; }
.fems-player-wrap .fems-queue-item:hover:not(.is-active) .fems-q-play-icon {
    opacity: 0.35 !important;
    color:   var(--fems-text-secondary) !important;
}

/* ── Queue row waveform — Musicbed style ─────────────────────────────────── */
.fems-player-wrap .fems-q-waveform {
    display:         flex !important;
    align-items:     center !important;
    gap:             1.5px !important;
    height:          28px !important;
    width:           80px !important;
    flex-shrink:     0 !important;
    cursor:          pointer !important;
    opacity:         0.35 !important;
    transition:      opacity 0.15s !important;
}

/* Active row waveform — full opacity, shows progress */
.fems-player-wrap .fems-queue-item.is-active .fems-q-waveform {
    opacity: 1 !important;
}

/* Hover on inactive rows — slight lift */
.fems-player-wrap .fems-queue-item:hover .fems-q-waveform {
    opacity: 0.6 !important;
}

/* Waveform column inside queue row — single upward bar only (not mirrored) */
.fems-player-wrap .fems-q-wf-col {
    flex:          1 !important;
    display:       flex !important;
    flex-direction:column !important;
    align-items:   center !important;
    justify-content: flex-end !important;
    height:        100% !important;
}

.fems-player-wrap .fems-q-wf-bar {
    width:         100% !important;
    border-radius: 1px 1px 0 0 !important;
    display:       block !important;
    min-height:    2px !important;
    transition:    opacity 0.08s !important;
}

/* Inactive rows — all bars same muted colour */
.fems-player-wrap .fems-queue-item:not(.is-active) .fems-q-wf-bar {
    background: var(--fems-text-secondary, #a0a0b0) !important;
    opacity:    1 !important;
}

/* Active row — played state */
.fems-player-wrap .fems-queue-item.is-active .fems-q-wf-col--played .fems-q-wf-bar {
    background: rgba(255,255,255,0.9) !important;
    opacity:    1 !important;
}

/* Active row — cursor/playhead */
.fems-player-wrap .fems-queue-item.is-active .fems-q-wf-col--cursor .fems-q-wf-bar {
    background: rgba(255,255,255,0.6) !important;
    opacity:    1 !important;
}

/* Active row — unplayed state */
.fems-player-wrap .fems-queue-item.is-active .fems-q-wf-col--unplayed .fems-q-wf-bar {
    background: rgba(255,255,255,0.25) !important;
    opacity:    1 !important;
}

/* Mobile — hide waveform in queue on narrow screens */
@media (max-width: 480px) {
    .fems-player-wrap .fems-q-waveform { display: none !important; }
}

/* ── Embed bar ────────────────────────────────────────────────────────────── */
.fems-player-wrap .fems-embed-bar {
    display:         flex !important;
    align-items:     center !important;
    justify-content: flex-end !important;
    padding:         10px 22px !important;
    background:      var(--fems-bg-card) !important;
    box-shadow:      inset 0 1px 0 var(--fems-border-subtle) !important;
}
.fems-player-wrap.fems-is-embed .fems-embed-bar { display: none !important; }

/* ─── Modal ──────────────────────────────────────────────────────────────── */
.fems-player-wrap .fems-modal {
    display:         none !important;
    position:        fixed !important;
    inset:           0 !important;
    background:      rgba(0,0,0,0.7) !important;
    z-index:         99999 !important;
    align-items:     center !important;
    justify-content: center !important;
    padding:         24px !important;
    backdrop-filter: blur(4px) !important;
}
.fems-player-wrap .fems-modal.is-open { display: flex !important; }

.fems-player-wrap .fems-modal-inner {
    background:    #1a1a1e !important;
    box-shadow:    0 24px 60px rgba(0,0,0,0.6) !important;
    border-radius: 16px !important;
    padding:       28px !important;
    width:         100% !important;
    max-width:     440px !important;
    position:      relative !important;
    color:         var(--fems-text-primary) !important;
}

.fems-player-wrap .fems-modal-inner h3 {
    font-size:     16px !important;
    font-weight:   700 !important;
    color:         #ffffff !important;
    margin-bottom: 4px !important;
    display:       block !important;
}

.fems-player-wrap .fems-modal-track-name {
    font-family:   'DM Mono', monospace !important;
    font-size:     11px !important;
    color:         rgba(255,255,255,0.4) !important;
    margin-bottom: 20px !important;
    display:       block !important;
}

.fems-player-wrap .fems-modal-close {
    position:   absolute !important;
    top:        16px !important;
    right:      16px !important;
    background: transparent !important;
    color:      rgba(255,255,255,0.4) !important;
    font-size:  20px !important;
    cursor:     pointer !important;
    padding:    4px !important;
    transition: color 0.12s !important;
}
.fems-player-wrap .fems-modal-close:hover { color: #ffffff !important; }

.fems-player-wrap .fems-form-field { margin-bottom: 14px !important; }

.fems-player-wrap .fems-form-field label {
    display:       block !important;
    font-size:     11px !important;
    color:         rgba(255,255,255,0.5) !important;
    margin-bottom: 5px !important;
    font-family:   'DM Mono', monospace !important;
}

.fems-player-wrap .fems-input {
    display:       block !important;
    width:         100% !important;
    background:    rgba(255,255,255,0.06) !important;
    border-radius: 8px !important;
    padding:       10px 14px !important;
    font-family:   'Syne', sans-serif !important;
    font-size:     13px !important;
    color:         #ffffff !important;
    transition:    background 0.12s !important;
    resize:        vertical !important;
}
.fems-player-wrap .fems-input:focus {
    background: rgba(255,255,255,0.1) !important;
}
.fems-player-wrap .fems-input::placeholder {
    color: rgba(255,255,255,0.25) !important;
}

.fems-player-wrap .fems-modal-footer {
    display:     flex !important;
    align-items: center !important;
    gap:         12px !important;
    margin-top:  20px !important;
}

.fems-player-wrap .fems-btn-submit {
    font-family:   'Syne', sans-serif !important;
    font-size:     12px !important;
    font-weight:   600 !important;
    color:         #0d0d0f !important;
    background:    #ffffff !important;
    border-radius: 20px !important;
    padding:       9px 22px !important;
    cursor:        pointer !important;
    transition:    opacity 0.12s !important;
    text-transform:none !important;
}
.fems-player-wrap .fems-btn-submit:hover { opacity: 0.88 !important; }

.fems-player-wrap .fems-modal-feedback {
    font-size:   12px !important;
    font-family: 'DM Mono', monospace !important;
    color:       rgba(255,255,255,0.5) !important;
}
.fems-player-wrap .fems-feedback--success { color: #4ade80 !important; }
.fems-player-wrap .fems-feedback--error   { color: #f87171 !important; }

/* ─── Fixed bottom bar ───────────────────────────────────────────────────── */
.fems-bottom-bar {
    position:        fixed !important;
    bottom:          0 !important;
    left:            0 !important;
    right:           0 !important;
    z-index:         9999 !important;
    display:         flex !important;
    flex-direction:  row !important;
    align-items:     center !important;
    flex-wrap:       nowrap !important;
    gap:             14px !important;
    padding:         10px 24px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow:      inset 0 0.5px 0 rgba(255,255,255,0.08) !important;
    transition:      background 0.6s ease !important;
}

/* Base skin colours — artwork tint layered on top via inline style from JS */
.fems-bottom-bar.fems-skin-dark {
    background: rgba(13,13,15,0.92) !important;
}
.fems-bottom-bar.fems-skin-light {
    background: rgba(255,255,255,0.92) !important;
}

.fems-bottom-bar .fems-bp-inner {
    display:     flex !important;
    align-items: center !important;
    gap:         14px !important;
    flex:        1 !important;
    min-width:   0 !important;
    overflow:    hidden !important;
}

.fems-bottom-bar .fems-bp-thumb {
    width:         40px !important;
    height:        40px !important;
    border-radius: 6px !important;
    flex-shrink:   0 !important;
    background:    var(--fems-bg-elevated) !important;
    overflow:      hidden !important;
    position:      relative !important;
    display:       block !important;
    box-shadow:    0 2px 8px rgba(0,0,0,0.4) !important;
}

.fems-bottom-bar .fems-bp-thumb-img {
    position:      absolute !important;
    inset:         0 !important;
    width:         100% !important;
    height:        100% !important;
    object-fit:    cover !important;
    border-radius: 6px !important;
    display:       block !important;
}

.fems-bottom-bar .fems-bp-info { flex: 1 !important; min-width: 0 !important; }

.fems-bottom-bar .fems-bp-title-row {
    display: block !important;
    overflow: hidden !important;
}

.fems-bottom-bar .fems-bp-title {
    font-size:     13px !important;
    font-weight:   600 !important;
    color:         var(--fems-text-primary) !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
    white-space:   nowrap !important;
    display:       block !important;
    line-height:   1.3 !important;
}

.fems-bottom-bar .fems-bp-divider {
    display: none !important;
}

.fems-bottom-bar .fems-bp-artist {
    font-size:     11px !important;
    font-weight:   400 !important;
    color:         var(--fems-text-secondary) !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
    white-space:   nowrap !important;
    display:       block !important;
    line-height:   1.3 !important;
}

.fems-bottom-bar .fems-bp-sub {
    font-family: 'DM Mono', monospace !important;
    font-size:   10px !important;
    color:       var(--fems-text-tertiary) !important;
    display:     block !important;
    white-space: nowrap !important;
    overflow:    hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
}

.fems-bottom-bar .fems-bp-ctrl {
    display:     flex !important;
    align-items: center !important;
    gap:         2px !important;
    flex-shrink: 0 !important;
}

.fems-bottom-bar .fems-btn {
    width:           30px !important;
    height:          30px !important;
    border-radius:   50% !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    cursor:          pointer !important;
    color:           var(--fems-text-secondary) !important;
    background:      transparent !important;
    transition:      background 0.12s !important;
}
.fems-bottom-bar .fems-btn:hover {
    background: var(--fems-bg-elevated) !important;
    color:      var(--fems-text-primary) !important;
}
.fems-bottom-bar .fems-btn--play {
    width:         34px !important;
    height:        34px !important;
    background:    var(--fems-text-primary) !important;
    color:         var(--fems-bg-base, #0d0d0f) !important;
    margin:        0 2px !important;
}
.fems-bottom-bar .fems-btn--play:hover {
    background: var(--fems-text-primary) !important;
    opacity:    0.85 !important;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .fems-player-wrap .fems-card { height: 580px !important; }
    .fems-player-wrap .fems-artwork { width: 70px !important; height: 70px !important; }
    .fems-player-wrap .fems-track-title { font-size: 16px !important; }
    .fems-bottom-bar { padding: 8px 14px !important; }
}