/**
 * Meldo Chord Collection - Frontend Styles
 * Design: Modern, app-artig, frisch, musikalisch, freundlich
 * Colors: #3D7C85, #E8924F, #FAF8F3, #111416
 * Fonts: Akko (Titel), Akko (Text)
 */

/* Google Fonts for Leadsheet Jazz notation */
/* v4.32.287: Google-Fonts-Import entfernt.
   Er haette die lokale Auslieferung ausgehebelt — ein @import im
   Stylesheet laedt unabhaengig davon, was PHP einbindet.
   Die Schriften kommen jetzt ueber wp_enqueue_style, lokal wenn
   heruntergeladen, sonst extern (siehe MCC_Local_Assets). */

/* Bravura Text (SMuFL music notation font) */
@font-face {
    font-family: 'Bravura Text';
    src: url('https://cdn.jsdelivr.net/gh/steinbergmedia/bravura@master/redist/otf/BravuraText.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ===== CSS Variables ===== */
:root {
    /* Meldo Colors */
    --mcc-primary: #3D7C85;
    --mcc-primary-dark: #32656D;
    --mcc-primary-light: #47909A;
    --mcc-accent: #E8924F;
    --mcc-accent-dark: #E47721;
    --mcc-accent-light: #E59F6B;
    --mcc-background: #FAF8F3;
    --mcc-dark: #111416;
    --mcc-dark-light: #3D3D3D;
    
    /* Neutral Colors */
    --mcc-white: #FFFFFF;
    --mcc-gray-50: #FAFBFC;
    --mcc-gray-100: #F0F2F5;
    --mcc-gray-200: #E4E7EB;
    --mcc-gray-300: #CBD2D9;
    --mcc-gray-400: #9AA5B1;
    --mcc-gray-500: #7B8794;
    --mcc-gray-600: #616E7C;
    --mcc-gray-700: #52606D;
    --mcc-gray-800: #3E4C59;
    
    /* Semantic Colors */
    --mcc-success: #10B981;
    --mcc-warning: #F59E0B;
    --mcc-error: #EF4444;
    --mcc-info: #3B82F6;
    
    /* Typography */
    --mcc-font-title: 'Akko', -apple-system, BlinkMacSystemFont, sans-serif;
    --mcc-font-body: 'Akko', -apple-system, BlinkMacSystemFont, sans-serif;
    --mcc-font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    
    /* Spacing */
    --mcc-space-xs: 0.25rem;
    --mcc-space-sm: 0.5rem;
    --mcc-space-md: 1rem;
    --mcc-space-lg: 1.5rem;
    --mcc-space-xl: 2rem;
    --mcc-space-2xl: 3rem;

    /* v4.32.175: Geteilte Content-Breite — Header & Inhalt IMMER bündig */
    --mcc-content-max: 1400px;
    --mcc-content-pad: 32px;
    
    /* Border Radius */
    --mcc-radius-sm: 8px;
    --mcc-radius-md: 12px;
    --mcc-radius-lg: 16px;
    --mcc-radius-xl: 24px;
    --mcc-radius-full: 9999px;
    
    /* Shadows */
    --mcc-shadow-sm: 0 2px 8px rgba(61, 124, 133, 0.08);
    --mcc-shadow-md: 0 4px 16px rgba(61, 124, 133, 0.12);
    --mcc-shadow-lg: 0 8px 32px rgba(61, 124, 133, 0.16);
    --mcc-shadow-glow: 0 0 20px rgba(232, 146, 79, 0.3);
    
    /* Transitions */
    --mcc-transition-fast: 100ms ease;
    --mcc-transition-normal: 150ms ease;
    --mcc-transition-slow: 400ms ease;
    --mcc-transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== Global Touch & Performance Optimizations ===== */
.mcc-app button,
.mcc-app a,
.mcc-app .mcc-song-card,
.mcc-app .mcc-content-tab,
.mcc-app .mcc-action-btn,
.mcc-app .mcc-tb-btn,
.mcc-app .mcc-stems-tab-btn,
.mcc-app .mcc-play-along-tab-btn,
.mcc-app [role="button"],
.mcc-app [onclick] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    user-select: none;
}

/* Mobile: Schnellere/Keine Transitions */
@media (max-width: 768px) {
    .mcc-app * {
        transition-duration: 50ms !important;
    }
    
    .mcc-app .mcc-song-card,
    .mcc-app .mcc-content-tab,
    .mcc-app .mcc-action-btn,
    .mcc-app .mcc-tb-btn {
        transition: none !important;
    }
    
    /* Keine Hover-Effekte auf Touch */
    .mcc-song-card:hover,
    .mcc-content-tab:hover,
    .mcc-action-btn:hover,
    .mcc-tb-btn:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }
}

/* ===== Dark Theme (Default for Player) ===== */
.mcc-playlist-player {
    --player-bg: #1a1a1a;
    --player-bg-secondary: #121212;
    --player-bg-card: #242424;
    --player-bg-hover: #2a2a2a;
    --player-text: #ffffff;
    --player-text-muted: rgba(255,255,255,0.6);
    --player-text-dim: rgba(255,255,255,0.4);
    --player-border: rgba(255,255,255,0.08);
    --player-accent: var(--mcc-primary);
    --player-accent-glow: rgba(61,124,133,0.3);
}

/* Light Theme for Player */
.mcc-playlist-player.light-theme {
    --player-bg: #ffffff;
    --player-bg-secondary: #FAF8F3;
    --player-bg-card: #ffffff;
    --player-bg-hover: #f0f2f5;
    --player-text: #111416;
    --player-text-muted: rgba(17,20,22,0.7);
    --player-text-dim: rgba(17,20,22,0.5);
    --player-border: rgba(0,0,0,0.08);
    --player-accent: var(--mcc-primary);
    --player-accent-glow: rgba(61,124,133,0.15);
}

/* ===== Base Styles ===== */
.mcc-app {
    font-family: var(--mcc-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--mcc-dark);
    background: var(--mcc-background);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mcc-app *,
.mcc-app *::before,
.mcc-app *::after {
    box-sizing: border-box;
}

/* Global SVG styles */
.mcc-app svg {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

/* ===== Header ===== */
.mcc-header {
    background: var(--mcc-white);
    padding: 8px 18px;
    position: sticky;
    top: 8px;
    z-index: 100;
    max-width: 1336px;
    width: calc(100% - 64px);
    box-sizing: border-box;
    margin: 8px auto 0;
    border-radius: var(--mcc-radius-lg);
    border: 0.5px solid var(--mcc-gray-200);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05);
}

.mcc-header::before {
    content: none;
}

.mcc-header-content {
    display: flex;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    gap: 14px;
}
/* v4.32.172: Einheitliche Befehlszeile — Logo | Übersicht | Suche (flex) | Pills | Counter | Drei-Punkte */
.mcc-header-content > .mcc-logo { order: 1; flex-shrink: 0; }
.mcc-header-content > #mcc-header-overview { order: 2; flex-shrink: 0; }
.mcc-header-content > .mcc-search-form-header { order: 3; flex: 1; min-width: 0; margin: 0; }
.mcc-header-content > .mcc-header-special-btns { order: 4; flex-shrink: 0; }
.mcc-header-content > .mcc-stats-mini { order: 5; flex-shrink: 0; }
.mcc-header-content > .mcc-header-nav { order: 6; flex-shrink: 0; }

.mcc-logo {
    display: flex;
    align-items: center;
    gap: var(--mcc-space-sm);
    color: var(--mcc-primary);
    flex-shrink: 0;
}

/* Navigation Buttons */
.mcc-header-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 24px;
}

.mcc-header-nav .mcc-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 38px;
    padding: 0 14px;
    background: var(--mcc-gray-100);
    border: 1px solid transparent;
    border-radius: var(--mcc-radius-sm);
    color: var(--mcc-gray-700);
    font-family: var(--mcc-font-body);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
/* Ensure overview button always uses flex when visible (jQuery .show() sets display:block) */
#mcc-header-overview[style*="display: block"] { display: flex !important; }
#mcc-header-overview[style*="display:block"] { display: flex !important; }
#mcc-header-overview {
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 38px !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: auto !important;
    background: var(--mcc-gray-100) !important;
    border: 1px solid transparent !important;
    border-radius: var(--mcc-radius-sm) !important;
    color: var(--mcc-gray-700) !important;
}
#mcc-header-overview span {
    display: inline !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

.mcc-header-nav .mcc-nav-btn:hover {
    background: var(--mcc-gray-200);
    border-color: transparent;
}

.mcc-header-nav .mcc-nav-btn svg {
    width: 16px;
    height: 16px;
}

/* Einstellungen Button: Nur Icon auf Desktop */
.mcc-header-nav .mcc-settings-btn span {
    display: none;
}

.mcc-header-nav .mcc-settings-btn {
    padding: 0 10px; /* Weniger Padding da kein Text */
    min-width: 38px;
}

/* Special Header Buttons Container - aligned with nav buttons */
.mcc-header-special-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 16px;
}

/* Special Header Buttons (Bibliothek, Audioplayer) - same height as nav */
.mcc-header-special-btn {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    background: var(--mcc-primary);
    border: none;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
    white-space: nowrap;
}

.mcc-header-special-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 2px 8px rgba(61, 124, 133, 0.25);
}

/* v4.32.392: keine feste Farbe hier — siehe Knopfregeln. */
.mcc-header-special-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
/* v4.32.391: Das Zeichen folgt der Schriftfarbe des Knopfes. Fest
   gesetztes color/fill stammte vom frueheren weissen Knopf und hat den
   Verlaufsknopf schwarzgruen gelassen. */
.mcc-audioplayer-btn svg {
    width: 20px !important;
    height: 20px !important;
}

.mcc-special-btn-label {
    font-family: 'Akko', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.mcc-audioplayer-btn .mcc-special-btn-label {
    color: var(--mcc-primary);
}

/* v4.32.176: Suche behält nutzbare Mindestbreite */
.mcc-search-form-header .mcc-search-input-group { min-width: 160px; }

/* v4.32.176: Mittlere Breiten — Pills nur Icon, damit das Suchfeld nicht erdrückt wird */
@media (min-width: 769px) and (max-width: 1180px) {
    .mcc-header-special-btns { margin-right: 8px; gap: 6px; }
    .mcc-header-special-btn { padding: 0; width: 38px; }
    .mcc-special-btn-label { display: none; }
}

.mcc-header-special-btn.mcc-audioplayer-btn {
    background: var(--mcc-white);
    color: var(--mcc-primary);
    border: 1px solid rgba(61, 124, 133, 0.35);
    box-shadow: none;
}

.mcc-header-special-btn.mcc-audioplayer-btn:hover {
    background: rgba(61, 124, 133, 0.06);
    box-shadow: none;
}

/* Force pill shape against BuddyBoss - desktop only */
@media (min-width: 769px) {
    body .mcc-app .mcc-header-special-btn,
    body #mcc-chord-collection .mcc-header-special-btn,
    html body .mcc-header-special-btn.mcc-library-btn,
    html body .mcc-header-special-btn.mcc-audioplayer-btn {
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        height: 36px !important;
        padding: 0 14px !important;
        border-radius: 20px !important;
        gap: 6px !important;
        display: flex !important;
        align-items: center !important;
    }
    body .mcc-special-btn-label {
        display: inline !important;
    }
}

/* Nav More Dropdown: Desktop wide = inline buttons, no toggle */
/* v4.32.168: Drei-Punkte-Menü auf ALLEN Bildschirmgrößen (Sekundär-Funktionen gebündelt) */
.mcc-nav-more-wrapper {
    display: block;
    position: relative;
}
.mcc-nav-more-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    background: var(--mcc-gray-100) !important;
    border: 1px solid transparent !important;
    border-radius: var(--mcc-radius-sm) !important;
    color: var(--mcc-gray-700) !important;
    cursor: pointer;
    transition: all 0.2s ease;
}
.mcc-nav-more-toggle:hover {
    background: var(--mcc-gray-200) !important;
}
.mcc-nav-more-toggle svg {
    width: 20px !important;
    height: 20px !important;
    color: var(--mcc-gray-700) !important;
    stroke: var(--mcc-gray-700) !important;
}
.mcc-nav-more-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    min-width: 200px;
    max-width: calc(100vw - 24px);
    background: var(--mcc-white);
    border: 0.5px solid var(--mcc-gray-200);
    border-radius: var(--mcc-radius-md);
    padding: 6px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    z-index: 1000;
}
.mcc-nav-more-dropdown.open {
    display: block;
}
.mcc-nav-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: auto;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: var(--mcc-radius-sm);
    color: var(--mcc-dark);
    font-family: var(--mcc-font-body);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}
.mcc-nav-dropdown-item:hover {
    background: var(--mcc-gray-100);
}
.mcc-nav-dropdown-item svg {
    width: 18px;
    height: 18px;
    color: var(--mcc-primary);
    stroke: var(--mcc-primary);
    fill: none;
    flex-shrink: 0;
}
.mcc-nav-dropdown-item span {
    display: inline;
}

/* v4.32.172: Dropdown immer rechtsbündig (right:0) — kein left-Override mehr, sonst Overflow */

.mcc-logo-icon {
    width: 32px;
    height: 32px;
    color: var(--mcc-primary);
    animation: mcc-pulse 3s ease-in-out infinite;
}

.mcc-logo-icon circle,
.mcc-logo-icon path {
    stroke: currentColor;
    fill: none;
}

.mcc-logo-icon circle:nth-child(2) {
    fill: currentColor;
    stroke: none;
}

@keyframes mcc-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.85; }
}

.mcc-logo-text {
    font-family: var(--mcc-font-title);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Logo Full/Short Toggle */
.mcc-logo-short {
    display: none;
}

.mcc-logo-full {
    display: inline;
}

.mcc-stats-mini {
    display: flex;
    gap: var(--mcc-space-sm);
    flex-shrink: 0;
}

.mcc-stat-badge {
    display: flex;
    align-items: center;
    gap: var(--mcc-space-xs);
    background: var(--mcc-gray-100);
    padding: 4px 10px;
    border-radius: var(--mcc-radius-full);
    color: var(--mcc-gray-600);
    font-size: 0.8rem;
}

.mcc-stat-count {
    font-family: var(--mcc-font-title);
    font-weight: 700;
    color: var(--mcc-primary);
}

/* ===== Search Section ===== */
.mcc-search-section {
    background: transparent;
    max-width: 1336px;
    width: calc(100% - 64px);
    margin: 0 auto;
    padding: 0;
    border-bottom: none;
    box-sizing: border-box;
}

.mcc-song-list-container {
    max-width: none;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.mcc-search-form {
    max-width: none;
    position: relative;
}

/* v4.32.170: Kompakte Such-Form im Header (einheitliche Befehlszeile) */
.mcc-search-form-header .mcc-search-wrapper {
    gap: 10px;
}
.mcc-search-form-header .mcc-search-input-group {
    background: var(--mcc-gray-100);
    border-radius: var(--mcc-radius-full);
    align-items: center;
}
.mcc-search-form-header .mcc-search-icon {
    left: 18px;
    color: var(--mcc-primary);
}
.mcc-search-form-header .mcc-search-input {
    padding: 9px 18px 9px 48px;
    font-size: 0.95rem;
    border: none;
    border-radius: var(--mcc-radius-full);
    background: transparent;
}
.mcc-search-form-header .mcc-search-input:focus {
    border: none;
    box-shadow: none;
    background: transparent;
}
.mcc-search-form-header .mcc-search-input-group:focus-within {
    box-shadow: 0 0 0 3px rgba(61, 124, 133, 0.12);
}
.mcc-search-form-header .mcc-search-btn {
    align-self: stretch;
    width: auto !important;
    aspect-ratio: 1 / 1;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: var(--mcc-radius-full) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.mcc-search-form-header .mcc-search-btn .mcc-btn-text { display: none !important; }
.mcc-search-form-header .mcc-search-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.mcc-search-form-header .mcc-search-btn-icon svg {
    width: 20px;
    height: 20px;
    color: #fff;
    stroke: #fff;
}
.mcc-search-form-header .mcc-search-btn.loading .mcc-search-btn-icon { display: none; }
/* v4.32.176: Safeguard gegen altes ::before-Icon (sonst doppelte Lupe) */
.mcc-search-form-header .mcc-search-btn::before { content: none !important; display: none !important; }

.mcc-search-wrapper {
    display: flex;
    gap: var(--mcc-space-md);
    align-items: center;
}

.mcc-search-input-group {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.mcc-search-icon {
    position: absolute;
    left: var(--mcc-space-lg);
    width: 20px;
    height: 20px;
    color: var(--mcc-gray-400);
    pointer-events: none;
    transition: color var(--mcc-transition-fast);
}

.mcc-search-icon circle,
.mcc-search-icon path {
    stroke: currentColor;
}

.mcc-search-input {
    width: 100%;
    padding: var(--mcc-space-lg) var(--mcc-space-lg) var(--mcc-space-lg) 56px;
    font-family: var(--mcc-font-body);
    font-size: 1.125rem;
    border: 2px solid var(--mcc-gray-200);
    border-radius: var(--mcc-radius-lg);
    background: #ffffff;
    color: var(--mcc-dark);
    transition: all var(--mcc-transition-normal);
    outline: none;
}

.mcc-search-input:focus {
    border-color: var(--mcc-primary);
    background: var(--mcc-white);
    box-shadow: 0 0 0 4px rgba(61, 124, 133, 0.1);
}

.mcc-search-input:focus + .mcc-search-icon {
    color: var(--mcc-primary);
}

.mcc-search-input::placeholder {
    color: var(--mcc-gray-400);
}

.mcc-voice-btn {
    position: absolute;
    right: var(--mcc-space-md);
    width: 36px;
    height: 36px;
    border: none;
    background: var(--mcc-gray-100);
    border-radius: var(--mcc-radius-sm);
    color: var(--mcc-gray-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mcc-transition-fast);
}

.mcc-voice-btn:hover {
    background: var(--mcc-primary);
    color: var(--mcc-white);
}

.mcc-voice-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.mcc-search-btn {
    padding: 12px 20px !important;
    font-family: var(--mcc-font-title);
    font-size: 0.875rem !important;
    font-weight: 600;
    line-height: 1.4 !important;
    color: var(--mcc-white);
    background: linear-gradient(135deg, var(--mcc-accent) 0%, var(--mcc-accent-dark) 100%);
    border: none;
    border-radius: var(--mcc-radius-md) !important;
    cursor: pointer;
    transition: all var(--mcc-transition-normal);
    display: flex;
    align-items: center;
    gap: var(--mcc-space-sm);
    white-space: nowrap;
    height: auto !important;
    min-height: auto !important;
}

.mcc-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--mcc-shadow-glow);
}

.mcc-search-btn:active {
    transform: translateY(0);
}

.mcc-btn-loader {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: mcc-spin 0.8s linear infinite;
}

.mcc-search-btn.loading .mcc-btn-text {
    display: none;
}

.mcc-search-btn.loading .mcc-btn-loader {
    display: block;
}

@keyframes mcc-spin {
    to { transform: rotate(360deg); }
}

/* Search Suggestions */
.mcc-search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--mcc-space-sm);
    background: var(--mcc-white);
    border-radius: var(--mcc-radius-md);
    box-shadow: var(--mcc-shadow-lg);
    border: 1px solid var(--mcc-gray-200);
    overflow: hidden;
    z-index: 99999 !important;
}

.mcc-suggestion-item {
    padding: var(--mcc-space-md) var(--mcc-space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background var(--mcc-transition-fast);
}

/* v4.32.174: "Alle Treffer" Global-Zeile */
.mcc-suggestion-global {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 4px;
    border-radius: var(--mcc-radius-sm);
    background: rgba(61, 124, 133, 0.07);
    color: var(--mcc-primary);
    font-family: var(--mcc-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background var(--mcc-transition-fast);
}
.mcc-suggestion-global:hover {
    background: rgba(61, 124, 133, 0.14);
}
.mcc-suggestion-global-icon { display: flex; }
.mcc-suggestion-global-icon svg { width: 18px; height: 18px; }
.mcc-suggestion-global-text { flex: 1; min-width: 0; }
.mcc-suggestion-global-key {
    font-size: 0.85rem;
    opacity: 0.55;
    border: 1px solid currentColor;
    border-radius: 5px;
    padding: 0 6px;
    line-height: 1.5;
}

.mcc-suggestion-item:hover {
    background: var(--mcc-gray-50);
}

.mcc-suggestion-title {
    font-weight: 600;
    color: var(--mcc-dark);
}

.mcc-suggestion-artist {
    color: var(--mcc-gray-500);
    font-size: 0.875rem;
}

.mcc-suggestion-key {
    background: var(--mcc-primary);
    color: var(--mcc-white);
    padding: 2px 8px;
    border-radius: var(--mcc-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Match quality indicators */
.mcc-suggestion-meta {
    display: flex;
    align-items: center;
    gap: var(--mcc-space-sm);
}

.mcc-suggestion-text {
    display: flex;
    flex-direction: column;
}

.mcc-match-indicator {
    font-size: 0.75rem;
    line-height: 1;
}

.mcc-match-exact {
    color: var(--mcc-accent);
}

.mcc-match-good {
    color: var(--mcc-primary);
}

.mcc-match-partial {
    color: var(--mcc-gray-400);
}

.mcc-suggestion-hint {
    padding: var(--mcc-space-sm) var(--mcc-space-lg);
    background: rgba(232, 146, 79, 0.1);
    border-bottom: 1px solid var(--mcc-gray-100);
    font-size: 0.875rem;
    color: var(--mcc-gray-600);
}

/* Quick Tags */
.mcc-quick-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mcc-space-sm);
    margin-top: var(--mcc-space-lg);
    justify-content: center;
}

.mcc-tag-label {
    color: var(--mcc-gray-500);
    font-size: 0.875rem;
}

.mcc-quick-tag {
    padding: var(--mcc-space-sm) var(--mcc-space-md);
    font-family: var(--mcc-font-body);
    font-size: 0.875rem;
    color: var(--mcc-primary);
    background: rgba(61, 124, 133, 0.1);
    border: 1px solid rgba(61, 124, 133, 0.2);
    border-radius: var(--mcc-radius-full);
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
}

.mcc-quick-tag:hover {
    background: var(--mcc-primary);
    color: var(--mcc-white);
    transform: translateY(-1px);
}

/* ===== Main Content ===== */
.mcc-main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--mcc-space-xl) 32px;
}

/* ===== Song List ===== */
.mcc-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--mcc-space-xl);
    flex-wrap: wrap;
    gap: var(--mcc-space-md);
}

.mcc-list-title {
    font-family: var(--mcc-font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--mcc-dark);
    margin: 0;
}

.mcc-list-filters {
    display: flex;
    gap: var(--mcc-space-md);
}

.mcc-filter-select {
    padding: var(--mcc-space-sm) var(--mcc-space-md);
    font-family: var(--mcc-font-body);
    font-size: 0.875rem;
    border: 1px solid var(--mcc-gray-200);
    border-radius: var(--mcc-radius-sm);
    background: var(--mcc-white);
    color: var(--mcc-dark);
    cursor: pointer;
    transition: border-color var(--mcc-transition-fast);
}

.mcc-filter-select:focus {
    outline: none;
    border-color: var(--mcc-primary);
}

/* Song Grid */
.mcc-song-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 16px !important;
}

/* Explicit responsive grid columns */
@media (min-width: 1200px) {
    .mcc-song-grid:not(.mcc-list-view) { grid-template-columns: repeat(5, 1fr) !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .mcc-song-grid:not(.mcc-list-view) { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .mcc-song-grid:not(.mcc-list-view) { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 480px) and (max-width: 767px) {
    .mcc-song-grid:not(.mcc-list-view) { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 479px) {
    .mcc-song-grid:not(.mcc-list-view) { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}

/* Song Card */
.mcc-song-card {
    background: var(--mcc-white);
    border-radius: var(--mcc-radius-lg);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all var(--mcc-transition-normal);
    box-shadow: var(--mcc-shadow-sm);
}

.mcc-song-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mcc-shadow-lg);
}

.mcc-song-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mcc-primary) 0%, var(--mcc-accent) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--mcc-transition-normal);
}

.mcc-song-card:hover::before {
    transform: scaleX(1);
}

.mcc-card-content {
    padding: var(--mcc-space-lg);
}

.mcc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--mcc-space-sm);
}

.mcc-card-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--mcc-primary);
    color: var(--mcc-white);
    font-family: var(--mcc-font-title);
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: var(--mcc-radius-sm);
}

.mcc-card-genre {
    font-size: 0.75rem;
    color: var(--mcc-gray-500);
    background: var(--mcc-gray-100);
    padding: 2px 8px;
    border-radius: var(--mcc-radius-full);
}

.mcc-card-title {
    font-family: var(--mcc-font-title);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--mcc-dark);
    margin: 0 0 var(--mcc-space-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mcc-card-artist {
    font-size: 0.875rem;
    color: var(--mcc-gray-500);
    margin: 0 0 var(--mcc-space-md);
}

.mcc-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--mcc-space-md);
    border-top: 1px solid var(--mcc-gray-100);
}

.mcc-card-difficulty {
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    line-height: 0;
}

.mcc-card-difficulty svg { width: 12px; height: 12px; stroke: var(--m-gold, #D9A441); }

.mcc-card-views {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--mcc-gray-400);
}

.mcc-card-views svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
}

/* Card Hover Overlay */
.mcc-card-hover {
    position: absolute;
    inset: 0;
    background: rgba(61, 124, 133, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--mcc-transition-normal);
}

.mcc-song-card:hover .mcc-card-hover {
    opacity: 1;
}

.mcc-card-play-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--mcc-white);
    border: none;
    color: var(--mcc-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.8);
    transition: transform var(--mcc-transition-bounce);
}

.mcc-song-card:hover .mcc-card-play-btn {
    transform: scale(1);
}

.mcc-card-play-btn svg {
    width: 28px;
    height: 28px;
    margin-left: 4px;
    fill: currentColor;
}

/* Empty State */
.mcc-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--mcc-space-2xl);
}

.mcc-empty-icon {
    font-size: 4rem;
    margin-bottom: var(--mcc-space-md);
    animation: mcc-bounce 2s ease-in-out infinite;
}

@keyframes mcc-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.mcc-empty-state h3 {
    font-family: var(--mcc-font-title);
    font-size: 1.5rem;
    color: var(--mcc-dark);
    margin: 0 0 var(--mcc-space-sm);
}

.mcc-empty-state p {
    color: var(--mcc-gray-500);
    margin: 0;
}

/* Load More */
.mcc-load-more-container {
    text-align: center;
    margin-top: var(--mcc-space-xl);
}

.mcc-load-more-btn {
    padding: var(--mcc-space-md) var(--mcc-space-2xl);
    font-family: var(--mcc-font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--mcc-primary);
    background: transparent;
    border: 2px solid var(--mcc-primary);
    border-radius: var(--mcc-radius-full);
    cursor: pointer;
    transition: all var(--mcc-transition-normal);
}

.mcc-load-more-btn:hover {
    background: var(--mcc-primary);
    color: var(--mcc-white);
}

/* ===== Song Display ===== */
.mcc-song-display {
    position: relative;
    animation: mcc-fade-in 0.4s ease;
}

@keyframes mcc-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mcc-song-container {
    position: relative;
    background: var(--mcc-white);
    border-radius: var(--mcc-radius-xl);
    box-shadow: var(--mcc-shadow-md);
    overflow: hidden;
}

/* Song Header */
.mcc-song-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mcc-space-lg) var(--mcc-space-xl);
    background: linear-gradient(135deg, var(--mcc-gray-50) 0%, var(--mcc-white) 100%);
    border-bottom: 1px solid var(--mcc-gray-200);
    flex-wrap: wrap;
    gap: var(--mcc-space-md);
}

.mcc-back-btn {
    display: flex;
    align-items: center;
    gap: var(--mcc-space-sm);
    padding: var(--mcc-space-sm) var(--mcc-space-md);
    font-family: var(--mcc-font-body);
    font-size: 0.875rem;
    color: var(--mcc-gray-600);
    background: transparent;
    border: 1px solid var(--mcc-gray-300);
    border-radius: var(--mcc-radius-sm);
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
}

.mcc-back-btn:hover {
    color: var(--mcc-primary);
    border-color: var(--mcc-primary);
}

.mcc-back-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}

.mcc-song-meta {
    position: relative;
    flex: 1;
    text-align: center;
}

.mcc-song-actions {
    display: flex;
    gap: var(--mcc-space-sm);
}

.mcc-action-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mcc-gray-100);
    border: none;
    border-radius: var(--mcc-radius-sm);
    color: var(--mcc-gray-600);
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
}

.mcc-action-btn:hover {
    background: var(--mcc-primary);
    color: var(--mcc-white);
}

.mcc-action-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
}

.mcc-action-btn svg rect {
    stroke: currentColor;
    fill: none;
}

.mcc-action-btn svg circle {
    stroke: currentColor;
    fill: none;
}

/* Toolbar Favorite Button */
.mcc-toolbar-favorite.is-favorite {
    background: #fff0f0 !important;
    color: #e74c3c !important;
}

.mcc-toolbar-favorite.is-favorite:hover {
    background: #ffe0e0 !important;
}

.mcc-toolbar-favorite .mcc-heart-filled {
    fill: #e74c3c !important;
    stroke: none !important;
}

/* Toolbar Playlist Dropdown */
.mcc-playlist-dropdown-wrapper {
    position: relative;
}

.mcc-toolbar-playlist svg {
    stroke: currentColor !important;
}

.mcc-playlist-dropdown {
    position: fixed;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border: 1px solid var(--mcc-gray-200);
    min-width: 220px;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.mcc-playlist-dropdown.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mcc-playlist-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    color: var(--mcc-dark);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
}

.mcc-playlist-dropdown-item:first-child {
    border-radius: 10px 10px 0 0;
}

.mcc-playlist-dropdown-item:last-child {
    border-radius: 0 0 10px 10px;
}

.mcc-playlist-dropdown-item:hover {
    background: var(--mcc-gray-50);
}

.mcc-playlist-dropdown-item svg {
    flex-shrink: 0;
    color: var(--mcc-primary);
}

/* Playlist Nav Container - under toolbar */
.mcc-playlist-nav-container {
    margin: 0;
}

.mcc-playlist-nav-container .mcc-playlist-nav {
    border-radius: 0;
    margin: 0;
}

/* Controls */
.mcc-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--mcc-space-xl);
    padding: var(--mcc-space-lg) var(--mcc-space-xl);
    background: var(--mcc-gray-50);
    border-bottom: 1px solid var(--mcc-gray-200);
}

.mcc-control-group {
    display: flex;
    align-items: center;
    gap: var(--mcc-space-sm);
}

.mcc-control-label {
    font-size: 0.875rem;
    color: var(--mcc-gray-600);
    font-weight: 500;
}

.mcc-transpose-buttons {
    display: flex;
    align-items: center;
    gap: var(--mcc-space-xs);
}

.mcc-transpose-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mcc-font-title);
    font-size: 1rem;
    font-weight: 700;
    color: var(--mcc-primary);
    background: var(--mcc-white);
    border: 2px solid var(--mcc-primary);
    border-radius: var(--mcc-radius-sm);
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
}

.mcc-transpose-btn:hover {
    background: var(--mcc-primary);
    color: var(--mcc-white);
}

.mcc-current-key {
    min-width: 48px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mcc-font-title);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--mcc-white);
    background: var(--mcc-primary);
    border-radius: var(--mcc-radius-sm);
}

.mcc-sounding-key {
    font-family: var(--mcc-font-body);
    font-size: 0.8rem;
    color: var(--mcc-gray-600);
    background: var(--mcc-gray-100);
    padding: 4px 10px;
    border-radius: var(--mcc-radius-sm);
    margin-left: 8px;
}

.mcc-sounding-key strong {
    color: var(--mcc-primary);
    font-weight: 600;
}

.mcc-key-select {
    padding: var(--mcc-space-sm) var(--mcc-space-md);
    font-family: var(--mcc-font-body);
    border: 1px solid var(--mcc-gray-300);
    border-radius: var(--mcc-radius-sm);
    background: var(--mcc-white);
    cursor: pointer;
}

.mcc-display-btn {
    padding: var(--mcc-space-sm) var(--mcc-space-md);
    font-family: var(--mcc-font-body);
    font-size: 0.875rem;
    color: var(--mcc-gray-600);
    background: var(--mcc-white);
    border: 1px solid var(--mcc-gray-300);
    border-radius: var(--mcc-radius-sm);
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
}

.mcc-display-btn.mcc-active {
    color: var(--mcc-white);
    background: var(--mcc-primary);
    border-color: var(--mcc-primary);
}

.mcc-scroll-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f3f4;
    color: #5f6368;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mcc-scroll-btn:hover {
    background: #e8eaed;
}

.mcc-scroll-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.mcc-speed-slider {
    width: 100px;
    accent-color: var(--mcc-accent);
}

.mcc-speed-label {
    font-size: 0.875rem;
    color: var(--mcc-gray-500);
    min-width: 24px;
}

/* ===== Song Toolbar V3 - Clean Mobile-First ===== */
.mcc-song-toolbar {
    background: var(--mcc-white);
    border-bottom: 1px solid var(--mcc-gray-200);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.mcc-toolbar-v3 .mcc-toolbar-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Toolbar Button Base */
.mcc-tb-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mcc-gray-100);
    border: none;
    border-radius: 8px;
    color: var(--mcc-gray-600);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.mcc-tb-btn:hover {
    background: var(--mcc-primary);
    color: white;
}

.mcc-tb-btn.active {
    background: var(--mcc-primary);
    color: white;
}

.mcc-tb-btn svg {
    width: 18px;
    height: 18px;
}

/* Divider */
.mcc-tb-divider {
    width: 1px;
    height: 28px;
    background: var(--mcc-gray-200);
    flex-shrink: 0;
}

/* Spacer - schiebt nachfolgende Elemente nach rechts */
.mcc-tb-spacer {
    flex: 1;
    min-width: 8px;
}

/* Group */
.mcc-tb-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Right aligned group */
.mcc-group-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Transpose Group */
.mcc-toolbar-v3 .mcc-group-transpose {
    background: var(--mcc-gray-50);
    padding: 4px 6px;
    border-radius: 10px;
    gap: 2px;
}

.mcc-toolbar-v3 .mcc-transpose-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
    font-weight: 600;
    background: var(--mcc-white);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    color: var(--mcc-dark) !important;
    -webkit-text-fill-color: var(--mcc-dark) !important;
}

.mcc-toolbar-v3 .mcc-transpose-btn:hover {
    color: var(--mcc-primary) !important;
    -webkit-text-fill-color: var(--mcc-primary) !important;
    background: var(--mcc-gray-100);
}

/* Chordsheet Prefer Flats Button */
.mcc-cs-prefer-flats-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: var(--mcc-white);
    color: rgba(17,20,22,0.4);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    margin-right: 2px;
    outline: none;
}
.mcc-cs-prefer-flats-btn:hover {
    background: rgba(61,124,133,0.1);
    color: var(--mcc-primary);
}
.mcc-cs-prefer-flats-btn:focus {
    outline: none;
}
.mcc-cs-prefer-flats-btn.active {
    background: var(--mcc-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(61,124,133,0.3);
}
.mcc-cs-prefer-flats-btn:not(.active) {
    background: var(--mcc-white) !important;
    color: rgba(17,20,22,0.4) !important;
}
.mcc-cs-prefer-flats-btn .mcc-flat-symbol {
    font-family: serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.mcc-toolbar-v3 .mcc-current-key,
#mcc-current-key,
.mcc-app #mcc-current-key,
.mcc-app .mcc-toolbar-v3 #mcc-current-key,
span#mcc-current-key,
.mcc-group-transpose > #mcc-current-key {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mcc-font-heading);
    font-size: 15px;
    font-weight: 700;
    /* Text Color - alle möglichen Overrides */
    color: #3D7C85 !important;
    -webkit-text-fill-color: #3D7C85 !important;
    text-fill-color: #3D7C85 !important;
    /* Background - kein Gradient, kein clip */
    background: rgba(61, 124, 133, 0.12) !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    -moz-background-clip: border-box !important;
    background-clip: border-box !important;
    /* Reset andere Text-Properties */
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-radius: 6px;
}

.mcc-toolbar-v3 .mcc-sounding-key {
    font-size: 10px;
    color: var(--mcc-gray-500);
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-toolbar-v3 .mcc-key-select {
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid var(--mcc-gray-200);
    background: var(--mcc-white);
    color: var(--mcc-gray-600);
    cursor: pointer;
}

/* Mode Toggle */
.mcc-toolbar-v3 .mcc-mode-toggle {
    display: flex;
    background: var(--mcc-gray-100);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.mcc-toolbar-v3 .mcc-mode-toggle .mcc-mode-btn {
    width: 32px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--mcc-gray-400);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mcc-toolbar-v3 .mcc-mode-toggle .mcc-mode-btn:hover {
    background: rgba(61, 124, 133, 0.1);
    color: var(--mcc-primary);
}

.mcc-toolbar-v3 .mcc-mode-toggle .mcc-mode-btn.active {
    background: var(--mcc-primary);
    color: white;
    box-shadow: 0 2px 4px rgba(61, 124, 133, 0.3);
}

.mcc-toolbar-v3 .mcc-mode-toggle .mcc-mode-btn svg {
    width: 16px;
    height: 16px;
}

/* Size Toggle */
.mcc-toolbar-v3 .mcc-size-toggle {
    display: flex;
    background: var(--mcc-gray-100);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.mcc-toolbar-v3 .mcc-size-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--mcc-gray-500);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mcc-toolbar-v3 .mcc-size-btn:hover {
    background: rgba(61, 124, 133, 0.1);
    color: var(--mcc-primary);
}

.mcc-toolbar-v3 .mcc-size-btn.mcc-active {
    background: var(--mcc-primary);
    color: white;
}

/* Size Slider (Percent) */
.mcc-toolbar-v3 .mcc-size-slider-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--mcc-gray-100);
    border-radius: 20px;
}
.mcc-toolbar-v3 .mcc-size-slider-wrapper .mcc-size-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--mcc-gray-500);
    min-width: 14px;
}
.mcc-toolbar-v3 .mcc-size-slider {
    width: 70px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0,0,0,0.1);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.mcc-toolbar-v3 .mcc-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mcc-primary);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(61,124,133,0.3);
    transition: transform 0.1s;
}
.mcc-toolbar-v3 .mcc-size-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}
.mcc-toolbar-v3 .mcc-size-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mcc-primary);
    cursor: pointer;
    border: none;
}
.mcc-toolbar-v3 .mcc-size-slider-wrapper .mcc-size-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--mcc-primary);
    min-width: 36px;
    text-align: right;
}

/* Mobile Size Slider in Dropdown */
.mcc-view-size-slider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
}
.mcc-view-size-slider .mcc-size-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--mcc-gray-500);
}
.mcc-view-size-slider .mcc-size-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0,0,0,0.1);
    border-radius: 2px;
}
.mcc-view-size-slider .mcc-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mcc-primary);
    cursor: pointer;
}
.mcc-view-size-slider .mcc-size-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--mcc-primary);
    min-width: 36px;
}

/* Tools Group */
.mcc-toolbar-v3 .mcc-group-tools {
    gap: 4px;
}

/* Auto-Scroll Group */
.mcc-toolbar-v3 .mcc-group-scroll {
    background: transparent;
    padding: 4px 8px;
    border-radius: 10px;
    gap: 8px;
}

.mcc-toolbar-v3 .mcc-scroll-btn {
    width: 36px;
    height: 36px;
    background: #f1f3f4;
    border: none;
    border-radius: 10px;
    color: #5f6368;
    box-shadow: none;
    transition: all 0.2s ease;
}

.mcc-toolbar-v3 .mcc-scroll-btn:hover {
    background: #e8eaed;
    transform: none;
}

.mcc-toolbar-v3 .mcc-scroll-btn.active {
    background: linear-gradient(135deg, #3D7C85, #E8924F);
    color: #ffffff;
}

.mcc-toolbar-v3 .mcc-scroll-btn.active svg {
    fill: #ffffff;
}

.mcc-toolbar-v3 .mcc-scroll-btn.active .mcc-play-icon {
    display: none;
}

.mcc-toolbar-v3 .mcc-scroll-btn.active .mcc-pause-icon {
    display: block !important;
}

.mcc-toolbar-v3 .mcc-scroll-btn svg {
    width: 18px;
    height: 18px;
}

.mcc-toolbar-v3 .mcc-speed-slider {
    width: 60px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--mcc-gray-200);
    border-radius: 2px;
    cursor: pointer;
}

.mcc-toolbar-v3 .mcc-speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--mcc-primary);
    border-radius: 50%;
    cursor: pointer;
}

.mcc-toolbar-v3 .mcc-speed-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--mcc-gray-600);
    min-width: 24px;
    text-align: center;
}

/* YouTube Button */
.mcc-toolbar-v3 .mcc-toolbar-youtube:empty {
    display: none;
}

.mcc-toolbar-v3 .mcc-toolbar-yt-btn {
    width: 36px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FF0000;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mcc-toolbar-v3 .mcc-toolbar-yt-btn:hover {
    background: #cc0000;
    transform: scale(1.05);
}

.mcc-toolbar-v3 .mcc-toolbar-yt-btn svg {
    width: 18px;
    height: 18px;
}

/* Favorite Button States */
.mcc-toolbar-v3 .mcc-toolbar-favorite.is-favorite {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}

.mcc-toolbar-v3 .mcc-toolbar-favorite.is-favorite .mcc-heart-empty {
    display: none;
}

.mcc-toolbar-v3 .mcc-toolbar-favorite.is-favorite .mcc-heart-filled {
    display: block !important;
}

/* Quick Actions - push to end */
.mcc-toolbar-v3 .mcc-group-quick {
    margin-left: auto;
    gap: 6px;
}

/* Sticky Toolbar */
.mcc-toolbar-v3.mcc-toolbar-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Sticky Toolbar auf Mobile: nur Quick Actions und einige Tools ausblenden */
@media (max-width: 768px) {
    /* Info, Stems, Drucken ausblenden - aber Griffbilder (#mcc-chords-toggle-btn) behalten */
    .mcc-toolbar-v3.mcc-toolbar-sticky #mcc-song-info-btn,
    .mcc-toolbar-v3.mcc-toolbar-sticky #mcc-stems-btn,
    .mcc-toolbar-v3.mcc-toolbar-sticky #mcc-print-btn,
    .mcc-toolbar-v3.mcc-toolbar-sticky .mcc-group-quick {
        display: none !important;
    }
}

/* ===== MOBILE: <768px ===== */
@media (max-width: 768px) {
    /* Toolbar Container volle Breite */
    .mcc-song-toolbar {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible;
    }
    
    /* Tab-Content volle Breite */
    .mcc-tab-content,
    .mcc-tab-content.active,
    #mcc-tab-chords {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .mcc-toolbar-v3 .mcc-toolbar-inner {
        padding: 8px 10px;
        gap: 4px;
        row-gap: 6px;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        min-height: 52px;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .mcc-toolbar-v3 .mcc-toolbar-inner::-webkit-scrollbar {
        display: none;
    }
    
    /* Alle Gruppen flex-shrink: 0 damit sie nicht schrumpfen */
    .mcc-toolbar-v3 .mcc-tb-group {
        flex-shrink: 0;
    }
    
    /* Spacer flex-shrink erlauben */
    .mcc-toolbar-v3 .mcc-tb-spacer {
        flex-shrink: 1;
        min-width: 4px;
    }
    
    /* Buttons normale Grösse auf Mobile */
    .mcc-toolbar-v3 .mcc-tb-btn {
        width: 36px;
        height: 36px;
    }
    
    .mcc-toolbar-v3 .mcc-tb-btn svg {
        width: 18px;
        height: 18px;
    }
    
    /* Transpose Buttons */
    .mcc-toolbar-v3 .mcc-transpose-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .mcc-toolbar-v3 .mcc-current-key {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
        padding: 0 6px;
    }
    
    .mcc-toolbar-v3 .mcc-group-transpose {
        padding: 3px 5px;
        gap: 2px;
    }
    
    /* Desktop View verstecken, Mobile View zeigen */
    .mcc-toolbar-v3 .mcc-desktop-view {
        display: none !important;
    }
    
    .mcc-toolbar-v3 .mcc-mobile-view {
        display: flex !important;
    }
    
    /* Hide key select and sounding key on mobile */
    .mcc-toolbar-v3 .mcc-key-select,
    .mcc-toolbar-v3 .mcc-sounding-key {
        display: none;
    }
    
    /* Hide dividers on mobile */
    .mcc-toolbar-v3 .mcc-tb-divider {
        display: none;
    }
    
    /* Spacer */
    .mcc-toolbar-v3 .mcc-tb-spacer {
        flex: 1;
        min-width: 4px;
        order: 5;
    }
    
    /* Right group */
    .mcc-toolbar-v3 .mcc-group-right {
        gap: 4px;
        order: 6;
    }
    
    /* Desktop Scroll Group auf Mobile verstecken */
    .mcc-toolbar-v3 .mcc-scroll-desktop {
        display: none !important;
    }
    
    /* Mobile Scroll Button sichtbar */
    .mcc-toolbar-v3 .mcc-scroll-btn-mobile {
        display: flex !important;
        order: 4;
    }
}

/* Mobile Scroll Button - wie andere Toolbar Buttons */
.mcc-scroll-btn-mobile,
.mcc-toolbar-v3 .mcc-scroll-btn-mobile,
#mcc-scroll-toggle-mobile {
    display: none;
    width: 36px !important;
    height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f3f4 !important;
    border: none !important;
    border-radius: 10px !important;
    color: #5f6368 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.mcc-scroll-btn-mobile:hover,
#mcc-scroll-toggle-mobile:hover {
    background: #e8eaed !important;
}

/* Active State: Grüner Gradient wie andere aktive Buttons */
.mcc-scroll-btn-mobile.active,
#mcc-scroll-toggle-mobile.active,
.mcc-toolbar-v3 .mcc-scroll-btn-mobile.active {
    background: linear-gradient(135deg, #3D7C85, #E8924F) !important;
    color: #ffffff !important;
}

.mcc-scroll-btn-mobile svg,
#mcc-scroll-toggle-mobile svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
}

/* Active State: SVG explizit weiß */
.mcc-scroll-btn-mobile.active svg,
#mcc-scroll-toggle-mobile.active svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

.mcc-scroll-btn-mobile.active svg path,
#mcc-scroll-toggle-mobile.active svg path {
    fill: #ffffff !important;
}

.mcc-scroll-btn-mobile.active .mcc-play-icon,
#mcc-scroll-toggle-mobile.active .mcc-play-icon {
    display: none !important;
}

.mcc-scroll-btn-mobile.active .mcc-pause-icon,
#mcc-scroll-toggle-mobile.active .mcc-pause-icon {
    display: block !important;
}

.mcc-scroll-btn-mobile.active .mcc-pause-icon path,
#mcc-scroll-toggle-mobile.active .mcc-pause-icon path {
    fill: #ffffff !important;
}

/* Ausklappbare Slider-Zeile */
.mcc-scroll-slider-row {
    display: none;
    width: 100%;
    background: linear-gradient(135deg, rgba(61,124,133,0.08), rgba(232,146,79,0.08));
    border-top: 1px solid rgba(61,124,133,0.15);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

.mcc-scroll-slider-row.visible {
    max-height: 60px;
    opacity: 1;
    padding: 10px 15px;
}

.mcc-scroll-slider-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.mcc-scroll-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mcc-font-body);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mcc-primary);
    white-space: nowrap;
}

.mcc-scroll-label svg {
    color: var(--mcc-primary);
}

.mcc-speed-slider-mobile {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, var(--mcc-primary), var(--mcc-secondary));
    border-radius: 3px;
    outline: none;
}

.mcc-speed-slider-mobile::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    background: white;
    border: 3px solid var(--mcc-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.15s ease;
}

.mcc-speed-slider-mobile::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.mcc-speed-slider-mobile::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: white;
    border: 3px solid var(--mcc-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.mcc-speed-value-mobile {
    min-width: 32px;
    font-family: var(--mcc-font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mcc-primary);
    text-align: center;
}

/* Mobile: Slider-Zeile anzeigen */
@media (max-width: 768px) {
    .mcc-scroll-slider-row {
        display: block;
    }
}

/* Desktop: Mobile View verstecken */
.mcc-toolbar-v3 .mcc-mobile-view {
    display: none;
}

/* View Dropdown Wrapper */
.mcc-view-dropdown-wrapper {
    position: relative;
}

.mcc-view-dropdown {
    position: fixed;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    min-width: 180px;
    padding: 8px 0;
    display: none;
    z-index: 10000;
}

.mcc-view-dropdown.visible {
    display: block;
    animation: mcc-dropdown-in 0.15s ease;
}

.mcc-view-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    font-family: var(--mcc-font-body);
    font-size: 0.9rem;
    color: var(--mcc-gray-700);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.mcc-view-option:hover {
    background: var(--mcc-gray-50);
}

.mcc-view-option.active {
    color: var(--mcc-primary);
    font-weight: 600;
}

.mcc-view-option svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.mcc-view-option .mcc-size-letter {
    width: 18px;
    font-weight: 700;
    text-align: center;
}

.mcc-view-divider {
    height: 1px;
    background: var(--mcc-gray-100);
    margin: 6px 12px;
}

/* ===== VERY SMALL: <480px ===== */
@media (max-width: 480px) {
    .mcc-toolbar-v3 .mcc-toolbar-inner {
        padding: 6px 8px;
        gap: 5px;
    }
    
    .mcc-toolbar-v3 .mcc-tb-btn {
        width: 34px;
        height: 34px;
    }
    
    .mcc-toolbar-v3 .mcc-transpose-btn {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
    
    .mcc-toolbar-v3 .mcc-current-key {
        min-width: 30px;
        height: 30px;
        font-size: 12px;
    }
    
    .mcc-toolbar-v3 .mcc-scroll-btn {
        width: 32px;
        height: 32px;
    }
    
    .mcc-toolbar-v3 .mcc-speed-slider {
        max-width: 100px;
    }
    
    .mcc-toolbar-v3 .mcc-group-right {
        gap: 3px;
    }
}

/* Legacy support */
.mcc-toolbar-controls,
.mcc-toolbar-group,
.mcc-toolbar-actions,
.mcc-toolbar-right,
.mcc-toolbar-spacer {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mcc-toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--mcc-gray-200);
}

.mcc-mode-toggle .mcc-mode-btn:hover {
    color: white;
    background: var(--mcc-primary);
}

.mcc-mode-toggle .mcc-mode-btn.active {
    background: var(--mcc-primary);
    color: white;
    box-shadow: 0 2px 4px rgba(61, 124, 133, 0.25);
}

.mcc-mode-toggle .mcc-mode-btn svg {
    width: 14px;
    height: 14px;
}

/* Size Toggle */
.mcc-size-toggle {
    display: flex;
    background: var(--mcc-white);
    border-radius: 6px;
    padding: 2px;
    gap: 1px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.mcc-size-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mcc-font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--mcc-gray-500);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mcc-size-btn:hover {
    background: var(--mcc-primary);
    color: white;
}

.mcc-size-btn.mcc-active {
    color: white;
    background: var(--mcc-primary);
}

/* Tool Buttons */
.mcc-tool-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mcc-white);
    border: none;
    border-radius: 6px;
    color: var(--mcc-gray-500);
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.mcc-tool-btn:hover {
    background: var(--mcc-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(61, 124, 133, 0.25);
}

.mcc-tool-btn.active {
    background: var(--mcc-primary);
    color: white;
}

.mcc-tool-btn svg {
    width: 16px;
    height: 16px;
}

/* Toolbar Spacer */
.mcc-toolbar-spacer {
    flex: 1;
    min-width: 8px;
}

/* Quick Actions (right side) */
.mcc-toolbar-quick {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mcc-quick-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid var(--mcc-gray-200);
    border-radius: 8px;
    color: var(--mcc-gray-500);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mcc-quick-btn:hover {
    border-color: var(--mcc-primary);
    color: white;
    background: var(--mcc-primary);
}

.mcc-quick-btn svg {
    width: 16px;
    height: 16px;
}

/* Favorite special state */
.mcc-quick-btn.mcc-toolbar-favorite.is-favorite {
    border-color: #e74c3c;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.08);
}

.mcc-quick-btn.mcc-toolbar-favorite.is-favorite .mcc-heart-empty {
    display: none;
}

.mcc-quick-btn.mcc-toolbar-favorite.is-favorite .mcc-heart-filled {
    display: block !important;
}

/* Playback Row (Auto-Scroll + YouTube) */
.mcc-toolbar-playback {
    background: linear-gradient(135deg, rgba(61, 124, 133, 0.04) 0%, rgba(232, 146, 79, 0.04) 100%);
    border-bottom: 1px solid var(--mcc-gray-200);
    padding: 5px 12px;
    gap: 12px;
}

.mcc-playback-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mcc-playback-label {
    font-family: var(--mcc-font-heading);
    font-size: 10px;
    font-weight: 600;
    color: var(--mcc-gray-500);
    white-space: nowrap;
}

.mcc-playback-divider {
    width: 1px;
    height: 20px;
    background: var(--mcc-gray-300);
}

.mcc-scroll-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mcc-scroll-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mcc-white);
    border: none;
    border-radius: 6px;
    color: var(--mcc-gray-600);
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.mcc-scroll-btn:hover {
    background: var(--mcc-primary);
    color: white;
}

.mcc-scroll-btn.active {
    background: linear-gradient(135deg, #3D7C85, #E8924F);
    color: #ffffff;
}

.mcc-scroll-btn.active svg {
    fill: #ffffff;
}

.mcc-scroll-btn.active .mcc-play-icon {
    display: none;
}

.mcc-scroll-btn.active .mcc-pause-icon {
    display: block !important;
}

.mcc-speed-slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--mcc-gray-200);
    border-radius: 2px;
    cursor: pointer;
}

.mcc-speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--mcc-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(61, 124, 133, 0.3);
    transition: transform 0.15s ease;
}

.mcc-speed-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.mcc-speed-label {
    font-family: var(--mcc-font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--mcc-gray-600);
    min-width: 24px;
    text-align: center;
}

/* YouTube Section */
.mcc-youtube-section {
    margin-left: auto;
}

.mcc-toolbar-youtube:empty {
    display: none;
}

/* Back Button - compact */
.mcc-toolbar-v2 .mcc-back-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mcc-gray-100);
    border: none;
    border-radius: 8px;
    color: var(--mcc-gray-600);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mcc-toolbar-v2 .mcc-back-btn:hover {
    background: var(--mcc-primary);
    color: white;
}

.mcc-toolbar-v2 .mcc-back-btn svg {
    width: 18px;
    height: 18px;
}

.mcc-toolbar-v2 .mcc-back-btn span {
    display: none;
}

/* Legacy support */
.mcc-toolbar-controls {
    display: flex;
    align-items: center;
    gap: var(--mcc-space-md);
    flex-wrap: wrap;
}

.mcc-toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mcc-toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--mcc-gray-300);
    margin: 0 4px;
}

.mcc-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mcc-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--mcc-space-xs);
}

/* Size Toggle Buttons */
.mcc-size-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mcc-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mcc-gray-500);
    background: var(--mcc-gray-100);
    border: none;
    border-radius: var(--mcc-radius-sm);
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
}

.mcc-size-btn:hover {
    background: var(--mcc-gray-200);
    color: var(--mcc-gray-700);
}

.mcc-size-btn.mcc-active {
    color: var(--mcc-white);
    background: var(--mcc-primary);
}

.mcc-scroll-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mcc-scroll-group .mcc-scroll-btn {
    width: 32px;
    height: 32px;
}

.mcc-scroll-group .mcc-scroll-btn svg {
    width: 14px;
    height: 14px;
}

.mcc-scroll-group .mcc-speed-slider {
    width: 80px;
}

/* Toolbar YouTube Button */
.mcc-toolbar-youtube {
    display: flex;
    align-items: center;
}

.mcc-toolbar-yt-btn {
    width: 36px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FF0000;
    color: white;
    border: none;
    border-radius: var(--mcc-radius-sm);
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
}

.mcc-toolbar-yt-btn:hover {
    background: #cc0000;
    transform: scale(1.05);
}

.mcc-toolbar-yt-btn.mcc-yt-active {
    background: #990000;
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
}

.mcc-toolbar-yt-btn svg {
    width: 20px;
    height: 20px;
}

/* Sticky Toolbar */
.mcc-song-toolbar.mcc-toolbar-sticky {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    animation: slideDown 0.2s ease-out;
}

/* V2 Sticky - both rows stay */
.mcc-toolbar-v2.mcc-toolbar-sticky .mcc-toolbar-main {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.mcc-toolbar-v2.mcc-toolbar-sticky .mcc-toolbar-playback {
    background: linear-gradient(135deg, rgba(61, 124, 133, 0.06) 0%, rgba(232, 146, 79, 0.06) 100%);
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Mini YouTube Player */
/* OLD Mini Player (YouTube Floating Window) - DISABLED
/* YouTube Mini Player - FORCE fixed position with high specificity */
body .mcc-mini-youtube-player,
.mcc-app .mcc-mini-youtube-player,
#mcc-mini-youtube-player.mcc-mini-youtube-player {
    position: fixed !important;
    top: 120px !important;
    right: 20px !important;
    width: 320px !important;
    background: #000 !important;
    border-radius: var(--mcc-radius-md) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    z-index: 99999 !important;
    overflow: hidden !important;
    display: none;
}

body .mcc-mini-youtube-player[style*="display: block"],
#mcc-mini-youtube-player.mcc-mini-youtube-player[style*="display: block"] {
    display: block !important;
}

.mcc-mini-youtube-player .mcc-mini-player-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    background: #1a1a1a !important;
    color: white !important;
}

.mcc-mini-youtube-player .mcc-mini-player-title {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    margin-right: 10px !important;
    color: white !important;
}

.mcc-mini-youtube-player .mcc-mini-player-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.mcc-mini-youtube-player .mcc-mini-player-external {
    color: rgba(255, 255, 255, 0.7) !important;
    display: flex !important;
    align-items: center !important;
    transition: color 0.2s !important;
    text-decoration: none !important;
}

.mcc-mini-youtube-player .mcc-mini-player-external:hover {
    color: white !important;
}

.mcc-mini-youtube-player .mcc-mini-player-close {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    transition: color 0.2s !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.mcc-mini-youtube-player .mcc-mini-player-close:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.mcc-mini-youtube-player .mcc-mini-player-video {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: #000 !important;
    overflow: hidden !important;
}

.mcc-mini-youtube-player .mcc-mini-player-video iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}
END OLD Mini Player CSS */

/* Song Info Section */
.mcc-song-info {
    padding: var(--mcc-space-lg) var(--mcc-space-xl);
    text-align: center !important;
    border-bottom: 1px solid var(--mcc-gray-100);
}

.mcc-song-info .mcc-display-title {
    font-family: var(--mcc-font-title);
    font-size: 2rem;
    font-weight: 700;
    color: var(--mcc-dark);
    margin: 0 0 var(--mcc-space-xs);
    text-align: center !important;
}

.mcc-song-info .mcc-display-artist {
    font-family: var(--mcc-font-body);
    font-size: 1.125rem;
    color: var(--mcc-gray-600);
    margin: 0 0 var(--mcc-space-md);
    text-align: center !important;
}

.mcc-song-info .mcc-song-info-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mcc-space-md);
    flex-wrap: wrap;
}

.mcc-song-info {
    position: relative;
}

.mcc-song-info .mcc-youtube-btn {
    /* Inline with badges */
}

/* ===== Chord Sheet ===== */
.mcc-chord-sheet {
    padding: var(--mcc-space-xl);
    font-family: var(--mcc-font-mono);
    font-size: 1rem;
    line-height: 1.6;
    min-height: 400px;
}

/* ==========================================
   GUEST BLUR OVERLAY - Non-logged-in users
   ========================================== */
.mcc-chord-sheet.mcc-guest-limited {
    position: relative;
    max-height: 800px;
    overflow: hidden;
}

.mcc-chord-sheet.mcc-guest-limited::before {
    content: '';
    position: absolute;
    top: 350px;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 15%,
        rgba(255, 255, 255, 0.7) 40%,
        rgba(255, 255, 255, 0.85) 70%
    );
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 5;
    pointer-events: none;
}

.mcc-guest-blur-overlay {
    position: absolute;
    top: 450px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 20px;
    z-index: 10;
}

.mcc-guest-blur-content {
    text-align: center;
    max-width: 350px;
    padding: var(--mcc-space-md);
}

.mcc-guest-blur-icon {
    font-size: 2.5rem;
    margin-bottom: var(--mcc-space-sm);
}

.mcc-guest-blur-content h3 {
    font-family: var(--mcc-font-title);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mcc-dark);
    margin: 0 0 var(--mcc-space-xs);
}

.mcc-guest-blur-content p {
    font-family: var(--mcc-font-body);
    font-size: 0.95rem;
    color: var(--mcc-gray-500);
    margin: 0 0 var(--mcc-space-md);
    line-height: 1.4;
}

.mcc-guest-blur-actions {
    display: flex;
    flex-direction: column;
    gap: var(--mcc-space-xs);
    align-items: center;
}

.mcc-guest-login-btn {
    background: linear-gradient(135deg, var(--mcc-primary) 0%, var(--mcc-secondary) 100%);
    color: white !important;
    padding: var(--mcc-space-sm) var(--mcc-space-xl);
    border-radius: var(--mcc-radius-full);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(61, 124, 133, 0.3);
    display: inline-block;
}

.mcc-guest-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(61, 124, 133, 0.4);
}

.mcc-guest-register-btn {
    background: transparent;
    color: var(--mcc-primary) !important;
    padding: var(--mcc-space-xs) var(--mcc-space-md);
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: underline !important;
    transition: all 0.3s ease;
}

.mcc-guest-register-btn:hover {
    color: var(--mcc-secondary) !important;
}

/* Dark mode support */
.mcc-app.dark-mode .mcc-chord-sheet.mcc-guest-limited::before {
    background: linear-gradient(
        to bottom,
        rgba(30, 30, 30, 0) 0%,
        rgba(30, 30, 30, 0.4) 15%,
        rgba(30, 30, 30, 0.7) 40%,
        rgba(30, 30, 30, 0.85) 70%
    );
}

.mcc-app.dark-mode .mcc-guest-blur-content h3 {
    color: #ffffff;
}

.mcc-app.dark-mode .mcc-guest-blur-content p {
    color: #aaaaaa;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .mcc-chord-sheet.mcc-guest-limited {
        max-height: 650px;
    }
    
    .mcc-chord-sheet.mcc-guest-limited::before {
        top: 280px;
    }
    
    .mcc-guest-blur-overlay {
        top: 350px;
        padding: var(--mcc-space-sm);
    }
    
    .mcc-guest-blur-content h3 {
        font-size: 1.1rem;
    }
    
    .mcc-guest-blur-icon {
        font-size: 2rem;
    }
}

/* Schriftgrößen für Chord Sheet */
.mcc-chord-sheet.mcc-size-small {
    font-size: 0.85rem;
}

.mcc-chord-sheet.mcc-size-small .mcc-chord-row {
    font-size: 0.9em;
}

.mcc-chord-sheet.mcc-size-large {
    font-size: 1.25rem;
}

.mcc-chord-sheet.mcc-size-large .mcc-chord-row {
    font-size: 1.1em;
}

.mcc-chord-sheet.mcc-size-xlarge {
    font-size: 1.5rem;
}

.mcc-chord-sheet.mcc-size-xlarge .mcc-chord-row {
    font-size: 1.2em;
}

.mcc-chord-sheet.mcc-size-large .mcc-chord.mcc-chord-solo {
    font-size: 1.2em;
    padding: 6px 16px;
}

/* Song Title & Artist */
.mcc-chord-sheet .mcc-song-title {
    font-family: var(--mcc-font-title);
    font-size: 2rem;
    font-weight: 700;
    color: var(--mcc-dark);
    margin: 0 0 var(--mcc-space-xs);
    text-align: center;
}

.mcc-chord-sheet .mcc-song-artist {
    font-family: var(--mcc-font-body);
    font-size: 1.25rem;
    color: var(--mcc-gray-500);
    margin: 0 0 var(--mcc-space-md);
    text-align: center;
}

.mcc-chord-sheet .mcc-song-key {
    display: inline-flex;
    align-items: center;
    gap: var(--mcc-space-sm);
    padding: var(--mcc-space-sm) var(--mcc-space-md);
    background: rgba(61, 124, 133, 0.1);
    border-radius: var(--mcc-radius-full);
    font-family: var(--mcc-font-body);
    font-size: 0.875rem;
    color: var(--mcc-primary);
    margin-bottom: var(--mcc-space-xl);
}

.mcc-key-label {
    color: var(--mcc-gray-600);
}

.mcc-key-value {
    font-weight: 700;
}

/* Section Labels */
.mcc-section-label {
    font-family: var(--mcc-font-title);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--mcc-accent);
    margin: var(--mcc-space-xl) 0 var(--mcc-space-md);
    padding-bottom: var(--mcc-space-sm);
    border-bottom: 2px solid var(--mcc-accent);
    display: inline-block;
}

/* Sections */
.mcc-section {
    margin-bottom: var(--mcc-space-lg);
    padding: var(--mcc-space-md);
    border-radius: var(--mcc-radius-md);
}

.mcc-section.mcc-chorus {
    background: rgba(232, 146, 79, 0.08);
    border-left: 4px solid var(--mcc-accent);
}

.mcc-section.mcc-bridge {
    background: rgba(61, 124, 133, 0.08);
    border-left: 4px solid var(--mcc-primary);
}

/* Chord Lines */
.mcc-chord-line {
    margin-bottom: var(--mcc-space-sm);
    line-height: 1.4;
}

/* Chord-only lines (Intro, Outro, Zwischenspiele, etc.) */
.mcc-chord-line.mcc-chord-only {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mcc-space-md);
    margin-bottom: var(--mcc-space-md);
    padding: var(--mcc-space-xs) 0;
}

.mcc-chord.mcc-chord-solo {
    font-family: 'Courier New', Consolas, 'Liberation Mono', monospace;
    font-weight: 700;
    font-size: 1em;
    color: var(--mcc-primary);
    background: rgba(61, 124, 133, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
}

.mcc-chord.mcc-chord-solo:hover {
    color: var(--mcc-accent);
    background: rgba(232, 146, 79, 0.15);
}

/* Non-chord annotations (SLURP, *EWWW!*, etc.) */
.mcc-chord-annotation {
    font-family: 'Courier New', Consolas, 'Liberation Mono', monospace;
    font-weight: 700;
    font-size: 1em;
    color: #888;
    padding: 2px 6px;
}

/* Chord + Lyrics Line Groups */
.mcc-chord-line-group {
    margin-bottom: var(--mcc-space-lg);
}

.mcc-chord-row {
    white-space: pre;
    color: var(--mcc-primary);
    font-family: 'Courier New', Consolas, 'Liberation Mono', monospace;
    font-weight: 700;
    font-size: 1em;
    line-height: 1.4;
    min-height: 1.4em;
    margin-bottom: 0;
}

.mcc-chord-row .mcc-chord {
    background: rgba(61, 124, 133, 0.08);
    padding: 1px 4px;
    border-radius: 3px;
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
}

.mcc-chord-row .mcc-chord:hover {
    color: var(--mcc-accent);
    background: rgba(232, 146, 79, 0.15);
}

.mcc-lyrics-row {
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #000000;
    font-family: 'Courier New', Consolas, 'Liberation Mono', monospace;
    font-size: 1em;
    line-height: 1.5;
}

.mcc-lyrics-line {
    margin-bottom: var(--mcc-space-sm);
    color: #000000;
    font-family: 'Courier New', Consolas, 'Liberation Mono', monospace;
    font-size: 1em;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ===== Lyrics-Only Mode ===== */
.mcc-chord-sheet.lyrics-only {
    font-family: var(--mcc-font-body);
}

/* Hide all chord elements when in lyrics-only mode (CSS fallback) */
.mcc-chord-sheet.lyrics-only .mcc-chord,
.mcc-chord-sheet.lyrics-only .mcc-chord-annotation,
.mcc-chord-sheet.lyrics-only .mcc-chord-solo,
.mcc-chord-sheet.lyrics-only .mcc-chord-row,
.mcc-chord-sheet.lyrics-only .mcc-chord-only,
.mcc-chord-sheet.lyrics-only .mcc-chord-line.mcc-chord-only {
    display: none !important;
}

/* Ensure chord-line-group shows only text row in lyrics-only */
.mcc-chord-sheet.lyrics-only .mcc-chord-line-group .mcc-chord-row {
    display: none !important;
}

.mcc-chord-sheet.lyrics-only .mcc-lyrics-line {
    font-family: var(--mcc-font-body);
    color: #000;
    font-size: 1.05em;
    line-height: 1.7;
    margin-bottom: 0.4em;
}

.mcc-chord-sheet.lyrics-only .mcc-section-label {
    color: var(--mcc-primary);
    font-family: var(--mcc-font-title);
    font-weight: 700;
    font-size: 1.1em;
    margin-top: 1.5em;
    margin-bottom: 0.6em;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--mcc-primary);
    display: inline-block;
}

/* Inline section labels within lyrics lines */
.mcc-chord-sheet.lyrics-only .mcc-inline-label {
    color: var(--mcc-primary);
    font-weight: 700;
    font-family: var(--mcc-font-title);
}

.mcc-chord-sheet.lyrics-only .mcc-empty-line {
    height: 0.8em;
}

.mcc-chord-sheet.lyrics-only .mcc-song-capo,
.mcc-chord-sheet.lyrics-only .mcc-song-tempo,
.mcc-chord-sheet.lyrics-only .mcc-song-time {
    font-family: var(--mcc-font-body);
    color: #000;
}

.mcc-empty-line {
    height: var(--mcc-space-lg);
}

/* ===== Chord Diagrams ===== */
.mcc-chord-diagrams {
    padding: var(--mcc-space-xl);
    background: var(--mcc-gray-50);
    border-top: 1px solid var(--mcc-gray-200);
}

.mcc-diagrams-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: var(--mcc-space-lg);
}

.mcc-diagrams-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    border: 2px solid var(--mcc-gray-200);
    border-radius: var(--mcc-radius-full);
    font-family: var(--mcc-font-title);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mcc-gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mcc-diagrams-tab:hover {
    border-color: var(--mcc-primary);
    color: var(--mcc-primary);
}

.mcc-diagrams-tab.active {
    background: var(--mcc-primary);
    border-color: var(--mcc-primary);
    color: white;
}

.mcc-diagrams-tab svg {
    flex-shrink: 0;
}

/* Boomwhacker color toggle */
.mcc-piano-color-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #CBD2D9;
    background: #FAF8F3;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    transition: all 0.2s ease;
}
.mcc-piano-color-toggle:hover {
    border-color: #3D7C85;
    transform: scale(1.1);
}
.mcc-piano-color-toggle.active {
    border-color: #3D7C85;
    background: #EEF3F4;
    box-shadow: 0 0 0 2px rgba(61,124,133,0.2);
}
.mcc-bw-dots {
    display: flex;
    gap: 1.5px;
    align-items: center;
}
.mcc-bw-dots span {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.mcc-diagrams-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mcc-space-lg);
}

.mcc-chord-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mcc-space-sm);
    background: white;
    padding: 12px 16px;
    border-radius: var(--mcc-radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    min-width: 80px;
}

.mcc-diagram-name {
    font-family: var(--mcc-font-title);
    font-weight: 700;
    font-size: 1rem;
    color: var(--mcc-primary);
}

.mcc-diagram-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mcc-diagram-svg {
    width: 60px;
    height: 85px;
}

.mcc-ukulele-svg {
    width: 50px;
    height: 85px;
}

.mcc-piano-svg {
    width: 90px;
    height: 55px;
}

.mcc-boomwhacker-svg {
    height: 55px;
    width: auto;
    max-width: 150px;
}

/* Collapsible Chord Diagrams Panel */
.mcc-chord-diagrams-panel {
    background: var(--mcc-gray-50);
    border-bottom: 1px solid var(--mcc-gray-200);
    padding: var(--mcc-space-md) var(--mcc-space-lg);
    overflow: hidden;
    transition: padding 0.2s ease;
}

/* Sticky Chord Panel when scrolling */
.mcc-chord-diagrams-panel.mcc-panel-sticky {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 998;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 8px 16px;
}

/* Desktop: Kompakter wenn sticky */
.mcc-chord-diagrams-panel.mcc-panel-sticky .mcc-diagrams-tabs {
    margin-bottom: 8px;
}

.mcc-chord-diagrams-panel.mcc-panel-sticky .mcc-diagrams-tab {
    padding: 6px 14px;
    font-size: 0.85rem;
}

.mcc-chord-diagrams-panel.mcc-panel-sticky .mcc-chord-diagram {
    padding: 6px 10px;
}

.mcc-chord-diagrams-panel.mcc-panel-sticky .mcc-diagram-name {
    font-size: 0.8rem;
}

.mcc-chord-diagrams-panel.mcc-panel-sticky .mcc-diagram-svg {
    width: 45px;
    height: 65px;
}

.mcc-chord-diagrams-panel.mcc-panel-sticky .mcc-ukulele-svg {
    width: 38px;
    height: 65px;
}

.mcc-chord-diagrams-panel.mcc-panel-sticky .mcc-piano-svg {
    width: 65px;
    height: 40px;
}

.mcc-chord-diagrams-panel.mcc-panel-sticky .mcc-boomwhacker-svg {
    height: 40px;
    width: auto;
    max-width: 110px;
}

/* Mobile: Compact sticky panel with horizontal scroll */
@media (max-width: 768px) {
    .mcc-chord-diagrams-panel {
        padding: 8px 10px;
    }
    
    .mcc-chord-diagrams-panel.mcc-panel-sticky {
        padding: 6px 10px;
    }
    
    .mcc-chord-diagrams-panel.mcc-panel-sticky .mcc-diagrams-tabs {
        margin-bottom: 6px;
    }
    
    .mcc-chord-diagrams-panel.mcc-panel-sticky .mcc-diagrams-tab {
        padding: 4px 10px;
        font-size: 0.75rem;
    }
    
    /* Horizontal scroll container */
    .mcc-chord-diagrams-panel .mcc-diagrams-grid {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 8px;
        padding-bottom: 6px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Thin scrollbar */
    .mcc-chord-diagrams-panel .mcc-diagrams-grid::-webkit-scrollbar {
        height: 4px;
    }
    
    .mcc-chord-diagrams-panel .mcc-diagrams-grid::-webkit-scrollbar-track {
        background: var(--mcc-gray-100);
        border-radius: 2px;
    }
    
    .mcc-chord-diagrams-panel .mcc-diagrams-grid::-webkit-scrollbar-thumb {
        background: var(--mcc-primary);
        border-radius: 2px;
    }
    
    /* Compact chord diagrams */
    .mcc-chord-diagrams-panel .mcc-chord-diagram {
        padding: 6px 8px;
        min-width: 55px;
        flex-shrink: 0;
    }
    
    .mcc-chord-diagrams-panel .mcc-diagram-name {
        font-size: 0.75rem;
    }
    
    .mcc-chord-diagrams-panel .mcc-diagram-svg {
        width: 40px;
        height: 55px;
    }
    
    .mcc-chord-diagrams-panel .mcc-ukulele-svg {
        width: 35px;
        height: 55px;
    }
    
    .mcc-chord-diagrams-panel .mcc-piano-svg {
        width: 60px;
        height: 36px;
    }
}

.mcc-chord-diagrams-panel .mcc-chord-diagrams {
    padding: 0;
    border-top: none;
}

.mcc-chord-diagrams-panel .mcc-diagrams-grid {
    gap: var(--mcc-space-md);
}

.mcc-chord-diagrams-panel .mcc-chord-diagram {
    padding: 8px 12px;
    min-width: 70px;
}

.mcc-chord-diagrams-panel .mcc-diagram-name {
    font-size: 0.875rem;
}

.mcc-chord-diagrams-panel .mcc-diagram-svg {
    width: 50px;
    height: 70px;
}

.mcc-chord-diagrams-panel .mcc-ukulele-svg {
    width: 42px;
    height: 70px;
}

.mcc-chord-diagrams-panel .mcc-piano-svg {
    width: 75px;
    height: 45px;
}

/* Chord Toggle Button Active State */
#mcc-chords-toggle-btn.mcc-active {
    background: var(--mcc-primary);
    color: white;
}

/* Chord Hover Tooltip */
.mcc-chord-tooltip {
    position: fixed;
    z-index: 10000;
    background: white;
    border-radius: var(--mcc-radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 10px;
    pointer-events: none;
    min-width: 90px;
}

.mcc-chord-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: white;
}

.mcc-chord-tooltip-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.mcc-tooltip-name {
    font-family: var(--mcc-font-title);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--mcc-primary);
}

.mcc-tooltip-diagram {
    display: flex;
    justify-content: center;
}

.mcc-tooltip-diagram .mcc-diagram-svg {
    width: 55px;
    height: 75px;
}

.mcc-tooltip-diagram .mcc-ukulele-svg {
    width: 45px;
    height: 75px;
}

.mcc-tooltip-diagram .mcc-piano-svg {
    width: 80px;
    height: 48px;
}

/* Responsive - Tabs immer nebeneinander */
@media (max-width: 480px) {
    .mcc-diagrams-tabs {
        flex-direction: row;
        gap: 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    
    .mcc-diagrams-tab {
        padding: 6px 12px;
        font-size: 0.8rem;
        gap: 4px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .mcc-diagrams-tab svg {
        width: 14px;
        height: 14px;
    }
}

/* ===== Toast Notifications ===== */
.mcc-toast-container {
    position: fixed;
    bottom: var(--mcc-space-xl);
    right: var(--mcc-space-xl);
    /* v4.32.119: Über Audioplayer (z-index 999999) und Context-Menüs */
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    gap: var(--mcc-space-sm);
}

.mcc-toast {
    padding: var(--mcc-space-md) var(--mcc-space-lg);
    background: var(--mcc-dark);
    color: var(--mcc-white);
    border-radius: var(--mcc-radius-md);
    box-shadow: var(--mcc-shadow-lg);
    display: flex;
    align-items: center;
    gap: var(--mcc-space-md);
    animation: mcc-toast-in 0.3s ease;
    max-width: 400px;
    font-size: 0.9375rem;
    line-height: 1.4;
}

.mcc-toast.mcc-toast-success {
    background: var(--mcc-success);
}

.mcc-toast.mcc-toast-error {
    background: var(--mcc-error);
}

.mcc-toast.mcc-toast-out {
    animation: mcc-toast-out 0.3s ease forwards;
}

@keyframes mcc-toast-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes mcc-toast-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ===== Fullscreen Mode ===== */
.mcc-app.mcc-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: auto;
    background: white;
}

/* v4.32.402: «.mcc-page-head» (Titelkopf seit 4.32.384) gehoerte von
   Anfang an in diese Liste. Ohne sie stand im Vollbild der Titel
   «Songs» samt Beschreibung und den Knoepfen «Meine Musik» /
   «Audioplayer» weiterhin oben und schob das Chordsheet nach unten. */
.mcc-app.mcc-fullscreen .mcc-page-head,
.mcc-app.mcc-fullscreen .mcc-header,
.mcc-app.mcc-fullscreen .mcc-search-section,
.mcc-app.mcc-fullscreen .mcc-song-list-container,
.mcc-app.mcc-fullscreen .mcc-content-tabs,
.mcc-app.mcc-fullscreen .mcc-song-header {
    display: none !important;
}

/* v4.32.402: Im Vollbild zieht «.mcc-app» den Rand der Seitenvorlage
   nicht mehr mit — sonst sitzt die Ebene 24px zu hoch. */
.mcc-app.mcc-fullscreen:not(.mcc-embedded) {
    margin-top: 0 !important;
}

.mcc-app.mcc-fullscreen .mcc-song-display {
    display: block !important;
    padding: 0;
    margin: 0 auto;
    max-width: 1200px;
}

.mcc-app.mcc-fullscreen .mcc-song-container {
    border-radius: 0;
    min-height: 100vh;
    overflow: visible;
    margin: 0 auto;
    box-shadow: none;
    max-width: 1200px;
}

/* Keep toolbar sticky in fullscreen - MUSS fixed überschreiben */
.mcc-app.mcc-fullscreen .mcc-song-toolbar,
.mcc-app.mcc-fullscreen .mcc-song-toolbar.mcc-toolbar-sticky,
.mcc-app.mcc-fullscreen .mcc-toolbar-v3.mcc-toolbar-sticky {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    z-index: 100;
    background: var(--mcc-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Chord diagrams panel in fullscreen */
.mcc-app.mcc-fullscreen .mcc-chord-diagrams-panel {
    position: sticky;
    top: 56px;
    z-index: 99;
}

/* Hide mini player in fullscreen */
.mcc-app.mcc-fullscreen .mcc-mini-player {
    display: none;
}

/* ============================================================
   v4.32.402: Vollbild — Kopf der Seitenvorlage stilllegen.
   Das Vollbild ist eine fixe Ebene ueber der Seite. Der Kopf der
   Vorlage (Meldo-Logo, Navigation, Suche) klebt aber oben am
   Fenster und zeichnete darueber. Solange nur die Werkzeugleiste
   darunterlag, fiel das kaum auf; seit der Titelkopf (4.32.384)
   dazukam, stossen Titelzeile und Navigation sichtbar zusammen.
   Im Vollbild bleibt darum nur noch das Chordsheet stehen.
   Die Klasse setzt frontend.js an «body».
   ============================================================ */
body.mcc-fullscreen-on #masthead,
body.mcc-fullscreen-on .site-header,
body.mcc-fullscreen-on header.sticky-header,
body.mcc-fullscreen-on .bb-mobile-header,
body.mcc-fullscreen-on #wpadminbar {
    display: none !important;
}

/* Kein zweiter Scrollbalken hinter der Vollbild-Ebene */
body.mcc-fullscreen-on {
    overflow: hidden !important;
}

/* Die Ebene ueber alles legen, was die Vorlage sonst stapelt */
.mcc-app.mcc-fullscreen {
    z-index: 2147483000 !important;
}

/* ===== Print Preview Modal ===== */
.mcc-print-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--mcc-transition-normal), visibility var(--mcc-transition-normal);
    border-radius: var(--mcc-radius-lg);
    overflow: hidden;
}

.mcc-print-modal.mcc-modal-visible {
    opacity: 1;
    visibility: visible;
}

.mcc-print-overlay {
    position: absolute;
    inset: 0;
    background: rgba(17, 20, 22, 0.8);
    backdrop-filter: blur(4px);
}

.mcc-print-container {
    position: relative;
    display: flex;
    width: 100%;
}

.mcc-print-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--mcc-space-xl);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--mcc-gray-400);
    flex: 1;
}

.mcc-print-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 100%;
}

.mcc-print-page {
    position: relative;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    padding: 57px; /* 15mm at 96dpi */
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden;
}

/* Measurement helper - hidden */
.mcc-print-page-measure {
    font-family: 'Courier New', Courier, monospace;
}

.mcc-print-page-measure .mcc-print-chords {
    font-family: 'Courier New', Courier, monospace;
    white-space: pre-wrap;
    line-height: 1.6;
}

.mcc-print-chords-wrapper {
    overflow: hidden;
}

.mcc-print-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 5mm;
    padding-bottom: 5mm;
    border-bottom: 2px solid var(--mcc-gray-200);
}

.mcc-print-title-section {
    flex: 1;
}

.mcc-print-title {
    font-family: var(--mcc-font-title);
    font-size: 24pt;
    font-weight: 700;
    margin: 0 0 2mm;
    color: var(--mcc-dark);
    line-height: 1.2;
}

.mcc-print-artist {
    font-size: 14pt;
    color: var(--mcc-gray-600);
    margin: 0;
}

.mcc-print-artist strong {
    color: var(--mcc-dark);
}

.mcc-print-ug-logo {
    flex-shrink: 0;
    margin-left: 5mm;
}

.mcc-print-ug-logo svg {
    width: 32px;
    height: 32px;
}

.mcc-print-meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: 4mm;
    margin-bottom: 5mm;
    font-size: 10pt;
    color: var(--mcc-gray-600);
}

.mcc-print-meta-item {
    background: var(--mcc-gray-100);
    padding: 1.5mm 3mm;
    border-radius: 2mm;
}

.mcc-print-divider {
    height: 1px;
    background: var(--mcc-gray-200);
    margin: 5mm 0;
}

/* Print Chord Diagrams */
.mcc-print-diagrams {
    margin-bottom: 5mm;
}

.mcc-print-diagrams-title {
    font-size: 9pt;
    font-weight: 700;
    color: var(--mcc-dark);
    margin-bottom: 2mm;
    letter-spacing: 0.5px;
}

.mcc-print-diagrams-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 3mm;
    padding: 3mm;
    background: var(--mcc-gray-50);
    border-radius: 2mm;
}

/* Multi-instrument label */
.mcc-print-instrument-label {
    width: 100%;
    font-size: 9pt;
    font-weight: 700;
    color: var(--mcc-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2mm 0 1mm 0;
    margin-top: 2mm;
    border-top: 1px solid var(--mcc-gray-200);
}

.mcc-print-instrument-label:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.mcc-print-diagram-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 45px;
}

.mcc-print-diagram-name {
    font-size: 9pt;
    font-weight: 700;
    color: var(--mcc-primary);
    margin-bottom: 1mm;
}

.mcc-print-diagram-svg {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-print-diagram-svg svg {
    width: 40px;
    height: auto;
}

/* Page Number */
.mcc-print-page-number {
    position: absolute;
    bottom: 15px;
    right: 20px;
    font-size: 9pt;
    color: var(--mcc-gray-500);
}

/* Page Number */
.mcc-print-page-number {
    position: absolute;
    bottom: 12px;
    right: 20px;
    font-size: 9pt;
    color: var(--mcc-gray-500);
    background: rgba(255,255,255,0.9);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Strumming Pattern Styles */
.mcc-print-strumming {
    margin-bottom: 5mm;
}

.mcc-strumming-section {
    background: var(--mcc-gray-50);
    padding: 4mm;
    border-radius: 2mm;
}

.mcc-strumming-title {
    font-size: 10pt;
    font-weight: 700;
    margin: 0 0 2mm;
    color: var(--mcc-dark);
    letter-spacing: 0.5px;
}

.mcc-strumming-bpm {
    font-size: 9pt;
    color: var(--mcc-gray-500);
    margin-bottom: 3mm;
}

.mcc-strum-visual {
    display: flex;
    gap: 3mm;
}

.mcc-strum-beat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 6mm;
}

.mcc-strum-arrow {
    font-size: 16pt;
    line-height: 1;
    color: var(--mcc-dark);
}

.mcc-strum-down {
    color: var(--mcc-primary);
}

.mcc-strum-up {
    color: var(--mcc-gray-500);
}

.mcc-strum-count {
    font-size: 8pt;
    color: var(--mcc-gray-500);
    margin-top: 1mm;
}

/* Print Chord Sheet */
.mcc-print-chords {
    position: relative;
    font-family: 'Courier New', Courier, monospace;
    white-space: pre-wrap;
    line-height: 1.6;
}

/* Print Lyrics-Only Mode */
.mcc-print-chords.lyrics-only {
    font-family: 'Akko', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.mcc-print-chords.lyrics-only .mcc-lyrics-line {
    font-family: 'Akko', -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: #000 !important;
    font-size: 1.05em;
    line-height: 1.7;
    margin-bottom: 0.4em;
}

.mcc-print-chords.lyrics-only .mcc-section-label {
    font-family: 'Akko', -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: #000 !important;
    font-weight: 600;
}

/* Two column container for manual distribution */
.mcc-print-two-col-container {
    display: flex;
    gap: 20px;
}

.mcc-print-column {
    flex: 1;
    overflow: hidden;
}

.mcc-print-column .mcc-print-chords {
    height: auto;
}

/* Multi-page info note for 2-column preview */
.mcc-print-multipage-info {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(61, 124, 133, 0.1) 0%, rgba(232, 146, 79, 0.1) 100%);
    border: 1px solid rgba(61, 124, 133, 0.3);
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 20px;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

.mcc-print-multipage-icon {
    font-size: 20px;
    line-height: 1;
}

.mcc-print-multipage-text {
    font-size: 11px;
    color: var(--mcc-dark);
    line-height: 1.35;
}

.mcc-print-multipage-text strong {
    color: var(--mcc-primary);
    font-weight: 600;
}

.mcc-print-multipage-text span {
    color: #666;
}

/* Print logo */
.mcc-print-logo {
    flex-shrink: 0;
}

.mcc-print-logo svg {
    width: 100px;
    height: auto;
}

.mcc-print-chords .mcc-chord {
    font-weight: 700;
    color: var(--mcc-primary);
}

.mcc-print-chords .mcc-chord.mcc-chord-hidden {
    color: inherit;
    font-weight: inherit;
}

/* Print Sidebar */
.mcc-print-sidebar {
    width: 280px;
    background: white;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    z-index: 1;
    overflow-y: auto;
}

.mcc-print-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mcc-space-lg);
    border-bottom: 1px solid var(--mcc-gray-200);
    gap: var(--mcc-space-md);
}

.mcc-print-sidebar-header h3 {
    margin: 0;
    font-family: var(--mcc-font-title);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--mcc-dark);
    flex: 1;
}

.mcc-print-close {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--mcc-gray-100);
    border: none;
    border-radius: var(--mcc-radius-sm);
    color: #666 !important;
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
    flex-shrink: 0;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}

.mcc-print-close:hover {
    background: var(--mcc-gray-200);
    color: #333 !important;
}

.mcc-print-options {
    padding: var(--mcc-space-lg);
    overflow-y: auto;
}

.mcc-print-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mcc-space-md) 0;
    border-bottom: 1px solid var(--mcc-gray-100);
}

.mcc-print-option:last-child {
    border-bottom: none;
}

.mcc-print-option.mcc-print-option-main {
    border-bottom: none;
    padding-bottom: var(--mcc-space-sm);
}

.mcc-print-option label:first-child {
    font-size: 0.9375rem;
    color: var(--mcc-dark);
}

/* Print Suboption - Instrument Selection */
.mcc-print-suboption {
    padding: 0 0 var(--mcc-space-md) var(--mcc-space-md);
    border-bottom: 1px solid var(--mcc-gray-100);
}

.mcc-print-instrument-btns {
    display: flex;
    gap: var(--mcc-space-xs);
    flex-wrap: wrap;
}

.mcc-instrument-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--mcc-gray-100);
    border: 1px solid var(--mcc-gray-200);
    border-radius: var(--mcc-radius-sm);
    color: var(--mcc-gray-600);
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
}

.mcc-instrument-btn svg {
    width: 14px;
    height: 14px;
}

.mcc-instrument-btn:hover {
    background: var(--mcc-gray-200);
    color: var(--mcc-dark);
}

.mcc-instrument-btn.active {
    background: var(--mcc-primary);
    border-color: var(--mcc-primary);
    color: white;
}

/* Print Toggle Switch */
.mcc-print-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.mcc-print-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mcc-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--mcc-gray-300);
    border-radius: 12px;
    transition: all var(--mcc-transition-fast);
}

.mcc-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: all var(--mcc-transition-fast);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.mcc-print-toggle input:checked + .mcc-toggle-slider {
    background: var(--mcc-primary);
}

.mcc-print-toggle input:checked + .mcc-toggle-slider::before {
    transform: translateX(20px);
}

/* Print Select */
.mcc-print-select-wrapper {
    position: relative;
}

.mcc-print-select-wrapper select {
    appearance: none;
    padding: var(--mcc-space-sm) var(--mcc-space-xl) var(--mcc-space-sm) var(--mcc-space-md);
    font-size: 0.875rem;
    border: 1px solid var(--mcc-gray-300);
    border-radius: var(--mcc-radius-sm);
    background: white;
    cursor: pointer;
    min-width: 80px;
}

.mcc-print-select-wrapper::after {
    content: '›';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    color: var(--mcc-gray-500);
    pointer-events: none;
    font-size: 1rem;
}

/* Font Size Controls */
.mcc-print-font-controls {
    display: flex;
    align-items: center;
    gap: var(--mcc-space-sm);
}

.mcc-print-font-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mcc-gray-100);
    border: 1px solid var(--mcc-gray-300);
    border-radius: var(--mcc-radius-sm);
    font-size: 1rem;
    font-weight: 600;
    color: var(--mcc-dark);
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
}

.mcc-print-font-btn:hover {
    background: var(--mcc-primary);
    border-color: var(--mcc-primary);
    color: white;
}

#mcc-print-font-size {
    min-width: 40px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--mcc-gray-600);
}

/* Print Actions Wrapper */
.mcc-print-actions-wrapper {
    padding: var(--mcc-space-lg);
    border-top: 1px solid var(--mcc-gray-200);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mcc-space-md);
}

/* Print Mode Toggle (Icon-based) */
.mcc-print-mode-toggle {
    display: flex;
    background: var(--mcc-gray-100);
    border-radius: var(--mcc-radius-md);
    padding: 3px;
    gap: 2px;
}

.mcc-print-mode-toggle .mcc-mode-btn {
    width: 44px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: calc(var(--mcc-radius-md) - 2px);
    background: transparent;
    color: var(--mcc-gray-400);
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
}

.mcc-print-mode-toggle .mcc-mode-btn:hover {
    color: var(--mcc-gray-600);
}

.mcc-print-mode-toggle .mcc-mode-btn.active {
    background: white;
    color: var(--mcc-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mcc-print-mode-toggle .mcc-mode-btn svg {
    width: 18px;
    height: 18px;
}

/* Print Primary Button */
.mcc-print-actions-wrapper .mcc-print-btn-primary {
    width: 100%;
}

/* Print Secondary Actions */
.mcc-print-actions-secondary {
    display: flex;
    flex-direction: column;
    gap: var(--mcc-space-sm);
    width: 100%;
}

.mcc-print-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mcc-space-sm);
    padding: var(--mcc-space-md) var(--mcc-space-lg);
    font-family: var(--mcc-font-title);
    font-size: 0.9375rem;
    font-weight: 600;
    border: none;
    border-radius: var(--mcc-radius-md);
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
}

.mcc-print-btn-primary {
    background: var(--mcc-accent);
    color: white;
}

.mcc-print-btn-primary:hover {
    background: var(--mcc-accent-dark);
    transform: translateY(-2px);
}

.mcc-print-btn-secondary {
    background: white;
    color: var(--mcc-dark);
    border: 2px solid var(--mcc-gray-300);
}

.mcc-print-btn-secondary:hover {
    background: var(--mcc-primary);
    border-color: var(--mcc-primary);
    color: white;
}

.mcc-print-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* ===== Print Styles ===== */
@media print {
    /* Hide everything by default */
    body * {
        visibility: hidden;
    }
    
    /* Only show print-only container */
    #mcc-print-only,
    #mcc-print-only * {
        visibility: visible !important;
    }
    
    #mcc-print-only {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    /* Hide preview modal and all app elements */
    .mcc-print-modal,
    .mcc-print-preview,
    .mcc-print-sidebar,
    .mcc-print-overlay,
    .mcc-print-pages,
    .mcc-print-page,
    .mcc-print-info-note,
    .mcc-print-full-content,
    .mcc-print-multipage-info,
    .mcc-app {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Print-only styles */
    #mcc-print-only .mcc-print-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 10px;
    }
    
    #mcc-print-only .mcc-print-title {
        font-size: 24pt;
        margin: 0 0 4px 0;
        color: black;
    }
    
    #mcc-print-only .mcc-print-artist {
        font-size: 12pt;
        margin: 0;
        color: #333;
    }
    
    #mcc-print-only .mcc-print-meta-info {
        display: flex;
        gap: 15px;
        margin: 10px 0;
        padding: 8px 0;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        font-size: 10pt;
    }
    
    #mcc-print-only .mcc-print-diagrams {
        margin: 15px 0;
    }
    
    #mcc-print-only .mcc-print-diagrams-title {
        font-size: 10pt;
        font-weight: bold;
        margin-bottom: 8px;
    }
    
    #mcc-print-only .mcc-print-diagrams-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    #mcc-print-only .mcc-print-chord-diagram {
        text-align: center;
    }
    
    #mcc-print-only .mcc-print-chord-diagram svg {
        width: 40px;
        height: auto;
    }
    
    #mcc-print-only .mcc-print-divider {
        height: 1px;
        background: #ddd;
        margin: 10px 0;
    }
    
    #mcc-print-only .mcc-print-chords {
        font-family: 'Courier New', monospace;
        white-space: pre-wrap;
        line-height: 1.4;
    }
    
    /* Print Lyrics-Only Mode */
    #mcc-print-only .mcc-print-chords.lyrics-only {
        font-family: 'Akko', -apple-system, BlinkMacSystemFont, sans-serif !important;
    }
    
    #mcc-print-only .mcc-print-chords.lyrics-only .mcc-lyrics-line {
        font-family: 'Akko', -apple-system, BlinkMacSystemFont, sans-serif !important;
        color: #000 !important;
        line-height: 1.7;
        margin-bottom: 0.4em;
    }
    
    #mcc-print-only .mcc-print-chords.lyrics-only .mcc-section-label {
        font-family: 'Akko', -apple-system, BlinkMacSystemFont, sans-serif !important;
        color: #000 !important;
        font-weight: 600;
        border-bottom: none;
    }
    
    #mcc-print-only .mcc-print-chords .mcc-chord {
        color: black !important;
        font-weight: bold !important;
    }
    
    #mcc-print-only .mcc-print-chords .mcc-chord-hidden {
        visibility: hidden !important;
    }
    
    #mcc-print-only .mcc-section-label {
        color: #3D7C85 !important;
        font-weight: bold;
        text-transform: uppercase;
        border-bottom: 2px solid #3D7C85;
        display: inline-block;
        padding-bottom: 2px;
        margin: 15px 0 8px 0;
    }
    
    /* Page setup */
    @page {
        margin: 15mm;
        size: A4 portrait;
    }
}

/* Responsive Print Modal */
@media (max-width: 900px) {
    .mcc-print-container {
        flex-direction: column;
    }
    
    .mcc-print-sidebar {
        width: 100%;
        max-height: none;
        order: 1;
    }
    
    .mcc-print-sidebar-header {
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
    }
    
    .mcc-print-close {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 24px;
    }
    
    .mcc-print-preview {
        flex: 1;
        min-height: 200px;
        order: 2;
        padding: var(--mcc-space-md);
        padding-bottom: 0;
    }
    
    /* Seiten-Skalierung wird im JS berechnet - hier keine Überschreibung */
}

/* ===== Song Selection Modal ===== */
.mcc-selection-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mcc-space-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--mcc-transition-normal), visibility var(--mcc-transition-normal);
}

.mcc-selection-modal.mcc-modal-visible {
    opacity: 1;
    visibility: visible;
}

.mcc-selection-overlay {
    position: absolute;
    inset: 0;
    background: rgba(17, 20, 22, 0.7);
    backdrop-filter: blur(4px);
}

.mcc-selection-content {
    position: relative;
    background: var(--mcc-white);
    border-radius: var(--mcc-radius-xl);
    box-shadow: var(--mcc-shadow-lg);
    max-width: 800px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.95);
    transition: transform var(--mcc-transition-bounce);
}

.mcc-modal-visible .mcc-selection-content {
    transform: translateY(0) scale(1);
}

.mcc-selection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--mcc-gray-200);
    background: linear-gradient(135deg, var(--mcc-primary) 0%, var(--mcc-primary-dark) 100%);
}

.mcc-selection-header h3 {
    margin: 0;
    font-family: var(--mcc-font-title);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mcc-white);
}

.mcc-selection-close {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: var(--mcc-radius-sm);
    color: var(--mcc-white);
    cursor: pointer;
    transition: background var(--mcc-transition-fast);
}

.mcc-selection-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.mcc-selection-close svg {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    display: block;
    flex-shrink: 0;
}

.mcc-selection-message {
    padding: var(--mcc-space-md) var(--mcc-space-xl);
    margin: 0;
    color: var(--mcc-gray-600);
    font-size: 0.9375rem;
    background: var(--mcc-gray-50);
    border-bottom: 1px solid var(--mcc-gray-200);
}

.mcc-selection-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--mcc-space-md);
}

.mcc-selection-item {
    display: flex;
    align-items: center;
    gap: var(--mcc-space-md);
    padding: var(--mcc-space-md) var(--mcc-space-lg);
    margin-bottom: var(--mcc-space-sm);
    background: var(--mcc-gray-50);
    border: 2px solid transparent;
    border-radius: var(--mcc-radius-md);
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
}

.mcc-selection-item:hover {
    background: var(--mcc-white);
    border-color: var(--mcc-primary);
    transform: translateX(4px);
}

.mcc-selection-item:last-child {
    margin-bottom: 0;
}

.mcc-selection-item.mcc-loading {
    opacity: 0.7;
    pointer-events: none;
}

.mcc-selection-item.mcc-loading .mcc-selection-btn {
    animation: mcc-spin 0.8s linear infinite;
}

.mcc-selection-main {
    flex: 1;
    min-width: 0;
}

.mcc-selection-title {
    display: block;
    font-family: var(--mcc-font-title);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--mcc-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-selection-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mcc-source-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    flex-shrink: 0;
}

.mcc-source-songsterr {
    background: #ff6b35;
    color: white;
}

.mcc-source-ug {
    background: #ffc600;
    color: #1a1a1a;
}

.mcc-source-ai {
    background: var(--mcc-gray-200);
    color: var(--mcc-gray-600);
}

.mcc-selection-artist {
    display: block;
    font-size: 0.8rem;
    color: var(--mcc-gray-500);
    margin-top: 2px;
}

.mcc-selection-year {
    color: var(--mcc-gray-400);
}

.mcc-selection-popularity {
    display: block;
    font-size: 0.75rem;
    margin-top: 4px;
    letter-spacing: 1px;
}

.mcc-suggestion-info {
    display: none;
    font-size: 0.75rem;
    color: var(--mcc-gray-500);
    max-width: 150px;
    text-align: right;
}

@media (min-width: 480px) {
    .mcc-suggestion-info {
        display: block;
    }
}

.mcc-selection-btn,
.mcc-selection-arrow {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mcc-accent);
    border: none;
    border-radius: 50%;
    color: var(--mcc-white);
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
}

.mcc-selection-btn:hover,
.mcc-selection-arrow:hover {
    transform: scale(1.1);
    box-shadow: var(--mcc-shadow-glow);
}

.mcc-selection-btn svg,
.mcc-selection-arrow svg {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    display: block;
    flex-shrink: 0;
}

.mcc-selection-footer {
    padding: var(--mcc-space-md) var(--mcc-space-xl);
    border-top: 1px solid var(--mcc-gray-200);
    background: var(--mcc-gray-50);
}

.mcc-selection-hint {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--mcc-gray-500);
    text-align: center;
}

/* Generating Overlay */
.mcc-generating-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mcc-space-md);
    opacity: 0;
    visibility: hidden;
    transition: all var(--mcc-transition-normal);
    border-radius: var(--mcc-radius-xl);
    z-index: 10;
}

.mcc-selection-content.mcc-generating .mcc-generating-overlay {
    opacity: 1;
    visibility: visible;
}

.mcc-generating-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--mcc-gray-200);
    border-top-color: var(--mcc-primary);
    border-radius: 50%;
    animation: mcc-spin 0.8s linear infinite;
}

.mcc-generating-overlay p {
    margin: 0;
    font-family: var(--mcc-font-title);
    font-weight: 600;
    color: var(--mcc-primary);
}

/* Selected Item */
.mcc-selection-item.mcc-selected {
    background: rgba(61, 124, 133, 0.1);
    border-color: var(--mcc-primary);
}

/* No Suggestions Modal */
.mcc-no-suggestions-content {
    padding: var(--mcc-space-xl);
    text-align: center;
}

.mcc-no-suggestions-content p {
    margin: 0 0 var(--mcc-space-md);
    color: var(--mcc-gray-600);
}

.mcc-query-display {
    background: var(--mcc-gray-100);
    padding: var(--mcc-space-md);
    border-radius: var(--mcc-radius-sm);
    font-size: 0.875rem;
}

.mcc-query-display strong {
    color: var(--mcc-primary);
}

.mcc-no-suggestions-footer {
    display: flex;
    gap: var(--mcc-space-md);
    justify-content: center;
    padding: var(--mcc-space-lg) var(--mcc-space-xl);
}

.mcc-btn-cancel,
.mcc-btn-try-anyway {
    padding: var(--mcc-space-md) var(--mcc-space-xl);
    font-family: var(--mcc-font-title);
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--mcc-radius-md);
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
}

.mcc-btn-cancel {
    background: var(--mcc-gray-100);
    border: 1px solid var(--mcc-gray-300);
    color: var(--mcc-gray-600);
}

.mcc-btn-cancel:hover {
    background: var(--mcc-gray-200);
}

.mcc-btn-try-anyway {
    background: var(--mcc-accent);
    border: none;
    color: var(--mcc-white);
}

.mcc-btn-try-anyway:hover {
    background: var(--mcc-accent-dark);
    transform: translateY(-2px);
}

/* ===== Smart Search Modal ===== */
.mcc-smart-modal .mcc-selection-content {
    max-width: 600px;
    max-height: 85vh;
}

.mcc-smart-section {
    border-bottom: 1px solid var(--mcc-gray-200);
}

.mcc-smart-section:last-child {
    border-bottom: none;
}

.mcc-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--mcc-gray-50);
    font-family: var(--mcc-font-title);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mcc-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mcc-section-header svg {
    opacity: 0.7;
}

.mcc-section-count {
    background: var(--mcc-primary);
    color: var(--mcc-white);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    margin-left: auto;
}

.mcc-db-section .mcc-section-count {
    background: var(--mcc-primary);
}

.mcc-ai-section .mcc-section-header {
    color: var(--mcc-gray-500);
}

/* UG Section Styles */
.mcc-ug-section .mcc-section-header {
    color: var(--mcc-gray-700);
}

.mcc-ug-section .mcc-section-count {
    background: var(--mcc-secondary);
}

.mcc-db-list,
.mcc-ai-list,
.mcc-ug-list {
    max-height: 350px;
    overflow-y: auto;
}

/* Unified Results List */
.mcc-unified-results {
    flex: 1;
    overflow-y: auto;
    max-height: calc(100vh - 220px);
}

.mcc-song-list {
    display: flex;
    flex-direction: column;
}

.mcc-song-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--mcc-border-light);
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
}

.mcc-song-item:hover {
    background: var(--mcc-gray-50);
    transform: translateX(4px);
}

.mcc-song-item:last-child {
    border-bottom: none;
}

/* DB Song (own collection) */
.mcc-db-song {
    background: linear-gradient(90deg, rgba(61, 124, 133, 0.02) 0%, transparent 100%);
}

.mcc-db-song:hover {
    background: linear-gradient(90deg, rgba(61, 124, 133, 0.08) 0%, rgba(61, 124, 133, 0.02) 100%);
}

/* UG Song (from Ultimate Guitar) */
.mcc-ug-song {
    background: linear-gradient(90deg, rgba(232, 146, 79, 0.02) 0%, transparent 100%);
}

.mcc-ug-song:hover {
    background: linear-gradient(90deg, rgba(232, 146, 79, 0.08) 0%, rgba(232, 146, 79, 0.02) 100%);
}

.mcc-ug-song.mcc-importing {
    pointer-events: none;
    opacity: 0.5;
}

/* Song Content */
.mcc-song-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mcc-song-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--mcc-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.mcc-song-artist {
    font-size: 13px;
    color: var(--mcc-text-secondary);
}

/* Cloud Icon for UG songs */
.mcc-cloud-icon {
    flex-shrink: 0;
    color: var(--mcc-accent);
    opacity: 0.7;
}

/* Song Actions (right side) */
.mcc-song-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Key Badge */
.mcc-key-badge {
    padding: 4px 10px;
    background: var(--mcc-primary);
    color: white;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

/* Section Loading States */
.mcc-section-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--mcc-text-secondary);
    font-size: 14px;
}

/* OLD STYLES - Keep for backwards compatibility but hide */
.mcc-db-item,
.mcc-ug-item {
    display: none !important;
}

.mcc-ug-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    color: var(--mcc-gray-600);
    margin-top: 2px;
}

.mcc-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.mcc-difficulty {
    background: var(--mcc-gray-100);
    padding: 2px 8px;
    border-radius: var(--mcc-radius-sm);
    font-size: 0.75rem;
}

/* Import Button */
.mcc-import-ug-btn {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 12px !important;
    background: var(--mcc-secondary) !important;
    color: var(--mcc-dark) !important;
    border: none !important;
    border-radius: var(--mcc-radius-md) !important;
    font-weight: 600;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    outline: none !important;
}

.mcc-import-ug-btn:hover:not(:disabled),
.mcc-import-ug-btn:focus:not(:disabled) {
    background: #E78D32 !important;
    color: var(--mcc-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(232, 146, 79, 0.4) !important;
    text-decoration: none !important;
}

.mcc-import-ug-btn:active:not(:disabled) {
    transform: translateY(0) !important;
}

.mcc-import-ug-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.mcc-import-ug-btn .mcc-btn-icon {
    font-size: 1em;
}

.mcc-import-ug-btn .mcc-btn-text {
    display: inline-block;
}

/* Already in DB badge */
.mcc-in-db-badge {
    padding: var(--mcc-space-sm) var(--mcc-space-md);
    background: var(--mcc-primary);
    color: var(--mcc-white);
    border-radius: var(--mcc-radius-md);
    font-size: 0.875rem;
    font-weight: 600;
}

/* AI Trigger Button */
.mcc-ai-trigger {
    padding: var(--mcc-space-lg);
    text-align: center;
}

.mcc-btn-ai-search {
    padding: var(--mcc-space-md) var(--mcc-space-lg);
    background: linear-gradient(135deg, var(--mcc-primary), var(--mcc-secondary));
    color: var(--mcc-white);
    border: none;
    border-radius: var(--mcc-radius-lg);
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--mcc-transition-fast);
}

.mcc-btn-ai-search:hover {
    transform: translateY(-2px);
}

/* Load More UG Button - Sticky at bottom, always visible */
.mcc-load-more-ug-wrapper {
    position: sticky;
    bottom: 0;
    padding: var(--mcc-space-lg) var(--mcc-space-lg) var(--mcc-space-xl);
    text-align: center;
    background: linear-gradient(180deg, 
        rgba(250, 248, 243, 0) 0%, 
        rgba(250, 248, 243, 0.8) 15%, 
        rgba(250, 248, 243, 0.95) 30%,
        rgba(250, 248, 243, 1) 50%
    );
    border-top: 1px solid rgba(61, 124, 133, 0.15);
    margin-top: var(--mcc-space-lg);
    z-index: 100;
    backdrop-filter: blur(10px);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
}

.mcc-btn-load-more-ug {
    padding: var(--mcc-space-md) var(--mcc-space-lg);
    background: linear-gradient(135deg, #3D7C85, #E8924F);
    color: var(--mcc-white);
    border: none;
    border-radius: var(--mcc-radius-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
}

.mcc-btn-load-more-ug:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(61, 124, 133, 0.3);
}

.mcc-btn-load-more-ug:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

/* UG Loading Indicator */
.mcc-ug-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mcc-space-sm);
    padding: var(--mcc-space-lg);
    color: var(--mcc-primary);
    font-size: 14px;
    border-top: 1px solid var(--mcc-border-light);
    margin-top: var(--mcc-space-md);
}

.mcc-ug-loading .mcc-mini-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(61, 124, 133, 0.2);
    border-top-color: var(--mcc-primary);
    border-radius: 50%;
    animation: mcc-spin 0.8s linear infinite;
}

/* Professional Background Loading Indicator */
.mcc-ug-background-loading {
    display: flex;
    align-items: center;
    gap: var(--mcc-space-md);
    padding: var(--mcc-space-lg);
    margin: var(--mcc-space-md) 0;
    background: linear-gradient(135deg, rgba(61, 124, 133, 0.05), rgba(232, 146, 79, 0.05));
    border: 1px solid rgba(61, 124, 133, 0.15);
    border-radius: var(--mcc-radius-md);
}

.mcc-loading-spinner {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.mcc-loading-spinner::before,
.mcc-loading-spinner::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}

.mcc-loading-spinner::before {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(61, 124, 133, 0.1);
}

.mcc-loading-spinner::after {
    width: 32px;
    height: 32px;
    border: 3px solid transparent;
    border-top-color: var(--mcc-primary);
    border-right-color: var(--mcc-primary);
    animation: mcc-spinner-rotate 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

@keyframes mcc-spinner-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.mcc-loading-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mcc-loading-title {
    font-weight: 600;
    color: var(--mcc-text-primary);
    font-size: 14px;
}

.mcc-loading-subtitle {
    font-size: 12px;
    color: var(--mcc-text-secondary);
}

/* Section Initial Loading States */
.mcc-db-loading,
.mcc-ug-initial-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mcc-space-md);
    padding: var(--mcc-space-xl) var(--mcc-space-lg);
    min-height: 120px;
}

.mcc-section-loading-spinner {
    position: relative;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(61, 124, 133, 0.1);
    border-top-color: var(--mcc-primary);
    border-radius: 50%;
    animation: mcc-spinner-rotate 0.8s linear infinite;
}

.mcc-section-loading-text {
    font-size: 14px;
    color: var(--mcc-text-secondary);
    font-weight: 500;
}

.mcc-selection-actions {
    display: flex;
    align-items: center;
    gap: var(--mcc-space-sm);
}

.mcc-key-badge {
    background: var(--mcc-primary);
    color: var(--mcc-white);
    padding: 2px 8px;
    border-radius: var(--mcc-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.mcc-score-badge {
    font-size: 0.6875rem;
    padding: 2px 6px;
    border-radius: var(--mcc-radius-sm);
    font-weight: 600;
}

.mcc-score-high {
    background: rgba(232, 146, 79, 0.15);
    color: var(--mcc-accent-dark);
}

.mcc-score-medium {
    background: rgba(61, 124, 133, 0.1);
    color: var(--mcc-primary);
}

.mcc-score-low {
    background: var(--mcc-gray-100);
    color: var(--mcc-gray-500);
}

.mcc-load-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
}

.mcc-no-results {
    padding: var(--mcc-space-lg) var(--mcc-space-xl);
    text-align: center;
    color: var(--mcc-gray-500);
    font-size: 0.875rem;
}

.mcc-ai-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mcc-space-md);
    padding: var(--mcc-space-xl);
    color: var(--mcc-gray-500);
    font-size: 0.875rem;
}

.mcc-mini-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--mcc-gray-200);
    border-top-color: var(--mcc-primary);
    border-radius: 50%;
    animation: mcc-spin 0.8s linear infinite;
}

.mcc-db-item.mcc-loading,
.mcc-ai-item.mcc-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
    /* === MOBILE HEADER (v4.32.171: zweizeilig, Suche voll breit) === */
    .mcc-header {
        padding: 10px 12px;
        margin: 8px 8px 0;
        top: 8px;
        width: auto;
        max-width: none;
    }
    
    .mcc-header-content {
        max-width: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    /* v4.32.178: Suche in Zeile 1 (primär), Pills + Dots in Zeile 2 */
    .mcc-header-content > #mcc-header-overview { order: 1; }
    .mcc-header-content > .mcc-search-form-header { order: 2; flex: 1 0 100%; width: 100%; }
    .mcc-header-content > .mcc-header-special-btns { order: 3; margin-left: 0 !important; }
    .mcc-header-content > .mcc-header-nav { order: 4; margin-left: auto !important; }
    
    /* Logo kompakter + Abkürzung */
    .mcc-logo {
        gap: 6px;
        flex-shrink: 0;
    }
    
    .mcc-logo-text {
        font-size: 0.9rem;
    }
    
    /* Logo: Zeige Abkürzung auf Mobile */
    .mcc-logo-full {
        display: none;
    }
    
    .mcc-logo-short {
        display: inline;
    }
    
    .mcc-logo-icon {
        width: 24px;
        height: 24px;
    }
    
    /* Nav buttons: inline, 36x36, MEHR Abstand */
    .mcc-header-nav {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin-left: 0;
        flex-shrink: 0;
        align-items: center;
        overflow: visible;
    }
    .mcc-header, .mcc-header-content { overflow: visible !important; }

    /* v4.32.171: Mobile-Suche voll breit, kompakter Button */
    .mcc-header-content > .mcc-search-form-header .mcc-search-wrapper {
        gap: 8px;
    }
    .mcc-header-content > .mcc-search-form-header .mcc-search-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        aspect-ratio: auto !important;
        align-self: center !important;
        flex: 0 0 44px !important;
    }
    .mcc-header-content > .mcc-search-form-header .mcc-search-input {
        font-size: 0.9rem;
    }
    
    .mcc-header-nav .mcc-nav-btn:not(.mcc-overview-btn) {
        width: auto !important; /* Auto für Text - gegen BuddyBoss */
        height: 36px !important;
        min-width: 36px !important;
        padding: 0 12px !important; /* Padding für Text - gegen BuddyBoss */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
        gap: 6px !important; /* Gap zwischen Icon und Text */
        box-sizing: border-box !important;
    }
    
    .mcc-header-nav .mcc-nav-btn span {
        display: none !important;
    }
    
    /* Übersicht Button: Text anzeigen + genug Platz */
    .mcc-header-nav .mcc-overview-btn,
    #mcc-header-overview {
        width: auto !important;
        min-width: auto !important;
        padding: 0 14px !important; /* Etwas mehr Padding */
        white-space: nowrap !important;
    }
    
    .mcc-header-nav .mcc-overview-btn span,
    #mcc-header-overview span {
        display: inline !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
    }
    
    .mcc-header-nav .mcc-nav-btn svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    
    
    /* Special buttons: Rechtsbündig mit größerem Abstand */
    .mcc-header-special-btns {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px !important; /* Kleinerer Abstand zwischen Bibliothek und Audioplayer */
        margin-left: auto !important; /* Rechtsbündig */
        margin-right: 0 !important;
        flex-shrink: 0 !important;
        align-items: center !important;
    }
    
    .mcc-header-special-btn {
        width: auto !important;
        min-width: 0 !important;
        height: 36px !important;
        flex-shrink: 1 !important;
        border-radius: 20px !important;
        padding: 0 14px !important;
        gap: 6px !important;
        box-sizing: border-box !important;
        justify-content: center !important;
    }
    .mcc-special-btn-label {
        display: inline !important;
        font-size: 12px !important;
    }
    /* Overview: pill with text */
    .mcc-on-overview .mcc-header-special-btn {
        width: auto !important;
        min-width: auto !important;
        border-radius: 20px !important;
        padding: 0 12px !important;
        gap: 5px !important;
    }
    .mcc-on-overview .mcc-special-btn-label {
        display: inline !important;
        font-size: 11px !important;
    }
    
    /* Bibliothek Button: Abstand zum Audioplayer */
    .mcc-header-special-btn.mcc-library-btn {
        margin-right: 10px !important; /* Kleinerer Abstand - forciert gegen BuddyBoss */
    }
    
    .mcc-header-special-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* Stats badge: rechtsbündig */
    .mcc-stats-mini {
        flex-shrink: 0;
        margin-left: auto;
    }
    
    .mcc-stat-badge {
        padding: 4px 8px;
        font-size: 0.7rem;
        gap: 3px;
        height: 28px;
        display: flex;
        align-items: center;
        white-space: nowrap;
    }
    
    .mcc-stat-count {
        font-size: 0.8rem;
    }
    
    .mcc-stat-text {
        display: none;
    }
    /* v4.32.171: in der Tab-Zeile "Songs"-Text zeigen */
    .mcc-tabs-navigation .mcc-stat-text {
        display: inline;
    }
    
    /* HOCHSPEZIFISCH gegen BuddyBoss Theme Overrides */
    body .mcc-header .mcc-header-content .mcc-header-nav .mcc-overview-btn,
    body #mcc-app .mcc-header .mcc-header-nav #mcc-header-overview {
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: 36px !important;
        line-height: 36px !important;
    }
    
    /* Special Buttons Container gegen BuddyBoss */
    body .mcc-header .mcc-header-special-btns,
    body #mcc-app .mcc-header .mcc-header-special-btns {
        gap: 10px !important; /* Kleinerer Abstand */
        margin-left: auto !important;
    }
    
    /* Bibliothek Button Margin gegen BuddyBoss */
    body .mcc-header-special-btn.mcc-library-btn,
    body #mcc-app .mcc-header-special-btn.mcc-library-btn,
    .mcc-header .mcc-library-btn {
        margin-right: 10px !important; /* Kleinerer Abstand */
        margin-left: 0 !important;
    }
    }
    
    .mcc-search-section {
        padding: 8px 0 4px;
        width: auto;
        max-width: none;
    }
    
    .mcc-song-list-container {
        padding: 0;
    }
    
    .mcc-search-form {
        max-width: none;
    }
    
    .mcc-search-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: var(--mcc-space-xs);
    }
    
    /* Hide divider on mobile */
    .mcc-btn-divider {
        display: none !important;
    }
    
    /* Input group: First, takes most space */
    .mcc-search-input-group {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }
    
    /* Search button: After input */
    .mcc-search-btn {
        order: 2;
        flex: 0 0 auto;
        width: auto;
        padding: 12px;
        min-width: 48px;
    }
    
    .mcc-search-btn .mcc-btn-text {
        display: none;
    }
    
    .mcc-main-content {
        padding: var(--mcc-space-md) var(--mcc-space-xs);
        max-width: none;
    }
    
    .mcc-song-grid {
        /* Responsive handled by explicit breakpoints above */
    }
    
    /* Toolbar V2 Mobile */
    .mcc-toolbar-v2 .mcc-toolbar-main {
        flex-wrap: wrap;
        padding: 5px 8px;
        gap: 6px;
    }
    
    .mcc-toolbar-v2 .mcc-back-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }
    
    .mcc-toolbar-v2 .mcc-back-btn svg {
        width: 16px;
        height: 16px;
    }
    
    /* Legacy mobile */
    .mcc-toolbar-section {
        padding: 4px 6px;
        border-radius: 8px;
        gap: 6px;
    }
    
    .mcc-section-label {
        display: none;
    }
    
    .mcc-section-content {
        gap: 4px;
    }
    
    /* Sections on mobile */
    .mcc-section-tonart,
    .mcc-section-ansicht {
        flex: 0 1 auto;
    }
    
    .mcc-section-tools {
        flex: 0 0 auto;
        padding: 4px 4px;
    }
    
    .mcc-tool-btn {
        width: 26px;
        height: 26px;
    }
    
    .mcc-tool-btn svg {
        width: 14px;
        height: 14px;
    }
    
    .mcc-toolbar-quick {
        gap: 3px;
    }
    
    .mcc-quick-btn {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }
    
    .mcc-quick-btn svg {
        width: 14px;
        height: 14px;
    }
    
    /* Playback row mobile */
    .mcc-toolbar-playback {
        padding: 4px 8px;
        gap: 8px;
        flex-wrap: nowrap;
    }
    
    .mcc-playback-label {
        font-size: 9px;
    }
    
    .mcc-scroll-btn {
        width: 24px;
        height: 24px;
    }
    
    .mcc-scroll-btn svg {
        width: 10px;
        height: 10px;
    }
    
    .mcc-speed-slider {
        width: 60px;
    }
    
    .mcc-speed-label {
        font-size: 10px;
        min-width: 20px;
    }
    
    /* Transpose compact */
    .mcc-transpose-btn {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
    
    .mcc-current-key {
        min-width: 24px;
        height: 24px;
        font-size: 12px;
    }
    
    .mcc-toolbar-v2 .mcc-key-select {
        height: 24px;
        font-size: 10px;
        min-width: 55px;
        padding: 0 4px;
    }
    
    /* Mode toggle compact */
    .mcc-mode-toggle .mcc-mode-btn {
        width: 26px;
        height: 24px;
    }
    
    .mcc-mode-toggle .mcc-mode-btn svg {
        width: 12px;
        height: 12px;
    }
    
    .mcc-size-btn {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
    
    /* Legacy mobile styles */
    .mcc-song-toolbar:not(.mcc-toolbar-v2):not(.mcc-toolbar-v3) {
        padding: var(--mcc-space-sm) var(--mcc-space-xs);
        gap: var(--mcc-space-sm);
        overflow-x: auto;
    }
    
    .mcc-toolbar-controls {
        gap: var(--mcc-space-sm);
        justify-content: flex-start;
        width: 100%;
        order: 2;
        flex-wrap: wrap;
    }
    
    .mcc-toolbar-group {
        flex-wrap: wrap;
    }
    
    /* Smaller toolbar buttons */
    .mcc-song-toolbar:not(.mcc-toolbar-v2) button {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
    
    .mcc-song-toolbar:not(.mcc-toolbar-v2) button svg {
        width: 16px;
        height: 16px;
    }
    
    .mcc-back-btn {
        order: 1;
    }
    
    .mcc-toolbar-actions {
        order: 3;
    }
    
    .mcc-toolbar-divider {
        display: none;
    }
    
    /* Hide chord tooltip on mobile (touch devices don't have hover) */
    .mcc-chord-tooltip {
        display: none !important;
    }
    
    /* Chord panel mobile */
    .mcc-chord-diagrams-panel {
        padding: var(--mcc-space-sm);
    }
    
    .mcc-chord-diagrams-panel .mcc-diagrams-grid {
        gap: var(--mcc-space-sm);
    }
    
    .mcc-chord-diagrams-panel .mcc-chord-diagram {
        padding: 6px 8px;
        min-width: 60px;
    }
    
    /* OLD Mini player mobile - DISABLED
    .mcc-mini-player {
        width: calc(100% - 20px);
        right: 10px;
        left: 10px;
        top: auto;
        bottom: 10px;
    }
    */
    
    .mcc-toolbar-yt-btn {
        width: 32px;
        height: 28px;
    }
    
    .mcc-toolbar-yt-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .mcc-controls {
        padding: var(--mcc-space-md) var(--mcc-space-xs);
        gap: var(--mcc-space-md);
    }
    
    .mcc-control-group {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .mcc-chord-sheet {
        padding: var(--mcc-space-md) var(--mcc-space-xs);
        font-size: 0.875rem;
    }
    
    .mcc-song-header {
        padding: var(--mcc-space-md) var(--mcc-space-xs);
    }
    
    .mcc-song-actions {
        width: 100%;
        justify-content: center;
    }
    
    .mcc-song-info {
        padding: var(--mcc-space-md) var(--mcc-space-xs);
    }
    
    .mcc-song-info .mcc-display-title {
        font-size: 1.5rem;
    }
    
    .mcc-song-info .mcc-display-artist {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    /* Header bleibt horizontal - NICHT column! */
    .mcc-header-content {
        gap: 4px;
    }
    
    .mcc-header-nav {
        gap: 2px;
        margin-left: 4px;
    }
    
    .mcc-header-nav .mcc-nav-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }
    
    .mcc-header-special-btns {
        gap: 4px;
    }
    
    .mcc-header-special-btn {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        padding: 0 !important;
    }
    .mcc-on-overview .mcc-header-special-btn {
        width: auto !important;
        min-width: auto !important;
        padding: 0 10px !important;
    }
    .mcc-on-overview .mcc-special-btn-label {
        font-size: 10px !important;
    }
    
    .mcc-logo-text {
        font-size: 0.8rem;
    }
    
    .mcc-logo-icon {
        width: 20px;
        height: 20px;
    }
    
    .mcc-stats-mini {
        display: none;
    }
    
    .mcc-list-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .mcc-list-filters {
        flex-wrap: wrap;
    }
    
    .mcc-filter-select {
        flex: 1;
    }
    
    .mcc-transpose-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .mcc-speed-slider {
        width: 80px;
    }
}

/* ==========================================
   AI Notice & UG Link Styles
   ========================================== */

.mcc-song-info-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* Song User Actions (Favorite, Playlist buttons) */
.mcc-song-user-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.mcc-ai-notice,
.mcc-source-badge.mcc-source-ai {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #666;
    background: #f0f0f0;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: help;
}

.mcc-ai-notice svg,
.mcc-source-badge svg {
    opacity: 0.7;
}

/* Ultimate Guitar Source Badge */
.mcc-source-badge.mcc-source-ug {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #ff6600;
    background: rgba(255, 102, 0, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
    text-decoration: none;
    transition: all var(--mcc-transition-fast);
}

.mcc-source-badge.mcc-source-ug:hover {
    background: rgba(255, 102, 0, 0.2);
    color: #ff6600;
    text-decoration: none;
}

.mcc-source-badge.mcc-source-ug svg {
    color: #ff6600;
    opacity: 1;
}

.mcc-ug-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--mcc-primary);
    text-decoration: none;
    background: rgba(61, 124, 133, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
    transition: all var(--mcc-transition-fast);
}

.mcc-ug-link:hover {
    background: rgba(61, 124, 133, 0.2);
    color: var(--mcc-primary);
    text-decoration: none;
}

.mcc-ug-link svg {
    flex-shrink: 0;
}

/* Dark mode support for info bar */
@media (prefers-color-scheme: dark) {
    .mcc-ai-notice,
    .mcc-source-badge.mcc-source-ai {
        background: rgba(255, 255, 255, 0.1);
        color: #aaa;
    }
    
    .mcc-source-badge.mcc-source-ug {
        background: rgba(255, 102, 0, 0.2);
        color: #ff8833;
    }
    
    .mcc-ug-link {
        background: rgba(61, 124, 133, 0.2);
    }
}

/* ==========================================================================
   YouTube Video Player
   ========================================================================== */

/* Song header with YouTube button */
.mcc-song-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.mcc-song-header-left {
    flex: 1;
    min-width: 0;
}

.mcc-song-header-right {
    flex-shrink: 0;
}

.mcc-youtube-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
    transition: all 0.3s ease;
    text-decoration: none;
}

.mcc-youtube-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4);
    color: white;
}

.mcc-youtube-btn.mcc-youtube-active {
    background: linear-gradient(135deg, #3D7C85 0%, #2C585F 100%);
    box-shadow: 0 4px 15px rgba(61, 124, 133, 0.4);
}

/* Search button variant - slightly different color to indicate search */
.mcc-youtube-btn.mcc-youtube-search {
    background: linear-gradient(135deg, #FF6600 0%, #CC5500 100%);
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3);
}

.mcc-youtube-btn.mcc-youtube-search:hover {
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.4);
}

.mcc-youtube-btn svg {
    width: 28px;
    height: 28px;
}

.mcc-youtube-container {
    margin: 20px 0;
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.mcc-youtube-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #2a2a2a;
}

.mcc-youtube-title {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 12px;
}

.mcc-youtube-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mcc-youtube-external {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
    transition: all 0.2s ease;
    text-decoration: none;
}

.mcc-youtube-external:hover {
    background: var(--mcc-primary);
    transform: scale(1.1);
    color: #fff;
}

.mcc-youtube-close {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.mcc-youtube-close:hover {
    background: rgba(255, 0, 0, 0.8);
    transform: scale(1.1);
}

.mcc-youtube-embed-wrapper {
    position: relative;
    background: #000;
}

.mcc-youtube-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border: none;
}

.mcc-youtube-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: #2a2a2a;
    border-top: 1px solid #3a3a3a;
    font-size: 0.85rem;
}

.mcc-youtube-fallback span {
    color: #888;
}

.mcc-youtube-fallback a {
    color: var(--mcc-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.mcc-youtube-fallback a:hover {
    color: var(--mcc-secondary);
    text-decoration: underline;
}

/* Genre badge */
.mcc-genre-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: #6b7280;
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 12px;
}

.mcc-genre-badge svg {
    color: var(--mcc-primary);
}

/* Responsive YouTube player */
@media (max-width: 768px) {
    .mcc-song-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .mcc-song-header-right {
        align-self: flex-end;
        margin-top: -60px;
    }
    
    .mcc-youtube-btn {
        width: 48px;
        height: 48px;
    }
    
    .mcc-youtube-btn svg {
        width: 24px;
        height: 24px;
    }
    
    .mcc-youtube-fallback {
        flex-direction: column;
        gap: 4px;
    }
}

/* ===== Song Loading Indicator ===== */
.mcc-song-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mcc-space-3xl);
    min-height: 300px;
}

.mcc-song-loading p {
    margin-top: var(--mcc-space-lg);
    color: var(--mcc-gray-600);
    font-family: var(--mcc-font-body);
    font-size: 1rem;
}

.mcc-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--mcc-gray-200);
    border-top-color: var(--mcc-primary);
    border-radius: 50%;
    animation: mcc-spin 0.8s linear infinite;
}

@keyframes mcc-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== Skeleton Loading ===== */
.mcc-chord-skeleton {
    padding: var(--mcc-space-lg) 0;
}

.mcc-skeleton-line {
    background: linear-gradient(90deg, var(--mcc-gray-100) 25%, var(--mcc-gray-200) 50%, var(--mcc-gray-100) 75%);
    background-size: 200% 100%;
    animation: mcc-shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: var(--mcc-space-sm);
}

.mcc-skeleton-section {
    width: 80px;
    height: 24px;
    margin-bottom: var(--mcc-space-md);
}

.mcc-skeleton-chord {
    width: 40%;
    height: 18px;
    margin-bottom: 4px;
}

.mcc-skeleton-lyric {
    width: 75%;
    height: 20px;
    margin-bottom: var(--mcc-space-md);
}

.mcc-skeleton-spacer {
    height: var(--mcc-space-xl);
}

@keyframes mcc-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* UG Import Loading State */
.mcc-import-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    min-height: 200px;
}

.mcc-import-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid #f0f0f0;
    border-top-color: #3D7C85;
    border-radius: 50%;
    animation: mcc-spin 0.8s linear infinite;
    margin-bottom: 20px;
}

@keyframes mcc-spin {
    to { transform: rotate(360deg); }
}

.mcc-import-text {
    font-family: 'Akko', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #111416;
    margin: 0 0 6px 0;
}

.mcc-import-subtext {
    font-family: 'Akko', sans-serif;
    font-size: 13px;
    color: #999;
    margin: 0;
}

/* ===== Load Error State ===== */
.mcc-load-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--mcc-space-3xl);
    text-align: center;
    min-height: 200px;
}

.mcc-load-error svg {
    color: var(--mcc-gray-400);
    margin-bottom: var(--mcc-space-lg);
}

.mcc-load-error p {
    color: var(--mcc-gray-600);
    font-family: var(--mcc-font-body);
    font-size: 1rem;
    margin-bottom: var(--mcc-space-lg);
}

.mcc-load-error .mcc-btn {
    padding: var(--mcc-space-sm) var(--mcc-space-lg);
}

/* =========================================================================
   FAVORITES & PLAYLISTS
   ========================================================================= */

/* Favorite Button */
.mcc-favorite-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: white !important;
    border: 2px solid var(--mcc-gray-300) !important;
    border-radius: var(--mcc-radius-md) !important;
    cursor: pointer !important;
    transition: all var(--mcc-transition-fast) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--mcc-dark) !important;
    line-height: 1.4 !important;
    min-height: auto !important;
    height: auto !important;
}

.mcc-favorite-btn:hover {
    border-color: #e74c3c !important;
    background: #fff5f5 !important;
    color: var(--mcc-dark) !important;
}

.mcc-favorite-btn.is-favorite {
    border-color: #e74c3c !important;
    background: #fff5f5 !important;
    color: #e74c3c !important;
}

.mcc-favorite-btn.loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

.mcc-favorite-icon {
    font-size: 1.1em !important;
}

/* Playlist Button */
.mcc-playlist-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: white !important;
    border: 2px solid var(--mcc-gray-300) !important;
    border-radius: var(--mcc-radius-md) !important;
    cursor: pointer !important;
    transition: all var(--mcc-transition-fast) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--mcc-dark) !important;
    line-height: 1.4 !important;
    min-height: auto !important;
    height: auto !important;
}

.mcc-playlist-btn:hover {
    border-color: var(--mcc-primary) !important;
    background: rgba(61, 124, 133, 0.05) !important;
    color: var(--mcc-dark) !important;
}

/* Library Button */
.mcc-library-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    height: 36px !important;
    padding: 0 14px !important;
    background: var(--mcc-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.mcc-library-btn:hover {
    background: var(--mcc-primary-dark) !important;
    transform: scale(1.04) !important;
    box-shadow: 0 2px 8px rgba(61, 124, 133, 0.25) !important;
    color: white !important;
}

/* Audioplayer Button - Teal Outline (verfügbar, nicht aktiv) */
.mcc-audioplayer-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    height: 36px !important;
    padding: 0 14px !important;
    background: var(--mcc-white) !important;
    color: var(--mcc-primary) !important;
    border: 1px solid rgba(61, 124, 133, 0.35) !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.mcc-audioplayer-btn:hover {
    background: rgba(61, 124, 133, 0.06) !important;
    transform: scale(1.04) !important;
    box-shadow: none !important;
    color: var(--mcc-primary) !important;
}

/* v4.32.167: Labels sichtbar lassen (Pills statt runde Icon-Buttons) */
.mcc-library-btn-text,
.mcc-audioplayer-btn-text {
    display: inline !important;
}

/* Button Divider - visual separator between search and utility buttons */
.mcc-btn-divider {
    display: inline-block;
    width: 1px;
    height: 28px;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.12) 50%, transparent 100%);
    margin: 0 6px;
    vertical-align: middle;
}

/* Remove secondary btn overrides - no longer needed */
.mcc-secondary-btn.mcc-library-btn,
.mcc-secondary-btn.mcc-audioplayer-btn {
    /* Keep the gradient styles above */
}

.mcc-library-icon,
.mcc-headphones-icon {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

/* Small screen adjustments - keep round buttons */
@media (max-width: 600px) {
    .mcc-library-btn,
    .mcc-audioplayer-btn {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }
    
    .mcc-library-icon,
    .mcc-headphones-icon {
        width: 18px;
        height: 18px;
    }
    
    .mcc-favorite-text {
        display: none;
    }
    
    .mcc-favorite-btn,
    .mcc-playlist-btn {
        padding: 8px 10px;
    }
    
    .mcc-song-user-actions {
        gap: 6px;
    }
}

/* Modal Base */
.mcc-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mcc-modal.visible {
    opacity: 1;
    visibility: visible;
}

.mcc-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.mcc-modal-content {
    position: relative;
    background: white;
    border-radius: var(--mcc-radius-lg);
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.mcc-modal.visible .mcc-modal-content {
    transform: translateY(0);
}

.mcc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mcc-gray-200);
}

.mcc-modal-header h3 {
    margin: 0;
    font-family: var(--mcc-font-title);
    font-size: 1.125rem;
    color: var(--mcc-dark);
}

.mcc-modal-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--mcc-gray-500);
    padding: 4px;
    line-height: 1;
}

.mcc-modal-close:hover {
    color: var(--mcc-dark);
}

.mcc-modal-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

/* Create Playlist Input */
.mcc-create-playlist {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.mcc-input {
    flex: 1 !important;
    padding: 10px 14px !important;
    border: 2px solid var(--mcc-gray-300) !important;
    border-radius: var(--mcc-radius-md) !important;
    font-size: 0.9375rem !important;
    transition: border-color var(--mcc-transition-fast) !important;
    background: white !important;
    color: var(--mcc-dark) !important;
    line-height: 1.4 !important;
    min-height: auto !important;
    height: auto !important;
}

.mcc-input:focus {
    outline: none !important;
    border-color: var(--mcc-primary) !important;
}

.mcc-btn {
    padding: 10px 16px !important;
    border: none !important;
    border-radius: var(--mcc-radius-md) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all var(--mcc-transition-fast) !important;
    font-size: 0.9375rem !important;
    line-height: 1.4 !important;
    min-height: auto !important;
    height: auto !important;
}

.mcc-btn-primary {
    background: var(--mcc-primary) !important;
    color: white !important;
}

.mcc-btn-primary:hover {
    background: var(--mcc-primary-dark) !important;
    color: white !important;
}

.mcc-btn-secondary {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--mcc-primary) !important;
    border: 2px solid var(--mcc-primary);
    font-weight: 600;
}

.mcc-btn-secondary:hover {
    background: white !important;
    color: var(--mcc-primary-dark) !important;
    border-color: var(--mcc-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 158, 127, 0.3);
}

/* Playlist List in Modal */
.mcc-playlist-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mcc-playlist-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border: 1px solid var(--mcc-gray-200);
    border-radius: var(--mcc-radius-md);
    margin-bottom: 8px;
    transition: all var(--mcc-transition-fast);
}

.mcc-playlist-item:hover {
    border-color: var(--mcc-primary);
    background: rgba(61, 124, 133, 0.03);
}

.mcc-playlist-item.in-playlist {
    border-color: var(--mcc-accent);
    background: rgba(232, 146, 79, 0.1);
}

.mcc-playlist-name {
    font-weight: 500;
    color: var(--mcc-dark);
}

.mcc-playlist-count {
    font-size: 0.8125rem;
    color: var(--mcc-gray-500);
    margin-left: 8px;
}

.mcc-playlist-toggle {
    padding: 6px 12px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    border: 1px solid var(--mcc-gray-300) !important;
    border-radius: var(--mcc-radius-sm) !important;
    background: white !important;
    cursor: pointer !important;
    transition: all var(--mcc-transition-fast) !important;
    color: var(--mcc-dark) !important;
    line-height: 1.4 !important;
    min-height: auto !important;
    height: auto !important;
}

.mcc-playlist-toggle:hover {
    border-color: var(--mcc-primary) !important;
    color: var(--mcc-primary) !important;
    background: white !important;
}

.mcc-playlist-item.in-playlist .mcc-playlist-toggle {
    background: var(--mcc-accent) !important;
    color: white !important;
    border-color: var(--mcc-accent) !important;
}

/* Upload Modal */
.mcc-upload-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100001;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.6);
}

.mcc-upload-modal .mcc-modal-overlay {
    display: none; /* Not needed, background is on parent */
}

.mcc-upload-modal .mcc-modal-content {
    position: relative;
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    margin: 50px auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.mcc-upload-modal .mcc-modal-header {
    position: relative;
}

.mcc-btn-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(61,124,133,0.35) !important;
}

/* Library Sidebar */
.mcc-library-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    max-width: 90%;
    height: 100%;
    background: white;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2);
    z-index: 10001;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.mcc-library-sidebar.visible {
    right: 0;
}

.mcc-library-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
}

.mcc-library-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mcc-gray-200);
    background: linear-gradient(135deg, var(--mcc-primary) 0%, var(--mcc-accent) 100%);
    color: white;
}

.mcc-library-header h3 {
    margin: 0;
    font-family: var(--mcc-font-title);
}

.mcc-library-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 1.25rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-library-close:hover {
    background: rgba(255,255,255,0.3);
}

/* Library Tabs */
.mcc-library-tabs {
    display: flex;
    border-bottom: 1px solid var(--mcc-gray-200);
}

.mcc-tab {
    flex: 1;
    padding: 12px;
    border: none;
    background: none;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--mcc-gray-500);
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
    border-bottom: 3px solid transparent;
}

.mcc-tab:hover {
    color: var(--mcc-dark);
}

.mcc-tab.active,
.mcc-library-tabs .mcc-tab.active,
.mcc-library-sidebar .mcc-tab.active {
    color: #fff !important;
    background: var(--mcc-primary) !important;
    border-bottom-color: var(--mcc-primary) !important;
    border-radius: 6px 6px 0 0 !important;
}
.mcc-library-tabs .mcc-tab.active svg {
    fill: #fff !important;
    stroke: none !important;
}

.mcc-library-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.mcc-tab-content {
    display: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.mcc-tab-content.active {
    display: block !important;
    width: 100% !important;
}

/* Song List in Library */
.mcc-song-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mcc-song-item {
    padding: 12px;
    border-radius: var(--mcc-radius-md);
    cursor: pointer;
    transition: background var(--mcc-transition-fast);
    margin-bottom: 4px;
}

.mcc-song-item:hover {
    background: var(--mcc-gray-100);
}

.mcc-song-title {
    display: block;
    font-weight: 500;
    color: var(--mcc-dark);
}

.mcc-song-artist {
    display: block;
    font-size: 0.8125rem;
    color: var(--mcc-gray-500);
}

.mcc-empty-list {
    text-align: center;
    color: var(--mcc-gray-500);
    padding: 24px;
}

/* Library Loading State */
.mcc-library-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--mcc-gray-500);
    gap: 12px;
}

.mcc-loading-spinner-small {
    width: 24px;
    height: 24px;
    border: 3px solid var(--mcc-gray-200);
    border-top-color: var(--mcc-primary);
    border-radius: 50%;
    animation: mcc-spin 0.8s linear infinite;
}

@keyframes mcc-spin {
    to { transform: rotate(360deg); }
}

/* Playlist Overview */
.mcc-create-playlist-inline {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.mcc-input-sm {
    flex: 1 !important;
    padding: 8px 12px !important;
    border: 2px solid var(--mcc-gray-300) !important;
    border-radius: var(--mcc-radius-md) !important;
    font-size: 0.875rem !important;
    background: white !important;
    color: var(--mcc-dark) !important;
    line-height: 1.4 !important;
    min-height: auto !important;
    height: auto !important;
}

.mcc-input-sm:focus {
    outline: none !important;
    border-color: var(--mcc-primary) !important;
}

.mcc-btn-sm {
    padding: 8px 16px !important;
    background: var(--mcc-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--mcc-radius-md) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    min-height: auto !important;
    height: auto !important;
}

.mcc-btn-sm:hover {
    background: var(--mcc-primary-dark) !important;
    color: white !important;
}

.mcc-playlist-overview {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mcc-playlist-overview-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px !important;
    border: 1px solid var(--mcc-gray-200) !important;
    border-radius: var(--mcc-radius-md) !important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
    transition: all var(--mcc-transition-fast) !important;
    background: white !important;
}

.mcc-playlist-overview-item:hover {
    border-color: var(--mcc-primary) !important;
    background: rgba(61, 124, 133, 0.03) !important;
}

.mcc-playlist-info {
    flex: 1 !important;
}

.mcc-playlist-actions {
    display: flex !important;
    gap: 4px !important;
}

.mcc-btn-icon {
    background: none !important;
    border: none !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
    opacity: 0.6 !important;
    transition: opacity var(--mcc-transition-fast) !important;
    min-height: auto !important;
    height: auto !important;
}

.mcc-btn-icon:hover {
    opacity: 1 !important;
}

/* Playlist View */
.mcc-playlist-view {
    background: white;
    border-radius: var(--mcc-radius-lg);
    box-shadow: var(--mcc-shadow-lg);
    overflow: hidden;
}

.mcc-playlist-view-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, var(--mcc-primary) 0%, var(--mcc-accent) 100%);
    color: white;
}

.mcc-back-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: var(--mcc-radius-md);
    font-weight: 500;
    cursor: pointer;
}

.mcc-back-btn:hover {
    background: rgba(255,255,255,0.3);
}

.mcc-playlist-view-title {
    flex: 1;
}

.mcc-playlist-view-title h2 {
    margin: 0 0 4px 0;
    font-family: var(--mcc-font-title);
}

.mcc-playlist-song-count {
    font-size: 0.875rem;
    opacity: 0.8;
}

.mcc-playlist-view-actions {
    display: flex;
    gap: 12px;
}

.mcc-playlist-view-actions .mcc-btn {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.mcc-playlist-view-actions .mcc-btn svg {
    flex-shrink: 0;
}

.mcc-playlist-view-content {
    padding: 20px;
}

/* Playlist Songs */
.mcc-playlist-songs {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mcc-playlist-song-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--mcc-gray-200);
    border-radius: var(--mcc-radius-md);
    margin-bottom: 8px;
    background: white;
    cursor: pointer;
    transition: all var(--mcc-transition-fast);
}

.mcc-playlist-song-item:hover {
    border-color: var(--mcc-primary);
    box-shadow: 0 2px 8px rgba(61, 124, 133, 0.1);
}

.mcc-playlist-song-item.ui-sortable-helper {
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.mcc-drag-handle {
    cursor: grab;
    color: var(--mcc-gray-400);
    font-size: 1.1rem;
    padding: 4px;
}

.mcc-drag-handle:active {
    cursor: grabbing;
}

.mcc-playlist-song-info {
    flex: 1;
}

.mcc-playlist-song-title {
    display: block;
    font-weight: 500;
    color: var(--mcc-dark);
}

.mcc-playlist-song-artist {
    display: block;
    font-size: 0.8125rem;
    color: var(--mcc-gray-500);
}

.mcc-playlist-song-key {
    padding: 4px 10px;
    background: var(--mcc-gray-100);
    border-radius: var(--mcc-radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mcc-primary);
}

.mcc-remove-from-playlist {
    opacity: 0;
    transition: opacity var(--mcc-transition-fast);
}

.mcc-playlist-song-item:hover .mcc-remove-from-playlist {
    opacity: 0.6;
}

.mcc-remove-from-playlist:hover {
    opacity: 1 !important;
    color: #e74c3c;
}

/* Playlist Navigation - Floating Pill Bottom Right */
.mcc-playlist-nav-container {
    position: fixed;
    bottom: 90px;
    right: 16px;
    left: auto;
    transform: none;
    z-index: 9999;
    display: none;
}

@media (max-width: 768px) {
    .mcc-playlist-nav-container {
        bottom: 70px;
        right: 8px;
    }
}

.mcc-playlist-nav-container.active {
    display: block;
}

.mcc-playlist-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: linear-gradient(135deg, var(--mcc-primary) 0%, var(--mcc-accent) 100%);
    color: white;
    border-radius: 16px !important;
    border: 2px solid rgba(255,255,255,0.3);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.mcc-playlist-nav.minimized {
    display: none;
}

/* Minimized button */
.mcc-playlist-nav-minimized {
    display: none;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--mcc-primary) 0%, var(--mcc-accent) 100%);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 16px !important;
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    font-size: 1.2rem;
    transition: transform 0.2s ease;
}

.mcc-playlist-nav-minimized:hover {
    transform: scale(1.05);
}

.mcc-playlist-nav-container.is-minimized .mcc-playlist-nav {
    display: none;
}

.mcc-playlist-nav-container.is-minimized .mcc-playlist-nav-minimized {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-playlist-nav .mcc-nav-btn {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--mcc-transition-fast);
}

.mcc-playlist-nav .mcc-nav-btn svg {
    flex-shrink: 0;
}

.mcc-playlist-nav .mcc-nav-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.3);
}

.mcc-playlist-nav .mcc-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* CTA Button in Playlist Navigation */
.mcc-playlist-nav .mcc-nav-cta {
    background: #E8924F !important;
    color:#111416 !important;
    padding: 6px 12px !important;
    border-radius: 16px !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.mcc-playlist-nav .mcc-nav-cta:hover {
    background: #E47721 !important;
    transform: scale(1.05);
}

.mcc-playlist-nav .mcc-nav-cta svg {
    width: 14px;
    height: 14px;
}

.mcc-nav-cta-price {
    font-size: 12px;
}

/* CTA Group for multiple purchase options */
.mcc-nav-cta-group {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-left: 8px;
}

.mcc-nav-cta-group .mcc-nav-cta {
    padding: 5px 10px !important;
    font-size: 11px;
    border-radius: 12px !important;
    flex-direction: column;
    gap: 2px;
    min-width: 60px;
    text-align: center;
}

.mcc-nav-cta-group .mcc-cta-label {
    font-size: 10px;
    opacity: 0.9;
}

.mcc-nav-cta-group .mcc-cta-price {
    font-size: 11px;
    font-weight: 700;
}

/* Bundle CTA - Green */
.mcc-nav-cta-bundle {
    background: #E8924F !important;
}

.mcc-nav-cta-bundle:hover {
    background: #E47721 !important;
}

/* Single Song CTA - Teal */
.mcc-nav-cta-single {
    background: #3D7C85 !important;
}

.mcc-nav-cta-single:hover {
    background: #32666D !important;
}

/* Abo CTA - Gold gradient */
.mcc-nav-cta-abo {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    color: #333 !important;
}

.mcc-nav-cta-abo:hover {
    background: linear-gradient(135deg, #FFC200 0%, #FF8C00 100%) !important;
}

/* Unified bundle nav styling */
.mcc-bundle-nav.mcc-unified-nav {
    background: linear-gradient(135deg, #3D7C85 0%, #1F737A 100%);
}

.mcc-bundle-nav .mcc-bundle-nav-cta-group {
    display: flex;
    gap: 8px;
    margin-left: auto;
    margin-right: 12px;
}

.mcc-bundle-nav .mcc-bundle-nav-cta {
    background: #E8924F;
    color:#111416;
    border: none;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: all 0.2s ease;
}

.mcc-bundle-nav .mcc-bundle-nav-cta:hover {
    transform: scale(1.05);
    background: #E47721;
}

.mcc-bundle-nav .mcc-cta-icon {
    font-size: 14px;
}

.mcc-bundle-nav .mcc-cta-text {
    font-size: 10px;
}

/* Center pill with song info */
.mcc-nav-center-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.15);
    padding: 5px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--mcc-transition-fast);
}

.mcc-nav-center-pill:hover {
    background: rgba(255,255,255,0.25);
}

.mcc-nav-song-title {
    font-weight: 600;
    font-size: 0.8125rem;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-nav-position {
    font-size: 0.6875rem;
    opacity: 0.85;
    padding: 2px 6px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
}

.mcc-playlist-nav .mcc-nav-minimize,
.mcc-playlist-nav .mcc-nav-close {
    width: 28px;
    height: 28px;
}

/* Playlist Popup */
.mcc-playlist-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mcc-playlist-popup.visible {
    opacity: 1;
    visibility: visible;
}

.mcc-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
}

.mcc-popup-content {
    position: relative;
    background: white;
    border-radius: var(--mcc-radius-lg);
    width: 90%;
    max-width: 400px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.mcc-playlist-popup.visible .mcc-popup-content {
    transform: translateY(0);
}

.mcc-popup-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--mcc-primary) 0%, var(--mcc-accent) 100%);
    color: white;
    border-radius: var(--mcc-radius-lg) var(--mcc-radius-lg) 0 0;
}

.mcc-popup-header h3 {
    flex: 1;
    margin: 0 !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: white !important;
}

.mcc-popup-count {
    font-size: 0.8125rem;
    opacity: 0.8;
}

.mcc-popup-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2) !important;
    border: none !important;
    color: white !important;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
}

.mcc-popup-close:hover {
    background: rgba(255,255,255,0.3) !important;
}

.mcc-popup-songs {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto;
    flex: 1;
}

.mcc-popup-song-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid var(--mcc-gray-100);
}

.mcc-popup-song-item:hover {
    background: var(--mcc-gray-50);
}

.mcc-popup-song-item.active {
    background: rgba(61, 124, 133, 0.1);
    border-left: 3px solid var(--mcc-primary);
}

.mcc-popup-song-number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mcc-gray-100);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mcc-gray-600);
    flex-shrink: 0;
}

.mcc-popup-song-item.active .mcc-popup-song-number {
    background: var(--mcc-primary);
    color: white;
}

.mcc-popup-song-info {
    flex: 1;
    min-width: 0;
}

.mcc-popup-song-title {
    display: block;
    font-weight: 500;
    color: var(--mcc-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-popup-song-artist {
    display: block;
    font-size: 0.8125rem;
    color: var(--mcc-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-popup-song-key {
    padding: 2px 8px;
    background: var(--mcc-gray-100);
    border-radius: var(--mcc-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mcc-gray-600);
    flex-shrink: 0;
}

/* YouTube Thumbnails in Song Listen */
.mcc-popup-song-thumb,
.mcc-playlist-song-thumb {
    width: 40px;
    height: 30px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--mcc-gray-100);
}

.mcc-popup-song-thumb-placeholder,
.mcc-playlist-song-thumb-placeholder {
    width: 40px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mcc-gray-100);
    border-radius: 4px;
    flex-shrink: 0;
    color: var(--mcc-gray-400);
}

/* Popup Song Item Layout mit Thumbnail */
.mcc-popup-song-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Playlist Song Item Layout mit Thumbnail */
.mcc-playlist-song-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Empty Playlist */
.mcc-empty-playlist {
    text-align: center;
    color: var(--mcc-gray-500);
    padding: 40px 20px;
}

.mcc-no-playlists {
    text-align: center;
    color: var(--mcc-gray-500);
    padding: 20px;
}

/* Responsive */
@media (max-width: 480px) {
    .mcc-library-sidebar {
        width: 100%;
    }
    
    .mcc-playlist-nav-container {
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        right: auto;
    }
    
    .mcc-nav-song-title {
        max-width: 100px;
    }
    
    .mcc-nav-center-pill {
        padding: 4px 8px;
        gap: 6px;
    }
    
    .mcc-playlist-nav .mcc-nav-btn {
        width: 28px;
        height: 28px;
    }
}

/* ===== DARK MODE ===== */

/* Dark Mode Variables */
.mcc-app.dark-mode {
    --mcc-background: #1a1a1a;
    --mcc-dark: #f0f0f0;
    --mcc-dark-light: #e0e0e0;
    --mcc-white: #111416;
    --mcc-gray-50: #252525;
    --mcc-gray-100: #2d2d2d;
    --mcc-gray-200: #3d3d3d;
    --mcc-gray-300: #4d4d4d;
    --mcc-gray-400: #6d6d6d;
    --mcc-gray-500: #8d8d8d;
    --mcc-gray-600: #a0a0a0;
    --mcc-gray-700: #b0b0b0;
    --mcc-gray-800: #c0c0c0;
    --mcc-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --mcc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --mcc-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.mcc-app.dark-mode {
    background: var(--mcc-background);
    color: var(--mcc-dark);
}

/* Dark Mode Header */
.mcc-app.dark-mode .mcc-header {
    background: #1a1a1a;
    border-bottom-color: var(--mcc-gray-200);
}
/* v4.32.166: Dark-Mode Header-Elemente an helles Konzept angepasst */
.mcc-app.dark-mode .mcc-logo {
    color: var(--mcc-primary-light);
}
.mcc-app.dark-mode .mcc-header-nav .mcc-nav-btn,
.mcc-app.dark-mode #mcc-header-overview {
    background: var(--mcc-gray-100) !important;
    color: var(--mcc-gray-700) !important;
}
.mcc-app.dark-mode .mcc-header-nav .mcc-nav-btn:hover {
    background: var(--mcc-gray-200);
}
.mcc-app.dark-mode .mcc-stat-badge {
    background: var(--mcc-gray-100);
    color: var(--mcc-gray-600);
}
.mcc-app.dark-mode .mcc-header-special-btn.mcc-audioplayer-btn {
    background: transparent;
}

/* Dark Mode Cards */
.mcc-app.dark-mode .mcc-song-card {
    background: var(--mcc-gray-100);
    border-color: var(--mcc-gray-200);
}

.mcc-app.dark-mode .mcc-song-card:hover {
    background: var(--mcc-gray-200);
    border-color: var(--mcc-primary);
}

/* Dark Mode Song Display */
.mcc-app.dark-mode .mcc-song-display {
    background: var(--mcc-gray-50);
}

.mcc-app.dark-mode .mcc-song-header {
    background: var(--mcc-gray-100);
}

.mcc-app.dark-mode .mcc-chord-sheet {
    background: var(--mcc-gray-100);
    color: var(--mcc-dark);
}

/* Dark Mode Lyrics-Only */
.mcc-app.dark-mode .mcc-chord-sheet.lyrics-only .mcc-lyrics-line,
.mcc-app.dark-mode .mcc-chord-sheet.lyrics-only .mcc-song-capo,
.mcc-app.dark-mode .mcc-chord-sheet.lyrics-only .mcc-song-tempo,
.mcc-app.dark-mode .mcc-chord-sheet.lyrics-only .mcc-song-time {
    color: var(--mcc-gray-600);
}

/* Section labels stay highlighted in dark mode */
.mcc-app.dark-mode .mcc-chord-sheet.lyrics-only .mcc-section-label,
.mcc-app.dark-mode .mcc-chord-sheet.lyrics-only .mcc-inline-label {
    color: var(--mcc-primary);
}

.mcc-app.dark-mode .mcc-chord-line .chord {
    color: var(--mcc-accent-light);
}

/* Dark Mode Toolbar */
.mcc-app.dark-mode .mcc-song-toolbar {
    background: var(--mcc-gray-100);
    border-color: var(--mcc-gray-200);
}

/* Dark Mode Toolbar V3 */
.mcc-app.dark-mode .mcc-toolbar-v3 {
    background: #1a1a1a;
    border-color: #333;
}

.mcc-app.dark-mode .mcc-toolbar-v3 .mcc-tb-btn {
    color: #888;
}

.mcc-app.dark-mode .mcc-toolbar-v3 .mcc-tb-btn:hover {
    background: var(--mcc-primary);
    color: white;
}

.mcc-app.dark-mode .mcc-toolbar-v3 .mcc-back-btn {
    background: #333;
    color: #ccc;
}

.mcc-app.dark-mode .mcc-toolbar-v3 .mcc-tb-divider {
    background: #444;
}

.mcc-app.dark-mode .mcc-toolbar-v3 .mcc-transpose-btn {
    background: #333;
    color: #ccc;
}

.mcc-app.dark-mode .mcc-toolbar-v3 .mcc-current-key {
    background: rgba(61, 124, 133, 0.2);
    color: #8AB0B5;
}

.mcc-app.dark-mode .mcc-toolbar-v3 .mcc-key-select {
    background: #333;
    border-color: #444;
    color: #ccc;
}

.mcc-app.dark-mode .mcc-toolbar-v3 .mcc-mode-toggle {
    background: #333;
}

.mcc-app.dark-mode .mcc-toolbar-v3 .mcc-mode-toggle .mcc-mode-btn {
    color: #888;
}

.mcc-app.dark-mode .mcc-toolbar-v3 .mcc-mode-toggle .mcc-mode-btn:hover,
.mcc-app.dark-mode .mcc-toolbar-v3 .mcc-mode-toggle .mcc-mode-btn.active {
    background: var(--mcc-primary);
    color: white;
}

.mcc-app.dark-mode .mcc-toolbar-v3 .mcc-size-toggle {
    background: #333;
}

.mcc-app.dark-mode .mcc-toolbar-v3 .mcc-size-btn {
    color: #888;
}

.mcc-app.dark-mode .mcc-toolbar-v3 .mcc-size-btn:hover,
.mcc-app.dark-mode .mcc-toolbar-v3 .mcc-size-btn.mcc-active {
    background: var(--mcc-primary);
    color: white;
}

.mcc-app.dark-mode .mcc-toolbar-v3 .mcc-scroll-btn {
    background: #333;
    color: #ccc;
}

.mcc-app.dark-mode .mcc-toolbar-v3 .mcc-speed-slider {
    background: #444;
}

.mcc-app.dark-mode .mcc-toolbar-v3 .mcc-speed-value {
    color: #ccc;
}

/* Dark Mode Toolbar V2 (legacy) */
.mcc-app.dark-mode .mcc-toolbar-v2 .mcc-toolbar-main {
    background: #1a1a1a;
    border-color: #333;
}

.mcc-app.dark-mode .mcc-toolbar-section {
    background: #242424;
}

.mcc-app.dark-mode .mcc-section-label {
    color: #888;
}

.mcc-app.dark-mode .mcc-transpose-group {
    background: #333;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.mcc-app.dark-mode .mcc-transpose-btn {
    color: #ccc;
}

.mcc-app.dark-mode .mcc-transpose-btn:hover {
    background: var(--mcc-primary);
    color: white;
}

.mcc-app.dark-mode .mcc-current-key {
    background: rgba(61, 124, 133, 0.2);
    color: #8AB0B5;
}

.mcc-app.dark-mode .mcc-toolbar-v2 .mcc-key-select {
    background: #333;
    border-color: #444;
    color: #ccc;
}

.mcc-app.dark-mode .mcc-mode-toggle {
    background: #333;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.mcc-app.dark-mode .mcc-mode-toggle .mcc-mode-btn {
    color: #888;
}

.mcc-app.dark-mode .mcc-mode-toggle .mcc-mode-btn:hover {
    color: #ccc;
    background: #444;
}

.mcc-app.dark-mode .mcc-mode-toggle .mcc-mode-btn.active {
    background: var(--mcc-primary);
    color: white;
}

.mcc-app.dark-mode .mcc-size-toggle {
    background: #333;
}

.mcc-app.dark-mode .mcc-size-btn {
    color: #888;
}

.mcc-app.dark-mode .mcc-size-btn:hover {
    background: #444;
    color: #ccc;
}

.mcc-app.dark-mode .mcc-size-btn.mcc-active {
    background: var(--mcc-primary);
    color: white;
}

.mcc-app.dark-mode .mcc-tool-btn {
    background: #333;
    color: #888;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.mcc-app.dark-mode .mcc-tool-btn:hover {
    background: var(--mcc-primary);
    color: white;
}

.mcc-app.dark-mode .mcc-quick-btn {
    border-color: #444;
    color: #888;
}

.mcc-app.dark-mode .mcc-quick-btn:hover {
    border-color: var(--mcc-primary);
    color: var(--mcc-primary);
    background: rgba(61, 124, 133, 0.1);
}

.mcc-app.dark-mode .mcc-toolbar-playback {
    background: linear-gradient(135deg, rgba(61, 124, 133, 0.08) 0%, rgba(232, 146, 79, 0.08) 100%);
    border-color: #333;
}

.mcc-app.dark-mode .mcc-playback-label {
    color: #888;
}

.mcc-app.dark-mode .mcc-playback-divider {
    background: #444;
}

.mcc-app.dark-mode .mcc-scroll-btn {
    background: #333;
    color: #ccc;
}

.mcc-app.dark-mode .mcc-speed-slider {
    background: #444;
}

.mcc-app.dark-mode .mcc-speed-label {
    color: #ccc;
}

.mcc-app.dark-mode .mcc-toolbar-v2 .mcc-back-btn {
    background: #333;
    color: #ccc;
}

.mcc-app.dark-mode .mcc-toolbar-v2 .mcc-back-btn:hover {
    background: var(--mcc-primary);
    color: white;
}

.mcc-app.dark-mode .mcc-toolbar-btn {
    color: var(--mcc-gray-600);
}

.mcc-app.dark-mode .mcc-toolbar-btn:hover {
    background: var(--mcc-gray-200);
    color: var(--mcc-dark);
}

/* Dark Mode Search */
.mcc-app.dark-mode .mcc-search-input {
    background: var(--mcc-gray-100);
    color: var(--mcc-dark);
    border-color: var(--mcc-gray-300);
}

.mcc-app.dark-mode .mcc-search-suggestions {
    background: var(--mcc-gray-100);
    border-color: var(--mcc-gray-300);
}

.mcc-app.dark-mode .mcc-suggestion-item:hover {
    background: var(--mcc-gray-200);
}

/* Dark Mode Modals */
.mcc-app.dark-mode .mcc-modal-container,
.mcc-app.dark-mode .mcc-stats-container {
    background: var(--mcc-gray-100);
    color: var(--mcc-dark);
}

.mcc-app.dark-mode .mcc-modal-header {
    border-color: var(--mcc-gray-300);
}

/* Dark Mode Filters */
.mcc-app.dark-mode .mcc-filter-select {
    background: var(--mcc-gray-100);
    color: var(--mcc-dark);
    border-color: var(--mcc-gray-300);
}

/* Dark Mode Chord Diagrams */
.mcc-app.dark-mode .mcc-chord-diagrams {
    background: var(--mcc-gray-100);
}

.mcc-app.dark-mode .mcc-chord-diagram {
    background: var(--mcc-gray-200);
}

/* Dark Mode Library Sidebar */
.mcc-app.dark-mode .mcc-library-sidebar {
    background: var(--mcc-gray-100);
}

.mcc-app.dark-mode .mcc-library-item:hover {
    background: var(--mcc-gray-200);
}

/* Dark Mode Toggle Button */
.mcc-darkmode-btn .mcc-icon-moon {
    display: none;
}

.mcc-darkmode-btn .mcc-icon-sun {
    display: block;
}

.mcc-app.dark-mode .mcc-darkmode-btn .mcc-icon-moon {
    display: block;
}

.mcc-app.dark-mode .mcc-darkmode-btn .mcc-icon-sun {
    display: none;
}

/* ===== STATISTICS MODAL ===== */

.mcc-stats-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mcc-stats-modal.visible {
    opacity: 1;
    visibility: visible;
}

.mcc-stats-modal .mcc-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.mcc-stats-modal .mcc-modal-container {
    position: relative;
    z-index: 1;
    max-width: 550px;
    width: 92%;
    max-height: 85vh;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mcc-stats-modal .mcc-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mcc-stats-modal .mcc-modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
}

.mcc-stats-modal .mcc-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.mcc-stats-modal .mcc-modal-close:hover {
    background: #e5e7eb;
}

.mcc-stats-modal .mcc-modal-close svg {
    width: 18px;
    height: 18px;
    color: #6b7280;
}

.mcc-stats-modal .mcc-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    background: #ffffff;
}

/* Body scroll lock when modal is open */
body.mcc-modal-open {
    overflow: hidden;
}

.mcc-stats-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 15px;
    color: #6b7280;
}

.mcc-stats-overview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

@media (max-width: 500px) {
    .mcc-stats-overview {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mcc-stat-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    text-align: left;
    color: #111416;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.mcc-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(61,124,133,0.15);
    border-color: #3D7C85;
}

.mcc-stat-card .mcc-stat-icon {
    font-size: 32px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(61,124,133,0.1), rgba(61,124,133,0.18));
    border-radius: 14px;
    flex-shrink: 0;
}
.mcc-stat-card .mcc-stat-icon svg { width: 24px !important; height: 24px !important; fill: none !important; }

.mcc-stat-card .mcc-stat-value {
    font-size: 28px;
    font-weight: 700;
    font-family: var(--mcc-font-title);
    line-height: 1.2;
    color: #111416 !important;
}

.mcc-stat-card .mcc-stat-label {
    font-size: 14px;
    color: #6c757d;
    margin-top: 2px;
}

.mcc-stats-section {
    margin-bottom: 24px;
}

.mcc-stats-section:last-child {
    margin-bottom: 0;
}

.mcc-stats-section h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.mcc-stats-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mcc-stats-list-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: #f9fafb;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.mcc-stats-list-item:hover {
    background: #f3f4f6;
}

.mcc-stats-list-item .mcc-rank {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3D7C85;
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 12px;
    flex-shrink: 0;
}

.mcc-stats-list-item .mcc-rank.gold { background: #f59e0b; color: #fff; }
.mcc-stats-list-item .mcc-rank.silver { background: #9ca3af; color: #fff; }
.mcc-stats-list-item .mcc-rank.bronze { background: #d97706; color: #fff; }

.mcc-stats-list-item .mcc-song-info {
    flex: 1;
    min-width: 0;
}

.mcc-stats-list-item .mcc-song-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-stats-list-item .mcc-song-artist {
    font-size: 0.8rem;
    color: #6b7280;
}

.mcc-stats-list-item .mcc-views {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Keys Chart */
.mcc-stats-chart {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mcc-key-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #3D7C85;
    color: white;
    border-radius: 20px;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.mcc-key-badge:hover {
    background: #1F737A;
    transform: scale(1.05);
}

.mcc-key-badge .mcc-key-name {
    font-weight: 700;
}

.mcc-key-badge .mcc-key-count {
    font-size: 0.75rem;
    opacity: 0.85;
    background: rgba(255,255,255,0.2);
    padding: 2px 6px;
    border-radius: 10px;
}

/* Recent Activity */
.mcc-activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #f9fafb;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 6px;
}

.mcc-activity-item:last-child {
    margin-bottom: 0;
}

.mcc-activity-item:hover {
    background: #f3f4f6;
}

.mcc-activity-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    border-radius: 50%;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.mcc-activity-info {
    flex: 1;
    min-width: 0;
}

.mcc-activity-text {
    font-size: 0.85rem;
    color: #1f2937;
}

.mcc-activity-text strong {
    font-weight: 600;
}

.mcc-activity-time {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 2px;
}

.mcc-empty-stats {
    color: #9ca3af;
    font-size: 0.9rem;
    text-align: center;
    padding: 20px;
}

/* Responsive Stats */
@media (max-width: 600px) {
    .mcc-stats-overview {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mcc-stat-card .mcc-stat-value {
        font-size: 1.5rem;
    }
}

/* ===== METRONOME ===== */

/* ===== SETTINGS MODAL ===== */
.mcc-settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mcc-settings-modal.visible {
    opacity: 1;
    visibility: visible;
}

.mcc-settings-modal .mcc-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.mcc-settings-modal .mcc-modal-container {
    position: relative;
    z-index: 1;
    max-width: 480px;
    width: 92%;
    max-height: 85vh;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: mcc-modal-scale-in 0.25s ease;
}

@keyframes mcc-modal-scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.mcc-settings-modal .mcc-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #3D7C85 0%, #1F737A 100%);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mcc-settings-modal .mcc-modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mcc-font-title);
}

.mcc-settings-modal .mcc-modal-header h2 svg {
    color: rgba(255, 255, 255, 0.9);
}

.mcc-settings-modal .mcc-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.mcc-settings-modal .mcc-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.mcc-settings-modal .mcc-modal-close svg {
    width: 18px;
    height: 18px;
    color: #ffffff;
}

.mcc-settings-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.mcc-settings-group {
    margin-bottom: 24px;
}

.mcc-settings-group:last-child {
    margin-bottom: 0;
}

.mcc-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mcc-settings-label {
    display: block;
    margin-bottom: 10px;
}

.mcc-settings-row .mcc-settings-label {
    margin-bottom: 0;
    flex: 1;
}

.mcc-settings-label-text {
    font-weight: 600;
    color: #1f2937;
    font-size: 0.95rem;
    display: block;
}

.mcc-settings-label-hint {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 2px;
    display: block;
}

/* Segmented Control */
.mcc-settings-segmented {
    display: flex;
    background: #f3f4f6;
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}

.mcc-segmented-btn {
    flex: 1;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.mcc-segmented-btn:hover {
    color: #374151;
    background: rgba(255, 255, 255, 0.5);
}

.mcc-segmented-btn.active {
    background: #ffffff;
    color: #3D7C85;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mcc-segmented-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Select */
.mcc-settings-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    color: #1f2937;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 44px;
}

.mcc-settings-select:hover {
    border-color: #d1d5db;
}

.mcc-settings-select:focus {
    outline: none;
    border-color: #3D7C85;
    box-shadow: 0 0 0 3px rgba(61, 124, 133, 0.15);
}

/* Toggle Switch */
.mcc-toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.mcc-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mcc-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d1d5db;
    transition: 0.3s;
    border-radius: 28px;
}

.mcc-toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.mcc-toggle-switch input:checked + .mcc-toggle-slider {
    background-color: #3D7C85;
}

.mcc-toggle-switch input:checked + .mcc-toggle-slider:before {
    transform: translateX(24px);
}

/* Slider */
.mcc-settings-slider-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mcc-settings-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    outline: none;
}

.mcc-settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    background: #3D7C85;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(61, 124, 133, 0.4);
    transition: transform 0.15s ease;
}

.mcc-settings-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.mcc-settings-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: #3D7C85;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(61, 124, 133, 0.4);
}

.mcc-settings-slider-value {
    min-width: 50px;
    padding: 8px 12px;
    background: #f3f4f6;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #3D7C85;
    text-align: center;
    font-family: var(--mcc-font-title);
}

/* Footer */
.mcc-settings-footer {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.mcc-btn {
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.mcc-btn-secondary {
    background: #ffffff;
    color: #6b7280;
    border: 2px solid #e5e7eb;
}

.mcc-btn-secondary:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.mcc-btn-primary {
    background: linear-gradient(135deg, #3D7C85 0%, #1F737A 100%);
    color: #ffffff;
}

.mcc-btn-primary:hover {
    background: linear-gradient(135deg, #1F737A 0%, #264E54 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(61, 124, 133, 0.3);
}

/* Sheet Divider */
.mcc-sheet-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 8px 20px;
}

/* Settings Button im Header - nur auf Desktop sichtbar */
.mcc-settings-btn {
    display: flex;
}

@media (max-width: 768px) {
    .mcc-settings-btn {
        display: none !important;
    }
    
    .mcc-settings-segmented {
        flex-wrap: wrap;
    }
    
    .mcc-segmented-btn {
        flex: 1 1 auto;
        min-width: calc(50% - 4px);
    }
    
    .mcc-settings-footer {
        flex-direction: column-reverse;
    }
    
    .mcc-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Dark Mode für Settings */
.mcc-app.dark-mode .mcc-settings-modal .mcc-modal-container {
    background: #1f2937;
}

.mcc-app.dark-mode .mcc-settings-body {
    background: #1f2937;
}

.mcc-app.dark-mode .mcc-settings-label-text {
    color: #f3f4f6;
}

.mcc-app.dark-mode .mcc-settings-label-hint {
    color: #9ca3af;
}

.mcc-app.dark-mode .mcc-settings-segmented {
    background: #374151;
}

.mcc-app.dark-mode .mcc-segmented-btn {
    color: #9ca3af;
}

.mcc-app.dark-mode .mcc-segmented-btn:hover {
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.1);
}

.mcc-app.dark-mode .mcc-segmented-btn.active {
    background: #4b5563;
    color: #E8924F;
}

.mcc-app.dark-mode .mcc-settings-select {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

.mcc-app.dark-mode .mcc-settings-footer {
    background: #111827;
    border-color: #374151;
}

.mcc-app.dark-mode .mcc-btn-secondary {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

.mcc-app.dark-mode .mcc-toggle-slider {
    background-color: #4b5563;
}

.mcc-app.dark-mode .mcc-settings-slider {
    background: #4b5563;
}

.mcc-app.dark-mode .mcc-settings-slider-value {
    background: #374151;
}

.mcc-app.dark-mode .mcc-sheet-divider {
    background: #374151;
}

/* ===== METRONOME ===== */

.mcc-metronome {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 220px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: box-shadow 0.2s;
}

.mcc-metronome.dragging {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 10001;
}

.mcc-app.dark-mode .mcc-metronome {
    background: #374151;
    border-color: #4b5563;
}

.mcc-metronome-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #3D7C85;
    color: white;
    cursor: grab;
    user-select: none;
}

.mcc-metronome.dragging .mcc-metronome-header {
    cursor: grabbing;
}

.mcc-metronome-header-btns {
    display: flex;
    gap: 6px;
}

.mcc-metronome-title {
    font-weight: 600;
    font-size: 0.85rem;
}

.mcc-metronome-close,
.mcc-metronome-minimize {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    cursor: pointer;
    width: 26px;
    height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.mcc-metronome-close:hover,
.mcc-metronome-minimize:hover {
    background: rgba(255,255,255,0.25);
}

.mcc-metronome-close svg,
.mcc-metronome-minimize svg {
    width: 14px;
    height: 14px;
}

.mcc-metronome-body {
    padding: 20px 15px;
}

.mcc-metronome-display {
    text-align: center;
    margin-bottom: 15px;
}

.mcc-metronome-bpm {
    font-size: 3rem;
    font-weight: 700;
    color: #3D7C85;
    line-height: 1;
    background: transparent;
    border: none;
    border-bottom: 2px dashed transparent;
    text-align: center;
    width: 100%;
    max-width: 120px;
    margin: 0 auto;
    display: block;
    -moz-appearance: textfield;
    transition: border-color 0.2s;
}

.mcc-metronome-bpm::-webkit-outer-spin-button,
.mcc-metronome-bpm::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mcc-metronome-bpm:focus {
    outline: none;
    border-bottom-color: #3D7C85;
}

.mcc-metronome-bpm:hover {
    border-bottom-color: #d1d5db;
}

.mcc-metronome-label {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mcc-metronome-time-sig {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.mcc-time-sig-select {
    padding: 6px 12px;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    background: #f3f4f6;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.mcc-time-sig-select:hover {
    border-color: #3D7C85;
}

.mcc-time-sig-select:focus {
    outline: none;
    border-color: #3D7C85;
    box-shadow: 0 0 0 3px rgba(61, 124, 133, 0.1);
}

.mcc-metronome-beats {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    max-width: 180px;
    margin-left: auto;
    margin-right: auto;
}

.mcc-beat-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e5e7eb;
    transition: all 0.1s ease;
}

.mcc-beat-dot.active {
    background: #E8924F;
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(232, 146, 79, 0.5);
}

.mcc-beat-dot[data-beat="1"].active {
    background: #3D7C85;
    box-shadow: 0 0 10px rgba(61, 124, 133, 0.5);
}

.mcc-metronome-slider {
    margin-bottom: 15px;
}

.mcc-metronome-slider input[type="range"] {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #e5e7eb;
    border-radius: 3px;
    outline: none;
}

.mcc-metronome-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #3D7C85;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s;
}

.mcc-metronome-slider input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.mcc-metronome-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.mcc-metronome-btn {
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s;
}

.mcc-metronome-btn:hover {
    background: #e5e7eb;
}

.mcc-metronome-play {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #3D7C85;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.mcc-metronome-play:hover {
    background: #1F737A;
    transform: scale(1.05);
}

.mcc-metronome-play svg {
    width: 24px;
    height: 24px;
}

.mcc-metronome-play.playing .mcc-icon-play {
    display: none;
}

.mcc-metronome-play.playing .mcc-icon-pause {
    display: block;
}

.mcc-metronome-tap {
    width: 100%;
    padding: 12px;
    background: #f3f4f6;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s;
}

.mcc-metronome-tap:hover {
    border-color: #3D7C85;
    color: #3D7C85;
    background: rgba(61, 124, 133, 0.05);
}

.mcc-metronome-tap:active {
    transform: scale(0.98);
    background: rgba(61, 124, 133, 0.1);
}

/* Minimized Metronome */
.mcc-metronome.minimized {
    width: auto;
    min-width: 180px;
}

.mcc-metronome-mini {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.mcc-mini-bpm {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3D7C85;
    min-width: 50px;
    text-align: center;
}

.mcc-mini-play {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #3D7C85;
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.mcc-mini-play:hover {
    background: #1F737A;
    transform: scale(1.05);
}

.mcc-mini-play svg {
    width: 18px;
    height: 18px;
}

.mcc-mini-beats {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    max-width: 80px;
}

.mcc-mini-beats .mcc-beat-dot {
    width: 8px;
    height: 8px;
}

/* Metronome Button in Toolbar */
.mcc-metronome-toggle-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.mcc-metronome-toggle-btn.active {
    background: #3D7C85 !important;
    color: white !important;
}

.mcc-metronome-toggle-btn svg {
    width: 20px;
    height: 20px;
}

/* ===== Stats Button (jetzt im Drei-Punkte-Dropdown, v4.32.169) ===== */
.mcc-nav-more-dropdown .mcc-stats-btn span,
.mcc-nav-more-dropdown .mcc-darkmode-btn span {
    display: inline !important;
}

/* ===== Song Discovery Modal ===== */
.mcc-discovery-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-discovery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.mcc-discovery-content {
    position: relative;
    background: var(--mcc-white);
    border-radius: 16px;
    width: 95%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.dark-mode .mcc-discovery-content {
    background: var(--mcc-dark);
    color: var(--mcc-gray-100);
}

.mcc-discovery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--mcc-gray-200);
    gap: 16px;
    flex-wrap: wrap;
}

.dark-mode .mcc-discovery-header {
    border-bottom-color: var(--mcc-gray-700);
}

.mcc-discovery-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mcc-discovery-title svg {
    width: 28px;
    height: 28px;
    color: var(--mcc-primary);
}

.mcc-discovery-title h2 {
    margin: 0;
    font-family: var(--mcc-font-title);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--mcc-dark);
}

.dark-mode .mcc-discovery-title h2 {
    color: var(--mcc-white);
}

.mcc-discovery-filters {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.mcc-discovery-filter-select {
    padding: 8px 12px;
    border: 1px solid var(--mcc-gray-300);
    border-radius: 8px;
    font-size: 0.875rem;
    background: var(--mcc-white);
    cursor: pointer;
}

.dark-mode .mcc-discovery-filter-select {
    background: var(--mcc-dark-light);
    border-color: var(--mcc-gray-600);
    color: var(--mcc-gray-100);
}

.mcc-discovery-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    cursor: pointer;
}

.mcc-discovery-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--mcc-primary);
}

.mcc-discovery-close {
    padding: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    color: var(--mcc-gray-500);
    transition: all 0.2s;
}

.mcc-discovery-close:hover {
    background: var(--mcc-gray-100);
    color: var(--mcc-dark);
}

.dark-mode .mcc-discovery-close:hover {
    background: var(--mcc-gray-700);
    color: var(--mcc-white);
}

.mcc-discovery-close svg {
    width: 24px;
    height: 24px;
}

.mcc-discovery-body {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    min-height: 400px;
}

.mcc-discovery-loading,
.mcc-discovery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    text-align: center;
    color: var(--mcc-gray-500);
}

.mcc-discovery-empty svg {
    margin-bottom: 16px;
    color: var(--mcc-gray-400);
}

.mcc-discovery-empty h3 {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
    color: var(--mcc-dark);
}

.dark-mode .mcc-discovery-empty h3 {
    color: var(--mcc-white);
}

.mcc-discovery-empty p {
    margin: 0 0 24px 0;
    max-width: 400px;
}

/* Discovery Cards Grid */
.mcc-discovery-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 768px) {
    .mcc-discovery-cards {
        grid-template-columns: 1fr;
    }
}

.mcc-discovery-card {
    background: var(--mcc-gray-50);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.3s;
}

.dark-mode .mcc-discovery-card {
    background: var(--mcc-dark-light);
}

.mcc-discovery-card:hover {
    border-color: var(--mcc-primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(61, 124, 133, 0.15);
}

.mcc-discovery-card.liked {
    border-color: var(--mcc-accent);
    background: rgba(232, 146, 79, 0.1);
}

.mcc-discovery-card.disliked {
    opacity: 0.5;
    transform: scale(0.95);
}

/* Video Container */
.mcc-discovery-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    background: #000;
}

.mcc-discovery-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.mcc-discovery-video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mcc-dark) 0%, var(--mcc-dark-light) 100%);
    color: var(--mcc-gray-400);
}

/* Song Info */
.mcc-discovery-info {
    padding: 16px;
}

.mcc-discovery-song-title {
    margin: 0 0 4px 0;
    font-family: var(--mcc-font-title);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--mcc-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark-mode .mcc-discovery-song-title {
    color: var(--mcc-white);
}

.mcc-discovery-song-artist {
    margin: 0 0 12px 0;
    font-size: 0.875rem;
    color: var(--mcc-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-discovery-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mcc-discovery-key,
.mcc-discovery-genre {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.mcc-discovery-key {
    background: var(--mcc-primary);
    color: white;
}

.mcc-discovery-genre {
    background: var(--mcc-gray-200);
    color: var(--mcc-gray-700);
}

.dark-mode .mcc-discovery-genre {
    background: var(--mcc-gray-700);
    color: var(--mcc-gray-300);
}

/* Action Buttons */
.mcc-discovery-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--mcc-gray-200);
}

.dark-mode .mcc-discovery-actions {
    border-top-color: var(--mcc-gray-700);
}

.mcc-discovery-action {
    width: 44px;
    height: 44px;
    border: 2px solid var(--mcc-gray-300);
    border-radius: 50%;
    background: var(--mcc-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.dark-mode .mcc-discovery-action {
    background: var(--mcc-dark);
    border-color: var(--mcc-gray-600);
}

.mcc-discovery-action svg {
    width: 20px;
    height: 20px;
}

.mcc-discovery-action:hover {
    transform: scale(1.1);
}

/* Dislike Button */
.mcc-discovery-dislike {
    color: var(--mcc-error);
    border-color: var(--mcc-error);
}

.mcc-discovery-dislike:hover {
    background: var(--mcc-error);
    color: white;
}

/* Like Button */
.mcc-discovery-like {
    color: var(--mcc-accent);
    border-color: var(--mcc-accent);
}

.mcc-discovery-like:hover {
    background: var(--mcc-accent);
    color: white;
}

/* Favorite Button */
.mcc-discovery-favorite {
    color: #f59e0b;
    border-color: #f59e0b;
}

.mcc-discovery-favorite:hover {
    background: #f59e0b;
    color: white;
}

.mcc-discovery-favorite.active {
    background: #f59e0b;
    color: white;
}

.mcc-discovery-favorite.active svg {
    fill: currentColor;
}

/* Playlist Button */
.mcc-discovery-playlist {
    color: var(--mcc-primary);
    border-color: var(--mcc-primary);
}

.mcc-discovery-playlist:hover {
    background: var(--mcc-primary);
    color: white;
}

/* View Button */
.mcc-discovery-view {
    color: var(--mcc-gray-500);
    border-color: var(--mcc-gray-400);
}

.mcc-discovery-view:hover {
    background: var(--mcc-gray-600);
    color: white;
    border-color: var(--mcc-gray-600);
}

/* Footer */
.mcc-discovery-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid var(--mcc-gray-200);
    background: var(--mcc-gray-50);
}

.dark-mode .mcc-discovery-footer {
    background: rgba(0, 0, 0, 0.2);
    border-top-color: var(--mcc-gray-700);
}

.mcc-discovery-skip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 2px solid var(--mcc-gray-300) !important;
    border-radius: 8px;
    background: var(--mcc-white) !important;
    color: var(--mcc-gray-600) !important;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.dark-mode .mcc-discovery-skip {
    background: var(--mcc-dark) !important;
    border-color: var(--mcc-gray-600) !important;
    color: var(--mcc-gray-300) !important;
}

.mcc-discovery-skip:hover {
    border-color: var(--mcc-primary) !important;
    background: var(--mcc-white) !important;
    color: var(--mcc-primary) !important;
}

.dark-mode .mcc-discovery-skip:hover {
    background: var(--mcc-dark) !important;
    color: var(--mcc-primary) !important;
}

.mcc-discovery-skip svg {
    width: 18px;
    height: 18px;
}

.mcc-discovery-stats {
    font-size: 0.875rem;
    color: var(--mcc-gray-500);
}

.mcc-discovery-stats span {
    font-weight: 600;
    color: var(--mcc-primary);
}

/* Discover Button (jetzt im Drei-Punkte-Dropdown, v4.32.169) */
.mcc-nav-more-dropdown .mcc-discover-btn svg {
    width: 18px;
    height: 18px;
}

.mcc-nav-more-dropdown .mcc-discover-btn span {
    display: inline !important;
}

/* Animation for card actions */
@keyframes discovery-like-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.mcc-discovery-action.pop {
    animation: discovery-like-pop 0.3s ease-out;
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .mcc-discovery-header {
        padding: 12px 16px;
    }
    
    .mcc-discovery-title h2 {
        font-size: 1.25rem;
    }
    
    .mcc-discovery-body {
        padding: 16px;
    }
    
    .mcc-discovery-action {
        width: 40px;
        height: 40px;
    }
    
    .mcc-discovery-action svg {
        width: 18px;
        height: 18px;
    }
    
    .mcc-discovery-footer {
        flex-direction: column;
        gap: 12px;
    }
}

/* ===== Discovery Playlist Modal (higher z-index) ===== */
.mcc-discovery-playlist-modal {
    z-index: 10100 !important;
}

.mcc-discovery-playlist-modal .mcc-modal-overlay {
    z-index: 10099;
}

.mcc-discovery-playlist-modal .mcc-modal-content {
    z-index: 10101;
    max-width: 450px;
}

.mcc-modal-song-info {
    font-size: 0.875rem;
    color: var(--mcc-gray-500);
    margin-left: auto;
    margin-right: 16px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Discovery Button Tooltips ===== */
.mcc-discovery-action {
    position: relative;
}

.mcc-discovery-action::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background: var(--mcc-dark);
    color: white;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    pointer-events: none;
    margin-bottom: 8px;
    z-index: 100;
}

.mcc-discovery-action::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--mcc-dark);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    pointer-events: none;
    margin-bottom: -4px;
    z-index: 100;
}

.mcc-discovery-action:hover::after,
.mcc-discovery-action:hover::before {
    opacity: 1;
    visibility: visible;
}

.dark-mode .mcc-discovery-action::after {
    background: var(--mcc-gray-100);
    color: var(--mcc-dark);
}

.dark-mode .mcc-discovery-action::before {
    border-top-color: var(--mcc-gray-100);
}

/* ========================================
   PERFORMANCE MODE
   ======================================== */

/* Performance Mode Button - Highlight */
/* Performance Mode Button - uses default mcc-mode-btn styling */

/* Performance Mode Container */
.mcc-performance-mode {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #1a1a1a;
    z-index: 99999;
    display: none;
}

.mcc-performance-mode.active {
    display: block;
}
    flex-direction: column;
    overflow: hidden;
}

.mcc-performance-mode * {
    box-sizing: border-box;
}

/* Performance Header */
.mcc-perf-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(0, 0, 0, 0.95);
    border-bottom: 2px solid #009E7F;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    z-index: 100;
}

.mcc-perf-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mcc-primary);
}

.mcc-perf-progress svg {
    color: var(--mcc-primary);
}

.mcc-perf-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mcc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
}

.mcc-perf-exit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--mcc-text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.mcc-perf-exit:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--mcc-primary);
}

.mcc-perf-exit svg {
    width: 20px;
    height: 20px;
}

/* Setlist Sidebar */
.mcc-perf-setlist {
    position: fixed;
    left: 0;
    top: 60px;
    bottom: 70px;
    width: 320px;
    background: rgba(0, 0, 0, 0.95);
    border-right: 2px solid #009E7F;
    overflow-y: auto;
    transition: transform 0.3s ease;
    z-index: 90;
}

.mcc-perf-setlist.minimized {
    transform: translateX(-270px);
}

.mcc-perf-setlist-header {
    position: sticky;
    top: 0;
    background: rgba(0, 0, 0, 0.98);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
}

.mcc-perf-setlist-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mcc-text-primary);
}

.mcc-perf-setlist-minimize {
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: var(--mcc-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 4px;
}

.mcc-perf-setlist-minimize:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--mcc-primary);
}

.mcc-perf-setlist-minimize svg {
    width: 20px;
    height: 20px;
    display: block;
}

.mcc-perf-setlist-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mcc-perf-setlist-items li {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mcc-perf-setlist-items li:hover {
    background: rgba(255, 255, 255, 0.05);
}

.mcc-perf-setlist-items li.active {
    background: var(--mcc-primary);
    color: white;
    border-left: 4px solid var(--mcc-secondary);
    font-weight: 600;
}

.mcc-perf-setlist-items li.played {
    opacity: 0.4;
}

.mcc-perf-setlist-items li.played::after {
    content: '✓';
    margin-left: auto;
    color: var(--mcc-success);
    font-weight: bold;
}

.mcc-perf-setlist-number {
    font-weight: 600;
    color: var(--mcc-text-secondary);
    min-width: 2rem;
}

.mcc-perf-setlist-items li.active .mcc-perf-setlist-number {
    color: white;
}

.mcc-perf-setlist-title {
    font-weight: 600;
    flex: 1;
}

.mcc-perf-setlist-artist {
    font-size: 0.85rem;
    color: var(--mcc-text-secondary);
    display: block;
    margin-top: 0.25rem;
}

.mcc-perf-setlist-items li.active .mcc-perf-setlist-artist {
    color: rgba(255, 255, 255, 0.8);
}

/* Main Content Area */
.mcc-perf-content {
    padding: 80px 2rem 90px 340px;
    overflow-y: auto;
    height: 100vh;
    color: #fff;
}

.mcc-perf-setlist.minimized ~ .mcc-perf-content {
    padding-left: 70px;
}
}

.mcc-perf-song-info {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.mcc-perf-song-title {
    font-family: 'Akko', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--mcc-text-primary);
    margin: 0 0 0.5rem 0;
}

.mcc-perf-song-artist {
    font-size: 1.5rem;
    color: var(--mcc-text-secondary);
    margin: 0;
}

/* Chord Sheet in Performance Mode */
.mcc-perf-sheet {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Akko', sans-serif;
    font-size: calc(1rem * var(--perf-zoom, 1.25));
    line-height: 1.8;
    color: #ffffff;
}

/* Zoom Levels */
.mcc-performance-mode.zoom-100 {
    --perf-zoom: 1;
}

.mcc-performance-mode.zoom-110 {
    --perf-zoom: 1.1;
}

.mcc-performance-mode.zoom-125 {
    --perf-zoom: 1.25;
}

.mcc-performance-mode.zoom-140 {
    --perf-zoom: 1.4;
}

.mcc-performance-mode.zoom-150 {
    --perf-zoom: 1.5;
}

.mcc-performance-mode.zoom-175 {
    --perf-zoom: 1.75;
}

.mcc-performance-mode.zoom-200 {
    --perf-zoom: 2;
}

/* Chords in Performance Mode */
.mcc-perf-sheet .mcc-chord {
    color: #00d4aa;
    font-weight: 700;
    font-size: 1.1em;
    display: inline-block;
    margin-right: 0.5rem;
}

.mcc-perf-sheet .mcc-section-label {
    font-weight: 700;
    color: #ff9966;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-size: 1.2em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mcc-perf-sheet .mcc-line {
    margin-bottom: 0.5em;
}

.mcc-perf-sheet .mcc-intro,
.mcc-perf-sheet .mcc-outro {
    font-style: italic;
    color: var(--mcc-text-secondary);
}

/* Display Modes */
/* Chords Only Mode */
/* Chords Only Mode */
.mcc-performance-mode.display-chords-only .mcc-perf-sheet .mcc-line-text,
.mcc-performance-mode.display-chords-only .mcc-perf-sheet .mcc-text,
.mcc-performance-mode.display-chords-only .mcc-perf-sheet .mcc-lyrics-row,
.mcc-performance-mode.display-chords-only .mcc-perf-sheet p:not(.mcc-chord-line) {
    display: none !important;
}

.mcc-performance-mode.display-chords-only .mcc-perf-sheet .mcc-chord-line {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.mcc-performance-mode.display-chords-only .mcc-perf-sheet .mcc-section {
    margin-bottom: 2rem;
}

/* Lyrics Only Mode */
.mcc-performance-mode.display-lyrics .mcc-perf-sheet .mcc-chord {
    display: none !important;
}

.mcc-performance-mode.display-lyrics .mcc-perf-sheet .mcc-chord-line {
    display: none !important;
}

.mcc-performance-mode.display-lyrics .mcc-perf-sheet,
.mcc-performance-mode.display-lyrics .mcc-perf-sheet * {
    font-family: 'Akko', sans-serif !important;
}

.mcc-performance-mode.display-lyrics .mcc-perf-sheet .mcc-lyrics-line,
.mcc-performance-mode.display-lyrics .mcc-perf-sheet p {
    font-family: 'Akko', sans-serif !important;
    line-height: 1.6 !important;
}

/* Keep section labels in Akko */
.mcc-performance-mode.display-lyrics .mcc-perf-sheet .mcc-section-label {
    font-family: 'Akko', sans-serif !important;
}

/* Performance Toolbar */
.mcc-perf-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: rgba(0, 0, 0, 0.95);
    border-top: 2px solid #009E7F;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0 2rem;
    z-index: 100;
    transition: opacity 0.3s, transform 0.3s;
}

.mcc-performance-mode.toolbar-hidden .mcc-perf-toolbar {
    position: absolute;
    opacity: 0;
    transform: translateY(100%);
}

.mcc-perf-btn {
    padding: 0.6rem 1.2rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--mcc-text-primary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.mcc-perf-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--mcc-primary);
}

.mcc-perf-btn svg {
    width: 20px;
    height: 20px;
}

.mcc-perf-btn-primary {
    background: linear-gradient(135deg, var(--mcc-primary), var(--mcc-secondary));
    border-color: var(--mcc-primary);
    color: white;
    font-weight: 600;
}

.mcc-perf-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.mcc-perf-btn-nav {
    padding: 0.6rem 1.5rem;
}

.mcc-perf-btn-icon {
    padding: 0.6rem;
}

.mcc-perf-btn-icon span {
    display: none;
}

/* Display Mode Toggle */
.mcc-perf-display-mode {
    display: flex;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.25rem;
    border-radius: 8px;
}

.mcc-perf-mode-btn {
    padding: 0.5rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--mcc-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-perf-mode-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--mcc-text-primary);
}

.mcc-perf-mode-btn.active {
    background: var(--mcc-primary);
    color: white;
}

.mcc-perf-mode-btn svg {
    width: 18px;
    height: 18px;
}

/* Zoom Controls */
.mcc-perf-zoom {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.5rem 1rem;
    border-radius: 8px;
}

.mcc-perf-zoom-btn {
    padding: 0.4rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: var(--mcc-text-primary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-perf-zoom-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--mcc-primary);
}

.mcc-perf-zoom-btn svg {
    width: 18px;
    height: 18px;
}

.mcc-perf-zoom-level {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mcc-text-primary);
    min-width: 3rem;
    text-align: center;
}

/* Help Overlay */
.mcc-perf-help-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.mcc-perf-help-content {
    background: var(--mcc-bg-secondary);
    border: 2px solid var(--mcc-primary);
    border-radius: 12px;
    padding: 2rem;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.mcc-perf-help-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 6px;
    color: var(--mcc-text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.mcc-perf-help-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.mcc-perf-help-close svg {
    width: 20px;
    height: 20px;
    display: block;
}

.mcc-perf-help-content h2 {
    font-family: 'Akko', sans-serif;
    font-size: 2rem;
    margin: 0 0 1.5rem 0;
    color: var(--mcc-text-primary);
}

.mcc-perf-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.mcc-perf-shortcut-group h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mcc-primary);
    margin: 0 0 1rem 0;
}

.mcc-perf-shortcut {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.mcc-perf-shortcut kbd {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-family: monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mcc-primary);
    min-width: 2.5rem;
    text-align: center;
}

.mcc-perf-shortcut span {
    color: var(--mcc-text-primary);
    font-size: 0.95rem;
}

.mcc-perf-help-tip {
    margin-top: 2rem;
    padding: 1rem;
    background: rgba(0, 158, 127, 0.1);
    border-left: 3px solid var(--mcc-primary);
    border-radius: 6px;
    display: flex;
    gap: 1rem;
}

.mcc-perf-help-tip svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--mcc-primary);
}

.mcc-perf-help-tip p {
    margin: 0;
    color: var(--mcc-text-primary);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Toast Notification in Performance Mode */
.mcc-perf-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid var(--mcc-primary);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--mcc-text-primary);
    z-index: 300;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.mcc-perf-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Responsive */
@media (max-width: 1024px) {
    .mcc-perf-setlist {
    position: absolute;
        width: 280px;
    }
    
    .mcc-perf-content {
    position: absolute;
        left: 280px;
    }
    
    .mcc-perf-setlist.minimized ~ .mcc-perf-content {
    position: absolute;
        left: 40px;
    }
}

@media (max-width: 768px) {
    .mcc-perf-header {
        padding: 0 1rem;
    }
    
    .mcc-perf-title {
        font-size: 0.95rem;
        max-width: 40%;
    }
    
    .mcc-perf-exit span {
        display: none;
    }
    
    .mcc-perf-setlist {
    position: absolute;
        width: 100%;
        max-width: 300px;
        left: -100%;
        z-index: 150;
    }
    
    .mcc-perf-setlist.visible {
        left: 0;
    }
    
    .mcc-perf-content {
    position: absolute;
        left: 0;
        padding: 1.5rem 1rem;
    }
    
    .mcc-perf-song-title {
        font-size: 1.8rem;
    }
    
    .mcc-perf-song-artist {
        font-size: 1.2rem;
    }
    
    .mcc-perf-toolbar {
    position: absolute;
        padding: 0 0.5rem;
        gap: 0.5rem;
        flex-wrap: wrap;
        height: auto;
        min-height: 70px;
    }
    
    .mcc-perf-btn-nav span {
        display: none;
    }
    
    .mcc-perf-btn-nav {
        padding: 0.6rem;
    }
    
    .mcc-perf-shortcuts {
        grid-template-columns: 1fr;
    }
}

/* Dark Mode Adjustments */
.dark-mode .mcc-performance-mode {
    --mcc-bg-primary: #0a0a0a;
    --mcc-bg-secondary: #1a1a1a;
}

.dark-mode .mcc-perf-header,
.dark-mode .mcc-perf-toolbar,
.dark-mode .mcc-perf-setlist {
    position: absolute;
    background: rgba(10, 10, 10, 0.98);
}

.dark-mode .mcc-perf-help-content {
    background: #1a1a1a;
}


/* Performance Mode Theme Variants */
.mcc-performance-mode.perf-light {
    background: #f5f5f5 !important;
}

.mcc-performance-mode.perf-light .mcc-perf-header,
.mcc-performance-mode.perf-light .mcc-perf-setlist,
.mcc-performance-mode.perf-light .mcc-perf-toolbar {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #ddd !important;
}

.mcc-performance-mode.perf-light .mcc-perf-content,
.mcc-performance-mode.perf-light .mcc-perf-song-title,
.mcc-performance-mode.perf-light .mcc-perf-song-artist,
.mcc-performance-mode.perf-light .mcc-perf-sheet,
.mcc-performance-mode.perf-light .mcc-perf-title {
    color: #1a1a1a !important;
}

.mcc-performance-mode.perf-light .mcc-perf-sheet .mcc-chord {
    color: #009E7F !important;
}

.mcc-performance-mode.perf-light .mcc-perf-sheet .mcc-section-label {
    color: #FF6B35 !important;
}

.mcc-performance-mode.perf-light .mcc-perf-btn {
    background: #fff !important;
    color: #1a1a1a !important;
    border: 1px solid #ddd !important;
}

.mcc-performance-mode.perf-light .mcc-perf-btn:hover {
    background: #f0f0f0 !important;
}

.mcc-performance-mode.perf-light .mcc-perf-btn-icon,
.mcc-performance-mode.perf-light .mcc-perf-mode-btn,
.mcc-performance-mode.perf-light .mcc-perf-zoom-btn {
    background: #fff !important;
    color: #1a1a1a !important;
    border: 1px solid #ddd !important;
}

.mcc-performance-mode.perf-light .mcc-perf-btn-icon:hover,
.mcc-performance-mode.perf-light .mcc-perf-mode-btn:hover,
.mcc-performance-mode.perf-light .mcc-perf-zoom-btn:hover {
    background: #f0f0f0 !important;
    border-color: #009E7F !important;
}

.mcc-performance-mode.perf-light .mcc-perf-mode-btn.active {
    background: #009E7F !important;
    color: #fff !important;
    border-color: #009E7F !important;
}

.mcc-performance-mode.perf-light .mcc-perf-zoom-level {
    color: #1a1a1a !important;
}

.mcc-performance-mode.perf-dark {
    background: #1a1a1a !important;
}

.mcc-performance-mode.perf-dark .mcc-perf-header,
.mcc-performance-mode.perf-dark .mcc-perf-setlist,
.mcc-performance-mode.perf-dark .mcc-perf-toolbar {
    background: rgba(0, 0, 0, 0.95) !important;
    border-color: #009E7F !important;
}

.mcc-performance-mode.perf-dark .mcc-perf-content,
.mcc-performance-mode.perf-dark .mcc-perf-song-title,
.mcc-performance-mode.perf-dark .mcc-perf-song-artist,
.mcc-performance-mode.perf-dark .mcc-perf-sheet,
.mcc-performance-mode.perf-dark .mcc-perf-title {
    color: #ffffff !important;
}

/* Lyrics text in dark mode */
.mcc-performance-mode.perf-dark .mcc-perf-sheet .mcc-lyrics,
.mcc-performance-mode.perf-dark .mcc-perf-sheet .mcc-chord-line-group,
.mcc-performance-mode.perf-dark .mcc-perf-sheet p,
.mcc-performance-mode.perf-dark .mcc-perf-sheet div {
    color: #ffffff !important;
}

.mcc-performance-mode.perf-dark .mcc-perf-sheet .mcc-chord {
    color: #00d4aa !important;
}

.mcc-performance-mode.perf-dark .mcc-perf-sheet .mcc-section-label {
    color: #ff9966 !important;
}

.mcc-performance-mode.perf-dark .mcc-perf-btn {
    background: #2a2a2a !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}

.mcc-performance-mode.perf-dark .mcc-perf-btn:hover {
    background: #333 !important;
}

.mcc-performance-mode.perf-dark .mcc-perf-btn-icon,
.mcc-performance-mode.perf-dark .mcc-perf-mode-btn,
.mcc-performance-mode.perf-dark .mcc-perf-zoom-btn {
    background: #2a2a2a !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}

.mcc-performance-mode.perf-dark .mcc-perf-btn-icon:hover,
.mcc-performance-mode.perf-dark .mcc-perf-mode-btn:hover,
.mcc-performance-mode.perf-dark .mcc-perf-zoom-btn:hover {
    background: #333 !important;
    border-color: #00d4aa !important;
}

.mcc-performance-mode.perf-dark .mcc-perf-mode-btn.active {
    background: #00d4aa !important;
    color: #1a1a1a !important;
    border-color: #00d4aa !important;
}

.mcc-performance-mode.perf-dark .mcc-perf-zoom-level {
    color: #ffffff !important;
}

/* Auto-Scroll Buttons */
.mcc-perf-scroll-btns {
    display: flex;
    gap: 0.25rem;
}

/* Auto-Scroll Buttons */
.mcc-perf-scroll-btns {
    display: flex;
    gap: 0.25rem;
}

.mcc-perf-scroll-btns button {
    padding: 0.6rem;
}

/* Auto-Scroll Controls */
.mcc-perf-autoscroll-controls {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.mcc-perf-autoscroll-controls button {
    padding: 0.6rem;
}

#mcc-perf-autoscroll-toggle.active {
    background: #009E7F !important;
    color: #fff !important;
}

.mcc-performance-mode.perf-dark #mcc-perf-autoscroll-toggle.active {
    background: #00d4aa !important;
    color: #1a1a1a !important;
}

.mcc-perf-autoscroll-speed {
    font-size: 0.9rem;
    font-weight: 600;
    min-width: 2.5rem;
    text-align: center;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    background: rgba(0, 158, 127, 0.1);
    color: #009E7F;
}

.mcc-performance-mode.perf-dark .mcc-perf-autoscroll-speed {
    background: rgba(0, 212, 170, 0.15);
    color: #00d4aa;
}

/* Share Dialog */
.mcc-share-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.mcc-share-dialog {
    background: #fff;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.mcc-share-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mcc-share-header h3 {
    margin: 0;
    font-family: 'Akko', sans-serif;
    color: #1a1a1a;
    font-size: 1.3rem;
}

.mcc-share-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    line-height: 1;
}

.mcc-share-close:hover {
    color: #1a1a1a;
}

.mcc-share-body {
    padding: 2rem;
}

.mcc-share-song-info {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #1a1a1a;
    font-family: 'Akko', sans-serif;
}

.mcc-share-qr {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f5f5f5;
    border-radius: 8px;
}

.mcc-share-qr img {
    border-radius: 4px;
}

.mcc-share-url {
    margin-bottom: 1.5rem;
}

.mcc-share-url input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.85rem;
    color: #666;
    background: #f9f9f9;
}

.mcc-share-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.mcc-share-actions button {
    flex: 1;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-family: 'Akko', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mcc-share-actions .mcc-btn-primary {
    background: #009E7F;
    color: #fff;
}

.mcc-share-actions .mcc-btn-primary:hover {
    background: #007d65;
}

/* Dark Mode Support */
.mcc-app.dark-mode .mcc-share-dialog {
    background: #2a2a2a;
}

.mcc-app.dark-mode .mcc-share-header {
    border-bottom-color: #444;
}

.mcc-app.dark-mode .mcc-share-header h3,
.mcc-app.dark-mode .mcc-share-song-info {
    color: #ffffff;
}

.mcc-app.dark-mode .mcc-share-close {
    color: #ccc;
}

.mcc-app.dark-mode .mcc-share-close:hover {
    color: #fff;
}

.mcc-app.dark-mode .mcc-share-qr {
    background: #1a1a1a;
}

.mcc-app.dark-mode .mcc-share-url input {
    background: #1a1a1a;
    border-color: #444;
    color: #ccc;
}

/* Song Notes - Floating Sticky */
.mcc-song-notes-sticky {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
}

.mcc-notes-toggle-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #009E7F;
    color: #fff;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 158, 127, 0.3);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.mcc-notes-toggle-btn svg {
    width: 28px;
    height: 28px;
}

.mcc-notes-toggle-btn:hover {
    background: #007d65;
    transform: scale(1.05);
}

.mcc-notes-panel {
    position: fixed;
    top: 100px;
    right: 20px;
    width: 320px;
    background: #fffae6;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 2px solid #009E7F;
    max-height: 500px;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.mcc-notes-panel-header {
    padding: 1rem;
    border-bottom: 1px solid #e0d9b0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Akko', sans-serif;
    font-weight: 600;
    color: #1a1a1a;
    background: #fff8d6;
    border-radius: 6px 6px 0 0;
}

.mcc-notes-close-btn {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    line-height: 1;
}

.mcc-notes-close-btn:hover {
    color: #1a1a1a;
}

.mcc-notes-view {
    padding: 1rem;
    overflow-y: auto;
    max-height: 300px;
}

.mcc-notes-display {
    font-family: 'Akko', sans-serif;
    color: #333;
    line-height: 1.6;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    min-height: 60px;
}

.mcc-notes-display.empty {
    color: #999;
    font-style: italic;
}

.mcc-notes-display p {
    margin: 0.5rem 0;
}

.mcc-notes-display strong {
    font-weight: 600;
    color: #1a1a1a;
}

.mcc-notes-display ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.mcc-notes-edit-start-btn {
    width: 100%;
    padding: 0.5rem;
    background: #009E7F;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: 'Akko', sans-serif;
    cursor: pointer;
    font-size: 0.9rem;
}

.mcc-notes-edit-start-btn:hover {
    background: #007d65;
}

.mcc-notes-edit-view {
    padding: 1rem;
}

.mcc-notes-toolbar {
    display: flex;
    gap: 4px;
    padding: 8px;
    background: #f5f5f5;
    border-radius: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.mcc-fmt-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Akko', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: #333;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.mcc-fmt-btn svg {
    flex-shrink: 0;
}

.mcc-fmt-btn:hover {
    background: #009E7F;
    color: #fff;
}

.mcc-fmt-divider {
    width: 1px;
    background: #ddd;
    margin: 0 4px;
}

.mcc-notes-editor {
    width: 100%;
    min-height: 150px;
    max-height: 300px;
    padding: 0.75rem;
    border: 1px solid #e0d9b0;
    border-radius: 6px;
    font-family: 'Akko', sans-serif;
    font-size: 0.85rem;
    background: #fff;
    overflow-y: auto;
    outline: none;
    text-align: left;
}

.mcc-notes-editor:empty:before {
    content: attr(data-placeholder);
    color: #999;
    font-style: italic;
}

.mcc-notes-editor h1 {
    font-size: 1.4rem;
    margin: 0.5rem 0;
    font-weight: 600;
}

.mcc-notes-editor h2 {
    font-size: 1.2rem;
    margin: 0.5rem 0;
    font-weight: 600;
}

.mcc-notes-editor h3 {
    font-size: 1.05rem;
    margin: 0.5rem 0;
    font-weight: 600;
}

.mcc-notes-editor ul,
.mcc-notes-editor ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.mcc-notes-editor input[type="checkbox"] {
    margin-right: 0.5rem;
}

.mcc-notes-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

.mcc-notes-counter {
    font-size: 0.75rem;
    color: #666;
    font-family: 'Akko', sans-serif;
}

.mcc-notes-save-btn,
.mcc-notes-cancel-btn {
    padding: 0.4rem 0.8rem;
    border: none;
    border-radius: 6px;
    font-family: 'Akko', sans-serif;
    cursor: pointer;
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

.mcc-notes-save-btn {
    background: #009E7F;
    color: #fff;
}

.mcc-notes-save-btn:hover {
    background: #007d65;
}

.mcc-notes-cancel-btn {
    background: #e0e0e0;
    color: #666;
}

.mcc-notes-cancel-btn:hover {
    background: #d0d0d0;
}

/* Dark Mode */
.mcc-app.dark-mode .mcc-notes-panel {
    background: #2a2a2a;
    border-color: #00d4aa;
}

.mcc-app.dark-mode .mcc-notes-panel-header {
    background: #1a1a1a;
    border-bottom-color: #444;
    color: #ffffff;
}

.mcc-app.dark-mode .mcc-notes-display {
    color: #ccc;
}

.mcc-app.dark-mode .mcc-notes-display strong {
    color: #ffffff;
}

.mcc-app.dark-mode .mcc-notes-editor {
    background: #1a1a1a;
    border-color: #444;
    color: #ccc;
}

.mcc-app.dark-mode .mcc-notes-editor:empty:before {
    color: #666;
}

.mcc-app.dark-mode .mcc-notes-close-btn {
    color: #ccc;
}

.mcc-app.dark-mode .mcc-notes-close-btn:hover {
    color: #fff;
}

.mcc-app.dark-mode .mcc-notes-toolbar {
    background: #1a1a1a;
}

.mcc-app.dark-mode .mcc-fmt-btn {
    background: #2a2a2a;
    color: #ccc;
}

.mcc-app.dark-mode .mcc-fmt-btn:hover {
    background: #009E7F;
    color: #fff;
}

.mcc-app.dark-mode .mcc-fmt-divider {
    background: #444;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mcc-notes-panel {
        width: 280px;
        right: -10px;
    }
    
    .mcc-song-notes-sticky {
        right: 10px;
    }
}

/* Performance Mode Notes - Floating Sticky */
.mcc-perf-notes-sticky {
    position: fixed;
    top: 120px;
    right: 20px;
    z-index: 100;
}

.mcc-perf-notes-toggle-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #009E7F;
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 158, 127, 0.3);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.mcc-perf-notes-toggle-btn svg {
    width: 28px;
    height: 28px;
}

.mcc-perf-notes-toggle-btn:hover {
    background: #007d65;
    transform: scale(1.05);
}

.mcc-perf-notes-panel {
    position: fixed;
    top: 180px;
    right: 20px;
    width: 320px;
    background: #fffae6;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 2px solid #009E7F;
    max-height: 500px;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.mcc-perf-notes-panel-header {
    padding: 1rem;
    border-bottom: 1px solid #e0d9b0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Akko', sans-serif;
    font-weight: 600;
    color: #1a1a1a;
    background: #fff8d6;
    border-radius: 6px 6px 0 0;
}

.mcc-perf-notes-close-btn {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    line-height: 1;
}

.mcc-perf-notes-close-btn:hover {
    color: #1a1a1a;
}

.mcc-perf-notes-view {
    padding: 1rem;
    overflow-y: auto;
    max-height: 300px;
}

.mcc-perf-notes-display {
    font-family: 'Akko', sans-serif;
    color: #333;
    line-height: 1.6;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    min-height: 60px;
    text-align: left;
}

.mcc-perf-notes-display.empty {
    color: #999;
    font-style: italic;
}

.mcc-perf-notes-display p {
    margin: 0.5rem 0;
}

.mcc-perf-notes-display strong {
    font-weight: 600;
    color: #1a1a1a;
}

.mcc-perf-notes-display ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.mcc-perf-notes-edit-start-btn {
    width: 100%;
    padding: 0.5rem;
    background: #009E7F;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: 'Akko', sans-serif;
    cursor: pointer;
    font-size: 0.9rem;
}

.mcc-perf-notes-edit-start-btn:hover {
    background: #007d65;
}

.mcc-perf-notes-edit-view {
    padding: 1rem;
}

.mcc-perf-notes-toolbar {
    display: flex;
    gap: 4px;
    padding: 6px;
    background: #f5f5f5;
    border-radius: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.mcc-perf-fmt-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Akko', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    color: #333;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.mcc-perf-fmt-btn svg {
    flex-shrink: 0;
}

.mcc-perf-fmt-btn:hover {
    background: #009E7F;
    color: #fff;
}

.mcc-perf-notes-editor {
    width: 100%;
    min-height: 120px;
    max-height: 250px;
    padding: 0.75rem;
    border: 1px solid #e0d9b0;
    border-radius: 6px;
    font-family: 'Akko', sans-serif;
    font-size: 0.85rem;
    background: #fff;
    overflow-y: auto;
    outline: none;
    text-align: left;
}

.mcc-perf-notes-editor:empty:before {
    content: attr(data-placeholder);
    color: #999;
    font-style: italic;
}

.mcc-perf-notes-editor h1,
.mcc-perf-notes-editor h2,
.mcc-perf-notes-editor h3 {
    margin: 0.5rem 0;
    font-weight: 600;
}

.mcc-perf-notes-editor ul,
.mcc-perf-notes-editor ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.mcc-perf-notes-editor input[type="checkbox"] {
    margin-right: 0.5rem;
}

.mcc-perf-notes-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

.mcc-perf-notes-counter {
    font-size: 0.75rem;
    color: #666;
    font-family: 'Akko', sans-serif;
}

.mcc-perf-notes-save-btn,
.mcc-perf-notes-cancel-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.2rem;
    margin-left: 0.5rem;
}

.mcc-perf-notes-save-btn {
    background: #009E7F;
    color: #fff;
}

.mcc-perf-notes-cancel-btn {
    background: rgba(0, 0, 0, 0.1);
    color: #666;
}

/* Dark Mode Performance Notes */
.mcc-performance-mode.perf-dark .mcc-perf-notes-panel {
    background: #2a2a2a;
    border-color: #00d4aa;
}

.mcc-performance-mode.perf-dark .mcc-perf-notes-panel-header {
    background: #1a1a1a;
    border-bottom-color: #444;
    color: #ffffff;
}

.mcc-performance-mode.perf-dark .mcc-perf-notes-display {
    color: #ccc;
}

.mcc-performance-mode.perf-dark .mcc-perf-notes-display strong {
    color: #ffffff;
}

.mcc-performance-mode.perf-dark .mcc-perf-notes-close-btn {
    color: #ccc;
}

.mcc-performance-mode.perf-dark .mcc-perf-notes-close-btn:hover {
    color: #fff;
}

.mcc-performance-mode.perf-dark .mcc-perf-notes-toolbar {
    background: #1a1a1a;
}

.mcc-performance-mode.perf-dark .mcc-perf-fmt-btn {
    background: #2a2a2a;
    color: #ccc;
}

.mcc-performance-mode.perf-dark .mcc-perf-fmt-btn:hover {
    background: #009E7F;
    color: #fff;
}

.mcc-performance-mode.perf-dark .mcc-perf-notes-editor {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.mcc-performance-mode.perf-dark .mcc-perf-notes-editor:empty:before {
    color: #666;
}

.mcc-performance-mode.perf-dark .mcc-perf-notes-cancel-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mcc-perf-notes-panel {
        width: 280px;
        right: 10px;
    }
    
    .mcc-perf-notes-sticky {
        right: 10px;
    }
}

/* ==========================================
   PLAYLIST PLAYER
   ========================================== */

.mcc-playlist-player {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.mcc-player-header {
    padding: 20px 30px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mcc-player-title {
    font-family: 'Akko', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mcc-player-title-icon {
    width: 28px;
    height: 28px;
    stroke-width: 2.5;
}

.mcc-player-close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-player-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Mode Section */
.mcc-player-mode-section {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    overflow: visible;
    position: relative;
}

/* Tabs Row - Flex container für Tabs und Queue Button */
.mcc-player-tabs-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

/* Segmented Control */
.mcc-mode-segmented-control {
    display: flex;
    flex: 1;
    gap: 0;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 0;
}

.mcc-mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Akko', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.mcc-mode-btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

.mcc-mode-btn.active {
    background: rgba(0, 158, 127, 0.3);
    color: #fff;
    box-shadow: 0 2px 12px rgba(0, 158, 127, 0.4);
}

.mcc-mode-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

/* 3-Tab Layout (v3.55.0) */
.mcc-mode-three-tabs .mcc-mode-btn {
    padding: 10px 12px;
    font-size: 0.85rem;
}

.mcc-mode-three-tabs .mcc-mode-btn svg {
    width: 18px;
    height: 18px;
}

/* =========================================================================
   QUICK SEARCH BAR - immer sichtbar (v4.29.17)
   ========================================================================= */

.mcc-player-quick-search {
    margin-top: 12px;
    padding: 0;
}

.mcc-quick-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.mcc-quick-search-icon {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    color: rgba(17, 20, 22, 0.45);
    pointer-events: none;
    z-index: 1;
}

.mcc-quick-search-input {
    width: 100%;
    padding: 10px 36px 10px 38px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-family: 'Akko', sans-serif;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.mcc-quick-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.mcc-quick-search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(61, 124, 133, 0.5);
    box-shadow: 0 0 0 3px rgba(61, 124, 133, 0.15);
}

.mcc-quick-search-clear {
    position: absolute;
    right: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s;
}

.mcc-quick-search-clear:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.mcc-quick-search-clear svg {
    width: 14px;
    height: 14px;
}

/* Light Theme */
.mcc-playlist-player.light-theme .mcc-quick-search-input {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: #111416;
}

.mcc-playlist-player.light-theme .mcc-quick-search-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.mcc-playlist-player.light-theme .mcc-quick-search-icon {
    color: rgba(0, 0, 0, 0.4);
}

.mcc-playlist-player.light-theme .mcc-quick-search-clear {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.5);
}

.mcc-playlist-player.light-theme .mcc-quick-search-clear:hover {
    background: rgba(0, 0, 0, 0.15);
    color: #111416;
}

/* Mobile */
@media (max-width: 768px) {
    .mcc-player-quick-search {
        margin-top: 10px;
    }
    
    .mcc-quick-search-input {
        padding: 8px 32px 8px 34px;
        font-size: 0.85rem;
    }
    
    .mcc-quick-search-icon {
        left: 10px;
        width: 16px;
        height: 16px;
    }
}

/* =========================================================================
   PLAYER SEARCH STYLES (v3.55.0)
   ========================================================================= */

.mcc-player-search-panel {
    margin-top: 0;
    position: relative;
    overflow: visible;
    z-index: 100;
}

.mcc-player-search-container {
    position: relative;
    overflow: visible;
}

.mcc-player-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.mcc-player-search-icon {
    position: absolute;
    left: 14px;
    width: 20px;
    height: 20px;
    color: rgba(17, 20, 22, 0.45);
    pointer-events: none;
    z-index: 1;
}

.mcc-player-search-input {
    width: 100%;
    padding: 14px 44px 14px 44px;
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 25px; /* Pill shape like Spotify */
    color: #fff;
    font-family: 'Akko', sans-serif;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.mcc-player-search-input::placeholder {
    color: rgba(17, 20, 22, 0.45);
}

.mcc-player-search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.18);
    border-color: #3D7C85;
    box-shadow: 0 0 0 3px rgba(61, 124, 133, 0.2);
}

.mcc-player-search-clear {
    position: absolute;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-player-search-clear:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.mcc-player-search-clear svg {
    width: 16px;
    height: 16px;
}

/* Search Results Dropdown */
.mcc-player-search-results {
    margin-top: 12px;
    max-height: 350px;
    overflow-y: auto;
    background: #1a1a1a;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mcc-player-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px;
    color: rgba(255, 255, 255, 0.6);
}

.mcc-player-search-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #3D7C85;
    border-radius: 50%;
    animation: mcc-search-spin 0.8s linear infinite;
}

@keyframes mcc-search-spin {
    to { transform: rotate(360deg); }
}

/* Search Sections */
.mcc-player-search-section {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mcc-player-search-section:last-child {
    border-bottom: none;
}

.mcc-player-search-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(17, 20, 22, 0.45);
}

.mcc-player-search-section-title svg {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

/* Search Result Items */
.mcc-player-search-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mcc-player-search-item:hover {
    background: rgba(61, 124, 133, 0.15);
}

.mcc-player-search-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3D7C85, #E8924F);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.mcc-player-search-item-icon svg {
    width: 20px;
    height: 20px;
    color: #fff;
}

.mcc-player-search-item-icon.artist-icon {
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.mcc-player-search-item-icon.genre-icon {
    background: linear-gradient(135deg, #f093fb, #f5576c);
}

.mcc-player-search-item-icon.ug-icon {
    background: linear-gradient(135deg, #ffc107, #ff9800);
}

/* YouTube Thumbnail in Suchergebnissen */
.mcc-player-search-thumb {
    width: 44px;
    height: 33px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 12px;
    flex-shrink: 0;
    background: var(--mcc-gray-100);
}

.mcc-player-search-item-info {
    flex: 1;
    min-width: 0;
}

.mcc-player-search-item-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-player-search-item-subtitle {
    font-size: 0.8rem;
    color: rgba(17, 20, 22, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.mcc-player-search-item-count {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    padding: 3px 8px;
    border-radius: 10px;
    margin-left: 8px;
}

/* Action Buttons */
.mcc-player-search-item-actions {
    display: flex;
    gap: 6px;
    margin-left: 12px;
    opacity: 0;
    transition: opacity 0.2s;
}

.mcc-player-search-item:hover .mcc-player-search-item-actions {
    opacity: 1;
}

.mcc-player-search-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mcc-player-search-action-btn:hover {
    background: #3D7C85;
    transform: scale(1.1);
}

.mcc-player-search-action-btn.play-btn {
    background: #E8924F;
}

.mcc-player-search-action-btn.play-btn:hover {
    background: #EB965A;
    transform: scale(1.15);
}

.mcc-player-search-action-btn svg {
    width: 16px;
    height: 16px;
}

/* Play All Button for Artists/Genres */
.mcc-player-search-play-all {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(232, 146, 79, 0.2);
    border: 1px solid rgba(232, 146, 79, 0.4);
    border-radius: 20px;
    color: #E8924F;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto;
}

.mcc-player-search-play-all:hover {
    background: #E8924F;
    color: #1a1a1a;
    transform: scale(1.05);
}

.mcc-player-search-play-all svg {
    width: 14px;
    height: 14px;
}

/* No Results */
.mcc-player-search-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

.mcc-player-search-no-results svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Recent Section Special Styling */
.mcc-player-recent-section .mcc-player-search-item-icon {
    background: linear-gradient(135deg, #2d2d2d, #3d3d3d);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Scrollbar for Results */
.mcc-player-search-results::-webkit-scrollbar {
    width: 6px;
}

.mcc-player-search-results::-webkit-scrollbar-track {
    background: transparent;
}

.mcc-player-search-results::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.mcc-player-search-results::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Importing State */
.mcc-player-search-item.importing {
    opacity: 0.6;
    pointer-events: none;
}

.mcc-player-search-item.importing::after {
    content: '';
    position: absolute;
    right: 16px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #E8924F;
    border-radius: 50%;
    animation: mcc-search-spin 0.8s linear infinite;
}

/* Shuffle Info */
.mcc-player-shuffle-info {
    text-align: center;
    padding: 12px;
    background: rgba(0, 158, 127, 0.15);
    border-radius: 8px;
    border: 1px solid rgba(0, 158, 127, 0.3);
}

.mcc-shuffle-count {
    color: #00D2A0;
    font-weight: 600;
    font-size: 0.95rem;
}

.mcc-player-playlist-selector {
    display: flex;
    justify-content: center;
    padding: 0;
}

.mcc-player-select {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid #009E7F;
    color: #fff;
    padding: 16px 20px;
    min-height: 52px;
    border-radius: 10px;
    font-family: 'Akko', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    width: 100%;
    max-width: 500px;
    transition: all 0.3s;
    box-shadow: 0 2px 12px rgba(0, 158, 127, 0.3);
    display: flex;
    align-items: center;
}

.mcc-player-select:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #00B894;
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(0, 158, 127, 0.5);
}

.mcc-player-select:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.25);
    border-color: #00D2A0;
    box-shadow: 0 0 0 3px rgba(0, 158, 127, 0.2);
}

.mcc-player-select option {
    background: #2d2d2d;
    color: #fff;
}

/* Main Content */
.mcc-player-content {
    flex: 1;
    display: flex;
    position: relative;
    overflow: auto; /* Geändert von hidden zu auto */
    padding-bottom: 130px; /* Mehr Platz für Play-Bar */
}

/* Queue Toggle Button - in mcc-player-tabs-row */
.mcc-player-tabs-row .mcc-queue-toggle {
    position: relative;
    z-index: 100;
    background: rgba(0, 158, 127, 0.9) !important;
    border: none !important;
    border-radius: 12px;
    min-width: 52px;
    height: auto;
    padding: 12px;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 158, 127, 0.3);
    transition: all 0.3s ease;
}

.mcc-player-tabs-row .mcc-queue-toggle:hover {
    background: rgba(0, 158, 127, 1) !important;
}

.mcc-player-tabs-row .mcc-queue-toggle svg {
    width: 24px;
    height: 24px;
    color: #fff !important;
    fill: #fff !important;
}

#mcc-queue-count-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff4444;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

/* Main Player Area */
.mcc-player-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 30px;
    min-height: 0;
    overflow-y: auto;
}

/* Video Container - Kleiner */
.mcc-player-video-container {
    width: 100%;
    max-width: 600px; /* Reduziert von 720px */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mcc-player-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.mcc-player-video.audio-only {
    height: 0;
    overflow: hidden;
}

.mcc-player-video iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.mcc-player-video #youtube-player {
    width: 100%;
    height: 100%;
}

/* Song Info */
.mcc-player-info {
    margin-top: 20px;
    text-align: center;
    color: #fff;
    max-width: 600px;
}

.mcc-player-now-playing {
    font-family: 'Akko', sans-serif;
    font-size: 0.9rem;
    opacity: 0.7;
    margin-bottom: 8px;
}

.mcc-player-song-title {
    font-family: 'Akko', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.mcc-player-song-artist {
    font-family: 'Akko', sans-serif;
    font-size: 1.2rem;
    opacity: 0.8;
}

/* Fixed Bottom Controls Bar */
.mcc-player-controls-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(26, 26, 26, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 30px;
    z-index: 999998; /* Gleich wie Stems-Panel */
}

.mcc-player-progress-container {
    margin-bottom: 15px;
}

/* =========================================================================
   PROGRESS BAR (v4.29.26) - Clean und einfach
   ========================================================================= */

.mcc-player-progress-bar {
    height: 8px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    position: relative !important;
    margin-bottom: 5px !important;
    overflow: visible !important;
}

.mcc-player-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #3D7C85 0%, #E8924F 100%) !important;
    border-radius: 4px !important;
    position: relative !important;
    transition: width 0.1s linear !important;
}

.mcc-player-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #3D7C85, #E8924F) !important;
    border-radius: 4px !important;
    width: 0%;  /* KEIN !important - JavaScript muss width ändern können! */
    transition: width 0.1s linear !important;
    min-height: 8px !important;
    display: block !important;
}

.mcc-player-time {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Akko', sans-serif;
}

.mcc-player-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.mcc-player-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mcc-player-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mcc-player-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor !important;
    fill: none !important;
}

.mcc-player-btn-play {
    background: #009E7F;
    width: 50px;
    height: 50px;
}

.mcc-player-btn-play:hover {
    background: #00B894;
    transform: scale(1.05);
}

.mcc-player-btn-play svg {
    width: 26px;
    height: 26px;
    stroke: currentColor !important;
    fill: none !important;
}

/* Chord Sheet Button - Highlighted */
.mcc-player-chord-btn {
    background: rgba(0, 158, 127, 0.15) !important;
    border: 1px solid rgba(0, 158, 127, 0.3) !important;
}

.mcc-player-chord-btn:hover {
    background: rgba(0, 158, 127, 0.25) !important;
    border-color: rgba(0, 158, 127, 0.5) !important;
}

/* ==========================================
   STEMS BUTTON IN PLAYLIST PLAYER
   ========================================== */
.mcc-player-stems-btn {
    position: relative;
    background: rgba(232, 146, 79, 0.15) !important;
    border: 1px solid rgba(232, 146, 79, 0.3) !important;
}

.mcc-player-stems-btn:hover {
    background: rgba(232, 146, 79, 0.25) !important;
    border-color: rgba(232, 146, 79, 0.5) !important;
}

.mcc-player-stems-btn.loading {
    opacity: 0.7;
}

.mcc-player-stems-btn.ready {
    background: rgba(232, 146, 79, 0.3) !important;
    border-color: rgba(232, 146, 79, 0.6) !important;
}

.mcc-player-stems-btn.active {
    background: #E8924F !important;
    border-color: #E8924F !important;
}

.mcc-player-stems-btn .mcc-stems-icon-loading {
    animation: mcc-spin 1s linear infinite;
}

.mcc-player-stems-btn .mcc-stems-btn-status {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 10px;
    background: #E8924F;
    color:#111416;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: none;
    align-items: center;
    justify-content: center;
}

.mcc-player-stems-btn.ready .mcc-stems-btn-status {
    display: flex;
}

/* ==========================================
   STEMS PANEL (Expandable) - PROFESSIONELL
   ========================================== */
.mcc-player-stems-panel {
    /* Position: Fixiert am unteren Rand, ÜBER der Play-Bar */
    position: fixed;
    bottom: 125px; /* ÜBER der Play-Bar - erhöht */
    left: 0;
    right: 0;
    z-index: 9999999; /* v4.32.54: über Now-Playing-Overlay */
    
    /* v4.32.56: Begrenzte Höhe damit Lyrics darüber sichtbar bleiben */
    max-height: 35vh;
    overflow-y: auto;
    
    /* Farbe EXAKT wie Play-Bar */
    background: rgba(26, 26, 26, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0;
    padding-bottom: 24px; /* Extra Platz unten für Tempo/Pitch */
    
    /* Schatten für Tiefe */
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

@keyframes mcc-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tabs */
.mcc-player-stems-tabs {
    display: flex;
    gap: 0;
    background: rgba(18, 18, 18, 0.98);
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mcc-player-stems-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.mcc-player-stems-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.mcc-player-stems-tab.active {
    background: rgba(61, 124, 133, 0.3);
    color: #fff;
}

.mcc-player-stems-tab svg {
    width: 16px;
    height: 16px;
}

.mcc-player-stems-close {
    margin-left: auto;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-player-stems-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Content Areas - Variable Höhe */
.mcc-player-stems-content {
    padding: 12px;
    padding-bottom: 16px; /* Extra Platz unten */
}

/* Loading State */
.mcc-player-stems-loading,
.mcc-player-stems-create {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.mcc-player-stems-create button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #3D7C85;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.mcc-player-stems-create button:hover {
    background: #1F737A;
}

/* Processing State (Stems werden erstellt) */
.mcc-player-stems-processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    width: 100%;
}

.mcc-player-stems-processing .mcc-stems-progress-bar {
    background: rgba(255, 255, 255, 0.2);
    max-width: 400px;
    height: 8px;
}

.mcc-player-stems-processing .mcc-stems-progress-fill {
    background: linear-gradient(90deg, #3D7C85 0%, #E8924F 100%);
}

.mcc-player-stems-processing .mcc-stems-progress-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
}

/* ==========================================
   STEM CHANNELS - RESPONSIVE LAYOUT
   ========================================== */
.mcc-player-stem-channels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
}

/* Mobile: Vertikales Layout */
.mcc-player-stem-channel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Desktop: Horizontales Layout - Icon | Label | Volume | S M */
@media (min-width: 800px) {
    .mcc-player-stem-channels {
        display: flex;
        flex-direction: column;
        gap: 6px;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .mcc-player-stem-channel {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 6px 12px;
        gap: 12px;
    }
    
    .mcc-player-stem-icon {
        font-size: 18px;
        flex-shrink: 0;
    }
    
    .mcc-player-stem-label {
        min-width: 50px;
        text-align: left;
        font-size: 12px;
    }
    
    .mcc-player-stem-volume {
        flex: 1;
        max-width: 150px;
    }
    
    .mcc-stem-buttons {
        margin-top: 0;
        margin-left: auto;
    }
}

.mcc-player-stem-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.mcc-player-stem-label {
    color: rgba(255, 255, 255, 0.85);
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}

.mcc-player-stem-volume {
    width: 100%;
    max-width: 100px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    cursor: pointer;
}

.mcc-player-stem-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #3D7C85;
    border-radius: 50%;
    cursor: pointer;
}

.mcc-player-stem-volume::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #3D7C85;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Solo/Mute Buttons */
.mcc-stem-buttons {
    display: flex;
    gap: 3px;
    margin-top: 2px;
}

.mcc-player-stem-solo,
.mcc-player-stem-mute {
    width: 24px;
    height: 20px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mcc-player-stem-solo:hover,
.mcc-player-stem-mute:hover {
    border-color: rgba(255, 255, 255, 0.9);
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

.mcc-player-stem-solo.active {
    background: #E8924F !important;
    border-color: #E8924F !important;
    color:#111416 !important;
}

.mcc-player-stem-solo.active:hover {
    background: #E39F6B !important;
    border-color: #E39F6B !important;
}

.mcc-player-stem-mute.active {
    background: #e74c3c !important;
    border-color: #e74c3c !important;
    color: #fff !important;
}

.mcc-player-stem-mute.active:hover {
    background: #f05a4a !important;
    border-color: #f05a4a !important;
}

/* Tempo & Pitch - Kompakt */
.mcc-player-stem-extras {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    padding-top: 12px;
    padding-bottom: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: center;
    flex-wrap: wrap;
}

.mcc-player-stem-tempo,
.mcc-player-stem-pitch {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mcc-player-stem-tempo label,
.mcc-player-stem-pitch label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    min-width: 40px;
}

.mcc-player-stem-tempo input,
.mcc-player-stem-pitch input {
    width: 80px;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    cursor: pointer;
}

.mcc-player-stem-tempo input::-webkit-slider-thumb,
.mcc-player-stem-pitch input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: #E8924F;
    border-radius: 50%;
    cursor: pointer;
}

.mcc-player-stem-tempo span,
.mcc-player-stem-pitch span {
    color: #E8924F;
    font-size: 12px;
    font-weight: 600;
    min-width: 30px;
    text-align: right;
}

/* Reset Button für Tempo/Pitch */
.mcc-stem-reset-btn {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.mcc-stem-reset-btn:hover {
    border-color: #E8924F;
    color: #E8924F;
    background: rgba(232, 146, 79, 0.1);
}

/* ==========================================
   KARAOKE IN PLAYLIST PLAYER - WIE STANDALONE
   ========================================== */
.mcc-player-karaoke-wrapper {
    max-height: calc(100vh - 300px); /* Dynamisch basierend auf Viewport */
    min-height: 200px;
    position: relative;
    overflow: hidden;
}

#mcc-player-karaoke-container {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /* Großes Padding oben/unten damit aktive Zeile in der Mitte sein kann */
    padding: 140px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.mcc-player-karaoke-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.7);
    height: 100%;
}

.mcc-player-karaoke-placeholder span {
    font-size: 32px;
}

.mcc-player-karaoke-placeholder p {
    margin: 0;
    font-size: 14px;
}

/* Karaoke-Erstellen-Interface im Playlist-Player */
.mcc-player-karaoke-create-interface {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Von oben beginnen */
    gap: 12px;
    padding: 20px; /* Weniger Padding */
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
}

.mcc-player-karaoke-create-interface h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.mcc-player-karaoke-create-interface p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 300px;
}

.mcc-pk-create-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #3D7C85 0%, #448B94 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    margin-top: 8px;
}

.mcc-pk-create-btn:hover {
    background: linear-gradient(135deg, #1F737A 0%, #3D7C85 100%);
    transform: translateY(-1px);
}

.mcc-pk-create-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.mcc-pk-create-progress {
    width: 100%;
    max-width: 300px;
    margin-top: 16px;
}

.mcc-pk-create-progress .mcc-stems-progress-bar {
    background: rgba(255, 255, 255, 0.2);
    height: 6px;
    margin-bottom: 8px;
}

.mcc-pk-create-progress .mcc-stems-progress-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

/* Playlist Karaoke Lyrics Container */
.mcc-playlist-karaoke-lyrics {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Kein padding-bottom nötig, das Padding ist im Container */
}

.mcc-pk-section-badge {
    color: #E8924F;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 12px auto 6px auto;
    padding: 4px 10px;
    background: rgba(232, 146, 79, 0.15);
    border-radius: 4px;
    display: inline-block;
    text-align: center;
}

/* ==========================================
   KARAOKE LINE - MIT PSEUDO-ELEMENT WIE STANDALONE
   ========================================== */
.mcc-pk-line {
    position: relative;
    padding: 8px 16px;
    margin: 2px 0;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-align: center;
    /* Wichtig für das Pseudo-Element */
    overflow: visible;
}

.mcc-pk-text {
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Akko', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: all 0.3s ease;
}

.mcc-pk-empty {
    height: 12px;
}

/* ==========================================
   AKTIVE ZEILE - EXAKT WIE STANDALONE
   ========================================== */
.mcc-pk-line.mcc-pk-active {
    z-index: 2;
}

/* Das große radiale Pseudo-Element wie im Standalone */
.mcc-pk-line.mcc-pk-active::before {
    content: '';
    position: absolute;
    /* Erstreckt sich weit über die Zeile hinaus für sanften Gradient */
    top: -80px;
    left: -200px;
    right: -200px;
    bottom: -80px;
    background: radial-gradient(ellipse 80% 70% at 50% 50%, 
        rgba(61, 124, 133, 0.18) 0%, 
        rgba(61, 124, 133, 0.10) 25%,
        rgba(61, 124, 133, 0.05) 50%,
        rgba(61, 124, 133, 0.02) 70%,
        transparent 90%);
    z-index: -1;
    pointer-events: none;
}

.mcc-pk-line.mcc-pk-active .mcc-pk-text {
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    opacity: 1;
}

/* ==========================================
   VERGANGENE UND KOMMENDE ZEILEN - WIE STANDALONE
   ========================================== */

/* Near Lines - 1 Zeile vor/nach der aktuellen (groß und fett wie im Standalone) */
.mcc-pk-line.mcc-pk-near .mcc-pk-text {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 16px;
}

/* Nächste Zeile - fast so hell wie aktive (groß und fett) */
.mcc-pk-line.mcc-pk-next .mcc-pk-text {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 16px;
}

/* Adjacent lines - 2 Zeilen vor/nach der aktuellen */
.mcc-pk-line.mcc-pk-adjacent .mcc-pk-text {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    font-size: 15px;
}

/* Upcoming lines (3+ Zeilen nach aktiv) - leicht gedimmt */
.mcc-pk-line.mcc-pk-upcoming .mcc-pk-text {
    color: rgba(17, 20, 22, 0.45);
    font-size: 14px;
}

/* Past lines - stark gedimmt */
.mcc-pk-line.mcc-pk-past .mcc-pk-text {
    color: rgba(255, 255, 255, 0.25);
    font-size: 13px;
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */
@media (max-width: 768px) {
    .mcc-player-karaoke-wrapper {
        height: 240px;
    }
    
    #mcc-player-karaoke-container {
        padding: 120px 12px;
    }
    
    .mcc-pk-line.mcc-pk-active::before {
        left: -100px;
        right: -100px;
    }
    
    .mcc-pk-line.mcc-pk-active .mcc-pk-text {
        font-size: 15px;
    }
}

/* Responsive für Stems */
@media (max-width: 768px) {
    .mcc-player-stem-channels {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mcc-player-stem-extras {
        flex-direction: column;
        gap: 12px;
    }
}

#mcc-player-repeat {
    position: relative;
}

#mcc-player-repeat.active {
    background: rgba(0, 158, 127, 0.3);
    color: #00B894;
}

.mcc-repeat-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #00B894;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 8px;
    display: none;
}

#mcc-player-repeat.active .mcc-repeat-badge {
    display: block;
}

/* Volume */
.mcc-player-volume {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mcc-player-volume-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
}

.mcc-player-volume-slider {
    width: 100px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.mcc-player-volume-fill {
    height: 100%;
    background: #fff;
    border-radius: 2px;
    width: 70%;
}

/* Mode Toggle */
.mcc-player-mode-toggle {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Akko', sans-serif;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.mcc-player-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.mcc-player-mode-toggle svg {
    width: 18px;
    height: 18px;
}
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

/* Progress Bar */
.mcc-player-progress {
    width: 100%;
    max-width: 600px;
}

.mcc-player-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    margin-bottom: 8px;
    overflow: visible;
}

.mcc-player-progress-fill {
    height: 100% !important;
    min-height: 8px !important;
    background: linear-gradient(90deg, #3D7C85, #E8924F) !important;
    border-radius: 4px !important;
    width: 0%;  /* KEIN !important - JavaScript muss width ändern können! */
    transition: width 0.1s linear !important;
    display: block !important;
}

.mcc-player-time {
    display: flex;
    justify-content: space-between;
    font-family: 'Akko', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Playback Controls */
.mcc-player-buttons {
    display: flex;
    gap: 15px;
    align-items: center;
}

.mcc-player-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-player-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.mcc-player-btn-play {
    width: 60px;
    height: 60px;
    background: #009E7F;
}

.mcc-player-btn-play:hover {
    background: #007d65;
}

.mcc-player-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor !important;
    fill: none !important;
}

.mcc-player-btn-play svg {
    width: 28px;
    height: 28px;
    stroke: currentColor !important;
    fill: none !important;
}

/* Repeat Button */
#mcc-player-repeat {
    position: relative;
}

#mcc-player-repeat.active {
    background: rgba(0, 158, 127, 0.3);
    color: #00D2A0;
}
#mcc-player-repeat.active svg {
    stroke: #00D2A0 !important;
}

#mcc-player-repeat.active:hover {
    background: rgba(0, 158, 127, 0.4);
}

#mcc-player-shuffle.active {
    background: rgba(0, 158, 127, 0.3);
    color: #00D2A0;
}
#mcc-player-shuffle.active svg {
    stroke: #00D2A0 !important;
}
#mcc-player-shuffle.active:hover {
    background: rgba(0, 158, 127, 0.4);
}

.mcc-repeat-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #009E7F;
    color: white;
    font-size: 10px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
}

#mcc-player-repeat.active .mcc-repeat-badge {
    display: flex;
}

/* Volume Control */
.mcc-player-volume {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mcc-player-volume-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    opacity: 0.8;
}

.mcc-player-volume-btn:hover {
    opacity: 1;
}

.mcc-player-volume-slider {
    width: 100px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.mcc-player-volume-fill {
    height: 100%;
    background: #009E7F;
    border-radius: 2px;
    width: 70%;
}

/* Mode Toggle */
.mcc-player-mode-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    font-family: 'Akko', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mcc-player-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Queue Sidebar - Collapsible */
.mcc-player-queue {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 100px; /* Space for controls */
    width: 350px;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 40;
    display: flex;
    flex-direction: column;
}

.mcc-player-queue.open {
    transform: translateX(0);
}

.mcc-player-queue-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mcc-player-queue-title {
    font-family: 'Akko', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mcc-queue-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.mcc-queue-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.mcc-queue-close svg {
    width: 20px;
    height: 20px;
}

.mcc-player-queue-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.mcc-player-queue-item {
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.2s;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.mcc-player-queue-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mcc-player-queue-item.active {
    background: rgba(0, 158, 127, 0.2);
    border-left-color: #009E7F;
}

.mcc-player-queue-item.played {
    opacity: 0.5;
}

.mcc-player-queue-number {
    font-family: 'Akko', sans-serif;
    font-size: 0.75rem;
    color: rgba(17, 20, 22, 0.45);
    margin-bottom: 4px;
}

.mcc-player-queue-song-title {
    font-family: 'Akko', sans-serif;
    font-weight: 600;
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.mcc-player-queue-song-artist {
    font-family: 'Akko', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.mcc-player-queue-song-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    gap: 8px;
}

.mcc-player-queue-song-key {
    background: rgba(0, 158, 127, 0.3);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Akko', sans-serif;
    font-size: 0.75rem;
    color: #009E7F;
    font-weight: 600;
    flex-shrink: 0;
}

.mcc-queue-goto-btn {
    background: rgba(0, 158, 127, 0.2);
    border: 1px solid rgba(0, 158, 127, 0.4);
    color: #00B894;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: 'Akko', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.mcc-queue-goto-btn:hover {
    background: rgba(0, 158, 127, 0.4);
    border-color: rgba(0, 158, 127, 0.6);
}
}

/* Loading State */
.mcc-player-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: #fff;
}

.mcc-player-loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #009E7F;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* No Videos State */
.mcc-player-no-videos {
    text-align: center;
    color: #fff;
    padding: 40px;
}

.mcc-player-no-videos-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.5;
}

.mcc-player-no-videos-text {
    font-family: 'Akko', sans-serif;
    font-size: 1.1rem;
    opacity: 0.8;
}

/* Header Buttons */
.mcc-player-header-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.mcc-player-minimize-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mcc-player-minimize-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.mcc-player-minimize-btn svg {
    width: 20px;
    height: 20px;
}

/* Minimized Player */
/* ==========================================
   MINIMIZED PLAYER BAR (Bottom)
   Hohe Spezifität für BuddyBoss Compatibility
   
   ⚠️ DEBUG VERSION 3.12.4 ⚠️
   - Red tint on content wrapper
   - Green tint on info section
   - Blue tint on controls section
   - Yellow borders on buttons
   - White background on buttons
   
   This will help identify WHERE elements are!
   ========================================== */

/* Main Container - Ultra High Specificity */
body #mcc-mini-player.mcc-mini-player,
.mcc-app #mcc-mini-player.mcc-mini-player,
#mcc-mini-player.mcc-mini-player {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 70px !important;
    max-height: 90px !important;
    background: rgba(26, 26, 26, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    z-index: 99999 !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease !important;
    display: block !important;
    overflow: visible !important; /* CRITICAL - Don't hide buttons */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3) !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Active State - Visible */
body #mcc-mini-player.mcc-mini-player.active,
.mcc-app #mcc-mini-player.mcc-mini-player.active,
#mcc-mini-player.mcc-mini-player.active {
    transform: translateY(0) !important;
}

/* Progress Bar - At Top */
body #mcc-mini-player .mcc-mini-player-progress,
#mcc-mini-player .mcc-mini-player-progress {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 6px !important; /* Dicker - wie Main Player */
    background: rgba(255, 255, 255, 0.15) !important; /* Etwas heller sichtbar */
    overflow: visible !important;
    z-index: 100 !important; /* Innerhalb Container */
    cursor: pointer !important;
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    transition: height 0.15s ease !important;
}

/* Vergrösserter Touch-Bereich Mini-Player */
body #mcc-mini-player .mcc-mini-player-progress::before,
#mcc-mini-player .mcc-mini-player-progress::before {
    content: '' !important;
    position: absolute !important;
    top: -18px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -8px !important;
    z-index: 1 !important;
}

/* Hover + Active: Bar dicker */
body #mcc-mini-player .mcc-mini-player-progress:hover,
#mcc-mini-player .mcc-mini-player-progress:hover,
body #mcc-mini-player .mcc-mini-player-progress:active,
#mcc-mini-player .mcc-mini-player-progress:active,
body #mcc-mini-player .mcc-mini-player-progress.mcc-scrubbing,
#mcc-mini-player .mcc-mini-player-progress.mcc-scrubbing {
    height: 8px !important; /* Dicker beim Interagieren */
}

body #mcc-mini-player .mcc-mini-player-progress-fill,
#mcc-mini-player .mcc-mini-player-progress-fill {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    background: linear-gradient(90deg, #00B894, #E8924F) !important; /* Hellerer Gradient */
    width: 0% !important;
    transition: width 0.1s linear !important;
    overflow: visible !important; /* CRITICAL: Knob nicht abschneiden */
    border-radius: 3px 0 0 3px !important; /* Abgerundete Kanten links */
}

/* Playback-Knob (runder Punkt am Ende der Fill) */
body #mcc-mini-player .mcc-mini-player-progress-fill::after,
#mcc-mini-player .mcc-mini-player-progress-fill::after {
    content: '' !important;
    position: absolute !important;
    right: -7px !important;
    top: 50% !important;
    transform: translateY(-50%) scale(1) !important; /* IMMER sichtbar im Mini-Player */
    width: 14px !important;
    height: 14px !important;
    background: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
    transition: transform 0.15s ease !important;
    z-index: 200 !important; /* Über allem */
    pointer-events: none !important;
}

/* Knob größer bei Hover/Scrubbing */
body #mcc-mini-player .mcc-mini-player-progress:hover .mcc-mini-player-progress-fill::after,
#mcc-mini-player .mcc-mini-player-progress:hover .mcc-mini-player-progress-fill::after,
body #mcc-mini-player .mcc-mini-player-progress.mcc-scrubbing .mcc-mini-player-progress-fill::after,
#mcc-mini-player .mcc-mini-player-progress.mcc-scrubbing .mcc-mini-player-progress-fill::after {
    transform: translateY(-50%) scale(1.2) !important; /* Etwas größer beim Interagieren */
}

/* Mini-Player Progress Container (Progress Bar + Zeitanzeige) */
body #mcc-mini-player .mcc-mini-player-progress-container,
#mcc-mini-player .mcc-mini-player-progress-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 40px !important; /* Platz für Tooltip (32px) + Knob */
    overflow: visible !important; /* CRITICAL: Knob/Tooltip nicht abschneiden */
    z-index: 1000000 !important; /* Über ALLEM - auch über Content */
    pointer-events: none !important; /* Durchklicken erlauben */
}

/* Progress-Bar selbst erlaubt Klicks */
body #mcc-mini-player .mcc-mini-player-progress,
#mcc-mini-player .mcc-mini-player-progress {
    pointer-events: auto !important;
}

/* Mini-Player Scrub Tooltip (wie Main Player) */
body #mcc-mini-player .mcc-mini-scrub-tooltip,
#mcc-mini-player .mcc-mini-scrub-tooltip {
    position: absolute !important;
    top: -32px !important;
    transform: translateX(-50%) !important;
    background: rgba(0,0,0,0.85) !important;
    color: #fff !important;
    font-family: 'Akko', sans-serif !important;
    font-size: 12px !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    z-index: 300 !important; /* Über Knob */
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
}

body #mcc-mini-player .mcc-mini-scrub-tooltip.visible,
#mcc-mini-player .mcc-mini-scrub-tooltip.visible {
    opacity: 1 !important;
}

/* Mini-Player Zeitanzeige */
body #mcc-mini-player .mcc-mini-player-time,
#mcc-mini-player .mcc-mini-player-time {
    position: absolute !important;
    bottom: 6px !important;
    right: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: 'Akko', sans-serif !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    z-index: 15 !important;
    pointer-events: none !important;
}

body #mcc-mini-player .mcc-mini-player-time span,
#mcc-mini-player .mcc-mini-player-time span {
    font-variant-numeric: tabular-nums !important;
}

/* Mobile: Zeitanzeige kleiner */
@media (max-width: 768px) {
    body #mcc-mini-player .mcc-mini-player-time,
    #mcc-mini-player .mcc-mini-player-time {
        font-size: 10px !important;
        bottom: 4px !important;
        right: 8px !important;
    }
}

/* Content Wrapper */
body #mcc-mini-player .mcc-mini-player-content,
#mcc-mini-player .mcc-mini-player-content {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 16px !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 56px !important;
    max-height: 70px !important;
    z-index: 2 !important;
    overflow: visible !important;
    background: transparent !important;
}

/* Info Section */
body #mcc-mini-player .mcc-mini-player-info,
#mcc-mini-player .mcc-mini-player-info {
    flex: 0 1 auto !important;
    min-width: 120px !important;
    max-width: 200px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow: hidden !important;
    background: transparent !important;
}

body #mcc-mini-player .mcc-mini-player-title,
#mcc-mini-player .mcc-mini-player-title {
    font-family: 'Akko', sans-serif !important;
    font-weight: 600 !important;
    color: #fff !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    padding: 0 !important;
}

body #mcc-mini-player .mcc-mini-player-artist,
#mcc-mini-player .mcc-mini-player-artist {
    font-family: 'Akko', sans-serif !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Controls Section - Linksbündig nach Titel */
body #mcc-mini-player .mcc-mini-player-controls,
#mcc-mini-player .mcc-mini-player-controls {
    display: flex !important;
    flex-direction: row !important;
    flex: 1 1 auto !important;
    min-width: auto !important;
    width: auto !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Linksbündig */
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    background: transparent !important;
}

/* All Buttons - Generic Style */
body #mcc-mini-player .mcc-mini-player-btn,
body #mcc-mini-player .mcc-mini-player-expand,
#mcc-mini-player .mcc-mini-player-btn,
#mcc-mini-player .mcc-mini-player-expand {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer !important;
    padding: 8px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    
    /* Button size */
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    flex-shrink: 0 !important;
    
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 9999 !important;
    
    /* Mobile Touch Support */
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

body #mcc-mini-player .mcc-mini-player-btn:hover,
body #mcc-mini-player .mcc-mini-player-expand:hover,
#mcc-mini-player .mcc-mini-player-btn:hover,
#mcc-mini-player .mcc-mini-player-expand:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

body #mcc-mini-player .mcc-mini-player-btn:active,
body #mcc-mini-player .mcc-mini-player-expand:active,
#mcc-mini-player .mcc-mini-player-btn:active,
#mcc-mini-player .mcc-mini-player-expand:active {
    transform: scale(0.95) !important;
}

body #mcc-mini-player .mcc-mini-player-btn svg,
body #mcc-mini-player .mcc-mini-player-expand svg,
#mcc-mini-player .mcc-mini-player-btn svg,
#mcc-mini-player .mcc-mini-player-expand svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    display: block !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
}

/* Play Button - Meldo Style (wie im maximierten Player) */
body #mcc-mini-player .mcc-mini-play-btn,
#mcc-mini-player .mcc-mini-play-btn {
    background: #E8924F !important;
    border: none !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

body #mcc-mini-player .mcc-mini-play-btn:hover,
#mcc-mini-player .mcc-mini-play-btn:hover {
    background: #E59F6B !important;
    transform: scale(1.05) !important;
}

body #mcc-mini-player .mcc-mini-play-btn:active,
#mcc-mini-player .mcc-mini-play-btn:active {
    transform: scale(0.95) !important;
}

body #mcc-mini-player .mcc-mini-play-btn svg,
#mcc-mini-player .mcc-mini-play-btn svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    color: #111416 !important;
    fill: #111416 !important;
    pointer-events: none !important;
}

/* Expand Button - Rectangular Style */
body #mcc-mini-player .mcc-mini-player-expand,
#mcc-mini-player .mcc-mini-player-expand {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    padding: 10px !important;
    width: 40px !important;
    height: 40px !important;
}

body #mcc-mini-player .mcc-mini-player-expand:hover,
#mcc-mini-player .mcc-mini-player-expand:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

/* Player Minimized State */
#mcc-playlist-player.minimized {
    display: none !important;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .mcc-player-content {
        flex-direction: column;
    }
    
    .mcc-player-queue {
        width: 100%;
        max-height: 250px;
    }
    
    .mcc-player-video {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }
}

@media (max-width: 768px) {
    .mcc-player-header {
        padding: 15px 20px;
    }
    
    .mcc-player-title {
        font-size: 1.2rem;
    }
    
    .mcc-player-content {
        padding: 20px;
        gap: 20px;
        padding-bottom: 200px; /* Space for fixed playbar (180px + margin) */
    }
    
    .mcc-player-song-title {
        font-size: 1.4rem;
    }
    
    .mcc-player-buttons {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .mcc-player-btn {
        width: 45px;
        height: 45px;
    }
    
    .mcc-player-btn-play {
        width: 55px;
        height: 55px;
    }
    
    /* Mobile Queue - Full Height CRITICAL */
    body .mcc-player-queue,
    body #mcc-playlist-player .mcc-player-queue,
    #mcc-playlist-player .mcc-player-queue {
        position: absolute !important;
        bottom: 0 !important;
        top: 0 !important;
        left: auto !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }
    
    body .mcc-player-queue-list,
    body #mcc-playlist-player .mcc-player-queue-list,
    #mcc-playlist-player .mcc-player-queue-list {
        padding-bottom: 200px !important; /* Extra space for fixed controls bar */
        height: auto !important;
        max-height: none !important;
    }
    
    /* Mobile Controls Bar */
    .mcc-player-controls-bar {
        padding: 10px 5px;
        min-height: 180px;
        height: auto;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }
    
    /* Mobile Mini Player - DON'T OVERRIDE, BASE CSS IS CORRECT */
    
    body #mcc-mini-player.mcc-mini-player .mcc-mini-player-title,
    #mcc-mini-player.mcc-mini-player .mcc-mini-player-title {
        font-size: 0.8rem !important;
        line-height: 1.1 !important;
    }
    
    body #mcc-mini-player.mcc-mini-player .mcc-mini-player-artist,
    #mcc-mini-player.mcc-mini-player .mcc-mini-player-artist {
        font-size: 0.65rem !important;
        line-height: 1.1 !important;
    }
    
    body #mcc-mini-player.mcc-mini-player .mcc-mini-player-btn,
    #mcc-mini-player.mcc-mini-player .mcc-mini-player-btn {
        padding: 4px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
    
    body #mcc-mini-player.mcc-mini-player .mcc-mini-play-btn,
    #mcc-mini-player.mcc-mini-player .mcc-mini-play-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    body #mcc-mini-player.mcc-mini-player .mcc-mini-player-btn svg,
    #mcc-mini-player.mcc-mini-player .mcc-mini-player-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* Hide chord sheet button on very small screens */
@media (max-width: 480px) {
    #mcc-mini-goto-chord {
        display: none !important;
    }
}

/* ==========================================
   FORCE VISIBLE - DEBUGGING
   Critical rules to ensure buttons are visible
   ========================================== */
#mcc-mini-player *,
#mcc-mini-player *:before,
#mcc-mini-player *:after {
    visibility: visible !important;
    opacity: 1 !important;
}

#mcc-mini-player .mcc-mini-player-controls button,
#mcc-mini-player button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#mcc-mini-player svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ===== Add to Playlist Feature ===== */

/* Playbar Add Button - matches other playbar buttons */
.mcc-player-add-btn {
    background: rgba(0, 158, 127, 0.15) !important;
    border: 1px solid rgba(0, 158, 127, 0.3) !important;
}

.mcc-player-add-btn:hover {
    background: rgba(0, 158, 127, 0.25) !important;
    border-color: rgba(0, 158, 127, 0.5) !important;
}

/* Queue Button */
.mcc-queue-add-playlist-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    background: rgba(0, 158, 127, 0.1) !important;
    border: 1px solid rgba(0, 158, 127, 0.2) !important;
    border-radius: 4px !important;
    color: #009E7F !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-left: 6px !important;
}

.mcc-queue-add-playlist-btn:hover {
    background: rgba(0, 158, 127, 0.2) !important;
    border-color: rgba(0, 158, 127, 0.4) !important;
    transform: scale(1.1) !important;
}

/* Playlist Modal */
.mcc-playlist-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-playlist-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.mcc-playlist-modal-content {
    position: relative;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mcc-playlist-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
}

.mcc-playlist-modal-header h3 {
    margin: 0;
    font-family: 'Akko', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
}

.mcc-playlist-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #666;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mcc-playlist-modal-close:hover {
    background: #f0f0f0;
    color: #000;
}

.mcc-playlist-modal-body {
    padding: 24px;
    overflow-y: auto;
}

.mcc-modal-song-card {
    padding: 16px;
    background: linear-gradient(135deg, #009E7F 0%, #00B894 100%);
    border-radius: 12px;
    margin-bottom: 20px;
}

.mcc-modal-song-title {
    font-family: 'Akko', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
}

.mcc-modal-song-artist {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
}

.mcc-playlist-modal-section {
    margin-bottom: 24px;
}

.mcc-playlist-modal-section h4 {
    margin: 0 0 12px 0;
    font-family: 'Akko', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mcc-create-new-playlist-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #009E7F 0%, #00B894 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-family: 'Akko', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 158, 127, 0.3);
}

.mcc-create-new-playlist-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 158, 127, 0.4);
}

.mcc-playlist-list-scroll {
    max-height: 300px;
    overflow-y: auto;
}

.mcc-playlist-modal-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mcc-playlist-modal-item:hover {
    background: #fff;
    border-color: #009E7F;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 158, 127, 0.15);
}

.mcc-playlist-modal-item-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 158, 127, 0.1);
    border-radius: 8px;
    color: #009E7F;
}

.mcc-playlist-modal-item-info {
    flex: 1;
}

.mcc-playlist-modal-item-name {
    font-family: 'Akko', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.mcc-playlist-modal-item-count {
    font-size: 0.8125rem;
    color: #666;
}

.mcc-playlist-modal-item-action {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 158, 127, 0.1);
    border-radius: 6px;
    color: #009E7F;
    transition: all 0.2s ease;
}

.mcc-playlist-modal-item:hover .mcc-playlist-modal-item-action {
    background: #009E7F;
    color: white;
}

.mcc-playlist-modal-loading,
.mcc-playlist-modal-error,
.mcc-no-playlists {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-size: 0.9375rem;
}

.mcc-no-playlists {
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
    .mcc-playlist-modal-content {
        width: 95%;
        max-height: 90vh;
    }
    
    .mcc-playlist-modal-header,
    .mcc-playlist-modal-body {
        padding: 16px;
    }
}

/* Mini Player Add to Playlist Button */
.mcc-mini-add-playlist {
    background: rgba(0, 158, 127, 0.15) !important;
    border: 1px solid rgba(0, 158, 127, 0.3) !important;
}

.mcc-mini-add-playlist:hover {
    background: rgba(0, 158, 127, 0.25) !important;
    border-color: rgba(0, 158, 127, 0.5) !important;
}

/* Performance Mode Mobile */
@media (max-width: 768px) {
    /* Performance Toolbar */
    .mcc-perf-toolbar {
        flex-wrap: wrap;
        height: auto;
        min-height: 70px;
        padding: 0.5rem 0.5rem;
        gap: 0.5rem;
        justify-content: center;
    }
    
    .mcc-perf-btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }
    
    .mcc-perf-btn svg {
        width: 16px;
        height: 16px;
    }
    
    /* Setlist overlay */
    .mcc-perf-setlist {
        width: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 9999;
        transform: translateX(-100%);
    }
    
    .mcc-perf-setlist.minimized {
        transform: translateX(-100%);
    }
    
    .mcc-perf-setlist:not(.minimized) {
        transform: translateX(0);
    }
    
    /* No content adjustment needed - setlist is overlay */
    .mcc-perf-setlist.minimized ~ .mcc-perf-content {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .mcc-perf-content {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ==========================================
   MOBILE MINI PLAYER - FINAL OVERRIDE
   MAXIMUM SPECIFICITY - MUST BE AT END
   ========================================== */
@media (max-width: 768px) {
    /* FORCE HIDE INFO */
    body.logged-in #mcc-mini-player .mcc-mini-player-info,
    body #mcc-mini-player .mcc-mini-player-info,
    #mcc-mini-player .mcc-mini-player-info {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* FORCE LEFT ALIGN CONTAINER */
    body.logged-in #mcc-mini-player .mcc-mini-player-content,
    body #mcc-mini-player .mcc-mini-player-content,
    #mcc-mini-player .mcc-mini-player-content {
        justify-content: flex-start !important;
        padding-left: 0 !important;
        gap: 0 !important;
    }
    
    /* FORCE LEFT ALIGN CONTROLS */
    body.logged-in #mcc-mini-player .mcc-mini-player-controls,
    body #mcc-mini-player .mcc-mini-player-controls,
    #mcc-mini-player .mcc-mini-player-controls {
        justify-content: flex-start !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        padding-left: 5px !important;
        order: 1 !important;
    }
}

/* ==========================================
   STEMS PLAYER STYLES
   ========================================== */

/* Stems Button in Toolbar */
.mcc-stems-btn {
    position: relative;
}

.mcc-stems-btn.has-stems {
    color: var(--mcc-accent) !important;
}

.mcc-stems-btn.has-stems svg {
    stroke: var(--mcc-accent);
}

/* Stems Modal */
.mcc-stems-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-stems-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.mcc-stems-modal-content {
    position: relative;
    background: var(--mcc-white);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    animation: mcc-stems-modal-in 0.3s ease-out;
}

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

.mcc-stems-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: #ffffff;
    color: #111416;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.mcc-stems-modal-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--mcc-font-title);
    font-weight: 600;
    font-size: 1.1rem;
}

.mcc-stems-modal-title svg {
    stroke: #111416;
}

.mcc-stems-modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 8px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-stems-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.mcc-stems-modal-close svg {
    stroke: white;
}

.mcc-stems-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    max-height: calc(90vh - 80px);
}

/* Loading State */
.mcc-stems-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
    text-align: center;
}

/* Meldo Logo Container */
.mcc-stems-logo-container {
    width: 100px;
    height: 100px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-stems-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

/* Logo Spin Animation */
.mcc-stems-logo-spin {
    animation: mcc-logo-spin 2s ease-in-out infinite;
}

@keyframes mcc-logo-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Optional: Pulse effect while spinning */
.mcc-stems-logo-spin {
    animation: mcc-logo-spin 2s ease-in-out infinite, mcc-logo-pulse 1.5s ease-in-out infinite;
}

@keyframes mcc-logo-pulse {
    0%, 100% { 
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(0 0 8px rgba(61, 124, 133, 0.4));
    }
    50% { 
        transform: rotate(180deg) scale(1.05);
        filter: drop-shadow(0 0 15px rgba(232, 146, 79, 0.6));
    }
}

/* Redefine spin with pulse */
.mcc-stems-logo-spin {
    animation: mcc-logo-combined 2s ease-in-out infinite;
}

@keyframes mcc-logo-combined {
    0% { 
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(0 0 8px rgba(61, 124, 133, 0.4));
    }
    50% { 
        transform: rotate(180deg) scale(1.08);
        filter: drop-shadow(0 0 20px rgba(232, 146, 79, 0.7));
    }
    100% { 
        transform: rotate(360deg) scale(1);
        filter: drop-shadow(0 0 8px rgba(61, 124, 133, 0.4));
    }
}

.mcc-stems-loading-spinner {
    display: none; /* Hidden, replaced by logo */
}

@keyframes mcc-spin {
    to { transform: rotate(360deg); }
}

.mcc-stems-loading-text {
    margin-top: 0.5rem;
    color: var(--mcc-gray-700);
    font-family: var(--mcc-font-body);
    font-size: 1rem;
    font-weight: 500;
}

.mcc-stems-loading-progress {
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--mcc-primary);
    font-size: 0.9rem;
}

/* Create Stems State */
.mcc-stems-create {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
}

.mcc-stems-create-icon {
    color: var(--mcc-primary);
    margin-bottom: 1rem;
}

.mcc-stems-create h3 {
    font-family: var(--mcc-font-title);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--mcc-dark);
    margin: 0 0 0.75rem 0;
}

.mcc-stems-create p {
    color: var(--mcc-gray-600);
    font-family: var(--mcc-font-body);
    margin: 0 0 1.5rem 0;
    line-height: 1.6;
}

/* Quality Selection */
.mcc-stems-quality-select {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.mcc-stems-quality-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    border: 2px solid var(--mcc-gray-200);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--mcc-white);
}

.mcc-stems-quality-option:hover {
    border-color: var(--mcc-primary);
    background: var(--mcc-gray-50);
}

.mcc-stems-quality-option.mcc-selected {
    border-color: var(--mcc-primary);
    background: rgba(61, 124, 133, 0.05);
}

.mcc-stems-quality-option input {
    display: none;
}

.mcc-quality-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.mcc-quality-label {
    font-family: var(--mcc-font-title);
    font-weight: 600;
    color: var(--mcc-dark);
}

.mcc-quality-time {
    font-size: 0.8rem;
    color: var(--mcc-gray-500);
}

/* Create Button */
.mcc-stems-create-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, var(--mcc-primary) 0%, var(--mcc-primary-dark) 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-family: var(--mcc-font-title);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.mcc-stems-create-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(61, 124, 133, 0.3);
}

.mcc-stems-create-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Processing State */
.mcc-stems-processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
}

/* Processing uses same logo container as loading */
.mcc-stems-processing .mcc-stems-logo-container {
    margin-bottom: 1.5rem;
}

/* Legacy wave animation - hidden (replaced by logo) */
.mcc-stems-processing-animation {
    display: none;
}

.mcc-stems-wave {
    display: none;
}

.mcc-stems-processing h3 {
    font-family: var(--mcc-font-title);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--mcc-dark);
    margin: 0 0 1rem 0;
}

.mcc-stems-progress-bar {
    width: 100%;
    max-width: 300px;
    height: 10px;
    background: var(--mcc-gray-200);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mcc-stems-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mcc-primary) 0%, var(--mcc-accent) 100%);
    border-radius: 5px;
    width: 0%;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Animated shine effect on progress bar */
.mcc-stems-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    animation: mcc-progress-shine 1.5s ease-in-out infinite;
}

@keyframes mcc-progress-shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.mcc-stems-processing-status {
    color: var(--mcc-gray-600);
    font-family: var(--mcc-font-body);
    font-size: 0.9rem;
    margin: 0;
}

/* Player State */
.mcc-stems-player {
    padding: 0.5rem 0;
}

.mcc-stems-waveform-wrap {
    position: relative;
    height: 80px;
    min-height: 80px;
    background: var(--mcc-gray-100);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    cursor: pointer;
}

.mcc-stems-waveform {
    width: 100%;
    height: 100%;
    min-height: 80px;
    display: block;
}

.mcc-stems-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--mcc-primary);
    left: 0;
    pointer-events: none;
}

/* Master Controls */
.mcc-stems-master-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--mcc-gray-50);
    border-radius: 12px;
    margin-bottom: 1rem;
}

.mcc-stems-play-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mcc-primary) 0%, var(--mcc-primary-dark) 100%);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.mcc-stems-play-btn:hover {
    transform: scale(1.05);
}

.mcc-stems-play-btn svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    fill: white !important;
    flex-shrink: 0 !important;
}

.mcc-stems-play-btn .mcc-stems-icon-play,
.mcc-stems-play-btn .mcc-stems-icon-pause {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
}

.mcc-stems-time {
    font-family: var(--mcc-font-mono);
    font-size: 0.9rem;
    color: var(--mcc-gray-600);
}

/* Advanced Controls: Tempo, Pitch, Loop */
.mcc-stems-advanced-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--mcc-gray-50);
    border-radius: 12px;
}

.mcc-stems-control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 140px;
}

.mcc-stems-control-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mcc-gray-600);
}

.mcc-stems-control-label svg {
    opacity: 0.7;
}

.mcc-stems-tempo-control,
.mcc-stems-pitch-control,
.mcc-stems-loop-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mcc-stems-slider {
    width: 80px;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--mcc-gray-200);
    border-radius: 3px;
    outline: none;
}

.mcc-stems-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--mcc-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s;
}

.mcc-stems-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.mcc-stems-value {
    min-width: 45px;
    font-family: var(--mcc-font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mcc-gray-700);
    text-align: center;
}

.mcc-stems-reset-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--mcc-gray-300);
    border-radius: 6px;
    color: var(--mcc-gray-500);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.mcc-stems-reset-btn:hover {
    background: var(--mcc-gray-100);
    border-color: var(--mcc-gray-400);
    color: var(--mcc-gray-700);
}

.mcc-stems-pitch-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mcc-gray-100);
    border: 1px solid var(--mcc-gray-300);
    border-radius: 6px;
    color: var(--mcc-gray-700);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.2s;
}

.mcc-stems-pitch-btn:hover {
    background: var(--mcc-primary);
    border-color: var(--mcc-primary);
    color: #fff;
}

.mcc-stems-loop-btn {
    width: 32px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mcc-gray-100);
    border: 1px solid var(--mcc-gray-300);
    border-radius: 6px;
    color: var(--mcc-gray-600);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.2s;
}

.mcc-stems-loop-btn:hover {
    background: var(--mcc-gray-200);
    border-color: var(--mcc-gray-400);
}

.mcc-stems-loop-btn.active {
    background: var(--mcc-primary);
    border-color: var(--mcc-primary);
    color: #fff;
}

.mcc-stems-loop-clear {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--mcc-gray-400);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.mcc-stems-loop-clear:hover {
    color: var(--mcc-danger);
}

/* Loop Region in Waveform */
.mcc-stems-loop-region {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(61, 124, 133, 0.2);
    border-left: 2px solid var(--mcc-primary);
    border-right: 2px solid var(--mcc-primary);
    pointer-events: none;
    display: none;
}

/* Stem Channels */
.mcc-stems-channels {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.mcc-stem-channel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--mcc-gray-50);
    border-radius: 10px;
    transition: all 0.2s;
}

.mcc-stem-channel:hover {
    background: var(--mcc-gray-100);
}

.mcc-stem-channel.mcc-muted {
    opacity: 0.5;
}

.mcc-stem-channel.mcc-soloed {
    background: rgba(61, 124, 133, 0.1);
    border: 1px solid var(--mcc-primary);
}

.mcc-stem-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mcc-stem-icon {
    font-size: 1.25rem;
}

.mcc-stem-name {
    font-family: var(--mcc-font-title);
    font-weight: 600;
    color: var(--mcc-dark);
}

.mcc-stem-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mcc-stem-volume {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--mcc-gray-300);
    border-radius: 2px;
    outline: none;
}

.mcc-stem-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--mcc-primary);
    border-radius: 50%;
    cursor: pointer;
}

.mcc-stem-volume::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--mcc-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.mcc-stem-solo,
.mcc-stem-mute {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 6px;
    border: 1px solid var(--mcc-gray-300);
    background: var(--mcc-white);
    font-family: var(--mcc-font-title);
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--mcc-gray-600);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
}

.mcc-stem-solo:hover,
.mcc-stem-mute:hover {
    background: var(--mcc-gray-100);
}

.mcc-stem-solo.active {
    background: var(--mcc-accent);
    border-color: var(--mcc-accent);
    color: white;
}

.mcc-stem-mute.active {
    background: var(--mcc-error);
    border-color: var(--mcc-error);
    color: white;
}

/* Individual Stem Download Button */
.mcc-stem-download {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 6px;
    border: 1px solid var(--mcc-gray-300);
    background: var(--mcc-white);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.mcc-stem-download:hover {
    background: var(--mcc-primary);
    border-color: var(--mcc-primary);
    color: white;
}

.mcc-stem-download:hover svg {
    stroke: white;
}

.mcc-stem-download svg {
    width: 14px !important;
    height: 14px !important;
    stroke: var(--mcc-gray-600);
    flex-shrink: 0;
}

/* Download Button */
.mcc-stems-download {
    text-align: center;
}

.mcc-stems-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--mcc-gray-100);
    border: 1px solid var(--mcc-gray-300);
    border-radius: 10px;
    font-family: var(--mcc-font-body);
    font-size: 0.9rem;
    color: var(--mcc-gray-700);
    cursor: pointer;
    transition: all 0.2s;
}

.mcc-stems-download-btn:hover {
    background: var(--mcc-gray-200);
    color: var(--mcc-dark);
}

/* Error State */
.mcc-stems-error,
.mcc-stems-no-youtube {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
}

.mcc-stems-error svg,
.mcc-stems-no-youtube svg {
    color: var(--mcc-gray-400);
    margin-bottom: 1rem;
}

.mcc-stems-error h3,
.mcc-stems-no-youtube h3 {
    font-family: var(--mcc-font-title);
    font-weight: 600;
    color: var(--mcc-dark);
    margin: 0 0 0.5rem 0;
}

.mcc-stems-error p,
.mcc-stems-no-youtube p {
    color: var(--mcc-gray-600);
    margin: 0 0 1.5rem 0;
    line-height: 1.6;
}

.mcc-stems-retry-btn {
    padding: 0.75rem 1.5rem;
    background: var(--mcc-primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-family: var(--mcc-font-title);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mcc-stems-retry-btn:hover {
    background: var(--mcc-primary-dark);
}

/* Dark Mode */
.mcc-dark-mode .mcc-stems-modal-content {
    background: var(--mcc-dark);
}

.mcc-dark-mode .mcc-stems-create h3,
.mcc-dark-mode .mcc-stems-processing h3,
.mcc-dark-mode .mcc-stems-error h3,
.mcc-dark-mode .mcc-stems-no-youtube h3 {
    color: var(--mcc-white);
}

.mcc-dark-mode .mcc-stems-create p,
.mcc-dark-mode .mcc-stems-processing-status,
.mcc-dark-mode .mcc-stems-error p,
.mcc-dark-mode .mcc-stems-no-youtube p {
    color: var(--mcc-gray-400);
}

.mcc-dark-mode .mcc-stems-quality-option {
    background: var(--mcc-dark-light);
    border-color: var(--mcc-gray-700);
}

.mcc-dark-mode .mcc-stems-quality-option:hover {
    border-color: var(--mcc-primary);
}

.mcc-dark-mode .mcc-quality-label {
    color: var(--mcc-white);
}

.mcc-dark-mode .mcc-stems-waveform-wrap,
.mcc-dark-mode .mcc-stems-master-controls,
.mcc-dark-mode .mcc-stem-channel {
    background: var(--mcc-dark-light);
}

.mcc-dark-mode .mcc-stem-name {
    color: var(--mcc-white);
}

.mcc-dark-mode .mcc-stems-progress-bar {
    background: var(--mcc-gray-700);
}

.mcc-dark-mode .mcc-stem-solo,
.mcc-dark-mode .mcc-stem-mute {
    background: var(--mcc-dark);
    border-color: var(--mcc-gray-600);
    color: var(--mcc-gray-400);
}

.mcc-dark-mode .mcc-stems-download-btn {
    background: var(--mcc-dark-light);
    border-color: var(--mcc-gray-600);
    color: var(--mcc-gray-300);
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .mcc-stems-modal-content {
        width: 95%;
        max-height: 95vh;
        border-radius: 12px;
    }
    
    .mcc-stems-modal-header {
        padding: 0.875rem 1rem;
    }
    
    .mcc-stems-modal-body {
        padding: 1rem;
    }
    
    .mcc-stems-quality-select {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .mcc-stems-quality-option {
        flex-direction: row;
        justify-content: flex-start;
        gap: 1rem;
        padding: 0.875rem 1rem;
    }
    
    .mcc-stem-volume {
        width: 60px;
    }
    
    .mcc-stems-waveform-wrap {
        height: 60px;
    }
    
    .mcc-stems-advanced-controls {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem;
    }
    
    .mcc-stems-control-group {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-width: 100%;
    }
    
    .mcc-stems-slider {
        width: 60px;
    }
}

/* ==========================================
   BuddyBoss Compatibility - Stems Player
   High specificity overrides for theme conflicts
   ========================================== */

/* Play Button SVG - Force size */
body .mcc-stems-play-btn svg,
.mcc-app .mcc-stems-play-btn svg,
#mcc-stems-modal .mcc-stems-play-btn svg,
.mcc-stems-modal .mcc-stems-play-btn svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    fill: white !important;
}

/* Play icon visible by default, pause hidden */
.mcc-stems-play-btn .mcc-stems-icon-pause {
    display: none;
}

/* Solo/Mute Buttons - Force centering */
body .mcc-stem-solo,
body .mcc-stem-mute,
.mcc-app .mcc-stem-solo,
.mcc-app .mcc-stem-mute,
#mcc-stems-modal .mcc-stem-solo,
#mcc-stems-modal .mcc-stem-mute {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Download Button - Force centering */
body .mcc-stem-download,
.mcc-app .mcc-stem-download,
#mcc-stems-modal .mcc-stem-download {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

body .mcc-stem-download svg,
.mcc-app .mcc-stem-download svg,
#mcc-stems-modal .mcc-stem-download svg {
    width: 14px !important;
    height: 14px !important;
}

/* Waveform Canvas - Force dimensions */
body .mcc-stems-waveform,
.mcc-app .mcc-stems-waveform,
#mcc-stems-modal .mcc-stems-waveform {
    width: 100% !important;
    height: 100% !important;
    min-height: 80px !important;
    display: block !important;
}

/* ==========================================
   KARAOKE SYNC MODULE
   ========================================== */

/* Karaoke Toggle Button */
.mcc-karaoke-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--mcc-gray-100);
    border: 1px solid var(--mcc-gray-300);
    border-radius: 8px;
    font-family: var(--mcc-font-body);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--mcc-gray-700);
    cursor: pointer;
    transition: all 0.2s;
}

.mcc-karaoke-toggle:hover {
    background: var(--mcc-gray-200);
}

.mcc-karaoke-toggle.active {
    background: linear-gradient(135deg, var(--mcc-primary) 0%, var(--mcc-accent) 100%);
    border-color: var(--mcc-primary);
    color: white;
}

.mcc-karaoke-toggle svg {
    width: 18px;
    height: 18px;
}

/* Karaoke Panel */
.mcc-karaoke-panel {
    display: none;
    margin-top: 1rem;
    background: var(--mcc-white);
    border: 1px solid var(--mcc-gray-200);
    border-radius: 12px;
    overflow: hidden;
}

.mcc-karaoke-panel.active {
    display: block;
}

/* Karaoke Header */
.mcc-karaoke-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--mcc-gray-50);
    border-bottom: 1px solid var(--mcc-gray-200);
}

.mcc-karaoke-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mcc-font-title);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--mcc-dark);
}

.mcc-karaoke-title svg {
    width: 20px;
    height: 20px;
    color: var(--mcc-primary);
}

.mcc-karaoke-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--mcc-gray-500);
    transition: all 0.2s;
}

.mcc-karaoke-close:hover {
    background: var(--mcc-gray-200);
    color: var(--mcc-dark);
}

/* Quality Badge */
.mcc-karaoke-quality-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.mcc-karaoke-quality-badge.high {
    background: rgba(61, 124, 133, 0.15);
    color: var(--mcc-primary);
}

.mcc-karaoke-quality-badge.medium {
    background: rgba(255, 193, 7, 0.15);
    color: #d4a000;
}

.mcc-karaoke-quality-badge.low {
    background: rgba(220, 53, 69, 0.15);
    color: var(--mcc-error);
}

/* Mode Buttons */
.mcc-karaoke-modes {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--mcc-gray-100);
    border-radius: 8px;
}

.mcc-karaoke-mode-btn {
    padding: 0.4rem 0.75rem;
    background: none;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mcc-gray-600);
    cursor: pointer;
    transition: all 0.2s;
}

.mcc-karaoke-mode-btn:hover {
    background: var(--mcc-white);
    color: var(--mcc-dark);
}

.mcc-karaoke-mode-btn.active {
    background: var(--mcc-white);
    color: var(--mcc-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Karaoke Body States */
.mcc-karaoke-body {
    min-height: 200px;
    max-height: 400px;
    overflow: hidden;
}

/* Loading State */
.mcc-karaoke-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.mcc-karaoke-loading .mcc-stems-logo {
    width: 60px;
    height: 60px;
}

/* Create State */
.mcc-karaoke-create {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    text-align: center;
}

.mcc-karaoke-create-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(61, 124, 133, 0.1) 0%, rgba(232, 146, 79, 0.1) 100%);
    border-radius: 50%;
    margin-bottom: 1rem;
}

.mcc-karaoke-create-icon svg {
    width: 32px;
    height: 32px;
    color: var(--mcc-primary);
}

.mcc-karaoke-create h3 {
    font-family: var(--mcc-font-title);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mcc-dark);
    margin: 0 0 0.5rem 0;
}

.mcc-karaoke-create p {
    color: var(--mcc-gray-600);
    font-size: 0.9rem;
    margin: 0 0 1.5rem 0;
    max-width: 300px;
}

.mcc-karaoke-language-select {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.mcc-karaoke-language-select label {
    font-size: 0.85rem;
    color: var(--mcc-gray-600);
}

.mcc-karaoke-language-select select {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--mcc-gray-300);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--mcc-white);
}

.mcc-karaoke-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--mcc-primary) 0%, var(--mcc-primary-dark) 100%);
    border: none;
    border-radius: 10px;
    font-family: var(--mcc-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.mcc-karaoke-create-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(61, 124, 133, 0.3);
}

.mcc-karaoke-create-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.mcc-karaoke-create-btn svg {
    width: 18px;
    height: 18px;
}

/* Processing State */
.mcc-karaoke-processing {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    text-align: center;
}

.mcc-karaoke-processing .mcc-stems-logo-container {
    margin-bottom: 1rem;
}

.mcc-karaoke-processing .mcc-stems-logo {
    width: 70px;
    height: 70px;
}

.mcc-karaoke-processing h3 {
    font-family: var(--mcc-font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--mcc-dark);
    margin: 0 0 1rem 0;
}

/* Player State */
.mcc-karaoke-player {
    display: none;
}

/* Karaoke Controls Bar */
.mcc-karaoke-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: var(--mcc-gray-50);
    border-bottom: 1px solid var(--mcc-gray-200);
}

/* Lyrics Container */
.mcc-karaoke-lyrics {
    padding: 6rem 8rem;  /* Viel Platz für großen Shimmer */
    max-height: 50vh;
    min-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Karaoke Section */
.mcc-karaoke-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--mcc-gray-100);
}

.mcc-karaoke-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.mcc-karaoke-section-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    margin-bottom: 0.75rem;
    background: var(--mcc-gray-100);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mcc-gray-600);
}

/* Current Section Highlight */
.mcc-karaoke-section.mcc-karaoke-current-section {
    background: rgba(61, 124, 133, 0.03);
    border-radius: 8px;
    padding: 1rem;
    margin: -0.5rem;
    margin-bottom: 1rem;
}

/* Greyed Out Section (missing in audio) */
.mcc-karaoke-section.mcc-karaoke-greyed {
    opacity: 0.4;
}

.mcc-karaoke-skip-note {
    font-size: 0.8rem;
    color: var(--mcc-gray-500);
    font-style: italic;
    margin-bottom: 0.5rem;
}

/* Extra Audio Section */
.mcc-karaoke-section.mcc-karaoke-extra {
    background: rgba(232, 146, 79, 0.08);
    border-radius: 8px;
    padding: 1rem;
}

.mcc-karaoke-extra-note {
    font-size: 0.8rem;
    color: var(--mcc-accent);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.mcc-karaoke-whisper-text {
    font-style: italic;
    color: var(--mcc-gray-600);
    font-size: 0.95rem;
}

/* Karaoke Line */
.mcc-karaoke-line {
    position: relative;
    padding: 0.5rem 0.75rem;
    margin: 0 -0.75rem;
    transition: all 0.4s ease;
}

/* Current Line - nur visuell hervorheben, KEIN ::before für Info-Zeilen */
.mcc-karaoke-line.mcc-karaoke-current-line {
    padding: 0.75rem;
    opacity: 1 !important;
}

/* Shimmer NUR für Zeilen die echte Timestamps haben (wird via JS hinzugefügt) */
.mcc-karaoke-line.mcc-karaoke-current-line.mcc-karaoke-has-timestamp::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -200px;
    right: -200px;
    bottom: -100px;
    background: radial-gradient(ellipse 80% 70% at 50% 50%, 
        rgba(61, 124, 133, 0.14) 0%, 
        rgba(61, 124, 133, 0.08) 20%,
        rgba(61, 124, 133, 0.04) 40%,
        rgba(61, 124, 133, 0.01) 60%,
        transparent 80%);
    z-index: -1;
    pointer-events: none;
}

/* Text nur fett wenn es echte Timestamps hat */
.mcc-karaoke-line.mcc-karaoke-current-line.mcc-karaoke-has-timestamp .mcc-karaoke-text {
    font-weight: 700 !important;
    color: var(--mcc-dark, #111416) !important;
    opacity: 1 !important;
}

/* Info-Zeilen (ohne Timestamps) - normaler Text, kein Highlight */
/* Info-Zeilen (ohne Timestamps) - normaler Text, kein Highlight */
.mcc-karaoke-line.mcc-karaoke-current-line:not(.mcc-karaoke-has-timestamp) .mcc-karaoke-text {
    font-weight: 400;
    opacity: 0.7;
}

/* Near Lines - 1 Zeile vor/nach der aktuellen (Kontext) - nur mit Timestamps fett */
.mcc-karaoke-line.mcc-karaoke-near-line {
    opacity: 1 !important;
}

.mcc-karaoke-line.mcc-karaoke-near-line.mcc-karaoke-has-timestamp .mcc-karaoke-text {
    font-weight: 600 !important;
    color: var(--mcc-dark, #111416) !important;
    opacity: 0.9 !important;
}

/* Adjacent Lines - 2 Zeilen vor/nach der aktuellen - nur mit Timestamps fett */
.mcc-karaoke-line.mcc-karaoke-adjacent-line {
    opacity: 0.85 !important;
}

.mcc-karaoke-line.mcc-karaoke-adjacent-line.mcc-karaoke-has-timestamp .mcc-karaoke-text {
    font-weight: 500 !important;
    color: var(--mcc-gray-700, #495057) !important;
}

/* Past Line - weiter entfernt */
.mcc-karaoke-line.mcc-karaoke-past-line {
    opacity: 0.4;
}

.mcc-karaoke-line.mcc-karaoke-past-line .mcc-karaoke-text {
    font-weight: 400;
    color: var(--mcc-gray-500);
}

/* Future Line - weiter entfernt */
.mcc-karaoke-line.mcc-karaoke-future-line {
    opacity: 0.5;
}

.mcc-karaoke-line.mcc-karaoke-future-line .mcc-karaoke-text {
    font-weight: 400;
    color: var(--mcc-gray-500, #6c757d);
}

/* Line Progress Bar */
.mcc-karaoke-line-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--mcc-gray-200);
    border-radius: 2px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s;
}

.mcc-karaoke-line.mcc-karaoke-current-line .mcc-karaoke-line-progress {
    opacity: 1;
}

.mcc-karaoke-line-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mcc-primary) 0%, var(--mcc-accent) 100%);
    border-radius: 2px;
    width: 0%;
    transition: width 0.05s linear;
}

/* Chords */
.mcc-karaoke-chords {
    margin-bottom: 0.25rem;
}

.mcc-karaoke-chord {
    display: inline-block !important;
    padding: 0.15rem 0.4rem !important;
    margin-right: 0.5rem !important;
    background: #3D7C85 !important;
    background-color: #3D7C85 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    font-family: 'Courier New', Consolas, monospace !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Text */
.mcc-karaoke-text {
    font-family: var(--mcc-font-body);
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--mcc-gray-700);
}

/* Word-Level Highlighting */
.mcc-karaoke-word {
    display: inline;
    transition: all 0.1s ease;
}

.mcc-karaoke-word.mcc-karaoke-word-current {
    color: var(--mcc-primary);
    font-weight: 700;
    text-shadow: 0 0 8px rgba(61, 124, 133, 0.3);
}

.mcc-karaoke-word.mcc-karaoke-word-past {
    color: var(--mcc-gray-400);
}

/* Error State */
.mcc-karaoke-error {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    text-align: center;
}

.mcc-karaoke-error-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(220, 53, 69, 0.1);
    border-radius: 50%;
    margin-bottom: 1rem;
    color: var(--mcc-error);
}

.mcc-karaoke-error-icon svg {
    width: 24px;
    height: 24px;
}

/* Dark Mode */
.mcc-dark-mode .mcc-karaoke-panel {
    background: var(--mcc-gray-900);
    border-color: var(--mcc-gray-700);
}

.mcc-dark-mode .mcc-karaoke-header {
    background: var(--mcc-gray-800);
    border-color: var(--mcc-gray-700);
}

.mcc-dark-mode .mcc-karaoke-title {
    color: var(--mcc-white);
}

.mcc-dark-mode .mcc-karaoke-modes {
    background: var(--mcc-gray-800);
}

.mcc-dark-mode .mcc-karaoke-mode-btn {
    color: var(--mcc-gray-400);
}

.mcc-dark-mode .mcc-karaoke-mode-btn:hover,
.mcc-dark-mode .mcc-karaoke-mode-btn.active {
    background: var(--mcc-gray-700);
    color: var(--mcc-white);
}

.mcc-dark-mode .mcc-karaoke-section {
    border-color: var(--mcc-gray-700);
}

.mcc-dark-mode .mcc-karaoke-text {
    color: var(--mcc-gray-300);
}

.mcc-dark-mode .mcc-karaoke-line.mcc-karaoke-current-line .mcc-karaoke-text {
    color: var(--mcc-white);
}

.mcc-dark-mode .mcc-karaoke-line.mcc-karaoke-near-line .mcc-karaoke-text {
    color: var(--mcc-gray-100);
}

.mcc-dark-mode .mcc-karaoke-line.mcc-karaoke-adjacent-line .mcc-karaoke-text {
    color: var(--mcc-gray-300);
}

.mcc-dark-mode .mcc-karaoke-line.mcc-karaoke-past-line .mcc-karaoke-text,
.mcc-dark-mode .mcc-karaoke-line.mcc-karaoke-future-line .mcc-karaoke-text {
    color: var(--mcc-gray-500);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mcc-karaoke-body {
        max-height: 300px;
    }
    
    .mcc-karaoke-lyrics {
        padding: 1rem;
    }
    
    .mcc-karaoke-text {
        font-size: 1rem;
    }
    
    .mcc-karaoke-modes {
        flex-wrap: wrap;
    }
    
    .mcc-karaoke-mode-btn {
        font-size: 0.75rem;
        padding: 0.3rem 0.5rem;
    }
}

/* ===================================
   NEW TAB-BASED STEMS/KARAOKE LAYOUT
   =================================== */

/* Tab Navigation */
.mcc-player-tabs {
    display: flex !important;
    gap: 0 !important;
    border-bottom: 2px solid #e5e5e5 !important;
    margin-bottom: 1rem !important;
}

.mcc-player-tab {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    color: #666666 !important;
    -webkit-text-fill-color: #666666 !important;
    cursor: pointer !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
}

.mcc-player-tab:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #3D7C85 !important;
    background-color: #3D7C85 !important;
    border-radius: 6px 6px 0 0 !important;
}

.mcc-player-tab:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

.mcc-player-tab.active {
    color: #3D7C85 !important;
    -webkit-text-fill-color: #3D7C85 !important;
    border-bottom-color: #3D7C85 !important;
    background: transparent !important;
}

.mcc-player-tab.active:hover {
    color: #3D7C85 !important;
    -webkit-text-fill-color: #3D7C85 !important;
    background: rgba(61, 124, 133, 0.1) !important;
}

.mcc-player-tab svg {
    opacity: 0.7 !important;
    fill: currentColor !important;
}

.mcc-player-tab.active svg {
    opacity: 1 !important;
    fill: #3D7C85 !important;
}

/* Tab Content */
.mcc-player-tab-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

.mcc-tab-pane {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.mcc-tab-pane.active {
    display: flex;
}

/* Fixed Bottom Player */
.mcc-player-bottom {
    border-top: 1px solid #e5e5e5;
    padding-top: 1rem;
    margin-top: auto;
    background: #fff;
}

.mcc-stems-master-controls {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
}

.mcc-player-progress-wrap {
    flex: 1 !important;
    cursor: pointer !important;
    min-width: 100px !important;
}

.mcc-player-progress-bar {
    height: 8px !important;
    background: #e5e5e5 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    width: 100% !important;
}

.mcc-player-progress-fill {
    height: 100% !important;
    min-height: 8px !important;
    width: 0%;  /* KEIN !important - JavaScript muss width ändern können! */
    background: linear-gradient(90deg, #3D7C85, #E8924F) !important;
    border-radius: 4px !important;
    transition: width 0.1s linear !important;
    display: block !important;
}

/* Compact Stem Channels */
.mcc-stems-channels-compact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.mcc-stem-channel-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #FAF8F3;
    border-radius: 8px;
}

.mcc-stem-channel-compact .mcc-stem-icon {
    font-size: 1.1rem;
}

.mcc-stem-channel-compact .mcc-stem-volume {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    background: #ddd;
    border-radius: 2px;
    cursor: pointer;
}

.mcc-stem-channel-compact .mcc-stem-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: #3D7C85;
    border-radius: 50%;
    cursor: pointer;
}

.mcc-stem-channel-compact .mcc-stem-solo,
.mcc-stem-channel-compact .mcc-stem-mute {
    width: 24px;
    height: 24px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mcc-stem-channel-compact .mcc-stem-solo:hover,
.mcc-stem-channel-compact .mcc-stem-mute:hover {
    border-color: #3D7C85;
}

.mcc-stem-channel-compact .mcc-stem-solo.active {
    background: #E8924F;
    color:#111416;
    border-color: #E8924F;
}

.mcc-stem-channel-compact .mcc-stem-mute.active {
    background: #e74c3c;
    color: #fff;
    border-color: #e74c3c;
}

/* Deaktivierte Stem-Controls während YouTube-Überbrückung */
.mcc-stem-channel-compact.mcc-controls-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.mcc-stem-channel-compact.mcc-controls-disabled button,
.mcc-stem-channel-compact.mcc-controls-disabled input {
    cursor: not-allowed !important;
}

/* Karaoke States */
.mcc-karaoke-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Von oben statt zentriert */
    text-align: center;
    padding: 1rem 2rem 2rem 2rem; /* Weniger Padding oben */
    flex: 1;
}

.mcc-karaoke-state h3 {
    margin: 0.5rem 0 0.5rem; /* Weniger Margin oben */
    color: #111416;
}

/* Karaoke Toolbar */
.mcc-karaoke-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #eee;
}

.mcc-karaoke-chords-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: #666;
}

.mcc-karaoke-chords-toggle input {
    accent-color: #3D7C85;
}

/* Karaoke Lyrics Container */
.mcc-karaoke-lyrics-container {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    scroll-behavior: smooth;
}

/* Karaoke Line */
.mcc-karaoke-line {
    padding: 0.75rem 1rem;
    margin: 0.25rem 0;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.mcc-karaoke-line:hover {
    background: #f5f5f5;
}

/* Vergangene Zeile */
.mcc-karaoke-line.past {
    opacity: 0.5;
}

/* Aktuelle Zeile */
.mcc-karaoke-line.active {
    background: radial-gradient(ellipse 150% 120% at 50% 50%, 
        rgba(61, 124, 133, 0.12) 0%, 
        rgba(61, 124, 133, 0.04) 50%, 
        transparent 100%);
    font-size: 1.1em;
    font-weight: 600;
}

/* Kommende Zeile */
.mcc-karaoke-line.future {
    opacity: 0.8;
}

/* Akkord Badge - robust gegen Theme-Overrides */
.mcc-karaoke-chord {
    display: inline-block !important;
    padding: 0.15rem 0.4rem !important;
    margin-right: 0.3rem !important;
    margin-bottom: 0.25rem !important;
    background: #3D7C85 !important;
    background-color: #3D7C85 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 4px !important;
    font-family: 'Courier New', Consolas, monospace !important;
    font-weight: 700 !important;
    font-size: 0.8em !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

/* Akkorde verstecken wenn Toggle aus */
/* Akkorde verstecken wenn Toggle aus */
#mcc-karaoke-lyrics.hide-chords .mcc-karaoke-chord,
.mcc-karaoke-lyrics-container.hide-chords .mcc-karaoke-chord {
    display: none !important;
}

/* Lyrics Text */
.mcc-karaoke-text {
    font-size: 1rem;
    line-height: 1.5;
    color: #111416;
}

/* Section Headers (Verse, Chorus, etc.) */
.mcc-karaoke-section {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #999;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mcc-stems-channels-compact {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mcc-player-tab {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
    
    .mcc-karaoke-line.active {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .mcc-stems-channels-compact {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    
    .mcc-stem-channel-compact {
        padding: 0.4rem;
    }
}

/* ========================================
   NEW STEM CHANNELS - 2x2 Grid Layout (KOMPAKT)
   ======================================== */

.mcc-stems-channels-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
    background: var(--mcc-gray-50, #FAF8F3);
    border-radius: 10px;
    margin-top: 8px;
}

.mcc-stem-channel-card {
    background: var(--mcc-white, #fff);
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.mcc-stem-channel-card:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.mcc-stem-channel-card.mcc-muted {
    opacity: 0.5;
    background: var(--mcc-gray-100, #eee);
}

.mcc-stem-channel-card.mcc-soloed {
    border-color: var(--mcc-primary, #3D7C85);
    background: rgba(61, 124, 133, 0.05);
}

.mcc-stem-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.mcc-stem-icon-svg {
    width: 18px;
    height: 18px;
    color: var(--mcc-primary, #3D7C85);
    flex-shrink: 0;
}

.mcc-stem-label {
    font-family: var(--mcc-font-title, 'Akko', sans-serif);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--mcc-dark, #111416);
    flex: 1;
}

/* Download Button im Header */
.mcc-stem-download-single {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 5px;
    border: 1px solid var(--mcc-gray-300, #ced4da);
    background: var(--mcc-white, #fff);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: auto;
}

.mcc-stem-download-single:hover {
    background: var(--mcc-primary, #3D7C85);
    border-color: var(--mcc-primary, #3D7C85);
}

.mcc-stem-download-single:hover svg {
    stroke: white;
}

.mcc-stem-download-single svg {
    stroke: var(--mcc-gray-600, #6c757d);
}

/* Controls in einer Zeile */
.mcc-stem-controls-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mcc-stem-channel-card .mcc-stem-volume {
    flex: 1;
    height: 5px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--mcc-gray-200, #e9ecef);
    border-radius: 3px;
    outline: none;
}

.mcc-stem-channel-card .mcc-stem-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--mcc-primary, #3D7C85);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.mcc-stem-channel-card .mcc-stem-volume::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--mcc-primary, #3D7C85);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.mcc-stem-channel-card .mcc-stem-solo,
.mcc-stem-channel-card .mcc-stem-mute {
    width: 26px;
    height: 24px;
    min-width: 26px;
    border-radius: 5px;
    border: 1px solid var(--mcc-gray-300, #ced4da);
    background: var(--mcc-white, #fff);
    font-family: var(--mcc-font-title, 'Akko', sans-serif);
    font-weight: 700;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--mcc-gray-600, #6c757d);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-stem-channel-card .mcc-stem-solo:hover,
.mcc-stem-channel-card .mcc-stem-mute:hover {
    background: var(--mcc-gray-100, #f1f3f5);
}

.mcc-stem-channel-card .mcc-stem-solo.active {
    background: var(--mcc-accent, #E8924F);
    border-color: var(--mcc-accent, #E8924F);
    color:#111416;
}

.mcc-stem-channel-card .mcc-stem-mute.active {
    background: #e74c3c;
    border-color: #e74c3c;
    color: white;
}

/* Responsive: Stack on very small screens */
@media (max-width: 360px) {
    .mcc-stems-channels-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   STICKY PLAYER BOTTOM
   ======================================== */

.mcc-player-sticky {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--mcc-white, #fff);
    z-index: 100;
    border-top: 1px solid var(--mcc-gray-200, #e9ecef);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    margin: 0 -1rem;
    padding: 1rem;
    border-radius: 0 0 12px 12px;
}

.mcc-stems-modal-body {
    display: flex;
    flex-direction: column;
    max-height: calc(90vh - 60px);
    overflow: hidden;
}

.mcc-stems-player {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.mcc-player-tab-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.mcc-tab-pane {
    display: none;
    height: 100%;
    overflow-y: auto;
}

.mcc-tab-pane.active {
    display: block;
}

/* ========================================
   IMPROVED KARAOKE STYLES
   ======================================== */

.mcc-karaoke-lyrics-container {
    padding: 1rem;
    max-height: calc(50vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Current line highlighting */
.mcc-karaoke-line {
    position: relative;
    padding: 0.75rem 1rem;
    margin: 0.25rem 0;
    transition: all 0.3s ease;
    opacity: 0.6;
    transform: scale(0.98);
}

.mcc-karaoke-line.mcc-karaoke-current-line {
    opacity: 1;
    transform: scale(1);
}

/* Shimmer NUR für Zeilen mit echten Timestamps */
.mcc-karaoke-line.mcc-karaoke-current-line.mcc-karaoke-has-timestamp::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -300px;
    right: -300px;
    bottom: -100px;
    background: radial-gradient(ellipse 80% 70% at 50% 50%, 
        rgba(61, 124, 133, 0.14) 0%, 
        rgba(61, 124, 133, 0.08) 20%,
        rgba(61, 124, 133, 0.04) 40%,
        rgba(61, 124, 133, 0.01) 60%,
        transparent 80%);
    z-index: -1;
    pointer-events: none;
}

.mcc-karaoke-line.mcc-karaoke-past-line {
    opacity: 0.4;
}

/* Word-level highlighting */
.mcc-karaoke-word {
    display: inline;
    transition: all 0.15s ease;
    padding: 0 2px;
    border-radius: 3px;
}

.mcc-karaoke-word.mcc-karaoke-word-current {
    background: var(--mcc-primary, #3D7C85);
    color: white;
    font-weight: 600;
}

.mcc-karaoke-word.mcc-karaoke-word-past {
    color: var(--mcc-primary, #3D7C85);
}

/* Progress bar within line */
.mcc-karaoke-line-progress {
    height: 3px;
    background: var(--mcc-gray-200, #e9ecef);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.mcc-karaoke-line-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mcc-primary, #3D7C85), var(--mcc-accent, #E8924F));
    border-radius: 2px;
    width: 0;
    transition: width 0.1s linear;
}

/* Chord display in Karaoke - robust gegen Theme-Overrides */
.mcc-karaoke-chords {
    font-family: 'Courier New', Consolas, monospace !important;
    font-size: 0.85em !important;
    margin-bottom: 4px !important;
    font-weight: 600 !important;
}

.mcc-karaoke-chord {
    display: inline-block !important;
    padding: 0.15rem 0.4rem !important;
    margin-right: 0.3rem !important;
    background: #3D7C85 !important;
    background-color: #3D7C85 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 4px !important;
    font-family: 'Courier New', Consolas, monospace !important;
    font-weight: 700 !important;
    font-size: 0.8em !important;
    line-height: 1.2 !important;
}

/* Section labels */
.mcc-karaoke-section-badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mcc-gray-500, #adb5bd);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* Karaoke toolbar */
.mcc-karaoke-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.5rem 1rem;
    background: var(--mcc-gray-50, #FAF8F3);
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}

.mcc-karaoke-chords-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--mcc-gray-700, #495057);
}

.mcc-karaoke-chords-toggle input {
    accent-color: var(--mcc-primary, #3D7C85);
}

/* Karaoke text clean-up */
.mcc-karaoke-text {
    font-family: var(--mcc-font-text, 'Akko', sans-serif);
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--mcc-dark, #111416);
}

/* Dark mode adjustments */
.mcc-dark-mode .mcc-stems-channels-grid {
    background: var(--mcc-dark-bg, #1a1a1a);
}

.mcc-dark-mode .mcc-stem-channel-card {
    background: var(--mcc-dark-card, #2a2a2a);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.mcc-dark-mode .mcc-stem-label {
    color: var(--mcc-white, #fff);
}

.mcc-dark-mode .mcc-player-sticky {
    background: var(--mcc-dark-bg, #1a1a1a);
    border-top-color: var(--mcc-dark-border, #333);
}

.mcc-dark-mode .mcc-karaoke-lyrics-container {
    background: var(--mcc-dark-bg, #1a1a1a);
}

.mcc-dark-mode .mcc-karaoke-text {
    color: var(--mcc-white, #fff);
}

/* ===================================================================
   SPOTIFY-STYLE PLAYER REDESIGN v3.56.0
   =================================================================== */

/* Player Container - Full Height Layout */
.mcc-playlist-player {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(180deg, #1a1a1a 0%, #121212 100%);
    border-radius: 16px;
    overflow: hidden;
}

/* Tabs Bar */
.mcc-player-tabs-bar {
    padding: 12px 16px;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mcc-player-tabs-bar .mcc-mode-segmented-control {
    display: flex;
    gap: 4px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 4px;
}

.mcc-player-tabs-bar .mcc-mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255,255,255,0.6);
    font-family: var(--mcc-font-body);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mcc-player-tabs-bar .mcc-mode-btn svg {
    width: 16px;
    height: 16px;
}

.mcc-player-tabs-bar .mcc-mode-btn:hover {
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.1);
}

.mcc-player-tabs-bar .mcc-mode-btn.active {
    background: var(--mcc-primary);
    color: white;
}

/* Content Area - Takes remaining space */
.mcc-player-content-area {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

/* Panel Base Styles */
.mcc-player-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 16px;
}

/* Search Panel */
#mcc-search-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
}

#mcc-search-panel .mcc-player-search-container {
    flex-shrink: 0;
    margin-bottom: 16px;
}

#mcc-search-panel .mcc-player-search-input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 0 16px;
    transition: all 0.2s ease;
}

#mcc-search-panel .mcc-player-search-input-wrapper:focus-within {
    background: rgba(255,255,255,0.15);
    box-shadow: 0 0 0 2px var(--mcc-primary);
}

#mcc-search-panel .mcc-player-search-icon {
    width: 20px;
    height: 20px;
    color: rgba(17,20,22,0.45);
    margin-right: 12px;
}

#mcc-search-panel .mcc-player-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    font-size: 0.95rem;
    padding: 14px 0;
    outline: none;
}

#mcc-search-panel .mcc-player-search-input::placeholder {
    color: rgba(255,255,255,0.4);
}

#mcc-search-panel .mcc-player-search-results {
    flex: 1;
    overflow-y: auto;
}

#mcc-search-panel .mcc-player-search-section {
    margin-bottom: 24px;
}

#mcc-search-panel .mcc-player-search-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

#mcc-search-panel .mcc-player-search-section-title svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

/* Queue Panel */
#mcc-queue-panel {
    padding: 0;
}

.mcc-queue-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mcc-queue-panel-header h3 {
    margin: 0;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
}

.mcc-queue-panel-count {
    color: rgba(17,20,22,0.45);
    font-size: 0.85rem;
}

.mcc-queue-panel-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.mcc-queue-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 40px;
    color: rgba(17,20,22,0.45);
}

.mcc-queue-empty p {
    margin: 16px 0 8px;
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
}

.mcc-queue-empty span {
    font-size: 0.85rem;
}

/* Queue Item */
.mcc-queue-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mcc-queue-item:hover {
    background: rgba(255,255,255,0.1);
}

.mcc-queue-item.playing {
    background: rgba(var(--mcc-primary-rgb, 0, 143, 137), 0.2);
}

.mcc-queue-item-number {
    width: 24px;
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
}

.mcc-queue-item.playing .mcc-queue-item-number {
    color: var(--mcc-accent);
}

.mcc-queue-item-info {
    flex: 1;
    min-width: 0;
}

.mcc-queue-item-title {
    color: white;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-queue-item.playing .mcc-queue-item-title {
    color: var(--mcc-accent);
}

.mcc-queue-item-artist {
    color: rgba(17,20,22,0.45);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-queue-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.mcc-queue-item:hover .mcc-queue-item-actions {
    opacity: 1;
}

.mcc-queue-item-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mcc-queue-item-btn:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

/* Playlist Panel */
#mcc-playlist-panel {
    padding: 0;
}

.mcc-playlist-panel-header {
    padding: 16px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mcc-playlist-panel-header .mcc-player-select {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: white;
    font-size: 0.95rem;
    cursor: pointer;
}

.mcc-playlist-panel-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.mcc-playlist-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 40px;
    color: rgba(17,20,22,0.45);
}

.mcc-playlist-empty p {
    margin: 16px 0 8px;
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
}

/* Shuffle Panel */
#mcc-shuffle-panel {
    padding: 0;
}

.mcc-shuffle-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mcc-shuffle-panel-header h3 {
    margin: 0;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
}

.mcc-shuffle-panel-count {
    color: rgba(17,20,22,0.45);
    font-size: 0.85rem;
}

.mcc-shuffle-panel-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* ===================================================================
   NOW PLAYING VIEW
   =================================================================== */

.mcc-now-playing-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.mcc-now-playing-header {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
}

.mcc-now-playing-queue-btn,
.mcc-now-playing-minimize-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mcc-now-playing-queue-btn:hover,
.mcc-now-playing-minimize-btn:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.05);
}

.mcc-now-playing-queue-btn svg,
.mcc-now-playing-minimize-btn svg {
    width: 20px;
    height: 20px;
}

.mcc-now-playing-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 24px 24px;
}

.mcc-now-playing-video-wrapper {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    margin-bottom: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.mcc-now-playing-video-wrapper .mcc-player-video {
    width: 100%;
    height: 100%;
}

.mcc-now-playing-video-wrapper #youtube-player {
    width: 100%;
    height: 100%;
}

.mcc-now-playing-info {
    text-align: center;
    margin-bottom: 20px;
}

.mcc-now-playing-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
    font-family: var(--mcc-font-title);
}

.mcc-now-playing-artist {
    color: rgba(255,255,255,0.6);
    font-size: 1rem;
}

.mcc-now-playing-progress {
    width: 100%;
    max-width: 500px;
    margin-bottom: 20px;
}

.mcc-now-playing-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.mcc-now-playing-progress-bar:hover {
    height: 6px;
}

.mcc-now-playing-progress-fill {
    height: 100%;
    background: var(--mcc-accent);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.mcc-now-playing-time {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    color: rgba(17,20,22,0.45);
    font-size: 0.8rem;
}

.mcc-now-playing-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.mcc-np-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mcc-np-btn svg {
    width: 22px;
    height: 22px;
}

.mcc-np-btn:hover {
    transform: scale(1.1);
}

.mcc-np-btn.active {
    color: var(--mcc-accent);
}

.mcc-np-btn-play {
    width: 64px;
    height: 64px;
    background: white;
    color: #1a1a1a;
}

.mcc-np-btn-play:hover {
    transform: scale(1.05);
    background: #f0f0f0;
}

.mcc-np-btn-play svg {
    width: 28px;
    height: 28px;
}

/* ===================================================================
   PLAYBAR (Bottom Bar)
   =================================================================== */

.mcc-player-playbar {
    background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.95) 100%);
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 0;
}

.mcc-playbar-progress {
    padding: 0 16px;
    padding-top: 8px;
}

.mcc-playbar-progress-bar {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.mcc-playbar-progress-bar:hover {
    height: 5px;
}

.mcc-playbar-progress-fill {
    height: 100%;
    background: var(--mcc-accent);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.mcc-playbar-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 12px;
}

.mcc-playbar-info {
    flex: 1;
    min-width: 0;
    max-width: 200px;
}

.mcc-playbar-title {
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-playbar-artist {
    color: rgba(17,20,22,0.45);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-playbar-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mcc-playbar-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mcc-playbar-btn svg {
    width: 18px;
    height: 18px;
}

.mcc-playbar-btn:hover {
    color: white;
    background: rgba(255,255,255,0.1);
}

.mcc-playbar-btn.active {
    color: var(--mcc-accent);
}

.mcc-playbar-btn-play {
    width: 42px;
    height: 42px;
    background: var(--mcc-accent);
    color: white;
}

.mcc-playbar-btn-play:hover {
    background: var(--mcc-accent-light);
    transform: scale(1.05);
}

.mcc-playbar-btn-play svg {
    width: 20px;
    height: 20px;
}

.mcc-playbar-time {
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(17,20,22,0.45);
    font-size: 0.75rem;
    min-width: 80px;
}

.mcc-playbar-time-separator {
    opacity: 0.5;
}

.mcc-playbar-volume {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mcc-playbar-volume-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
}

.mcc-playbar-volume-btn svg {
    width: 18px;
    height: 18px;
}

.mcc-playbar-volume-slider {
    width: 80px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    cursor: pointer;
}

.mcc-playbar-volume-fill {
    height: 100%;
    background: white;
    border-radius: 2px;
    width: 70%;
}

.mcc-playbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mcc-playbar-video,
.mcc-playbar-chord,
.mcc-playbar-stems,
.mcc-playbar-add {
    font-size: 0.75rem;
}

.mcc-playbar-video span {
    margin-left: 4px;
}

/* Expand Knob */
.mcc-playbar-expand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--mcc-primary);
    border: none;
    border-radius: 12px;
    color: white;
    cursor: pointer;
    margin-left: auto;
    transition: all 0.2s ease;
}

.mcc-playbar-expand:hover {
    background: var(--mcc-primary-light);
    transform: translateY(-2px);
}

.mcc-playbar-expand-handle {
    width: 24px;
    height: 3px;
    background: rgba(255,255,255,0.5);
    border-radius: 2px;
    margin-bottom: 4px;
}

.mcc-playbar-expand svg {
    width: 16px;
    height: 16px;
}

/* ===================================================================
   RESPONSIVE ADJUSTMENTS
   =================================================================== */

@media (max-width: 768px) {
    .mcc-player-tabs-bar .mcc-mode-btn span {
        display: none;
    }
    
    .mcc-player-tabs-bar .mcc-mode-btn {
        padding: 10px 16px;
    }
    
    .mcc-playbar-content {
        flex-wrap: wrap;
    }
    
    .mcc-playbar-info {
        order: 1;
        flex-basis: 100%;
        max-width: none;
        margin-bottom: 8px;
    }
    
    .mcc-playbar-controls {
        order: 2;
    }
    
    .mcc-playbar-time {
        order: 3;
    }
    
    .mcc-playbar-volume {
        display: none;
    }
    
    .mcc-playbar-actions {
        order: 4;
    }
    
    .mcc-playbar-expand {
        order: 5;
    }
    
    .mcc-playbar-video span {
        display: none;
    }
}

/* Search Item Styles for Player */
.mcc-player-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mcc-player-search-item:hover {
    background: rgba(255,255,255,0.1);
}

.mcc-player-search-item-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--mcc-primary);
}

.mcc-player-search-item-icon.ug {
    background: rgba(255, 193, 7, 0.2);
    color: #FFC107;
}

.mcc-player-search-item-info {
    flex: 1;
    min-width: 0;
}

.mcc-player-search-item-title {
    color: white;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-player-search-item-subtitle {
    color: rgba(17,20,22,0.45);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-player-search-item-actions {
    display: flex;
    gap: 4px;
}

.mcc-player-search-item-play {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mcc-accent);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.15s ease;
}

.mcc-player-search-item:hover .mcc-player-search-item-play {
    opacity: 1;
    transform: scale(1);
}

.mcc-player-search-item-play:hover {
    background: var(--mcc-accent-light);
    transform: scale(1.1) !important;
}

.mcc-player-search-item-play svg {
    width: 16px;
    height: 16px;
}

/* Artist/Genre Row */
.mcc-player-artist-row,
.mcc-player-genre-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mcc-player-artist-row:hover,
.mcc-player-genre-row:hover {
    background: rgba(255,255,255,0.1);
}

.mcc-player-artist-info,
.mcc-player-genre-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mcc-player-artist-avatar,
.mcc-player-genre-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mcc-primary) 0%, var(--mcc-accent) 100%);
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
}

.mcc-player-genre-icon {
    border-radius: 8px;
}

.mcc-player-artist-name,
.mcc-player-genre-name {
    color: white;
    font-size: 1rem;
    font-weight: 500;
}

.mcc-player-artist-count,
.mcc-player-genre-count {
    color: rgba(17,20,22,0.45);
    font-size: 0.8rem;
}

.mcc-player-play-all-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    color: white;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mcc-player-play-all-btn:hover {
    background: var(--mcc-accent);
    border-color: var(--mcc-accent);
}

.mcc-player-play-all-btn svg {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   MELDO PLAYER v3.57 - NEW DESIGN OVERRIDES
   Dark Theme (Default) + Light Theme Option
   Queue as Sidebar + Prominent Action Buttons
   ========================================================================== */

/* Player Container - Dark Theme Default */
.mcc-playlist-player {
    background: var(--player-bg) !important;
    color: var(--player-text) !important;
    border-radius: var(--mcc-radius-lg) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5) !important;
    overflow: hidden !important;
}

/* Header - Dark */
.mcc-playlist-player .mcc-player-header {
    background: var(--player-bg-secondary) !important;
    border-bottom: 1px solid var(--player-border) !important;
    padding: 12px 16px !important;
}

.mcc-playlist-player .mcc-player-title {
    color: var(--player-text) !important;
    font-family: var(--mcc-font-title) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.mcc-playlist-player .mcc-player-title-icon {
    color: var(--mcc-primary) !important;
    stroke: var(--mcc-primary) !important;
}

.mcc-playlist-player .mcc-player-header-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.mcc-playlist-player .mcc-player-minimize-btn,
.mcc-playlist-player .mcc-player-close-btn {
    width: 30px !important;
    height: 30px !important;
    border: none !important;
    background: transparent !important;
    border-radius: var(--mcc-radius-sm) !important;
    color: var(--player-text-muted) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    font-size: 16px !important;
}

.mcc-playlist-player .mcc-player-minimize-btn:hover,
.mcc-playlist-player .mcc-player-close-btn:hover {
    background: var(--player-bg-hover) !important;
    color: var(--player-text) !important;
}

/* Theme Toggle Button */
.mcc-player-theme-toggle {
    width: 30px !important;
    height: 30px !important;
    border: none !important;
    background: transparent !important;
    border-radius: var(--mcc-radius-sm) !important;
    color: var(--player-text-muted) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
}

.mcc-player-theme-toggle:hover {
    background: var(--player-bg-hover) !important;
    color: var(--mcc-accent) !important;
}

.mcc-player-theme-toggle svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
}

/* Mode Section / Tabs Bar */
.mcc-playlist-player .mcc-player-mode-section {
    background: var(--player-bg-secondary) !important;
    border-bottom: 1px solid var(--player-border) !important;
    padding: 10px 16px !important;
}

.mcc-playlist-player .mcc-mode-segmented-control {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.mcc-playlist-player .mcc-mode-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    border: none !important;
    background: transparent !important;
    border-radius: var(--mcc-radius-sm) !important;
    font-family: var(--mcc-font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--player-text-muted) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.mcc-playlist-player .mcc-mode-btn:hover {
    background: var(--player-bg-hover) !important;
    color: var(--player-text) !important;
}

.mcc-playlist-player .mcc-mode-btn.active {
    background: var(--mcc-primary) !important;
    color: white !important;
}

.mcc-playlist-player .mcc-mode-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
}

/* Queue Toggle Button - rechts in der Tab-Bar */
.mcc-queue-toggle {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--player-border) !important;
    background: transparent !important;
    border-radius: var(--mcc-radius-sm) !important;
    font-family: var(--mcc-font-body) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--player-text-muted) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.mcc-queue-toggle:hover {
    border-color: var(--mcc-primary) !important;
    color: var(--mcc-primary) !important;
}

.mcc-queue-toggle.active {
    border-color: var(--mcc-accent) !important;
    background: rgba(232,146,79,0.1) !important;
    color: var(--mcc-accent) !important;
}

.mcc-queue-toggle svg {
    width: 14px !important;
    height: 14px !important;
    fill: currentColor !important;
}

#mcc-queue-count-badge {
    background: var(--mcc-primary) !important;
    color: white !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    min-width: 18px !important;
    text-align: center !important;
}

/* Player Content - Flex Container */
.mcc-playlist-player .mcc-player-content {
    display: flex !important;
    position: relative !important;
    height: 350px !important;
    background: var(--player-bg) !important;
}

/* Main Content Area */
.mcc-playlist-player .mcc-player-main {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

/* Queue Sidebar - von rechts */
.mcc-playlist-player .mcc-player-queue {
    width: 0 !important;
    background: var(--player-bg-card) !important;
    border-left: 1px solid var(--player-border) !important;
    overflow: hidden !important;
    transition: width 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 50 !important;
}

.mcc-playlist-player .mcc-player-queue.open {
    width: 280px !important;
}

.mcc-playlist-player .mcc-player-queue-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--player-border) !important;
    background: var(--player-bg-secondary) !important;
}

.mcc-playlist-player .mcc-player-queue-title {
    font-family: var(--mcc-font-title) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--player-text) !important;
}

.mcc-playlist-player .mcc-queue-close {
    width: 26px !important;
    height: 26px !important;
    border: none !important;
    background: transparent !important;
    border-radius: var(--mcc-radius-sm) !important;
    color: var(--player-text-muted) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mcc-playlist-player .mcc-queue-close:hover {
    background: var(--player-bg-hover) !important;
    color: var(--player-text) !important;
}

.mcc-playlist-player .mcc-player-queue-list {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 8px !important;
}

/* Queue Items */
.mcc-playlist-player .mcc-player-queue-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: var(--mcc-radius-sm) !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    color: var(--player-text) !important;
}

.mcc-playlist-player .mcc-player-queue-item:hover {
    background: var(--player-bg-hover) !important;
}

.mcc-playlist-player .mcc-player-queue-item.active {
    background: rgba(61,124,133,0.15) !important;
    border-left: 3px solid var(--mcc-primary) !important;
}

/* Search Panel */
.mcc-playlist-player .mcc-player-search-panel {
    background: var(--player-bg) !important;
    padding: 16px !important;
}

.mcc-playlist-player .mcc-player-search-input {
    width: 100% !important;
    padding: 12px 14px 12px 40px !important;
    border: 1px solid var(--player-border) !important;
    border-radius: var(--mcc-radius-md) !important;
    font-family: var(--mcc-font-body) !important;
    font-size: 13px !important;
    background: var(--player-bg-card) !important;
    color: var(--player-text) !important;
    transition: all 0.2s !important;
}

.mcc-playlist-player .mcc-player-search-input::placeholder {
    color: var(--player-text-dim) !important;
}

.mcc-playlist-player .mcc-player-search-input:focus {
    outline: none !important;
    border-color: var(--mcc-primary) !important;
    box-shadow: 0 0 0 2px var(--player-accent-glow) !important;
}

.mcc-playlist-player .mcc-player-search-results {
    background: var(--player-bg) !important;
    max-height: 280px !important;
    overflow-y: auto !important;
}

.mcc-playlist-player .mcc-player-search-thumb {
    width: 44px !important;
    height: 33px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    background: rgba(255,255,255,0.1) !important;
}

.mcc-playlist-player .mcc-player-search-section-title {
    color: var(--player-text-muted) !important;
    font-size: 12px !important;
    padding: 12px 0 8px !important;
}

/* Playlist Selector */
.mcc-playlist-player .mcc-player-playlist-selector select {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid var(--player-border) !important;
    border-radius: var(--mcc-radius-sm) !important;
    font-family: var(--mcc-font-body) !important;
    font-size: 13px !important;
    background: var(--player-bg-card) !important;
    color: var(--player-text) !important;
    cursor: pointer !important;
}

/* Video Container */
.mcc-playlist-player .mcc-player-video-container {
    background: var(--player-bg-secondary) !important;
}

.mcc-playlist-player .mcc-player-loading {
    color: var(--player-text-muted) !important;
}

.mcc-playlist-player .mcc-player-info {
    background: var(--player-bg) !important;
    padding: 16px !important;
}

.mcc-playlist-player .mcc-player-song-title {
    color: var(--player-text) !important;
    font-family: var(--mcc-font-title) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.mcc-playlist-player .mcc-player-song-artist {
    color: var(--player-text-muted) !important;
    font-size: 13px !important;
}

/* ==========================================================================
   PLAYBAR - NEW LAYOUT with PROMINENT ACTION BUTTONS
   Layout: [Controls] [Info] [Time] | [ACTION BUTTONS] | [Volume] [Secondary]
   ========================================================================== */

.mcc-playlist-player .mcc-player-controls-bar {
    background: var(--player-bg-secondary) !important;
    border-top: 1px solid var(--player-border) !important;
    padding: 12px 16px !important;
}

.mcc-playlist-player .mcc-player-progress-container {
    margin-bottom: 12px !important;
    position: relative !important;
}

.mcc-playlist-player .mcc-player-progress-bar {
    height: 6px !important;
    background: rgba(255,255,255,0.15) !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    overflow: visible !important;
    position: relative !important;
    transition: height 0.15s ease !important;
    touch-action: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Vergrösserter unsichtbarer Touch-Bereich (44px) */
.mcc-playlist-player .mcc-player-progress-bar::before {
    content: '' !important;
    position: absolute !important;
    top: -20px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -20px !important;
    z-index: 1 !important;
}

.mcc-playlist-player .mcc-player-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #3D7C85, #E8924F) !important;
    border-radius: 3px !important;
    transition: width 0.1s linear !important;
    position: relative !important;
}

/* Thumb-Circle (Spotify-Stil) */
.mcc-playlist-player .mcc-player-progress-fill::after {
    content: '' !important;
    position: absolute !important;
    right: -6px !important;
    top: 50% !important;
    transform: translateY(-50%) scale(0) !important;
    width: 14px !important;
    height: 14px !important;
    background: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
    transition: transform 0.15s ease !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Hover/Touch: Bar dicker + Thumb sichtbar */
.mcc-playlist-player .mcc-player-progress-bar:hover,
.mcc-playlist-player .mcc-player-progress-bar.mcc-scrubbing {
    height: 8px !important;
}

.mcc-playlist-player .mcc-player-progress-bar:hover .mcc-player-progress-fill::after,
.mcc-playlist-player .mcc-player-progress-bar.mcc-scrubbing .mcc-player-progress-fill::after {
    transform: translateY(-50%) scale(1) !important;
}

/* Zeit-Tooltip beim Scrubben */
.mcc-scrub-tooltip {
    position: absolute !important;
    top: -32px !important;
    transform: translateX(-50%) !important;
    background: rgba(0,0,0,0.85) !important;
    color: #fff !important;
    font-family: 'Akko', sans-serif !important;
    font-size: 12px !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    z-index: 10 !important;
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
}

.mcc-scrub-tooltip.visible {
    opacity: 1 !important;
}

.mcc-playlist-player .mcc-player-progress-bar:hover .mcc-player-progress-fill {
    background: linear-gradient(90deg, #3D7C85, #E8924F) !important;
}

/* Beim aktiven Scrubben: keine Transition für sofortige Reaktion */
.mcc-playlist-player .mcc-player-progress-bar.mcc-scrubbing .mcc-player-progress-fill {
    transition: none !important;
}

.mcc-playlist-player .mcc-player-time {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 11px !important;
    color: var(--player-text-dim) !important;
    margin-top: 4px !important;
}

/* Playbar Buttons Layout */
.mcc-playlist-player .mcc-player-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

/* Left Section: Play Controls + Info */
.mcc-player-buttons-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Center Section: PROMINENT ACTION BUTTONS */
.mcc-player-buttons-center {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
}

/* Right Section: Volume + Mode */
.mcc-player-buttons-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
}

/* Base Button Styles */
.mcc-playlist-player .mcc-player-btn {
    width: 36px !important;
    height: 36px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 50% !important;
    color: var(--player-text) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s !important;
}

.mcc-playlist-player .mcc-player-btn:hover {
    background: var(--player-bg-hover) !important;
}

.mcc-playlist-player .mcc-player-btn svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
}

/* Play Button - Larger, Accent Color */
.mcc-playlist-player .mcc-player-btn-play {
    width: 44px !important;
    height: 44px !important;
    background: var(--mcc-accent) !important;
    color: white !important;
}

.mcc-playlist-player .mcc-player-btn-play:hover {
    background: var(--mcc-accent-dark) !important;
    transform: scale(1.05) !important;
}

.mcc-playlist-player .mcc-player-btn-play svg {
    width: 22px !important;
    height: 22px !important;
}

/* ========== PROMINENT ACTION BUTTONS (Center) ========== */
.mcc-playlist-player .mcc-player-stems-btn,
.mcc-playlist-player .mcc-player-chord-btn,
.mcc-playlist-player .mcc-player-add-btn,
.mcc-playlist-player .mcc-player-pa-btn {
    width: auto !important;
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: var(--mcc-radius-sm) !important;
    background: var(--player-bg-hover) !important;
    border: 1px solid var(--player-border) !important;
    color: var(--player-text) !important;
    font-family: var(--mcc-font-body) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s !important;
}

.mcc-playlist-player .mcc-player-stems-btn:hover,
.mcc-playlist-player .mcc-player-chord-btn:hover,
.mcc-playlist-player .mcc-player-add-btn:hover,
.mcc-playlist-player .mcc-player-pa-btn:hover {
    background: var(--mcc-primary) !important;
    border-color: var(--mcc-primary) !important;
    color: white !important;
}

.mcc-playlist-player .mcc-player-stems-btn svg,
.mcc-playlist-player .mcc-player-chord-btn svg,
.mcc-playlist-player .mcc-player-add-btn svg,
.mcc-playlist-player .mcc-player-pa-btn svg {
    width: 16px !important;
    height: 16px !important;
}

/* Stems Button Active State */
.mcc-playlist-player .mcc-player-stems-btn.active {
    background: var(--mcc-accent) !important;
    border-color: var(--mcc-accent) !important;
    color: white !important;
}

/* Play Along Button States */
.mcc-playlist-player .mcc-player-pa-btn {
    position: relative !important;
    overflow: hidden !important;
}

.mcc-playlist-player .mcc-player-pa-btn.mcc-pa-loading {
    pointer-events: none !important;
    opacity: 0.8 !important;
}

.mcc-playlist-player .mcc-player-pa-btn.mcc-pa-ready {
    border-color: #E8924F !important;
}

.mcc-playlist-player .mcc-player-pa-btn.mcc-pa-active {
    background: var(--mcc-primary) !important;
    border-color: var(--mcc-primary) !important;
    color: white !important;
}

/* Preload Progress Bar (unterer Rand des Buttons) */
.mcc-pa-preload-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 0 0 var(--mcc-radius-sm) var(--mcc-radius-sm) !important;
    overflow: hidden !important;
    display: none !important;
}

.mcc-pa-preload-fill {
    height: 100% !important;
    width: 0% !important;
    background: linear-gradient(90deg, #3D7C85, #E8924F) !important;
    border-radius: 0 0 var(--mcc-radius-sm) var(--mcc-radius-sm) !important;
    transition: width 0.3s ease !important;
}

.mcc-pa-loading .mcc-pa-preload-bar {
    display: block !important;
}

/* Button Labels */
.mcc-player-btn-label {
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Volume Control */
.mcc-playlist-player .mcc-player-volume {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.mcc-playlist-player .mcc-player-volume-btn {
    width: 30px !important;
    height: 30px !important;
    border: none !important;
    background: transparent !important;
    border-radius: var(--mcc-radius-sm) !important;
    color: var(--player-text-muted) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mcc-playlist-player .mcc-player-volume-btn:hover {
    color: var(--player-text) !important;
}

.mcc-playlist-player .mcc-player-volume-slider {
    width: 90px !important;
    height: 6px !important;
    background: rgba(255,255,255,0.18) !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    position: relative !important;
    /* v4.32.77: größere Touch-/Click-Zone */
    padding: 10px 0 !important;
    background-clip: content-box !important;
    margin: -10px 0 !important;
    transition: height 0.15s ease !important;
}
.mcc-playlist-player .mcc-player-volume-slider:hover,
.mcc-playlist-player .mcc-player-volume-slider.dragging {
    /* Slight emphasis bei Hover/Drag */
    background-color: rgba(255,255,255,0.25) !important;
}

.mcc-playlist-player .mcc-player-volume-fill {
    height: 6px !important;
    background: var(--player-text) !important;
    border-radius: 3px !important;
    position: relative !important;
    pointer-events: none !important;
}
/* v4.32.77: Sichtbarer Knob am rechten Rand des fill */
.mcc-playlist-player .mcc-player-volume-fill::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--player-text, #fff);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}
.mcc-playlist-player .mcc-player-volume-slider:hover .mcc-player-volume-fill::after,
.mcc-playlist-player .mcc-player-volume-slider.dragging .mcc-player-volume-fill::after {
    opacity: 1;
}
.mcc-playlist-player .mcc-player-volume-slider.dragging .mcc-player-volume-fill::after {
    transform: translateY(-50%) scale(1.15);
}

/* Repeat Button */
.mcc-playlist-player #mcc-player-repeat {
    position: relative !important;
}

.mcc-playlist-player #mcc-player-repeat.active {
    color: var(--mcc-accent) !important;
}
.mcc-playlist-player #mcc-player-repeat.active svg {
    stroke: var(--mcc-accent) !important;
}

.mcc-playlist-player #mcc-player-shuffle.active {
    color: var(--mcc-accent) !important;
}
.mcc-playlist-player #mcc-player-shuffle.active svg {
    stroke: var(--mcc-accent) !important;
}

.mcc-playlist-player .mcc-repeat-badge {
    display: none !important;
}

.mcc-playlist-player #mcc-player-repeat.active .mcc-repeat-badge {
    display: block !important;
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    width: 14px !important;
    height: 14px !important;
    background: var(--mcc-accent) !important;
    color: white !important;
    font-size: 9px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Mode Toggle (Video/Audio) */
.mcc-playlist-player .mcc-player-mode-toggle {
    padding: 6px 10px !important;
    border-radius: var(--mcc-radius-sm) !important;
    background: transparent !important;
    border: 1px solid var(--player-border) !important;
    color: var(--player-text-muted) !important;
    font-size: 11px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.mcc-playlist-player .mcc-player-mode-toggle:hover {
    border-color: var(--mcc-primary) !important;
    color: var(--player-text) !important;
}

/* ==========================================================================
   STEMS PANEL - Dark Theme
   ========================================================================== */

.mcc-playlist-player .mcc-player-stems-panel {
    background: var(--player-bg-card) !important;
    border: 1px solid var(--player-border) !important;
    border-radius: var(--mcc-radius-md) !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.4) !important;
}

.mcc-playlist-player .mcc-player-stems-tabs {
    background: var(--player-bg-secondary) !important;
    border-bottom: 1px solid var(--player-border) !important;
}

.mcc-playlist-player .mcc-player-stems-tab {
    color: var(--player-text-muted) !important;
    background: transparent !important;
}

.mcc-playlist-player .mcc-player-stems-tab:hover {
    color: var(--player-text) !important;
    background: var(--player-bg-hover) !important;
}

.mcc-playlist-player .mcc-player-stems-tab.active {
    color: white !important;
    background: var(--mcc-primary) !important;
}

.mcc-playlist-player .mcc-player-stems-content {
    background: var(--player-bg-card) !important;
}

.mcc-playlist-player .mcc-player-stem-channel {
    background: var(--player-bg-hover) !important;
    border: 1px solid var(--player-border) !important;
    color: var(--player-text) !important;
}

.mcc-playlist-player .mcc-player-stem-label {
    color: var(--player-text) !important;
}

/* ==========================================================================
   LIGHT THEME OVERRIDES
   ========================================================================== */

.mcc-playlist-player.light-theme {
    box-shadow: 0 8px 40px rgba(0,0,0,0.15) !important;
}

.mcc-playlist-player.light-theme .mcc-player-progress-bar {
    background: rgba(0,0,0,0.1) !important;
}

.mcc-playlist-player.light-theme .mcc-player-volume-slider {
    background: rgba(0,0,0,0.1) !important;
}

.mcc-playlist-player.light-theme .mcc-player-volume-fill {
    background: var(--player-text) !important;
}

.mcc-playlist-player.light-theme .mcc-player-stems-btn,
.mcc-playlist-player.light-theme .mcc-player-chord-btn,
.mcc-playlist-player.light-theme .mcc-player-add-btn {
    background: var(--player-bg-hover) !important;
    border-color: var(--player-border) !important;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .mcc-playlist-player .mcc-player-queue.open {
        width: 100% !important;
    }
    
    .mcc-player-buttons-center {
        padding: 0 8px !important;
    }
    
    .mcc-playlist-player .mcc-player-stems-btn,
    .mcc-playlist-player .mcc-player-chord-btn,
    .mcc-playlist-player .mcc-player-add-btn {
        padding: 0 10px !important;
    }
    
    .mcc-player-btn-label {
        display: none !important;
    }
}

/* ==========================================================================
   MELDO PLAYER v3.57.1 - REDESIGNED STRUCTURE
   - Tabs show ONLY song lists (no video)
   - Now Playing as separate overlay
   - Queue as full-height overlay
   ========================================================================== */

/* Fix: Queue Toggle Button in Tab Bar */
.mcc-playlist-player .mcc-queue-toggle {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    border: 1px solid var(--player-border) !important;
    background: transparent !important;
    border-radius: var(--mcc-radius-sm) !important;
    font-family: var(--mcc-font-body) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--player-text-muted) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    position: relative !important;
}

.mcc-playlist-player .mcc-queue-toggle:hover {
    border-color: var(--mcc-primary) !important;
    color: var(--mcc-primary) !important;
    background: rgba(61,124,133,0.1) !important;
}

.mcc-playlist-player .mcc-queue-toggle.active {
    border-color: var(--mcc-accent) !important;
    background: rgba(232,146,79,0.15) !important;
    color: var(--mcc-accent) !important;
}

.mcc-playlist-player .mcc-queue-toggle svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
}

/* Queue Badge - FIXED Position */
.mcc-playlist-player #mcc-queue-count-badge {
    background: var(--mcc-primary) !important;
    color: white !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    min-width: 18px !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* ==========================================================================
   TABS CONTENT AREA - Full Height for Song Lists
   ========================================================================== */

.mcc-playlist-player .mcc-player-content {
    position: relative !important;
    height: 380px !important;
    background: var(--player-bg) !important;
    overflow: hidden !important;
}

.mcc-playlist-player .mcc-player-tabs-content {
    height: 100% !important;
    overflow: hidden !important;
}

/* Tab Panels */
.mcc-playlist-player .mcc-player-tab-panel {
    display: none !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

.mcc-playlist-player .mcc-player-tab-panel.active {
    display: flex !important;
}

/* ==========================================================================
   PLAYLIST TAB
   ========================================================================== */

.mcc-playlist-player #mcc-tab-playlist {
    display: flex !important;
}

.mcc-playlist-player #mcc-tab-playlist .mcc-player-playlist-selector {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--player-border) !important;
    flex-shrink: 0 !important;
}

.mcc-playlist-player .mcc-player-select {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid var(--player-border) !important;
    border-radius: var(--mcc-radius-sm) !important;
    font-family: var(--mcc-font-body) !important;
    font-size: 13px !important;
    background: var(--player-bg-card) !important;
    color: var(--player-text) !important;
    cursor: pointer !important;
}

.mcc-playlist-player .mcc-player-select:focus {
    outline: none !important;
    border-color: var(--mcc-primary) !important;
}

/* Songs List */
.mcc-playlist-player .mcc-player-songs-list {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 8px !important;
}

/* Section Dividers in Playlist */
.mcc-player-section-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(61,124,133,0.06) 0%, rgba(232,146,79,0.06) 100%);
    border-left: 3px solid #999;
    font-family: 'Akko', sans-serif;
}
.mcc-player-section-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mcc-player-section-label {
    font-size: 12px;
    font-weight: 700;
    color: #555;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.mcc-player-song-label {
    display: inline-block;
    background: #3D7C85;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    margin-right: 5px;
    vertical-align: middle;
    letter-spacing: 0.2px;
}

.mcc-player-song-label-inline {
    display: none;
    color: #3D7C85;
    font-size: 11px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .mcc-player-song-label { display: none; }
    .mcc-player-song-label-inline { display: inline; }
}

/* Song Item */
.mcc-playlist-player .mcc-player-song-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: var(--mcc-radius-sm) !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}

.mcc-playlist-player .mcc-player-song-item:hover {
    background: var(--player-bg-hover) !important;
}

.mcc-playlist-player .mcc-player-song-item.playing {
    background: rgba(61,124,133,0.15) !important;
    border-left: 3px solid var(--mcc-primary) !important;
}

.mcc-playlist-player .mcc-player-song-item .song-number {
    width: 24px !important;
    font-size: 12px !important;
    color: var(--player-text-dim) !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.mcc-playlist-player .mcc-player-song-item.playing .song-number {
    color: var(--mcc-primary) !important;
    font-weight: 600 !important;
}

.mcc-playlist-player .mcc-player-song-item .song-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.mcc-playlist-player .mcc-player-song-item .song-title {
    font-weight: 500 !important;
    color: var(--player-text) !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mcc-playlist-player .mcc-player-song-item .song-artist {
    font-size: 11px !important;
    color: var(--player-text-dim) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mcc-playlist-player .mcc-player-song-item .song-duration {
    font-size: 11px !important;
    color: var(--player-text-dim) !important;
    flex-shrink: 0 !important;
}

/* YouTube Thumbnails in Audioplayer Song-Listen */
.mcc-playlist-player .song-thumb,
.mcc-playlist-player .queue-thumb {
    width: 44px !important;
    height: 33px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    background: rgba(255,255,255,0.1) !important;
}

.mcc-playlist-player .song-thumb-placeholder,
.mcc-playlist-player .queue-thumb-placeholder {
    width: 44px !important;
    height: 33px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.08) !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    color: rgba(255,255,255,0.3) !important;
}

.mcc-playlist-player .mcc-player-song-item.playing .song-thumb {
    box-shadow: 0 0 0 2px var(--mcc-primary) !important;
}

.mcc-playlist-player .mcc-player-queue-item.active .queue-thumb {
    box-shadow: 0 0 0 2px var(--mcc-primary) !important;
}

/* ==========================================================================
   SHUFFLE TAB
   ========================================================================== */

.mcc-playlist-player .mcc-player-shuffle-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--player-border) !important;
    color: var(--player-text-muted) !important;
    font-size: 13px !important;
}

.mcc-playlist-player .mcc-player-shuffle-header .mcc-shuffle-icon {
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mcc-playlist-player .mcc-player-shuffle-header .mcc-shuffle-icon svg {
    width: 18px !important;
    height: 18px !important;
    fill: var(--mcc-accent) !important;
}

/* ==========================================================================
   SEARCH TAB - Full Window
   ========================================================================== */

.mcc-playlist-player #mcc-tab-search {
    padding: 0 !important;
}

.mcc-playlist-player #mcc-tab-search .mcc-player-search-container {
    padding: 16px !important;
    border-bottom: 1px solid var(--player-border) !important;
    flex-shrink: 0 !important;
}

.mcc-playlist-player #mcc-tab-search .mcc-player-search-results {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0 16px 16px !important;
}

/* ==========================================================================
   HIDDEN YOUTUBE PLAYER
   ========================================================================== */

.mcc-playlist-player .mcc-player-youtube-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   NOW PLAYING OVERLAY
   ========================================================================== */

.mcc-playlist-player .mcc-now-playing-overlay {
    position: absolute !important;
    top: 52px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--player-bg) !important;
    z-index: 100 !important;
    display: none !important;
    flex-direction: column !important;
}

.mcc-playlist-player .mcc-now-playing-overlay.open {
    display: flex !important;
}

.mcc-playlist-player .mcc-now-playing-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    background: var(--player-bg-secondary) !important;
    border-bottom: 1px solid var(--player-border) !important;
    flex-shrink: 0 !important;
}

/* Now Playing Tabs */
.mcc-playlist-player .mcc-now-playing-tabs {
    display: flex !important;
    gap: 4px !important;
}

.mcc-playlist-player .mcc-now-playing-tab {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    border: none !important;
    background: transparent !important;
    border-radius: var(--mcc-radius-sm) !important;
    font-family: var(--mcc-font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--player-text-muted) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.mcc-playlist-player .mcc-now-playing-tab:hover {
    background: var(--player-bg-hover) !important;
    color: var(--player-text) !important;
}

.mcc-playlist-player .mcc-now-playing-tab.active {
    background: var(--mcc-primary) !important;
    color: white !important;
}

.mcc-playlist-player .mcc-now-playing-tab svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
}

.mcc-playlist-player .mcc-now-playing-title {
    font-family: var(--mcc-font-title) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--player-text) !important;
}

.mcc-playlist-player .mcc-now-playing-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.mcc-playlist-player .mcc-now-playing-queue-btn,
.mcc-playlist-player .mcc-now-playing-close {
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    background: transparent !important;
    border-radius: var(--mcc-radius-sm) !important;
    color: var(--player-text-muted) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    transition: all 0.2s !important;
}

.mcc-playlist-player .mcc-now-playing-queue-btn:hover,
.mcc-playlist-player .mcc-now-playing-close:hover {
    background: var(--player-bg-hover) !important;
    color: var(--player-text) !important;
}

.mcc-playlist-player .mcc-now-playing-queue-btn svg,
.mcc-playlist-player .mcc-now-playing-close svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
}

.mcc-playlist-player .mcc-now-playing-queue-badge {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    background: var(--mcc-primary) !important;
    color: white !important;
    font-size: 9px !important;
    padding: 1px 4px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    min-width: 14px !important;
    text-align: center !important;
}

.mcc-playlist-player .mcc-now-playing-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 12px 20px !important;
    overflow-y: auto !important;
}

.mcc-playlist-player .mcc-now-playing-tab-content {
    display: none !important;
}

.mcc-playlist-player .mcc-now-playing-tab-content.active {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 1 !important;
    width: 100% !important;
}

.mcc-playlist-player .mcc-now-playing-content .mcc-player-video {
    width: 100% !important;
    max-width: 640px !important;
    aspect-ratio: 16/9 !important;
    border-radius: var(--mcc-radius-md) !important;
    overflow: hidden !important;
    background: #000 !important;
    flex-shrink: 0 !important;
}

.mcc-playlist-player .mcc-now-playing-content .mcc-player-info {
    text-align: center !important;
    margin-top: 16px !important;
    background: transparent !important;
}

.mcc-playlist-player .mcc-now-playing-content .mcc-player-song-title {
    font-family: var(--mcc-font-title) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--player-text) !important;
}

.mcc-playlist-player .mcc-now-playing-content .mcc-player-song-artist {
    font-size: 14px !important;
    color: var(--player-text-muted) !important;
    margin-top: 4px !important;
}

/* ==========================================================================
   QUEUE OVERLAY - Full Height, Over Everything
   ========================================================================== */

.mcc-playlist-player .mcc-queue-overlay {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 320px !important;
    background: var(--player-bg-card) !important;
    border-left: 1px solid var(--player-border) !important;
    z-index: 200 !important;
    display: none !important;
    flex-direction: column !important;
    box-shadow: -4px 0 24px rgba(0,0,0,0.3) !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
}

.mcc-playlist-player .mcc-queue-overlay.open {
    display: flex !important;
    transform: translateX(0) !important;
}

.mcc-playlist-player .mcc-queue-overlay-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px !important;
    background: var(--player-bg-secondary) !important;
    border-bottom: 1px solid var(--player-border) !important;
    flex-shrink: 0 !important;
}

.mcc-playlist-player .mcc-queue-overlay-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: var(--mcc-font-title) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--player-text) !important;
}

.mcc-playlist-player .mcc-queue-overlay-title svg {
    width: 18px !important;
    height: 18px !important;
    fill: var(--mcc-primary) !important;
}

.mcc-playlist-player .mcc-queue-overlay-title span {
    font-size: 12px !important;
    color: var(--player-text-dim) !important;
    font-weight: 400 !important;
}

.mcc-playlist-player .mcc-queue-overlay-close {
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    background: transparent !important;
    border-radius: var(--mcc-radius-sm) !important;
    color: var(--player-text-muted) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
}

.mcc-playlist-player .mcc-queue-overlay-close:hover {
    background: var(--player-bg-hover) !important;
    color: var(--player-text) !important;
}

.mcc-playlist-player .mcc-queue-overlay-close svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
}

.mcc-playlist-player .mcc-queue-overlay-list {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 8px !important;
}

/* Queue Items */
.mcc-playlist-player .mcc-queue-overlay-list .mcc-player-queue-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: var(--mcc-radius-sm) !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}

.mcc-playlist-player .mcc-queue-overlay-list .mcc-player-queue-item:hover {
    background: var(--player-bg-hover) !important;
}

.mcc-playlist-player .mcc-queue-overlay-list .mcc-player-queue-item.active {
    background: rgba(61,124,133,0.15) !important;
    border-left: 3px solid var(--mcc-primary) !important;
}

.mcc-playlist-player .mcc-queue-overlay-list .queue-number {
    width: 20px !important;
    font-size: 11px !important;
    color: var(--player-text-dim) !important;
    text-align: center !important;
}

.mcc-playlist-player .mcc-queue-overlay-list .mcc-player-queue-item.active .queue-number {
    color: var(--mcc-primary) !important;
    font-weight: 600 !important;
}

.mcc-playlist-player .mcc-queue-overlay-list .queue-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.mcc-playlist-player .mcc-queue-overlay-list .queue-title {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--player-text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mcc-playlist-player .mcc-queue-overlay-list .queue-artist {
    font-size: 10px !important;
    color: var(--player-text-dim) !important;
}

.mcc-playlist-player .mcc-queue-overlay-list .queue-remove {
    width: 24px !important;
    height: 24px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 4px !important;
    color: var(--player-text-dim) !important;
    cursor: pointer !important;
    opacity: 0 !important;
    transition: all 0.15s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mcc-playlist-player .mcc-queue-overlay-list .mcc-player-queue-item:hover .queue-remove {
    opacity: 1 !important;
}

.mcc-playlist-player .mcc-queue-overlay-list .queue-remove:hover {
    color: #e74c3c !important;
    background: rgba(231,76,60,0.15) !important;
}

.mcc-playlist-player .mcc-queue-overlay-list .queue-remove svg {
    width: 14px !important;
    height: 14px !important;
    fill: currentColor !important;
}

/* ==========================================================================
   NOW PLAYING BUTTON IN PLAYBAR
   ========================================================================== */

.mcc-playlist-player .mcc-now-playing-btn {
    width: 32px !important;
    height: 32px !important;
    border: 1px solid var(--player-border) !important;
    background: transparent !important;
    border-radius: var(--mcc-radius-sm) !important;
    color: var(--player-text-muted) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
}

.mcc-playlist-player .mcc-now-playing-btn:hover {
    border-color: var(--mcc-primary) !important;
    color: var(--mcc-primary) !important;
}

.mcc-playlist-player .mcc-now-playing-btn.active {
    background: var(--mcc-primary) !important;
    border-color: var(--mcc-primary) !important;
    color: white !important;
    transform: rotate(180deg) !important;
}

.mcc-playlist-player .mcc-now-playing-btn svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
}

/* ==========================================================================
   LIGHT THEME ADDITIONS
   ========================================================================== */

.mcc-playlist-player.light-theme .mcc-queue-overlay {
    box-shadow: -4px 0 24px rgba(0,0,0,0.1) !important;
}

.mcc-playlist-player.light-theme .mcc-player-song-item:hover,
.mcc-playlist-player.light-theme .mcc-player-queue-item:hover {
    background: var(--player-bg-hover) !important;
}

.mcc-playlist-player.light-theme .mcc-player-song-item.playing,
.mcc-playlist-player.light-theme .mcc-player-queue-item.active {
    background: rgba(61,124,133,0.1) !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .mcc-playlist-player .mcc-queue-overlay {
        width: 100% !important;
    }
    
    .mcc-playlist-player .mcc-queue-toggle span:not(#mcc-queue-count-badge) {
        display: none !important;
    }
}

/* ==========================================================================
   v3.57.2 FIXES
   ========================================================================== */

/* Song Items - VOLLE BREITE */
.mcc-playlist-player .mcc-player-songs-list,
.mcc-playlist-player .mcc-queue-overlay-list {
    max-width: none !important;
}

.mcc-playlist-player .mcc-player-song-item,
.mcc-playlist-player .mcc-player-queue-item {
    max-width: none !important;
    width: 100% !important;
}

/* Queue Button - BREITER */
.mcc-playlist-player .mcc-queue-toggle {
    min-width: 110px !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   NOW PLAYING KNOB - oben in der Mitte der Playbar
   ========================================================================== */

.mcc-playlist-player .mcc-now-playing-knob {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 100% !important;
    margin-bottom: -10px !important;
    width: 50px !important;
    height: 26px !important;
    background: var(--player-bg-secondary) !important;
    border: 1px solid var(--player-border) !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
    color: var(--player-text-muted) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    transition: all 0.2s !important;
}

.mcc-playlist-player .mcc-now-playing-knob:hover {
    background: var(--player-bg-hover) !important;
    color: var(--mcc-primary) !important;
}

.mcc-playlist-player .mcc-now-playing-knob.active {
    background: var(--mcc-primary) !important;
    border-color: var(--mcc-primary) !important;
    color: white !important;
}

.mcc-playlist-player .mcc-now-playing-knob.active svg {
    transform: rotate(180deg) !important;
}

.mcc-playlist-player .mcc-now-playing-knob svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    transition: transform 0.2s !important;
}

/* ==========================================================================
   PLAYBAR - 2 Rows Layout
   ========================================================================== */

.mcc-playlist-player .mcc-player-controls-bar {
    position: relative !important;
    padding: 10px 16px 14px !important;
}

/* Row 1: Song Info + Action Buttons */
.mcc-playlist-player .mcc-playbar-row-1 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
    gap: 16px !important;
}

.mcc-playlist-player .mcc-playbar-song-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.mcc-playlist-player .mcc-playbar-thumb {
    width: 48px !important;
    height: 36px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
}

.mcc-playlist-player .mcc-playbar-song-text {
    flex: 1 !important;
    min-width: 0 !important;
}

.mcc-playlist-player .mcc-playbar-song-title {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--player-text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mcc-playlist-player .mcc-playbar-song-artist {
    font-size: 12px !important;
    color: var(--player-text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Row 2: Play Controls + Volume */
.mcc-playlist-player .mcc-playbar-row-2 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.mcc-playlist-player .mcc-player-buttons-left {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.mcc-playlist-player .mcc-player-buttons-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Action Buttons in Row 1 */
.mcc-playlist-player .mcc-playbar-row-1 .mcc-player-buttons-center {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

/* Light Theme */
.mcc-playlist-player.light-theme .mcc-now-playing-knob {
    background: var(--player-bg-secondary) !important;
    border-color: var(--player-border) !important;
}

.mcc-playlist-player.light-theme .mcc-now-playing-knob:hover {
    background: var(--player-bg-hover) !important;
}

/* ==========================================================================
   v3.57.3 - PROFESSIONELLE PLAYBAR + FULL WIDTH SONGS
   ========================================================================== */

/* SONG ITEMS - VOLLE BREITE ERZWINGEN */
.mcc-playlist-player .mcc-player-content,
.mcc-playlist-player .mcc-player-tabs-content,
.mcc-playlist-player .mcc-player-tab-panel {
    width: 100% !important;
    max-width: 100% !important;
}

.mcc-playlist-player .mcc-player-songs-list {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 16px !important;
}

.mcc-playlist-player .mcc-player-song-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.mcc-playlist-player #mcc-tab-playlist .mcc-player-playlist-selector {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 16px !important;
}

.mcc-playlist-player .mcc-player-select {
    width: 100% !important;
    max-width: 400px !important;
}

/* ==========================================================================
   PLAYBAR - EINZEILIGES PROFESSIONELLES LAYOUT
   ========================================================================== */

.mcc-playlist-player .mcc-player-controls-bar {
    position: relative !important;
    background: var(--player-bg-secondary) !important;
    border-top: 1px solid var(--player-border) !important;
    padding: 0 !important;
}

/* Progress Bar oben */
.mcc-playlist-player .mcc-player-progress-container {
    padding: 0 16px !important;
    padding-top: 8px !important;
}

/* Haupt-Content der Playbar */
.mcc-playlist-player .mcc-playbar-row-1,
.mcc-playlist-player .mcc-playbar-row-2 {
    display: none !important;
}

.mcc-playlist-player .mcc-player-controls-bar::after {
    content: '';
    display: table;
    clear: both;
}

/* Neues einzeiliges Layout */
.mcc-playlist-player .mcc-playbar-main {
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    gap: 16px !important;
}

/* Links: Song Info */
.mcc-playlist-player .mcc-playbar-left {
    flex: 0 0 260px !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.mcc-playlist-player .mcc-playbar-thumb {
    width: 48px !important;
    height: 36px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
}

.mcc-playlist-player .mcc-playbar-song-text {
    flex: 1 !important;
    min-width: 0 !important;
}

.mcc-playlist-player .mcc-playbar-song-title {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--player-text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
}

.mcc-playlist-player .mcc-playbar-song-artist {
    font-size: 12px !important;
    color: var(--player-text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Mitte: Play Controls */
.mcc-playlist-player .mcc-playbar-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

.mcc-playlist-player .mcc-playbar-center .mcc-player-btn {
    width: 36px !important;
    height: 36px !important;
}

.mcc-playlist-player .mcc-playbar-center .mcc-player-btn-play {
    width: 44px !important;
    height: 44px !important;
    background: var(--mcc-accent) !important;
    border-radius: 50% !important;
}

.mcc-playlist-player .mcc-playbar-center .mcc-player-btn-play:hover {
    background: #E67C24 !important;
    transform: scale(1.05) !important;
}

/* Rechts: Actions + Volume */
.mcc-playlist-player .mcc-playbar-right {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding-right: 60px !important; /* Platz für Chatbot-Button */
}

/* Action Buttons kompakter */
.mcc-playlist-player .mcc-playbar-right .mcc-player-btn {
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    background: var(--player-bg-hover) !important;
    border: 1px solid var(--player-border) !important;
    font-size: 12px !important;
    gap: 5px !important;
}

.mcc-playlist-player .mcc-playbar-right .mcc-player-btn:hover {
    background: var(--mcc-primary) !important;
    border-color: var(--mcc-primary) !important;
    color: white !important;
}

.mcc-playlist-player .mcc-playbar-right .mcc-player-btn svg {
    width: 14px !important;
    height: 14px !important;
}

.mcc-playlist-player .mcc-playbar-right .mcc-player-btn-label {
    font-size: 11px !important;
}

/* Volume kompakt */
.mcc-playlist-player .mcc-playbar-right .mcc-player-volume {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.mcc-playlist-player .mcc-playbar-right .mcc-player-volume-btn {
    width: 28px !important;
    height: 28px !important;
}

.mcc-playlist-player .mcc-playbar-right .mcc-player-volume-slider {
    width: 60px !important;
}

/* Video Button verstecken (nicht mehr benötigt) */
.mcc-playlist-player .mcc-player-mode-toggle {
    display: none !important;
}

/* ==========================================================================
   NOW PLAYING KNOB - Zentriert oben
   ========================================================================== */

.mcc-playlist-player .mcc-now-playing-knob {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: -18px !important;
    width: 48px !important;
    height: 22px !important;
    background: var(--player-bg-secondary) !important;
    border: 1px solid var(--player-border) !important;
    border-bottom: none !important;
    border-radius: 10px 10px 0 0 !important;
    color: var(--player-text-muted) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    transition: all 0.2s !important;
}

.mcc-playlist-player .mcc-now-playing-knob:hover {
    background: var(--player-bg-hover) !important;
    color: var(--mcc-primary) !important;
}

.mcc-playlist-player .mcc-now-playing-knob.active {
    background: var(--mcc-primary) !important;
    border-color: var(--mcc-primary) !important;
    color: white !important;
}

.mcc-playlist-player .mcc-now-playing-knob.active svg {
    transform: rotate(180deg) !important;
}

.mcc-playlist-player .mcc-now-playing-knob svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
    transition: transform 0.2s !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
    .mcc-playlist-player .mcc-playbar-left {
        flex: 0 0 150px !important;
    }
    
    .mcc-playlist-player .mcc-playbar-right .mcc-player-btn-label {
        display: none !important;
    }
    
    .mcc-playlist-player .mcc-playbar-right .mcc-player-btn {
        padding: 0 10px !important;
        width: 34px !important;
    }
}

@media (max-width: 600px) {
    .mcc-playlist-player .mcc-playbar-left {
        flex: 0 0 120px !important;
    }
    
    .mcc-playlist-player .mcc-playbar-right {
        padding-right: 10px !important;
    }
    
    .mcc-playlist-player .mcc-playbar-right .mcc-player-volume {
        display: none !important;
    }
}

/* ==========================================================================
   v3.57.4 - PLAYBAR 2-ZEILEN + TAB FIXES
   ========================================================================== */

/* Alte Playbar-Styles überschreiben */
.mcc-playlist-player .mcc-playbar-main {
    display: none !important;
}

/* Playbar Zeile 1: Song Info + Play Controls + Volume */
.mcc-playlist-player .mcc-playbar-row-1 {
    display: flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
    gap: 16px !important;
}

.mcc-playlist-player .mcc-playbar-left {
    flex: 0 0 180px !important;
    min-width: 0 !important;
}

.mcc-playlist-player .mcc-playbar-song-title {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--player-text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mcc-playlist-player .mcc-playbar-song-artist {
    font-size: 12px !important;
    color: var(--player-text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mcc-playlist-player .mcc-playbar-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex: 1 !important;
}

.mcc-playlist-player .mcc-playbar-right {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    padding-right: 60px !important;
}

/* Playbar Zeile 2: Action Buttons zentriert */
.mcc-playlist-player .mcc-playbar-row-2 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 16px 12px !important;
}

.mcc-playlist-player .mcc-playbar-row-2 .mcc-player-btn {
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 6px !important;
    background: var(--player-bg-hover) !important;
    border: 1px solid var(--player-border) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.mcc-playlist-player .mcc-playbar-row-2 .mcc-player-btn:hover {
    background: var(--mcc-primary) !important;
    border-color: var(--mcc-primary) !important;
    color: white !important;
}

.mcc-playlist-player .mcc-playbar-row-2 .mcc-player-btn svg {
    width: 16px !important;
    height: 16px !important;
}

.mcc-playlist-player .mcc-playbar-row-2 .mcc-player-btn-label {
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   TAB PANELS - Nur aktives Panel sichtbar
   ========================================================================== */

.mcc-playlist-player .mcc-player-tab-panel {
    display: none !important;
}

.mcc-playlist-player .mcc-player-tab-panel.active {
    display: flex !important;
    flex-direction: column !important;
}

/* Playlist Tab - versteckt wenn nicht aktiv */
.mcc-playlist-player #mcc-tab-playlist {
    display: none !important;
}

.mcc-playlist-player #mcc-tab-playlist.active {
    display: flex !important;
}

/* Search Tab */
.mcc-playlist-player #mcc-tab-search {
    display: none !important;
}

.mcc-playlist-player #mcc-tab-search.active {
    display: flex !important;
}

/* Shuffle Tab */
.mcc-playlist-player #mcc-tab-shuffle {
    display: none !important;
}

.mcc-playlist-player #mcc-tab-shuffle.active {
    display: flex !important;
}

/* Responsive */
@media (max-width: 768px) {
    .mcc-playlist-player .mcc-playbar-left {
        flex: 0 0 120px !important;
    }
    
    .mcc-playlist-player .mcc-playbar-right {
        padding-right: 10px !important;
    }
    
    .mcc-playlist-player .mcc-playbar-row-2 .mcc-player-btn-label {
        display: none !important;
    }
    
    .mcc-playlist-player .mcc-playbar-row-2 .mcc-player-btn {
        padding: 0 10px !important;
    }
}

/* ==========================================================================
   v3.57.4 FINAL - TAB PANEL VISIBILITY FIX
   ========================================================================== */

/* ALLE Tab-Panels standardmäßig versteckt */
#mcc-playlist-player .mcc-player-tab-panel,
.mcc-playlist-player .mcc-player-tab-panel,
#mcc-tab-playlist,
#mcc-tab-shuffle,
#mcc-tab-search {
    display: none !important;
    visibility: hidden !important;
}

/* NUR das aktive Panel anzeigen */
#mcc-playlist-player .mcc-player-tab-panel.active,
.mcc-playlist-player .mcc-player-tab-panel.active,
#mcc-tab-playlist.active,
#mcc-tab-shuffle.active,
#mcc-tab-search.active {
    display: flex !important;
    visibility: visible !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* ==========================================================================
   v3.57.6 - UI FIXES
   ========================================================================== */

/* Queue Button - nur Icon, kompakt */
.mcc-playlist-player .mcc-queue-toggle {
    min-width: auto !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    position: relative !important;
}

.mcc-playlist-player .mcc-queue-toggle svg {
    width: 20px !important;
    height: 20px !important;
}

.mcc-playlist-player .mcc-queue-toggle #mcc-queue-count-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    padding: 0 4px !important;
}

/* Playbar-right - mehr Abstand für Chatbot */
.mcc-playlist-player .mcc-playbar-right {
    padding-right: 80px !important;
    gap: 8px !important;
}

/* Video Button Style */
.mcc-playlist-player .mcc-player-video-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    background: var(--player-bg-hover) !important;
    border: 1px solid var(--player-border) !important;
}

.mcc-playlist-player .mcc-player-video-btn:hover {
    background: var(--mcc-primary) !important;
    border-color: var(--mcc-primary) !important;
    color: white !important;
}

.mcc-playlist-player .mcc-player-video-btn svg {
    width: 18px !important;
    height: 18px !important;
}

/* Now Playing Knob - sichtbar */
.mcc-playlist-player .mcc-now-playing-knob {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: -20px !important;
    width: 50px !important;
    height: 24px !important;
    background: var(--player-bg-secondary) !important;
    border: 1px solid var(--player-border) !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
    color: var(--player-text-muted) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 20 !important;
    transition: all 0.2s !important;
}

.mcc-playlist-player .mcc-now-playing-knob:hover {
    background: var(--player-bg-hover) !important;
    color: var(--mcc-primary) !important;
}

.mcc-playlist-player .mcc-now-playing-knob.active {
    background: var(--mcc-primary) !important;
    border-color: var(--mcc-primary) !important;
    color: white !important;
}

.mcc-playlist-player .mcc-now-playing-knob.active svg {
    transform: rotate(180deg) !important;
}

.mcc-playlist-player .mcc-now-playing-knob svg {
    width: 18px !important;
    height: 18px !important;
    transition: transform 0.2s !important;
}

/* Controls Bar - relative Position für Knob */
.mcc-playlist-player .mcc-player-controls-bar {
    position: relative !important;
}

/* Volume Slider breiter */
.mcc-playlist-player .mcc-player-volume-slider {
    width: 70px !important;
}

/* ==========================================================================
   v3.57.7 - FIXES
   ========================================================================== */

/* Tab-Bar Layout - Queue Button nicht verdecken */
.mcc-playlist-player .mcc-player-mode-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 16px !important;
}

.mcc-playlist-player .mcc-player-tabs-row {
    display: flex !important;
    flex: 1 !important;
    gap: 8px !important;
}

.mcc-playlist-player .mcc-mode-btn {
    flex: 1 !important;
    max-width: 200px !important;
}

/* Queue Button - feste Breite, kein Flex-grow */
.mcc-playlist-player .mcc-queue-toggle {
    flex: 0 0 auto !important;
    margin-left: 8px !important;
}

/* Video Button active state */
.mcc-playlist-player .mcc-player-video-btn.active {
    background: var(--mcc-primary) !important;
    border-color: var(--mcc-primary) !important;
    color: white !important;
}

/* ==========================================================================
   v3.57.7 - NOW PLAYING FIX + TAB BAR SPACING
   ========================================================================== */

/* Tab Bar - Buttons Abstand */
.mcc-playlist-player .mcc-player-tabs {
    gap: 8px !important;
}

.mcc-playlist-player .mcc-mode-btn {
    flex: 1 !important;
    max-width: 200px !important;
}

/* Queue Button - kleinerer Abstand */
.mcc-playlist-player .mcc-queue-toggle {
    flex: 0 0 auto !important;
    margin-left: 8px !important;
}

/* Now Playing Overlay - NICHT display:none, sondern off-screen */
.mcc-playlist-player .mcc-now-playing-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--player-bg) !important;
    z-index: 100 !important;
    flex-direction: column !important;
    /* Versteckt aber Player funktioniert weiter */
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.mcc-playlist-player .mcc-now-playing-overlay.open {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    display: flex !important;
}

/* Video Container */
.mcc-playlist-player .mcc-now-playing-overlay .mcc-player-video {
    display: block !important;
}

/* ==========================================================================
   v3.57.8 - LAYOUT FIXES
   ========================================================================== */

/* Queue Button - GANZ RECHTS */
.mcc-playlist-player .mcc-queue-toggle {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
}

.mcc-playlist-player .mcc-player-tabs {
    position: relative !important;
    padding-right: 70px !important;
}

/* Song-Listen - BIS ZUR PLAYBAR */
.mcc-playlist-player .mcc-player-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.mcc-playlist-player .mcc-player-tabs-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.mcc-playlist-player .mcc-player-tab-panel.active {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.mcc-playlist-player .mcc-player-songs-list {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
}

/* Playlist-Selector fixierte Höhe */
.mcc-playlist-player .mcc-player-playlist-selector {
    flex-shrink: 0 !important;
}

/* Shuffle Header fixierte Höhe */
.mcc-playlist-player .mcc-player-shuffle-header {
    flex-shrink: 0 !important;
}

/* Search Container fixierte Höhe */
.mcc-playlist-player .mcc-player-search-container {
    flex-shrink: 0 !important;
}

.mcc-playlist-player .mcc-player-search-results {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
}

/* ==========================================================================
   PLAYBAR - Actions OBEN, Controls UNTEN
   ========================================================================== */

/* Actions Row (OBEN) */
.mcc-playlist-player .mcc-playbar-row-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--player-border) !important;
}

.mcc-playlist-player .mcc-playbar-row-actions .mcc-player-btn {
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    background: var(--player-bg-hover) !important;
    border: 1px solid var(--player-border) !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
}

.mcc-playlist-player .mcc-playbar-row-actions .mcc-player-btn:hover {
    background: var(--mcc-primary) !important;
    border-color: var(--mcc-primary) !important;
    color: white !important;
}

.mcc-playlist-player .mcc-playbar-row-actions .mcc-player-btn svg {
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor !important;
    fill: none !important;
}

.mcc-playlist-player .mcc-playbar-row-actions .mcc-player-btn-label {
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Controls Row (UNTEN) */
.mcc-playlist-player .mcc-playbar-row-controls {
    display: flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
    gap: 16px !important;
}

/* Alte Row-Klassen verstecken */
.mcc-playlist-player .mcc-playbar-row-1,
.mcc-playlist-player .mcc-playbar-row-2 {
    display: none !important;
}

/* Responsive */
@media (max-width: 600px) {
    .mcc-playlist-player .mcc-playbar-row-actions .mcc-player-btn-label {
        display: none !important;
    }
    
    .mcc-playlist-player .mcc-playbar-row-actions .mcc-player-btn {
        padding: 0 8px !important;
    }
}

/* ==========================================================================
   v3.57.16 FIX - Content bis zur Playbar
   ========================================================================== */

/* OVERRIDE: Feste Höhe entfernen, Flex-Wachstum erlauben */
.mcc-playlist-player .mcc-player-content {
    height: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
}

/* Now Playing Knob - VERSTECKEN (nicht mehr benötigt im neuen Design) */
.mcc-playlist-player .mcc-now-playing-knob {
    display: none !important;
}

/* ALLE versteckten Elemente - GARANTIERT keine Höhe */
.mcc-playlist-player .mcc-now-playing-overlay,
.mcc-playlist-player .mcc-queue-overlay {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* Nur wenn .open Klasse vorhanden - ALLES überschreiben */
.mcc-playlist-player .mcc-now-playing-overlay.open {
    display: flex !important;
    position: absolute !important;
    top: 52px !important;  /* Platz für Player-Header */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    z-index: 100 !important;
    background: var(--player-bg) !important;
    flex-direction: column !important;
}

.mcc-playlist-player .mcc-queue-overlay.open {
    display: flex !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 320px !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    z-index: 200 !important;
    background: var(--player-bg-card) !important;
    flex-direction: column !important;
    transform: translateX(0) !important;
}

/* Stems Panel - KEIN !important damit jQuery .fadeIn()/.fadeOut() funktioniert */
.mcc-playlist-player .mcc-player-stems-panel {
    /* Keine display-Regel hier - JavaScript steuert das */
    flex-shrink: 0;
}

/* ==========================================================================
   v3.57.21 - Playbar kompakter + Queue Header-Abstand
   ========================================================================== */

/* Playbar kompakter machen */
.mcc-playlist-player .mcc-playbar-row-actions {
    padding: 6px 12px !important;
}

.mcc-playlist-player .mcc-playbar-row-actions .mcc-player-btn {
    height: 28px !important;
    padding: 0 10px !important;
}

.mcc-playlist-player .mcc-playbar-row-controls {
    padding: 8px 12px !important;
    gap: 12px !important;
}

.mcc-playlist-player .mcc-player-progress-container {
    padding: 6px 12px 4px !important;
}

/* Queue Overlay - Abstand oben für Header */
.mcc-playlist-player .mcc-queue-overlay.open {
    top: 52px !important;  /* Platz für Header */
    border-radius: 12px 0 0 0 !important;
    box-shadow: -4px 0 20px rgba(0,0,0,0.3) !important;
}

/* ==========================================================================
   v3.57.22 - Playbar Abstand + Light-Mode Fixes
   ========================================================================== */

/* Weniger Abstand zwischen Progress und Buttons */
.mcc-playlist-player .mcc-player-progress-container {
    margin-bottom: 0 !important;
    padding-bottom: 2px !important;
}

.mcc-playlist-player .mcc-playbar-row-actions {
    padding-top: 4px !important;
    border-bottom: none !important;
}

/* Light-Mode: Suchergebnis-Texte sichtbar */
.mcc-playlist-player.light-theme .mcc-player-search-item-title {
    color: #111416 !important;
}

.mcc-playlist-player.light-theme .mcc-player-search-item-subtitle {
    color: #666666 !important;
}

.mcc-playlist-player.light-theme .mcc-player-search-section-title {
    color: #111416 !important;
}

.mcc-playlist-player.light-theme .mcc-player-search-item-count {
    color: #666666 !important;
}

/* Light-Mode: Queue-Toggle Icon schwarz */
.mcc-playlist-player.light-theme .mcc-queue-toggle svg {
    color: #111416 !important;
}

.mcc-playlist-player.light-theme .mcc-queue-toggle {
    background: rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.mcc-playlist-player.light-theme .mcc-queue-toggle:hover {
    background: var(--mcc-primary) !important;
}

.mcc-playlist-player.light-theme .mcc-queue-toggle:hover svg {
    color: white !important;
}

/* ==========================================================================
   v3.57.23 - Search Gap Fix + Now Playing Knob wieder sichtbar
   ========================================================================== */

/* Search Results bis zur Playbar - ALLE Elemente */
.mcc-playlist-player .mcc-player-search-results {
    max-height: none !important;
    flex: 1 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.mcc-playlist-player .mcc-player-search-panel {
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
}

.mcc-playlist-player .mcc-player-search-container {
    flex-shrink: 0 !important;
}

.mcc-playlist-player .mcc-player-search-content {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-bottom: 8px !important;
}

.mcc-playlist-player #mcc-tab-search {
    padding-bottom: 0 !important;
}

/* Now Playing Knob - WIEDER SICHTBAR */
.mcc-playlist-player .mcc-now-playing-knob {
    display: flex !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: -20px !important;
    width: 50px !important;
    height: 24px !important;
    background: var(--player-bg-secondary) !important;
    border: 1px solid var(--player-border) !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
    color: var(--player-text-muted) !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 20 !important;
    transition: all 0.2s !important;
}

.mcc-playlist-player .mcc-now-playing-knob:hover {
    background: var(--player-bg-hover) !important;
    color: var(--mcc-primary) !important;
}

.mcc-playlist-player .mcc-now-playing-knob.active {
    background: var(--mcc-primary) !important;
    border-color: var(--mcc-primary) !important;
    color: white !important;
}

.mcc-playlist-player .mcc-now-playing-knob svg {
    width: 18px !important;
    height: 18px !important;
    transition: transform 0.2s !important;
}

.mcc-playlist-player .mcc-now-playing-knob.active svg {
    transform: rotate(180deg) !important;
}

/* Light-Mode Knob */
.mcc-playlist-player.light-theme .mcc-now-playing-knob {
    background: #f0f0f0 !important;
    border-color: #ddd !important;
    color: #666 !important;
}

.mcc-playlist-player.light-theme .mcc-now-playing-knob:hover {
    background: #e0e0e0 !important;
    color: var(--mcc-primary) !important;
}

/* ==========================================================================
   v3.57.27 - Mini-Player FINAL FIX
   ========================================================================== */

/* Content Layout - Info links, dann Controls direkt daneben */
body #mcc-mini-player .mcc-mini-player-content,
#mcc-mini-player .mcc-mini-player-content,
.mcc-mini-player .mcc-mini-player-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 16px !important;
    gap: 16px !important;
    background: transparent !important;
}

/* Info Section - fixe Breite */
body #mcc-mini-player .mcc-mini-player-info,
#mcc-mini-player .mcc-mini-player-info,
.mcc-mini-player .mcc-mini-player-info {
    flex: 0 0 auto !important;
    width: 180px !important;
    max-width: 180px !important;
    min-width: 120px !important;
    background: transparent !important;
}

/* Controls - direkt nach Info, linksbündig */
body #mcc-mini-player .mcc-mini-player-controls,
#mcc-mini-player .mcc-mini-player-controls,
.mcc-mini-player .mcc-mini-player-controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    background: transparent !important;
    flex: 0 0 auto !important;
    min-width: auto !important;
}

/* Alle Buttons - kleiner und einheitlich */
body #mcc-mini-player .mcc-mini-player-btn,
#mcc-mini-player .mcc-mini-player-btn,
.mcc-mini-player .mcc-mini-player-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    padding: 6px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body #mcc-mini-player .mcc-mini-player-btn:hover,
#mcc-mini-player .mcc-mini-player-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

body #mcc-mini-player .mcc-mini-player-btn svg,
#mcc-mini-player .mcc-mini-player-btn svg {
    width: 18px !important;
    height: 18px !important;
    color: #fff !important;
    fill: currentColor !important;
}

/* PLAY BUTTON - Wie im Haupt-Player (grün, grösser) */
body #mcc-mini-player .mcc-mini-play-btn,
#mcc-mini-player .mcc-mini-play-btn,
.mcc-mini-player .mcc-mini-play-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    background: var(--mcc-accent, #E8924F) !important;
    border: none !important;
    border-radius: 50% !important;
}

body #mcc-mini-player .mcc-mini-play-btn:hover,
#mcc-mini-player .mcc-mini-play-btn:hover {
    background: var(--mcc-accent-dark, #E47721) !important;
    transform: scale(1.05) !important;
}

body #mcc-mini-player .mcc-mini-play-btn svg,
#mcc-mini-player .mcc-mini-play-btn svg {
    width: 22px !important;
    height: 22px !important;
    color: #111416 !important;
    fill: #111416 !important;
}

/* Expand Button - rechteckig, kein margin-left auf Desktop */
body #mcc-mini-player .mcc-mini-player-expand,
#mcc-mini-player .mcc-mini-player-expand {
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    margin-left: 8px !important;
}

/* Mobile: Controls rechtsbündig */
@media (max-width: 768px) {
    body #mcc-mini-player .mcc-mini-player-info,
    #mcc-mini-player .mcc-mini-player-info {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
    }
    
    body #mcc-mini-player .mcc-mini-player-controls,
    #mcc-mini-player .mcc-mini-player-controls {
        justify-content: flex-end !important;
    }
    
    /* Mobile: Weniger Buttons */
    body #mcc-mini-player #mcc-mini-goto-chord,
    body #mcc-mini-player #mcc-mini-add-playlist,
    body #mcc-mini-player #mcc-mini-prev,
    body #mcc-mini-player #mcc-mini-next {
        display: none !important;
    }
}

/* ==========================================================================
   v3.57.29 - Mobile Queue Toggle Position Fix
   ========================================================================== */

/* Mobile: Queue Toggle kleiner und besser positioniert */
@media (max-width: 768px) {
    .mcc-playlist-player .mcc-queue-toggle {
        padding: 4px 8px !important;
        font-size: 10px !important;
        position: absolute !important;
        right: 8px !important;
        top: 8px !important;
        z-index: 10 !important;
    }
    
    .mcc-playlist-player .mcc-queue-toggle span:not(#mcc-queue-count-badge) {
        display: none !important;
    }
    
    .mcc-playlist-player .mcc-queue-toggle svg {
        width: 14px !important;
        height: 14px !important;
    }
    
    /* Mode Section auf Mobile - relative für Queue absolute Positionierung */
    .mcc-playlist-player .mcc-player-mode-section {
        position: relative !important;
        padding: 8px 55px 8px 8px !important; /* Mehr Platz rechts für Queue-Button */
    }
    
    .mcc-playlist-player .mcc-mode-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
        gap: 4px !important;
    }
    
    .mcc-playlist-player .mcc-mode-btn svg {
        width: 14px !important;
        height: 14px !important;
    }
    
    .mcc-playlist-player .mcc-mode-btn span {
        display: none !important; /* Text ausblenden auf Mobile */
    }
}

/* ==========================================================================
   v3.57.33 - Now Playing Songinfo Tab
   ========================================================================== */

.mcc-now-playing-songinfo {
    width: 100% !important;
    max-width: 640px !important;
    padding: 0 !important;
}

.mcc-songinfo-loading {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px !important;
    color: var(--player-text-muted) !important;
    gap: 12px !important;
}

.mcc-songinfo-content {
    background: var(--player-bg-card) !important;
    border-radius: var(--mcc-radius-md) !important;
    padding: 20px !important;
    color: var(--player-text) !important;
}

.mcc-songinfo-content .mcc-song-info-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--player-border) !important;
}

.mcc-songinfo-content .mcc-song-info-icon {
    width: 48px !important;
    height: 48px !important;
    background: linear-gradient(135deg, var(--mcc-primary), var(--mcc-accent)) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.mcc-songinfo-content .mcc-song-info-icon svg {
    width: 24px !important;
    height: 24px !important;
    fill: white !important;
}

.mcc-songinfo-content .mcc-song-info-title-wrap h3 {
    margin: 0 0 4px 0 !important;
    font-family: var(--mcc-font-title) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--player-text) !important;
}

.mcc-songinfo-content .mcc-song-info-title-wrap p {
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--player-text-muted) !important;
}

.mcc-songinfo-content .mcc-song-info-section {
    margin-bottom: 16px !important;
}

.mcc-songinfo-content .mcc-song-info-section:last-child {
    margin-bottom: 0 !important;
}

.mcc-songinfo-content .mcc-song-info-section h4 {
    margin: 0 0 8px 0 !important;
    font-family: var(--mcc-font-title) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--mcc-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.mcc-songinfo-content .mcc-song-info-section p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--player-text) !important;
}

.mcc-songinfo-content .mcc-song-info-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.mcc-songinfo-content .mcc-song-info-tag {
    background: var(--player-bg-hover) !important;
    color: var(--player-text) !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.mcc-songinfo-content .mcc-song-info-empty {
    text-align: center !important;
    padding: 40px 20px !important;
    color: var(--player-text-muted) !important;
}

.mcc-songinfo-content .mcc-song-info-empty svg {
    width: 48px !important;
    height: 48px !important;
    fill: var(--player-text-muted) !important;
    margin-bottom: 12px !important;
    opacity: 0.5 !important;
}

/* v3.57.37 - Erweiterte Songinfo Styles */
.mcc-songinfo-content .mcc-song-info-summary {
    font-size: 14px !important;
    color: var(--player-text-muted) !important;
    font-style: italic !important;
    margin-bottom: 16px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--player-border) !important;
}

.mcc-songinfo-content ul {
    margin: 8px 0 !important;
    padding-left: 20px !important;
    list-style: disc !important;
}

.mcc-songinfo-content ul li {
    margin-bottom: 4px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--player-text) !important;
}

.mcc-songinfo-content .mcc-song-info-warning {
    background: rgba(255, 100, 100, 0.1) !important;
    border: 1px solid rgba(255, 100, 100, 0.3) !important;
    border-radius: var(--mcc-radius-sm) !important;
    padding: 12px !important;
}

.mcc-songinfo-content .mcc-song-info-warning h4 {
    color: #ff6b6b !important;
}

/* ==========================================================================
   v3.57.38 - Player Song Info mit Tabs (wie Original)
   ========================================================================== */

/* Songinfo Container */
.mcc-now-playing-songinfo {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Header mit Song-Cover und Titel */
.mcc-si-song-header {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px !important;
    background: linear-gradient(135deg, var(--mcc-primary) 0%, #00B894 100%) !important;
    border-radius: var(--mcc-radius-md) !important;
    margin-bottom: 0 !important;
}

.mcc-si-cover {
    width: 60px !important;
    height: 60px !important;
    background: rgba(255,255,255,0.2) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.mcc-si-cover svg {
    width: 32px !important;
    height: 32px !important;
    fill: white !important;
}

.mcc-si-song-text {
    flex: 1 !important;
    min-width: 0 !important;
}

.mcc-si-song-text h3 {
    margin: 0 0 4px 0 !important;
    font-family: var(--mcc-font-title) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: white !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mcc-si-song-text p {
    margin: 0 !important;
    font-size: 14px !important;
    color: rgba(255,255,255,0.85) !important;
}

/* Tabs Wrapper */
.mcc-si-tabs-wrapper {
    background: var(--player-bg-secondary) !important;
    border-bottom: 2px solid var(--player-border) !important;
}

.mcc-si-tabs {
    display: flex !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.mcc-si-tabs::-webkit-scrollbar {
    display: none !important;
}

.mcc-si-tab {
    flex: 1 !important;
    min-width: 80px !important;
    padding: 12px 10px !important;
    border: none !important;
    background: transparent !important;
    color: var(--player-text-muted) !important;
    font-family: var(--mcc-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
    border-bottom: 3px solid transparent !important;
}

.mcc-si-tab svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
}

.mcc-si-tab:hover {
    background: var(--player-bg-hover) !important;
    color: var(--player-text) !important;
}

.mcc-si-tab.active {
    color: var(--mcc-primary) !important;
    background: var(--player-bg-card) !important;
    border-bottom-color: var(--mcc-primary) !important;
}

/* Tab Panels */
.mcc-si-tab-panels {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px !important;
    padding-bottom: 160px !important; /* Platz für Playbar */
}

.mcc-si-tab-panel {
    display: none !important;
}

.mcc-si-tab-panel.active {
    display: block !important;
    animation: siFadeIn 0.3s ease !important;
}

@keyframes siFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Cards */
.mcc-si-card {
    background: var(--player-bg-card) !important;
    border-radius: var(--mcc-radius-md) !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    border: 1px solid var(--player-border) !important;
}

.mcc-si-card:last-child {
    margin-bottom: 0 !important;
}

.mcc-si-card h4 {
    margin: 0 0 12px 0 !important;
    font-family: var(--mcc-font-title) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--mcc-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.mcc-si-card h4 svg {
    width: 18px !important;
    height: 18px !important;
    fill: var(--mcc-primary) !important;
}

.mcc-si-card p {
    margin: 0 0 8px 0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--player-text) !important;
}

.mcc-si-card p:last-child {
    margin-bottom: 0 !important;
}

.mcc-si-card strong {
    color: var(--player-text) !important;
}

/* Summary */
.mcc-si-summary {
    font-style: italic !important;
    color: var(--player-text-muted) !important;
}

/* Tech Grid */
.mcc-si-tech-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
    gap: 12px !important;
}

.mcc-si-tech-item {
    text-align: center !important;
    padding: 14px 10px !important;
    background: var(--player-bg-hover) !important;
    border-radius: var(--mcc-radius-sm) !important;
    border: 1px solid var(--player-border) !important;
    transition: all 0.2s ease !important;
}

.mcc-si-tech-item:hover {
    border-color: var(--mcc-primary) !important;
    background: var(--player-bg-card) !important;
}

.mcc-si-tech-icon {
    font-size: 24px !important;
    margin-bottom: 6px !important;
}

.mcc-si-tech-value {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--mcc-primary) !important;
    margin-bottom: 4px !important;
}

.mcc-si-tech-label {
    font-size: 11px !important;
    color: var(--player-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.mcc-si-stars {
    color: #ffc107 !important;
    letter-spacing: 2px !important;
}

/* Vocal Range */
.mcc-si-vocal-range {
    background: linear-gradient(135deg, var(--mcc-primary) 0%, #00B894 100%) !important;
    color: white !important;
    text-align: center !important;
}

.mcc-si-vocal-notes {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

.mcc-si-note {
    font-size: 20px !important;
    font-weight: 700 !important;
    padding: 8px 14px !important;
    background: rgba(255,255,255,0.2) !important;
    border-radius: 8px !important;
}

.mcc-si-arrow {
    font-size: 18px !important;
    opacity: 0.8 !important;
}

.mcc-si-vocal-desc {
    margin-top: 10px !important;
    font-size: 13px !important;
    opacity: 0.9 !important;
    color: white !important;
}

/* Tags */
.mcc-si-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.mcc-si-tag {
    display: inline-block !important;
    padding: 6px 12px !important;
    background: var(--player-bg-hover) !important;
    border: 1px solid var(--player-border) !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    color: var(--player-text) !important;
    transition: all 0.2s ease !important;
}

.mcc-si-tag:hover {
    background: var(--mcc-primary) !important;
    color: white !important;
    border-color: var(--mcc-primary) !important;
}

/* Similar Songs */
.mcc-si-similar-item {
    padding: 10px !important;
    background: var(--player-bg-hover) !important;
    border-radius: var(--mcc-radius-sm) !important;
    margin-bottom: 8px !important;
    font-size: 13px !important;
    color: var(--player-text) !important;
}

.mcc-si-similar-item span {
    color: var(--player-text-muted) !important;
    font-size: 12px !important;
}

/* Lists */
.mcc-si-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mcc-si-list li {
    padding: 8px 0 8px 24px !important;
    position: relative !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--player-text) !important;
    border-bottom: 1px solid var(--player-border) !important;
}

.mcc-si-list li:last-child {
    border-bottom: none !important;
}

.mcc-si-list li::before {
    content: '•' !important;
    position: absolute !important;
    left: 8px !important;
    color: var(--mcc-primary) !important;
    font-weight: bold !important;
}

/* Badges */
.mcc-si-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

.mcc-si-badge {
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: var(--player-bg-hover) !important;
    color: var(--player-text-muted) !important;
    border: 1px solid var(--player-border) !important;
}

.mcc-si-badge.active {
    background: var(--mcc-accent) !important;
    color: white !important;
    border-color: var(--mcc-accent) !important;
}

/* Highlight */
.mcc-si-highlight {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--mcc-primary) !important;
}

/* Year Card */
.mcc-si-year-card {
    text-align: center !important;
    background: linear-gradient(135deg, var(--player-bg-card) 0%, var(--player-bg-hover) 100%) !important;
}

.mcc-si-year {
    font-size: 48px !important;
    font-weight: 700 !important;
    color: var(--mcc-primary) !important;
    line-height: 1 !important;
}

.mcc-si-year-label {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--player-text-muted) !important;
    margin-top: 8px !important;
}

/* Variations */
.mcc-si-variations {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.mcc-si-variation {
    padding: 12px !important;
    background: var(--player-bg-hover) !important;
    border-radius: var(--mcc-radius-sm) !important;
    border-left: 3px solid var(--mcc-primary) !important;
}

.mcc-si-var-label {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--player-text) !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.mcc-si-variation p {
    margin: 0 !important;
    font-size: 13px !important;
    color: var(--player-text-muted) !important;
}

/* Scenarios */
.mcc-si-scenarios {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.mcc-si-scenario {
    padding: 10px 12px !important;
    background: var(--player-bg-hover) !important;
    border-radius: var(--mcc-radius-sm) !important;
    font-size: 13px !important;
    color: var(--player-text) !important;
}

/* Empty State */
.mcc-si-empty {
    text-align: center !important;
    padding: 40px 20px !important;
    color: var(--player-text-muted) !important;
    font-size: 14px !important;
}

/* ==========================================================================
   v3.57.39 - Quiz Styles für Player Songinfo
   ========================================================================== */

.mcc-si-quiz-container {
    padding: 0 !important;
}

.mcc-si-quiz-progress {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.mcc-si-quiz-progress-bar {
    flex: 1 !important;
    height: 8px !important;
    background: var(--player-bg-hover) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

.mcc-si-quiz-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--mcc-primary), var(--mcc-accent)) !important;
    border-radius: 4px !important;
    transition: width 0.3s ease !important;
}

.mcc-si-quiz-progress-text {
    font-size: 12px !important;
    color: var(--player-text-muted) !important;
    white-space: nowrap !important;
}

.mcc-si-quiz-card {
    padding: 20px !important;
}

.mcc-si-quiz-question {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--player-text) !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
}

.mcc-si-quiz-q-num {
    display: block !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--mcc-primary) !important;
    margin-bottom: 8px !important;
    font-weight: 700 !important;
}

.mcc-si-quiz-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.mcc-si-quiz-option {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    background: var(--player-bg-hover) !important;
    border: 2px solid var(--player-border) !important;
    border-radius: var(--mcc-radius-md) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: left !important;
    width: 100% !important;
}

.mcc-si-quiz-option:hover:not(.disabled) {
    border-color: var(--mcc-primary) !important;
    background: var(--player-bg-card) !important;
}

.mcc-si-quiz-option.disabled {
    cursor: default !important;
}

.mcc-si-quiz-option.correct {
    background: rgba(232, 146, 79, 0.15) !important;
    border-color: var(--mcc-accent) !important;
}

.mcc-si-quiz-option.wrong {
    background: rgba(255, 100, 100, 0.15) !important;
    border-color: #ff6b6b !important;
}

.mcc-si-quiz-option-letter {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--player-bg-card) !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--mcc-primary) !important;
    flex-shrink: 0 !important;
}

.mcc-si-quiz-option.correct .mcc-si-quiz-option-letter {
    background: var(--mcc-accent) !important;
    color: white !important;
}

.mcc-si-quiz-option.wrong .mcc-si-quiz-option-letter {
    background: #ff6b6b !important;
    color: white !important;
}

.mcc-si-quiz-option-text {
    font-size: 14px !important;
    color: var(--player-text) !important;
    line-height: 1.4 !important;
}

.mcc-si-quiz-feedback {
    margin-top: 16px !important;
    padding: 14px !important;
    background: var(--player-bg-hover) !important;
    border-radius: var(--mcc-radius-sm) !important;
    border-left: 4px solid var(--mcc-primary) !important;
}

.mcc-si-quiz-feedback-icon {
    font-size: 20px !important;
    margin-bottom: 8px !important;
}

.mcc-si-quiz-feedback p {
    margin: 0 !important;
    font-size: 13px !important;
    color: var(--player-text) !important;
    line-height: 1.5 !important;
}

.mcc-si-quiz-nav {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

.mcc-si-quiz-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 12px 20px !important;
    border: none !important;
    border-radius: var(--mcc-radius-md) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.mcc-si-quiz-btn svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
}

.mcc-si-quiz-prev {
    background: var(--player-bg-hover) !important;
    color: var(--player-text) !important;
}

.mcc-si-quiz-prev:hover:not(:disabled) {
    background: var(--player-bg-card) !important;
}

.mcc-si-quiz-prev:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

.mcc-si-quiz-next {
    background: var(--mcc-primary) !important;
    color: white !important;
    margin-left: auto !important;
}

.mcc-si-quiz-next:hover {
    background: #1F737A !important;
}

.mcc-si-quiz-result {
    text-align: center !important;
    padding: 40px 20px !important;
}

.mcc-si-quiz-result-icon {
    font-size: 64px !important;
    margin-bottom: 16px !important;
}

.mcc-si-quiz-result h4 {
    margin: 0 0 12px 0 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--player-text) !important;
}

.mcc-si-quiz-score {
    font-size: 16px !important;
    color: var(--player-text-muted) !important;
    margin-bottom: 24px !important;
}

.mcc-si-quiz-score span {
    font-weight: 700 !important;
    color: var(--mcc-primary) !important;
    font-size: 20px !important;
}

.mcc-si-quiz-restart {
    background: var(--mcc-accent) !important;
    color: white !important;
    padding: 14px 28px !important;
    font-size: 16px !important;
}

.mcc-si-quiz-restart:hover {
    background: #F0700E !important;
}

/* ==========================================================================
   v3.57.42 - Songinfo Generierungs-Hinweis & Audioplayer Button
   ========================================================================== */

/* Songinfo Loading mit Generierungs-Hinweis */
.mcc-songinfo-loading {
    flex-direction: column !important;
    gap: 12px !important;
}

.mcc-songinfo-loading-text {
    font-size: 14px !important;
    color: var(--player-text) !important;
}

.mcc-songinfo-generating-hint {
    text-align: center !important;
}

.mcc-songinfo-generating-hint small {
    display: block !important;
    padding: 12px 16px !important;
    background: rgba(61, 124, 133, 0.1) !important;
    border: 1px solid rgba(61, 124, 133, 0.3) !important;
    border-radius: var(--mcc-radius-md) !important;
    color: var(--mcc-primary) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Audioplayer Button in Chordsheet Toolbar - same style as search bar button */
.mcc-toolbar-audioplayer {
    display: flex !important;
    align-items: center !important;
}

.mcc-toolbar-audioplayer-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    margin-right: 8px !important;
    box-shadow: 0 2px 8px rgba(61, 124, 133, 0.3) !important;
}

.mcc-toolbar-audioplayer-btn:hover {
    background: linear-gradient(135deg, #438B93 0%, #E6A168 100%) !important;
    transform: translateY(-2px) scale(1.08) !important;
    box-shadow: 0 4px 14px rgba(61, 124, 133, 0.45) !important;
}

.mcc-toolbar-audioplayer-btn svg {
    width: 18px !important;
    height: 18px !important;
    fill: white !important;
}

/* ========================================
   NOTEN+ / ZUSATZMATERIAL TAB SYSTEM
   ======================================== */

/* Tab Navigation */
.mcc-content-tabs {
    display: flex;
    gap: 10px;
    padding: 12px 15px;
    background: var(--mcc-light);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    align-items: center;
    position: relative;
    z-index: auto;
}

/* Tab Text: Full/Short Toggle - Desktop: nur Full zeigen */
.mcc-content-tabs .mcc-content-tab .mcc-tab-short {
    display: none !important;
}

.mcc-content-tabs .mcc-content-tab .mcc-tab-full {
    display: inline !important;
}

/* More Button auf Desktop verstecken */
.mcc-content-tabs .mcc-more-btn {
    display: none;
}

/* ===== SCHMALER DESKTOP: 769px - 1100px - More Button zeigen ===== */
@media (min-width: 769px) and (max-width: 1100px) {
    /* Action Buttons verstecken - werden im More Menu angezeigt */
    .mcc-tabs-actions {
        display: none !important;
    }
    
    /* More Button sichtbar */
    .mcc-content-tabs .mcc-more-btn {
        display: flex !important;
        width: 36px;
        height: 36px;
        min-width: 36px;
        align-items: center;
        justify-content: center;
        background: var(--mcc-gray-100);
        border: none;
        border-radius: 8px;
        color: var(--mcc-gray-600);
        cursor: pointer;
        flex-shrink: 0;
        padding: 0;
    }
    
    .mcc-content-tabs .mcc-more-btn:hover {
        background: var(--mcc-gray-200);
        color: var(--mcc-primary);
    }
    
    /* Stems und Play Along Buttons: nur Icon, kein Text */
    .mcc-stems-tab-btn .mcc-stems-text,
    .mcc-play-along-tab-btn .mcc-play-along-text {
        display: none;
    }
    
    .mcc-stems-tab-btn,
    .mcc-play-along-tab-btn {
        padding: 8px 12px;
    }
}

/* Mobile: Abkürzungen und More Button */
@media (max-width: 768px) {
    .mcc-content-tabs {
        gap: 6px;
        padding: 10px 12px;
    }
    
    /* Mobile: Desktop-Labels verstecken, Mobile-Labels anzeigen */
    .mcc-content-tabs .mcc-content-tab .mcc-tab-full {
        display: none !important;
    }
    
    .mcc-content-tabs .mcc-content-tab .mcc-tab-short {
        display: inline !important;
        font-size: 13px;
        font-weight: 500;
    }
    
    /* Content-Tab Buttons mit Icon + Text auf Mobile */
    .mcc-content-tabs .mcc-content-tab {
        width: auto;
        height: 42px;
        min-width: auto;
        padding: 0 12px;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        font-size: 13px;
        gap: 6px; /* Gap zwischen Icon und Text */
    }
    
    .mcc-content-tabs .mcc-content-tab svg {
        width: 20px;
        height: 20px;
    }
    
    /* More Button sichtbar auf Mobile */
    .mcc-content-tabs .mcc-more-btn {
        display: flex !important;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        align-items: center;
        justify-content: center;
        background: var(--mcc-gray-100);
        border: none;
        border-radius: 10px;
        color: var(--mcc-gray-600);
        cursor: pointer;
        flex-shrink: 0;
        padding: 0;
    }
    
    .mcc-content-tabs .mcc-more-btn:hover {
        background: var(--mcc-gray-200);
    }
    
    /* Audio Button quadratisch auf Mobile - sehr spezifisch */
    .mcc-content-tabs .mcc-audio-tab,
    .mcc-content-tabs #mcc-tabs-audio-btn,
    #mcc-content-tabs .mcc-audio-tab,
    #mcc-content-tabs #mcc-tabs-audio-btn,
    .mcc-content-tab.mcc-audio-tab {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    
    /* Stems Button quadratisch auf Mobile */
    .mcc-content-tabs .mcc-stems-tab-btn,
    #mcc-content-tabs .mcc-stems-tab-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
    }
    
    .mcc-content-tabs .mcc-stems-tab-btn .mcc-stems-text,
    #mcc-content-tabs .mcc-stems-tab-btn .mcc-stems-text {
        display: none !important;
    }
    
    /* Mobile: Stems und Play Along Buttons komplett verstecken (kommen ins More-Menü) */
    .mcc-content-tabs .mcc-stems-tab-btn,
    #mcc-content-tabs .mcc-stems-tab-btn,
    .mcc-tabs-stems-btn,
    #mcc-tabs-stems-btn,
    .mcc-content-tabs .mcc-play-along-tab-btn,
    #mcc-content-tabs .mcc-play-along-tab-btn,
    .mcc-play-along-tab-btn,
    #mcc-tabs-play-along-btn {
        display: none !important;
    }
}

/* Bundle Purchase Header - Positioned after tabs */
.mcc-bundle-purchase-header {
    background: linear-gradient(135deg, #FAF8F3 0%, #e9ecef 100%);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 12px 15px;
}

.mcc-purchase-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.mcc-purchase-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    min-width: 200px;
}

.mcc-purchase-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.mcc-purchase-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.mcc-purchase-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.mcc-purchase-title {
    font-weight: 700;
    font-size: 14px;
    font-family: 'Akko', sans-serif;
}

.mcc-purchase-desc {
    font-size: 12px;
    opacity: 0.9;
    font-family: 'Akko', sans-serif;
}

/* Bundle Button - Green */
.mcc-purchase-bundle {
    background: linear-gradient(135deg, #E8924F 0%, #E47721 100%);
    color:#111416;
}

.mcc-purchase-bundle:hover {
    background: linear-gradient(135deg, #E47721 0%, #C86618 100%);
}

/* Single Song Button - Teal */
.mcc-purchase-single {
    background: linear-gradient(135deg, #3D7C85 0%, #1F737A 100%);
    color: #fff;
}

.mcc-purchase-single:hover {
    background: linear-gradient(135deg, #1F737A 0%, #244A4F 100%);
}

/* Abo Button - Gold */
.mcc-purchase-abo {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #333;
}

.mcc-purchase-abo:hover {
    background: linear-gradient(135deg, #FFC200 0%, #FF8C00 100%);
    color: #333;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mcc-purchase-options {
        flex-direction: column;
    }
    
    .mcc-purchase-btn {
        min-width: unset;
        width: 100%;
        justify-content: flex-start;
    }
}

/* Spacer schiebt Audio-Button nach rechts */
.mcc-tabs-spacer {
    flex: 1;
}

/* ===== Tabs Action Buttons ===== */
.mcc-tabs-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mcc-action-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--mcc-gray-500);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mcc-action-btn:hover {
    background: var(--mcc-gray-100);
    color: var(--mcc-primary);
}

.mcc-action-btn.is-favorite {
    color: #e74c3c;
}

.mcc-action-btn.is-favorite .mcc-heart-empty {
    display: none;
}

.mcc-action-btn.is-favorite .mcc-heart-filled {
    display: block !important;
}

/* Tabs Playlist Dropdown Wrapper */
.mcc-tabs-playlist-wrapper {
    position: relative;
}

.mcc-tabs-playlist-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    background: var(--mcc-white);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--mcc-gray-200);
    overflow: hidden;
    z-index: 1000;
    min-width: 200px;
    display: none;
}

.mcc-tabs-playlist-dropdown.visible {
    display: block;
    animation: mcc-dropdown-in 0.15s ease;
}

@keyframes mcc-dropdown-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.mcc-tabs-playlist-dropdown .mcc-playlist-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--mcc-gray-700);
    font-family: var(--mcc-font-body);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

.mcc-tabs-playlist-dropdown .mcc-playlist-dropdown-item:hover {
    background: var(--mcc-gray-50);
}

.mcc-tabs-playlist-dropdown .mcc-playlist-dropdown-item:first-child {
    border-bottom: 1px solid var(--mcc-gray-100);
}

.mcc-tabs-playlist-dropdown .mcc-playlist-dropdown-item svg {
    color: var(--mcc-primary);
    flex-shrink: 0;
}

/* More Button (Mobile only) */
.mcc-more-btn {
    display: none;
}

/* ===== Bottom Sheet ===== */
.mcc-bottom-sheet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}

.mcc-sheet-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    animation: mcc-fade-in 0.2s ease;
}

.mcc-sheet-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--mcc-white);
    border-radius: 20px 20px 0 0;
    padding: 12px 0 24px;
    max-height: 80vh;
    overflow-y: auto;
    animation: mcc-slide-up 0.3s ease;
}

/* Desktop (schmaler Bildschirm): Sheet als zentriertes Modal */
@media (min-width: 769px) {
    .mcc-sheet-content {
        position: absolute;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: 320px;
        max-width: 90vw;
        border-radius: 16px;
        padding: 16px 0 20px;
        animation: mcc-scale-in 0.2s ease;
    }
    
    .mcc-sheet-handle {
        display: none;
    }
}

@keyframes mcc-scale-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.mcc-sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--mcc-gray-300);
    border-radius: 2px;
    margin: 0 auto 12px;
}

.mcc-sheet-header {
    padding: 8px 20px 16px;
    border-bottom: 1px solid var(--mcc-gray-100);
}

.mcc-sheet-title {
    font-family: var(--mcc-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mcc-gray-800);
}

.mcc-sheet-actions {
    padding: 8px 0;
}

.mcc-sheet-action {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 14px 20px;
    background: transparent;
    border: none;
    color: var(--mcc-gray-700);
    font-family: var(--mcc-font-body);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.mcc-sheet-action:hover {
    background: var(--mcc-gray-50);
}

.mcc-sheet-action:active {
    background: var(--mcc-gray-100);
}

.mcc-sheet-action svg {
    color: var(--mcc-gray-500);
    flex-shrink: 0;
}

.mcc-sheet-action.is-favorite {
    color: #e74c3c;
}

.mcc-sheet-action.is-favorite svg {
    color: #e74c3c;
}

.mcc-sheet-action.is-favorite .mcc-heart-empty {
    display: none;
}

.mcc-sheet-action.is-favorite .mcc-heart-filled {
    display: block !important;
}

@keyframes mcc-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mcc-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ===== Song Info Modal ===== */
/* Song Info Modal - Verwende das originale CSS aus song-info.css */
/* Keine Overrides hier - das Modal hat sein eigenes Styling */

/* Desktop only class */
.mcc-desktop-only {
    display: inline;
}

/* Stems Button - separat styled */
.mcc-tabs-stems-btn {
    width: 36px;
    height: 36px;
    display: none; /* JS setzt display:flex wenn YouTube vorhanden */
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--mcc-gray-500);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mcc-tabs-stems-btn:hover {
    background: var(--mcc-gray-100);
    color: var(--mcc-primary);
}

/* Prominent Stems Tab Button - Orange */
.mcc-stems-tab-btn {
    display: none; /* JS setzt display:flex wenn YouTube vorhanden */
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #FF8C00, #FF6B00);
    border: none;
    border-radius: 10px;
    color: white;
    font-family: var(--mcc-font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.mcc-stems-tab-btn:hover {
    background: linear-gradient(135deg, #FF6B00, #E65C00);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.4);
}

.mcc-stems-tab-btn svg {
    flex-shrink: 0;
}

.mcc-stems-text {
    display: inline;
}

/* ===== Mobile: Hide action buttons, show more button ===== */
@media (max-width: 768px) {
    .mcc-tabs-actions {
        display: none;
    }
    
    .mcc-more-btn {
        display: flex;
        width: 40px;
        height: 40px;
    }
    
    .mcc-desktop-only {
        display: none !important;
    }
    
    /* Stems Button Mobile: quadratisch wie Audio */
    .mcc-stems-tab-btn {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .mcc-stems-tab-btn .mcc-stems-text {
        display: none !important;
    }
    
    /* Audio tab: nur Icon, kein Text - quadratisch */
    .mcc-audio-tab,
    .mcc-content-tab.mcc-audio-tab,
    #mcc-tabs-audio-btn {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .mcc-audio-tab .mcc-tab-text,
    .mcc-audio-tab .mcc-desktop-only,
    .mcc-audio-tab span,
    #mcc-tabs-audio-btn .mcc-tab-text,
    #mcc-tabs-audio-btn .mcc-desktop-only,
    #mcc-tabs-audio-btn span {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }
    
    /* Audio Button Farbe auf Mobile beibehalten */
    .mcc-audio-tab,
    #mcc-tabs-audio-btn {
        background: linear-gradient(135deg, #3D7C85, #E8924F) !important;
        color: white !important;
    }
    
    .mcc-audio-tab svg,
    #mcc-tabs-audio-btn svg {
        fill: white !important;
    }
}

/* Audio Tab Button */
.mcc-audio-tab {
    background: linear-gradient(135deg, #3D7C85, #E8924F) !important;
    color: white !important;
    margin-left: 0;
    border-radius: 10px !important;
    padding: 8px 14px !important;
}

.mcc-audio-tab:hover {
    box-shadow: 0 3px 12px rgba(61,124,133,0.4) !important;
    transform: translateY(-1px);
}

.mcc-audio-tab svg {
    fill: white !important;
    stroke: none !important;
}

.mcc-content-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    background: white;
    color: #666;
    font-family: 'Akko', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Desktop: Full-Text anzeigen, Short-Text verstecken */
@media (min-width: 769px) {
    .mcc-content-tab .mcc-tab-full {
        display: inline !important;
    }
    
    .mcc-content-tab .mcc-tab-short {
        display: none !important;
    }
}

/* Premium-Tab Stern gefüllt */
.mcc-content-tab[data-tab="premium"] svg {
    fill: currentColor;
    stroke: none;
}

.mcc-content-tab[data-tab="premium"].active svg {
    fill: white !important;
    stroke: none !important;
}

.mcc-content-tab:hover {
    background: white;
    color: #3D7C85;
    box-shadow: 0 2px 8px rgba(61,124,133,0.15);
}

.mcc-content-tab.active svg {
    stroke: white !important;
    fill: none !important;
}

.mcc-content-tab svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    transition: all 0.25s ease;
}

/* Tab Badge - Strong selectors for BuddyBoss override */
.mcc-content-tabs .mcc-content-tab .mcc-tab-badge,
.mcc-tab-badge,
#mcc-noten-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    border-radius: 10px !important;
    background: #E8924F !important;
    background-color: #E8924F !important;
    color:#111416 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    margin-left: 4px !important;
    line-height: 1 !important;
}

.mcc-content-tabs .mcc-content-tab.active .mcc-tab-badge,
.mcc-content-tab.active .mcc-tab-badge,
.mcc-content-tab.active #mcc-noten-badge {
    background: white !important;
    background-color: white !important;
    color: #3D7C85 !important;
}

/* «Material vorhanden» zeigt allein das Zeichen an der Ecke — der
   Reiter selbst bleibt ein Reiter. */

/* Inactive/Disabled state when no content */
.mcc-content-tab.no-content {
    opacity: 0.5;
}

.mcc-content-tab.has-content .mcc-tab-badge {
    display: inline-flex !important;
}

/* Tab Content */
.mcc-tab-content {
    display: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.mcc-tab-content.active {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Noten+ Container */
.mcc-noten-container {
    padding: 20px;
    min-height: 300px;
}

/* Empty State */
.mcc-noten-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.mcc-noten-empty .mcc-empty-icon {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.mcc-noten-empty h3 {
    font-family: 'Akko', sans-serif;
    font-size: 18px;
    color: #666;
    margin: 0 0 10px 0;
}

.mcc-noten-empty p {
    font-size: 14px;
    margin: 0;
}

/* Material Sections */
.mcc-material-section {
    margin-bottom: 25px;
}

.mcc-material-section-title {
    font-family: 'Akko', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--mcc-light);
}

.mcc-material-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

/* Material Item Card - Kachel-Layout */
.mcc-material-item {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.25s ease;
    border: 1px solid rgba(0,0,0,0.06);
}

.mcc-material-item:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}

/* Thumbnail / Preview Area */
.mcc-material-thumbnail {
    position: relative;
    width: 100%;
    height: 140px;
    background: linear-gradient(135deg, #FAF8F3 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}

.mcc-material-thumbnail:hover .mcc-thumbnail-overlay {
    opacity: 1;
}

.mcc-thumbnail-overlay {
    position: absolute;
    inset: 0;
    background: rgba(61, 124, 133, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mcc-thumbnail-overlay span {
    color: white;
    font-size: 14px;
    font-weight: 600;
}

/* Thumbnail Image (for PDFs, images) */
.mcc-material-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mcc-material-thumbnail canvas {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%;
    max-height: none; /* Höhe nicht beschränken */
    z-index: 3;
}

/* Server-generierte PDF-Thumbnails */
.mcc-material-thumbnail .mcc-pdf-thumb-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    z-index: 3;
}

/* Placeholder Icon for non-previewable files */
.mcc-thumbnail-icon {
    font-size: 48px;
    opacity: 0.8;
    position: absolute;
    z-index: 1;
    transition: opacity 0.3s ease;
}

/* Verstecke Icon wenn Canvas geladen ist */
.mcc-material-thumbnail canvas[data-rendered="true"] ~ .mcc-thumbnail-icon,
.mcc-material-thumbnail canvas:not([style*="display: none"]) ~ .mcc-thumbnail-icon {
    opacity: 0;
    pointer-events: none;
}

.mcc-thumbnail-loading {
    transition: opacity 0.3s ease;
}

/* Type-specific thumbnail backgrounds */
.mcc-material-item.type-musicxml .mcc-material-thumbnail {
    background: white;
}

.mcc-material-item.type-pdf .mcc-material-thumbnail {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.mcc-material-item.type-word .mcc-material-thumbnail {
    background: linear-gradient(135deg, #e3f2fd 0%, #90caf9 100%);
}

.mcc-material-item.type-powerpoint .mcc-material-thumbnail {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
}

.mcc-material-item.type-excel .mcc-material-thumbnail {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

.mcc-material-item.type-idea .mcc-material-thumbnail {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
}

.mcc-material-item.type-video .mcc-material-thumbnail {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
}

.mcc-material-item.type-audio .mcc-material-thumbnail {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

/* Premium Material Lock Overlay */
.mcc-premium-lock-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.mcc-material-item.premium-locked .mcc-material-thumbnail {
    position: relative;
}

.mcc-material-item.premium-locked .mcc-material-thumbnail::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,193,7,0.1) 0%, rgba(255,152,0,0.1) 100%);
    pointer-events: none;
    z-index: 2; /* Unter Canvas (z-index: 3) */
}

/* Premium Badges - gut lesbar */
/* Premium Badges - BuddyBoss Override mit höchster Spezifität */
.mcc-material-item .mcc-badge,
.mcc-material-meta .mcc-badge,
.mcc-badge.mcc-badge-premium,
.mcc-badge.mcc-badge-free,
.mcc-badge.mcc-badge-owned,
body .mcc-badge,
#mcc-container .mcc-badge,
.mcc-material-item .mcc-material-meta .mcc-badge {
    display: inline-block !important;
    padding: 5px 14px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    font-family: 'Akko', -apple-system, BlinkMacSystemFont, sans-serif !important;
    border: none !important;
    text-decoration: none !important;
    margin: 0 !important;
    height: auto !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
}

body .mcc-material-item .mcc-badge-premium,
body .mcc-badge.mcc-badge-premium,
#mcc-container .mcc-badge-premium {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%) !important;
    color: #000 !important;
    text-shadow: none !important;
    box-shadow: 0 2px 4px rgba(255,152,0,0.3) !important;
}

body .mcc-material-item .mcc-badge-free,
body .mcc-badge.mcc-badge-free,
#mcc-container .mcc-badge-free {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(76,175,80,0.3) !important;
}

body .mcc-material-item .mcc-badge-owned,
body .mcc-badge.mcc-badge-owned,
#mcc-container .mcc-badge-owned {
    background: linear-gradient(135deg, #3D7C85 0%, #2E5F65 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(61,124,133,0.3) !important;
}

/* Preview Status Badge im Modal */
.mcc-preview-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
}

/* Premium Material Item Styling */
.mcc-material-item.premium-unlocked .mcc-material-actions {
    background: linear-gradient(135deg, rgba(61,124,133,0.05) 0%, rgba(232,146,79,0.05) 100%);
}

.mcc-material-item.premium-unlocked .mcc-material-btn {
    color: #3D7C85;
}

.mcc-material-item.premium-unlocked .mcc-material-btn:hover {
    background: #3D7C85;
    color: white;
}

/* OSMD Container für MusicXML Thumbnails */
.mcc-osmd-container {
    background: white;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 140px;
}

.mcc-material-thumbnail .mcc-osmd-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 140px;
    z-index: 3;
    overflow: hidden;
    background: white;
}

/* OSMD SVG - JS setzt die Transform */
.mcc-osmd-container svg,
.mcc-osmd-container > div {
    /* Transform wird von JS gesetzt */
}

/* Word Text Preview */
.mcc-docx-preview {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: white;
}

.mcc-text-preview {
    font-size: 9px;
    line-height: 1.4;
    color: #444;
    text-align: left;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    font-family: 'Georgia', serif;
}

/* PDF Canvas */
.mcc-pdf-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    background: white;
}

.mcc-thumbnail-filename {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 9px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(transparent, rgba(255,255,255,0.95));
    padding: 15px 8px 6px 8px;
    z-index: 2;
}

/* Material Info (below thumbnail) */
.mcc-material-info {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mcc-material-title {
    font-family: 'Akko', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 6px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mcc-material-meta {
    font-size: 11px;
    color: #999;
    margin-top: auto;
    overflow: visible !important;
}

.mcc-material-meta a {
    color: var(--mcc-primary);
}

/* Actions Row */
.mcc-material-actions {
    display: flex;
    gap: 8px;
    padding: 0 12px 12px 12px;
    justify-content: center;
}

.mcc-material-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.mcc-material-btn svg {
    width: 20px;
    height: 20px;
}

.mcc-material-btn-preview {
    background: rgba(61, 124, 133, 0.1);
    color: #3D7C85;
}

.mcc-material-btn-preview:hover {
    background: rgba(61, 124, 133, 0.2);
    transform: scale(1.05);
}

.mcc-material-btn-download {
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
    color: white !important;
    box-shadow: 0 2px 8px rgba(61, 124, 133, 0.25);
}

.mcc-material-btn-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(61, 124, 133, 0.35);
}

/* Loading State */
.mcc-noten-loading {
    text-align: center;
    padding: 60px 20px;
}

.mcc-noten-loading p {
    margin-top: 15px;
    color: #999;
}

/* Dark Mode */
.mcc-dark .mcc-content-tabs {
    background: #1a1a1a;
    border-color: #333;
}

.mcc-dark .mcc-content-tab {
    background: #111416;
    color: #999;
}

.mcc-dark .mcc-content-tab:hover {
    color: var(--mcc-primary);
}

.mcc-dark .mcc-content-tab.active {
    background: var(--mcc-primary);
    color: white;
}

.mcc-dark .mcc-noten-container {
    background: #1a1a1a;
}

.mcc-dark .mcc-material-item {
    background: #111416;
    border-color: rgba(255,255,255,0.1);
}

.mcc-dark .mcc-material-thumbnail {
    background: linear-gradient(135deg, #333 0%, #444 100%);
}

.mcc-dark .mcc-osmd-container,
.mcc-dark .mcc-docx-preview,
.mcc-dark .mcc-pdf-canvas {
    background: #3a3a3a;
}

.mcc-dark .mcc-text-preview {
    color: #ccc;
}

.mcc-dark .mcc-material-title {
    color: #eee;
}

.mcc-dark .mcc-material-section-title {
    color: #ddd;
    border-color: #333;
}

.mcc-dark .mcc-thumbnail-filename {
    background: rgba(0,0,0,0.7);
    color: rgba(255,255,255,0.7);
}

/* Responsive */
@media (max-width: 600px) {
    .mcc-content-tabs {
        padding: 10px;
        gap: 8px;
    }
    
    .mcc-content-tab {
        padding: 8px 12px;
        font-size: 12px;
        flex: 1;
    }
    
    /* Keep text visible on mobile for tabs */
    .mcc-content-tab .mcc-tab-text {
        display: inline !important;
    }
    
    .mcc-content-tab svg {
        width: 16px;
        height: 16px;
    }
    
    .mcc-material-items {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
    
    .mcc-material-thumbnail {
        height: 100px;
    }
    
    .mcc-thumbnail-icon {
        font-size: 36px;
    }
    
    .mcc-material-info {
        padding: 10px;
    }
    
    .mcc-material-title {
        font-size: 13px;
    }
    
    .mcc-material-actions {
        flex-direction: column;
        padding: 0 10px 10px 10px;
    }
    
    .mcc-material-btn {
        flex: 1;
        justify-content: center;
    }
}

/* ========================================
   XML PLAYER MODAL
   ======================================== */

/* Prevent body scroll when modal open */
body.mcc-modal-open {
    overflow: hidden !important;
}

/* Modal Overlay */
.mcc-xml-player-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5vh;
}

.mcc-xml-player-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

/* Modal Container */
.mcc-xml-player-container {
    position: relative;
    width: 97%;
    max-width: 97%;
    height: 97vh;
    max-height: 97vh;
    background: white;
    border-radius: 12px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: mcc-modal-appear 0.3s ease;
}

@keyframes mcc-modal-appear {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Modal Header */
.mcc-xml-player-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: linear-gradient(135deg, #3D7C85 0%, #00B894 100%);
    color: white;
    flex-shrink: 0;
}

.mcc-xml-player-title {
    margin: 0;
    font-family: 'Akko', sans-serif;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mcc-xml-player-title::before {
    content: '🎼';
}

.mcc-xml-player-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mcc-xml-player-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.mcc-xml-player-close svg {
    width: 20px;
    height: 20px;
}

/* Modal Content */
.mcc-xml-player-content {
    flex: 1;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Embedded XML Player needs full height */
.mcc-xml-player-content .meldo-xml-player {
    flex: 1;
    min-height: 0;
}

/* Loading State */
.mcc-xml-player-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #666;
}

.mcc-xml-player-loading p {
    margin-top: 20px;
    font-size: 14px;
}

/* Fallback/Error State */
.mcc-xml-player-fallback,
.mcc-xml-player-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.mcc-xml-fallback-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.mcc-xml-player-fallback p,
.mcc-xml-player-error p {
    color: #666;
    margin-bottom: 20px;
}

.mcc-btn-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
    color: white !important;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mcc-btn-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(61, 124, 133, 0.4);
    color: white !important;
}

/* Idea Content Display */
.mcc-idea-content {
    padding: 30px;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}

.mcc-idea-content p {
    margin-bottom: 15px;
}

.mcc-idea-content strong {
    color: #3D7C85;
}

/* Dark Mode */
.mcc-dark .mcc-xml-player-container {
    background: #1a1a1a;
}

.mcc-dark .mcc-xml-player-content {
    background: #1a1a1a;
}

.mcc-dark .mcc-idea-content {
    color: #ddd;
}

.mcc-dark .mcc-xml-player-loading,
.mcc-dark .mcc-xml-player-fallback p {
    color: #999;
}

/* Responsive - Mobile adjustments for header */
@media (max-width: 768px) {
    .mcc-xml-player-header {
        padding: 12px 16px;
    }
    
    .mcc-xml-player-title {
        font-size: 16px;
    }
}

/* XML Options in Modal */
.mcc-xml-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 30px;
    text-align: center;
}

.mcc-xml-options-icon {
    font-size: 56px;
    margin-bottom: 16px;
}

.mcc-xml-options h4 {
    margin: 0 0 8px 0;
    font-family: 'Akko', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.mcc-xml-options-info {
    color: #666;
    margin-bottom: 24px;
}

.mcc-xml-options-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 300px;
}

.mcc-xml-option-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    cursor: pointer;
}

.mcc-xml-btn-primary {
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
    color: white !important;
    box-shadow: 0 4px 15px rgba(61, 124, 133, 0.3);
}

.mcc-xml-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(61, 124, 133, 0.4);
    color: white !important;
}

.mcc-xml-btn-secondary {
    background: white;
    color: #3D7C85 !important;
    border: 2px solid #3D7C85;
}

.mcc-xml-btn-secondary:hover {
    background: #3D7C85;
    color: white !important;
}

.mcc-xml-btn-icon {
    font-size: 18px;
}

.mcc-xml-options-hint {
    margin-top: 24px;
    padding: 16px;
    background: rgba(232, 146, 79, 0.1);
    border-radius: 10px;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

/* Dark Mode */
.mcc-dark .mcc-xml-options h4 {
    color: #eee;
}

.mcc-dark .mcc-xml-options-info,
.mcc-dark .mcc-xml-options-hint {
    color: #aaa;
}

.mcc-dark .mcc-xml-btn-secondary {
    background: transparent;
    border-color: #3D7C85;
}

/* Links in XML Options hint */
.mcc-xml-options-hint a {
    color: #3D7C85;
    text-decoration: none;
    font-weight: 500;
}

.mcc-xml-options-hint a:hover {
    text-decoration: underline;
}

/* XML Player iFrame in Modal */
.mcc-xml-player-iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: calc(97vh - 60px) !important;
    border: none !important;
    display: block;
}

/* Ensure content area can hold iframe properly */
.mcc-xml-player-content {
    flex: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: calc(97vh - 60px) !important;
}

.mcc-xml-player-content .mcc-xml-player-iframe {
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: calc(97vh - 60px) !important;
    border: none !important;
}

/* Force modal to 97% size */
.mcc-xml-player-modal {
    padding: 1.5vh !important;
}

.mcc-xml-player-container {
    width: 97vw !important;
    max-width: 97vw !important;
    height: 97vh !important;
    max-height: 97vh !important;
}

@media (max-width: 768px) {
    .mcc-xml-player-modal {
        padding: 0 !important;
    }
    
    .mcc-xml-player-container {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    
    .mcc-xml-player-content {
        height: calc(100vh - 60px) !important;
    }
    
    .mcc-xml-player-content .mcc-xml-player-iframe {
        min-height: calc(100vh - 60px) !important;
    }
}

/* ================================================
   FILE PREVIEW MODAL - Multi-Type Support
   ================================================ */

/* Audio Player */
.mcc-audio-player-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 30px;
    text-align: center;
    min-height: 300px;
}

.mcc-audio-icon {
    font-size: 80px;
    margin-bottom: 20px;
    animation: mcc-pulse 2s ease-in-out infinite;
}

@keyframes mcc-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.mcc-audio-title {
    font-family: 'Akko', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #111416;
    margin: 0 0 30px 0;
}

.mcc-audio-player {
    width: 100%;
    max-width: 500px;
    height: 54px;
    border-radius: 27px;
    margin-bottom: 30px;
}

/* Video Player */
.mcc-video-player-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mcc-video-player {
    flex: 1;
    width: 100%;
    background: #000;
    max-height: calc(97vh - 150px);
}

/* PDF Viewer */
.mcc-pdf-viewer-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

/* PDF Loading Overlay */
.mcc-pdf-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    gap: 16px;
}

.mcc-pdf-loading-overlay p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.mcc-pdf-toolbar,
.mcc-document-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: #FAF8F3;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}

.mcc-pdf-iframe,
.mcc-document-iframe {
    flex: 1;
    width: 100%;
    min-height: 400px;
    border: none;
}

/* Image Viewer */
.mcc-image-viewer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 20px;
}

.mcc-image-preview {
    max-width: 100%;
    max-height: calc(97vh - 180px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Document Viewer */
.mcc-document-viewer-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mcc-document-hint {
    padding: 10px 20px;
    background: rgba(232, 146, 79, 0.1);
    color: #666;
    font-size: 13px;
    margin: 0;
    text-align: center;
    flex-shrink: 0;
}

/* Download Fallback */
.mcc-download-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 30px;
    text-align: center;
    min-height: 300px;
}

.mcc-download-icon {
    font-size: 80px;
    margin-bottom: 20px;
}

.mcc-download-fallback h3 {
    font-family: 'Akko', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #111416;
    margin: 0 0 8px 0;
}

.mcc-download-ext {
    color: #888;
    font-size: 14px;
    margin: 0 0 30px 0;
}

/* Action Buttons */
.mcc-preview-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.mcc-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.2s ease;
    background: #f0f0f0;
    color: #333 !important;
}

.mcc-btn-action:hover {
    background: #e0e0e0;
    transform: translateY(-1px);
}

.mcc-btn-action.mcc-btn-primary,
.mcc-btn-action.mcc-btn-download {
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
    color: white !important;
}

.mcc-btn-action.mcc-btn-primary:hover,
.mcc-btn-action.mcc-btn-download:hover {
    box-shadow: 0 4px 15px rgba(61, 124, 133, 0.3);
}

.mcc-btn-action.mcc-btn-print {
    background: #FAF8F3;
    border: 1px solid #dee2e6;
}

.mcc-btn-action.mcc-btn-print:hover {
    background: #e9ecef;
}

/* Dark Mode */
.mcc-dark .mcc-audio-player-container,
.mcc-dark .mcc-download-fallback {
    background: #1a1a1a;
}

.mcc-dark .mcc-audio-title,
.mcc-dark .mcc-download-fallback h3 {
    color: #eee;
}

.mcc-dark .mcc-pdf-toolbar,
.mcc-dark .mcc-document-toolbar {
    background: #2a2a2a;
    border-color: #444;
}

.mcc-dark .mcc-btn-action {
    background: #333;
    color: #eee !important;
}

.mcc-dark .mcc-document-hint {
    background: rgba(232, 146, 79, 0.15);
    color: #aaa;
}

/* Responsive */
@media (max-width: 768px) {
    .mcc-audio-player-container,
    .mcc-download-fallback {
        padding: 40px 20px;
    }
    
    .mcc-audio-icon,
    .mcc-download-icon {
        font-size: 60px;
    }
    
    .mcc-pdf-toolbar,
    .mcc-document-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 15px;
    }
    
    .mcc-btn-action {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* ============================================
   Preview Modal with Sidebar
   ============================================ */

.mcc-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
}

.mcc-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
}

.mcc-preview-wrapper {
    position: relative;
    display: flex;
    height: 100%;
    width: 97vw;
    max-width: 97vw;
    margin: 0 auto;
}

.mcc-preview-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    margin: 1.5vh;
    margin-right: 0;
    border-radius: 12px 0 0 12px;
    overflow: hidden;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}

.mcc-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
    color: white;
}

.mcc-preview-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Akko', sans-serif;
}

.mcc-preview-header-actions {
    display: flex;
    gap: 8px;
}

.mcc-preview-header-actions button {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.mcc-preview-header-actions button:hover {
    background: rgba(255, 255, 255, 0.3);
}

.mcc-preview-content {
    flex: 1;
    overflow: auto;
    padding: 12px;
    background: #FAF8F3;
    min-height: 400px;
    position: relative;
}

/* XML Player braucht mehr Platz - kein padding */
.mcc-preview-content:has(.mcc-xml-player-iframe),
.mcc-preview-content:has(.mcc-xml-player-embed) {
    padding: 0;
}

.mcc-preview-content > iframe,
.mcc-preview-content .mcc-xml-player-iframe {
    width: 100%;
    height: calc(100vh - 120px);
    min-height: 500px;
    border: none;
    border-radius: 0;
    background: white;
}

/* Inline eingebetteter XML-Player (wie im Noten-Tab) statt iframe.
   Eigener Klassenname, damit die !important-Regeln von
   .mcc-xml-player-content (Modal-Hülle) NICHT greifen. */
.mcc-xml-player-embed {
    width: 100%;
    background: white;
}

/* Im Sidebar-Vorschau-Modal (#mcc-preview-content) */
.mcc-preview-content .mcc-xml-player-embed {
    min-height: 500px;
}

/* Im Datei-Vorschau-Modal (#mcc-xml-player-content ist flex-column) */
#mcc-xml-player-content > .mcc-xml-player-embed {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Sidebar */
.mcc-preview-sidebar {
    width: 320px;
    background: white;
    margin: 1.5vh 1.5vh 1.5vh 0;
    border-radius: 0 12px 12px 0;
    overflow-y: auto;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
    transition: width 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
}

.mcc-preview-sidebar.collapsed {
    width: 0;
    margin: 1.5vh 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
}

.mcc-preview-main.sidebar-collapsed {
    margin-right: 1.5vh;
    border-radius: 12px;
}

.mcc-sidebar-section {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.mcc-sidebar-section:last-child {
    border-bottom: none;
}

.mcc-sidebar-section h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mcc-sidebar-section h4 svg {
    color: #3D7C85;
}

/* Stats */
.mcc-sidebar-stats {
    display: flex;
    gap: 20px;
}

.mcc-stat {
    font-size: 14px;
    color: #666;
}

.mcc-stat strong {
    color: #3D7C85;
    font-size: 18px;
    display: block;
}

/* Uploader */
.mcc-sidebar-uploader {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mcc-uploader-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
}

.mcc-uploader-info {
    flex: 1;
}

.mcc-uploader-name {
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mcc-uploader-badge {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #333;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.mcc-uploader-count {
    font-size: 12px;
    color: #999;
}

/* Rating */
.mcc-rating-display {
    margin-bottom: 12px;
    font-size: 20px;
}

.mcc-rating-display .mcc-star {
    color: #ddd;
}

.mcc-rating-display .mcc-star-full,
.mcc-rating-display .mcc-star-half {
    color: #ffc107;
}

.mcc-rating-avg {
    font-size: 14px;
    color: #666;
    margin-left: 8px;
}

.mcc-rating-input {
    background: #FAF8F3;
    padding: 12px;
    border-radius: 8px;
}

.mcc-rating-label {
    font-size: 13px;
    color: #666;
    display: block;
    margin-bottom: 8px;
}

.mcc-star-input {
    font-size: 24px;
    cursor: pointer;
}

.mcc-star-btn {
    color: #ddd;
    transition: color 0.1s;
}

.mcc-star-btn:hover,
.mcc-star-btn.active {
    color: #ffc107;
}

/* Comments */
.mcc-sidebar-comments {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.mcc-comment {
    padding: 10px;
    background: #FAF8F3;
    border-radius: 8px;
    margin-bottom: 8px;
}

.mcc-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.mcc-comment-author {
    font-weight: 600;
    font-size: 13px;
    color: #333;
}

.mcc-comment-date {
    font-size: 11px;
    color: #999;
}

.mcc-comment-text {
    font-size: 13px;
    color: #555;
    margin: 0;
    line-height: 1.4;
}

.mcc-comment-delete {
    background: none;
    border: none;
    color: #d63638;
    cursor: pointer;
    font-size: 12px;
    padding: 2px;
}

.mcc-sidebar-comment-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    resize: none;
    font-family: inherit;
    box-sizing: border-box;
}

.mcc-sidebar-comment-form textarea:focus {
    outline: none;
    border-color: #3D7C85;
}

.mcc-btn-small {
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
}

.mcc-btn-small:hover {
    opacity: 0.9;
}

.mcc-login-hint {
    font-size: 13px;
    color: #999;
    font-style: italic;
    margin: 0;
}

/* Material Item Extensions */
.mcc-material-desc {
    font-size: 12px;
    color: #666;
    margin: 4px 0 8px 0;
    line-height: 1.4;
}

.mcc-material-rating {
    font-size: 14px;
    margin-bottom: 6px;
}

.mcc-material-rating .mcc-star {
    color: #ddd;
}

.mcc-material-rating .mcc-star-full,
.mcc-material-rating .mcc-star-half {
    color: #ffc107;
}

.mcc-rating-count {
    font-size: 12px;
    color: #999;
}

.mcc-uploader {
    font-size: 12px;
    color: #3D7C85;
}

.mcc-top-badge {
    font-size: 12px;
}

.mcc-top-contributor-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    padding: 4px;
    border-radius: 50%;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mcc-preview-wrapper {
        flex-direction: column;
        width: 98vw;
        max-width: 98vw;
    }
    
    .mcc-preview-main {
        margin: 1vh;
        border-radius: 12px 12px 0 0;
    }
    
    .mcc-preview-sidebar {
        width: auto;
        margin: 0 10px 10px 10px;
        border-radius: 0 0 12px 12px;
        max-height: 40vh;
    }
    
    .mcc-preview-sidebar.collapsed {
        display: none;
    }
    
    .mcc-preview-main.sidebar-collapsed {
        border-radius: 12px;
        margin: 10px;
    }
}

/* Preview Content Containers - für neues Modal mit Sidebar */
.mcc-preview-content .mcc-xml-player-iframe,
.mcc-preview-content .mcc-pdf-iframe {
    width: 100%;
    height: calc(100vh - 120px);
    min-height: 500px;
    border: none;
    border-radius: 0;
}

.mcc-preview-content .mcc-pdf-viewer-container,
.mcc-preview-content .mcc-video-player-container,
.mcc-preview-content .mcc-audio-player-container,
.mcc-preview-content .mcc-document-viewer-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mcc-preview-content .mcc-video-player {
    max-height: calc(100vh - 250px);
    width: 100%;
}

.mcc-preview-content .mcc-document-iframe {
    flex: 1;
    min-height: 500px;
}

/* Loading state in new modal */
.mcc-preview-content .mcc-xml-player-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: #666;
}

/* ============================================
   Edit Upload Modal
   ============================================ */

.mcc-edit-upload-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-edit-upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.mcc-edit-upload-container {
    position: relative;
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.mcc-edit-upload-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
    color: white;
}

.mcc-edit-upload-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Akko', sans-serif;
}

.mcc-edit-upload-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.mcc-edit-upload-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.mcc-edit-upload-content {
    padding: 24px;
}

/* Edit button on material items */
.mcc-material-btn-edit {
    background: #f0f0f0 !important;
    color: #666 !important;
}

.mcc-material-btn-edit:hover {
    background: #e0e0e0 !important;
    color: #333 !important;
}

/* Edit button in sidebar */
.mcc-sidebar-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f0f0f0;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    margin-top: 12px;
    transition: all 0.2s;
}

.mcc-sidebar-edit-btn:hover {
    background: #e0e0e0;
    color: #333;
}

/* ============================================
   TABS NAVIGATION (v3.68.0)
   ============================================ */

.mcc-tabs-navigation {
    display: flex;
    gap: 6px;
    padding: 0;
    margin-bottom: 16px;
    flex-wrap: wrap;
    background: none;
    border: none;
    align-items: center;
}
/* v4.32.171: Songs-Counter rechts in der Tab-Zeile */
.mcc-tabs-navigation .mcc-stats-mini {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* Desktop default: show full labels, hide short */
.mcc-tabs-navigation .mcc-tab-short { display: none; }
.mcc-tabs-navigation .mcc-tab-full { display: inline; }

.mcc-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    background: white;
    border: none;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Akko', sans-serif;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.mcc-tab-btn:hover {
    background: #EFF4F4;
    color: #3D7C85;
    box-shadow: 0 2px 8px rgba(61,124,133,0.1);
}

/* v4.32.387: aktiver Zustand kommt aus dem Bedienmuster. */

.mcc-tab-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.25s ease;
    background: none !important;
}
.mcc-tab-icon svg { width: 15px !important; height: 15px !important; }

/* All inactive icons: unified teal */
.mcc-tab-icon svg { stroke: #3D7C85 !important; fill: none !important; }
.mcc-tab-icon--fav svg { stroke: #E74C3C !important; }
.mcc-tab-icon--premium svg { stroke: #D4910A !important; }

/* v4.32.387: Das Symbol behaelt im aktiven Reiter seine Rollenfarbe.
   Weiss war fuer die frueher tuerkis gefuellte Flaeche gedacht; auf dem
   weissen Plaettchen des Bedienmusters verschwand es. */

/* Tab badges - solid small pills */
.mcc-tabs-navigation .mcc-tab-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    background: rgba(0,0,0,0.08) !important;
    color: #555 !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    font-family: 'Akko', sans-serif !important;
    line-height: 1 !important;
}

/* Active tab badge: white semi-transparent */
.mcc-tabs-navigation .mcc-tab-btn.active .mcc-tab-badge {
    background: rgba(255,255,255,0.25) !important;
    color: white !important;
}

.mcc-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: rgba(0,0,0,0.08);
    color: #555;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
}

.mcc-tab-content {
    display: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.mcc-tab-content.active {
    display: block !important;
    width: 100% !important;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   HOME TAB - SPOTIFY STYLE
   ============================================ */

.mcc-home-container {
    padding: 0;
}

/* Begrüssung + AI Empfehlung */
/* v4.32.177: Empfehlung lebt in „Für dich empfohlen" — schwebende Kachel oben rechts entfernt */
.mcc-home-greeting-row {
    display: none !important;
}
/* v4.32.178: auch der mobile Empfehlungs-Slot raus */
#mcc-ai-suggest-mobile,
.mcc-mobile-ai-suggest {
    display: none !important;
}
.mcc-home-greeting { display: none !important; }

.mcc-home-greeting {
    flex: 1;
    min-width: 0;
}

.mcc-greeting-text {
    font-family: 'Akko', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #111416;
    margin: 0 0 2px 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-greeting-sub {
    font-size: 13px;
    color: #9CA09C;
    margin: 0;
}

/* AI Suggestion Card */
.mcc-ai-suggest {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    border: 1.5px solid rgba(61,124,133,0.12);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
    max-width: 300px;
    box-shadow: 0 2px 12px rgba(61,124,133,0.06);
}

.mcc-ai-suggest:hover {
    border-color: #3D7C85;
    box-shadow: 0 6px 24px rgba(61,124,133,0.12);
    transform: translateY(-2px);
}

.mcc-ai-suggest-thumb {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: #E0E3E0;
    flex-shrink: 0;
}

.mcc-ai-suggest-content {
    flex: 1;
    min-width: 0;
}

.mcc-ai-suggest-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: 'Akko', sans-serif;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #3D7C85;
    margin-bottom: 1px;
}

.mcc-ai-suggest-label svg {
    fill: #3D7C85 !important;
}

.mcc-ai-suggest-title {
    font-family: 'Akko', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #111416;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-ai-suggest-reason {
    font-size: 10px;
    color: #9CA09C;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile: Compact but side-by-side */
@media (max-width: 600px) {
    /* Hide Noten+ and Favoriten from mobile tab bar - shown as tiles instead */
    .mcc-tab-btn[data-tab="noten-plus"],
    .mcc-tab-btn[data-tab="favorites"] { display: none !important; }
    
    /* Tab bar: full width, equal distribution */
    .mcc-tabs-navigation {
        flex-wrap: nowrap !important;
        gap: 2px !important;
        overflow-x: hidden !important;
        padding: 4px !important;
        background: #f0f0f0 !important;
        border-radius: 12px !important;
        margin: 0 0 12px !important;
    }
    .mcc-tabs-navigation::-webkit-scrollbar { display: none !important; }
    .mcc-tab-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 7px 2px !important;
        font-size: 10px !important;
        gap: 2px !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 9px !important;
        background: transparent !important;
        border: none !important;
        color: #999 !important;
        white-space: nowrap !important;
    }
    .mcc-tab-btn .mcc-tab-icon {
        display: flex !important;
        width: 22px !important;
        height: 22px !important;
    }
    .mcc-tab-btn .mcc-tab-icon svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #999 !important;
        stroke-width: 2.2px !important;
        fill: none !important;
    }
    .mcc-tab-btn.active {
        background: #fff !important;
        color: #3D7C85 !important;
        box-shadow: 0 1px 4px rgba(0,0,0,.1) !important;
    }
    .mcc-tab-btn.active .mcc-tab-icon svg {
        stroke: #3D7C85 !important;
    }
    .mcc-tab-btn .mcc-tab-text {
        display: block !important;
        color: inherit !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }
    .mcc-tab-btn .mcc-tab-full { display: none !important; }
    .mcc-tab-btn .mcc-tab-short { display: inline !important; }
    .mcc-tab-btn .mcc-tab-badge {
        position: absolute !important;
        top: 2px !important;
        right: 2px !important;
        font-size: 9px !important;
        min-width: 14px !important;
        height: 14px !important;
        padding: 0 3px !important;
    }
    
    /* Mobile nav cards: colorful tiles */
    .mcc-mobile-nav-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
    }
    .mcc-mobile-nav-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 14px;
        border-radius: 14px;
        color: #fff;
        cursor: pointer;
        min-height: 100px;
        transition: transform .15s, box-shadow .15s;
        overflow: hidden;
    }
    .mcc-mobile-nav-card:active { transform: scale(.97); }
    .mcc-mobile-nav-card--noten {
        background: linear-gradient(135deg, #3D7C85 0%, #00B894 100%);
        box-shadow: 0 4px 16px rgba(61,124,133,.3);
    }
    .mcc-mobile-nav-card--fav {
        background: linear-gradient(135deg, #E8924F 0%, #F28517 100%);
        box-shadow: 0 4px 16px rgba(232,146,79,.3);
    }
    .mcc-mobile-nav-card-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(255,255,255,.25);
        color: #fff;
        font-family: 'Akko', sans-serif;
        font-size: 13px;
        font-weight: 700;
        min-width: 26px;
        height: 26px;
        border-radius: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
    }
    .mcc-mobile-nav-card-icon {
        display: flex;
        margin-bottom: 6px;
    }
    .mcc-mobile-nav-card-icon svg {
        width: 28px !important;
        height: 28px !important;
        stroke: #fff !important;
        fill: none !important;
        color: #fff !important;
    }
    .mcc-mobile-nav-card-title {
        font-family: 'Akko', sans-serif;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: .3px;
        line-height: 1.2;
    }
    .mcc-mobile-nav-card-sub {
        font-size: 11px;
        font-weight: 400;
        opacity: .85;
        line-height: 1.3;
        margin-top: 2px;
    }
    
    .mcc-home-greeting-row {
        gap: 10px;
    }
    
    .mcc-greeting-text {
        font-size: 16px;
    }
    
    .mcc-greeting-sub {
        font-size: 11px;
    }
    
    .mcc-ai-suggest {
        padding: 8px 10px;
        gap: 8px;
        max-width: 180px;
    }
    
    .mcc-ai-suggest-thumb {
        width: 34px;
        height: 34px;
        border-radius: 8px;
    }
    
    .mcc-ai-suggest-title {
        font-size: 11px;
    }
    
    .mcc-ai-suggest-label {
        font-size: 8px;
    }
    
    .mcc-ai-suggest-reason {
        display: none;
    }
}

/* ========== Mobile Nav Row (hidden tabs shortcut) ========== */
.mcc-mobile-nav-row {
    display: none !important;
}

@media (max-width: 768px) {
    .mcc-mobile-nav-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin: 0 0 16px !important;
    }
}

.mcc-mobile-nav-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: white !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-family: 'Akko', sans-serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    color: #111416 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    transition: all 0.2s ease !important;
}

.mcc-mobile-nav-chip:active { transform: scale(0.96) !important; }

.mcc-mobile-nav-icon {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.mcc-mobile-nav-icon svg { width: 13px !important; height: 13px !important; }
.mcc-mobile-nav-icon--noten { background: #2E78C2 !important; }
.mcc-mobile-nav-icon--noten svg { stroke: white !important; fill: none !important; }
.mcc-mobile-nav-icon--fav { background: #E74C3C !important; }
.mcc-mobile-nav-icon--fav svg { stroke: white !important; fill: none !important; }

.mcc-mobile-nav-count {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: white !important;
    background: #3D7C85 !important;
    padding: 1px 6px !important;
    border-radius: 50px !important;
}

/* ========== Promo Row (Bundles + Premium Songs) ========== */
.mcc-promo-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
}

/* When fewer items, don't stretch */
.mcc-promo-row .mcc-promo-card:only-child {
    max-width: 280px !important;
}

.mcc-promo-card {
    background: white !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}

.mcc-promo-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
}

.mcc-promo-card:active {
    transform: scale(0.97) !important;
}

.mcc-promo-card-thumb {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%) !important;
}

.mcc-promo-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.mcc-promo-card-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mcc-promo-card-placeholder svg {
    width: 32px !important;
    height: 32px !important;
    stroke: white !important;
    fill: rgba(255,255,255,0.3) !important;
}

.mcc-promo-card-badge {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    background: #3D7C85 !important;
    color: white !important;
    font-family: 'Akko', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    z-index: 2 !important;
}

.mcc-promo-card-badge--premium {
    background: linear-gradient(135deg, #D4910A, #F5B800) !important;
}

.mcc-promo-card-badge--popular {
    background: linear-gradient(135deg, #E91E63, #FF5252) !important;
}

/* v4.32.176 (Stufe 3): Empfehlungs-Badge */
.mcc-promo-card-badge--rec {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: linear-gradient(135deg, #3D7C85, #E8924F) !important;
}
.mcc-promo-card-badge--rec svg { width: 11px !important; height: 11px !important; stroke: #fff !important; }

.mcc-promo-card-info {
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.mcc-promo-card-title {
    font-family: 'Akko', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #111416 !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.mcc-promo-card-meta {
    font-family: 'Akko', sans-serif !important;
    font-size: 12px !important;
    color: #888 !important;
    line-height: 1.3 !important;
}

.mcc-promo-price-old {
    text-decoration: line-through !important;
    color: #aaa !important;
    margin-right: 2px !important;
}

@media (max-width: 768px) {
    .mcc-promo-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    
    /* Third card spans full width on mobile */
    .mcc-promo-card:nth-child(3):last-child {
        grid-column: 1 / -1 !important;
    }
    
    .mcc-promo-card-info {
        padding: 10px 12px !important;
    }
    
    .mcc-promo-card-title {
        font-size: 13px !important;
    }
}

@media (max-width: 400px) {
    .mcc-promo-row {
        grid-template-columns: 1fr !important;
    }
}

/* ========== Discover Content Tiles ========== */
.mcc-discover-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
}

.mcc-discover-tile {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 18px 20px !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
}

.mcc-discover-tile::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}

.mcc-discover-tile:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

.mcc-discover-tile:hover::before {
    opacity: 1 !important;
}

.mcc-discover-tile:active {
    transform: scale(0.97) !important;
}

/* Random: Grün */
.mcc-discover-tile--random {
    background: linear-gradient(135deg, #E8924F 0%, #EC6900 100%) !important;
}
.mcc-discover-tile--random::before {
    background: linear-gradient(135deg, #E59F6A 0%, #F4882C 100%) !important;
}

/* Popular: Teal */
.mcc-discover-tile--popular {
    background: linear-gradient(135deg, #3D7C85 0%, #47909A 100%) !important;
}
.mcc-discover-tile--popular::before {
    background: linear-gradient(135deg, #448B94 0%, #4D9CA7 100%) !important;
}

/* New: Pink */
.mcc-discover-tile--new {
    background: linear-gradient(135deg, #E91E63 0%, #FF5252 100%) !important;
}
.mcc-discover-tile--new::before {
    background: linear-gradient(135deg, #F02B73 0%, #FF6B6B 100%) !important;
}

.mcc-discover-tile-icon {
    width: 44px !important;
    height: 44px !important;
    background: rgba(255,255,255,0.2) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

.mcc-discover-tile-icon svg {
    width: 22px !important;
    height: 22px !important;
    stroke: white !important;
    fill: none !important;
}

.mcc-discover-tile-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    position: relative !important;
    z-index: 1 !important;
}

.mcc-discover-tile-title {
    font-family: 'Akko', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: white !important;
    line-height: 1.2 !important;
}

.mcc-discover-tile-sub {
    font-family: 'Akko', sans-serif !important;
    font-size: 12px !important;
    color: rgba(255,255,255,0.75) !important;
    line-height: 1.3 !important;
}

@media (max-width: 768px) {
    .mcc-discover-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    .mcc-discover-tile {
        padding: 14px 16px !important;
        gap: 12px !important;
    }
    
    .mcc-discover-tile-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }
    
    .mcc-discover-tile-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    .mcc-discover-tile-title {
        font-size: 14px !important;
    }
    
    .mcc-discover-tile-sub {
        font-size: 11px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .mcc-discover-row {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    
    .mcc-discover-tile {
        padding: 14px 16px !important;
    }
}

.mcc-home-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.mcc-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    color: #111416;
}

.mcc-stat-card .mcc-stat-value {
    font-size: 28px;
    font-weight: 700;
    font-family: 'Akko', sans-serif;
    color: #111416 !important;
    line-height: 1.2;
}

.mcc-stat-card .mcc-stat-label {
    font-size: 14px;
    color: #6c757d;
}

.mcc-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(61,124,133,0.15);
    border-color: #3D7C85;
}

.mcc-stat-icon {
    font-size: 32px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.mcc-stat-icon svg { width: 24px !important; height: 24px !important; }
/* Stat icon color variants */
.mcc-stat-icon--songs { background: linear-gradient(135deg, rgba(232,146,79,0.15), rgba(232,146,79,0.25)); color: #D66500; }
.mcc-stat-icon--songs svg { stroke: #D66500 !important; }
.mcc-stat-icon--premium { background: linear-gradient(135deg, rgba(245,166,35,0.15), rgba(245,166,35,0.25)); color: #D4910A; }
.mcc-stat-icon--premium svg { stroke: #D4910A !important; }
.mcc-stat-icon--noten { background: linear-gradient(135deg, rgba(46,120,194,0.12), rgba(46,120,194,0.22)); color: #2E78C2; }
.mcc-stat-icon--noten svg { stroke: #2E78C2 !important; }
.mcc-stat-icon--fav { background: linear-gradient(135deg, rgba(231,76,60,0.12), rgba(231,76,60,0.22)); color: #E74C3C; }
.mcc-stat-icon--fav svg { stroke: #E74C3C !important; }
.mcc-stat-card:hover .mcc-stat-icon { transform: scale(1.08); }

.mcc-stat-info {
    display: flex;
    flex-direction: column;
}

.mcc-stat-number {
    font-size: 28px;
    font-weight: 700;
    font-family: 'Akko', sans-serif;
    color: #111416;
    line-height: 1.2;
}

.mcc-stat-label {
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
}

/* Home Sections - Spotify Style */
.mcc-home-section {
    margin-bottom: 24px;
}

.mcc-home-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.mcc-home-section-header h3 {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Akko', sans-serif;
    color: #111416;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mcc-home-premium-star,
.mcc-home-new-badge,
.mcc-home-bundles-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-right: 4px;
}
.mcc-home-premium-star svg { width: 20px !important; height: 20px !important; stroke: #D4910A !important; }
.mcc-home-bundles-icon svg { width: 20px !important; height: 20px !important; stroke: #7B61FF !important; }
.mcc-home-new-badge svg { width: 20px !important; height: 20px !important; stroke: #E91E63 !important; }

.mcc-home-section-header h3 > svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #3D7C85 !important;
    fill: none !important;
    flex-shrink: 0;
}

.mcc-home-more-btn {
    background: none;
    border: none;
    color: #3D7C85;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.2s ease;
}

.mcc-home-more-btn:hover {
    background: rgba(61,124,133,0.1);
}

/* Stufe 2 (v4.32.176): Horizontale Rail mit Scroll-Snap */
.mcc-home-row {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(61,124,133,0.35) transparent;
}
.mcc-home-row > * {
    flex: 0 0 calc((100% - 80px) / 6);
    min-width: 158px;
    scroll-snap-align: start;
}

.mcc-home-row::-webkit-scrollbar {
    height: 6px;
}
.mcc-home-row::-webkit-scrollbar-track {
    background: transparent;
}
.mcc-home-row::-webkit-scrollbar-thumb {
    background: rgba(61,124,133,0.30);
    border-radius: 3px;
}
.mcc-home-row:hover::-webkit-scrollbar-thumb {
    background: rgba(61,124,133,0.5);
}

/* ========== Progress Ring on Thumbnails ========== */
.mcc-card-thumb-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.mcc-progress-ring {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
    pointer-events: none;
}

.mcc-progress-circle {
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== Quick Practice FAB ========== */
.mcc-fab {
    position: fixed;
    bottom: 90px;
    right: 24px;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #3D7C85, #448B94);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(61,124,133,0.35);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: mcc-fab-in 0.4s ease-out;
}

.mcc-fab:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 28px rgba(61,124,133,0.45);
}

.mcc-fab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-fab-icon svg {
    width: 20px !important;
    height: 20px !important;
    fill: white !important;
    stroke: white !important;
}

.mcc-fab-label {
    font-family: 'Akko', sans-serif;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes mcc-fab-in {
    from { opacity: 0; transform: translateY(20px) scale(0.8); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile: icon-only FAB */
@media (max-width: 600px) {
    .mcc-fab {
        padding: 14px;
        bottom: 80px;
        right: 16px;
    }
    .mcc-fab-label {
        display: none;
    }
}

/* Hide FAB when mini-player is open */
.mcc-mini-player-visible .mcc-fab {
    bottom: 140px;
}

/* ========== Ambient Waveform ========== */
.mcc-ambient-wave {
    display: none;
}

.mcc-wave-1 {
    animation: mcc-wave-drift 18s linear infinite;
}

.mcc-wave-2 {
    animation: mcc-wave-drift 25s linear infinite reverse;
}

@keyframes mcc-wave-drift {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Song Card mit Thumbnail */
.mcc-card-thumbnail {
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 12px 12px 0 0;
}

/* Animated thumbnail: smooth transition on hover */
.mcc-thumb-animate {
    transition: transform 0.3s ease;
    position: relative;
}

.mcc-song-card:hover .mcc-thumb-animate {
    transform: scale(1.03);
}

/* Crossfade preview overlay */
.mcc-thumb-preview {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    background-size: cover;
    background-position: center;
    border-radius: 12px 12px 0 0;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.mcc-thumb-preview-fade {
    opacity: 0;
}

.mcc-thumb-preview-visible {
    opacity: 1;
}

.mcc-card-thumbnail-letter {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-card-thumbnail-letter span {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    font-family: 'Akko', sans-serif;
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Song Card mit Thumb Variante */
.mcc-song-card-with-thumb {
    position: relative;
}

.mcc-song-card-with-thumb .mcc-card-hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    padding-bottom: 62.5%; /* 16/10 aspect ratio */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.mcc-song-card-with-thumb:hover .mcc-card-hover {
    opacity: 1;
}

.mcc-song-card-with-thumb .mcc-card-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(8px);
    width: 48px;
    height: 48px;
    background: #3D7C85;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(61,124,133,0.4);
    transition: all 0.3s ease;
    pointer-events: auto;
}

.mcc-song-card-with-thumb:hover .mcc-card-play-btn {
    transform: translate(-50%, -50%) translateY(0);
}

.mcc-song-card-with-thumb .mcc-card-play-btn svg {
    width: 24px;
    height: 24px;
    margin-left: 2px;
}

/* Compact Card Variante für Home */
.mcc-song-card-compact {
    min-width: 0;
}

.mcc-song-card-compact .mcc-card-content {
    padding: 12px 16px 16px;
}

.mcc-song-card-compact .mcc-card-header {
    margin-bottom: 8px;
}

.mcc-song-card-compact .mcc-card-title {
    font-size: 0.95rem;
    margin-bottom: 4px;
    -webkit-line-clamp: 1;
}

.mcc-song-card-compact .mcc-card-artist {
    font-size: 0.8rem;
    margin-bottom: 8px;
}

.mcc-song-card-compact .mcc-card-badges {
    margin-top: auto;
}

/* Hover Play Button auf Thumbnail für compact cards */
.mcc-song-card-compact .mcc-card-hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    padding-bottom: 62.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.mcc-song-card-compact:hover .mcc-card-hover {
    opacity: 1;
}

.mcc-song-card-compact .mcc-card-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(8px);
    width: 48px;
    height: 48px;
    background: #3D7C85;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(61,124,133,0.4);
    transition: all 0.3s ease;
    pointer-events: auto;
}

.mcc-song-card-compact:hover .mcc-card-play-btn {
    transform: translate(-50%, -50%) translateY(0);
}

.mcc-song-card-compact .mcc-card-play-btn svg {
    width: 24px;
    height: 24px;
    margin-left: 2px;
}

/* ============================================================
   v4.32.175: Home-Karte Redesign (Stufe 1) — isoliert
   ============================================================ */
.mcc-song-card-home {
    background: var(--mcc-white);
    border-radius: var(--mcc-radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.05);
    transition: transform .25s ease, box-shadow .25s ease;
    cursor: pointer;
}
.mcc-song-card-home:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08), 0 16px 40px rgba(61,124,133,0.12);
}
.mcc-song-card-home .mcc-card-thumb-wrap { border-radius: 0; }
.mcc-song-card-home .mcc-card-thumbnail {
    border-radius: 0;
    transition: transform .4s ease;
}
.mcc-song-card-home:hover .mcc-card-thumbnail { transform: scale(1.05); }

/* Tonart-Overlay (unten-links, dunkles Glas) */
.mcc-home-key {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 26px;
    padding: 0 8px;
    background: rgba(0,0,0,0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--mcc-font-title);
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: var(--mcc-radius-sm);
    line-height: 1;
}

/* Cover-Badges (oben-links) */
.mcc-home-badges {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    display: flex;
    gap: 5px;
}
.mcc-home-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: rgba(0,0,0,0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.mcc-home-badge svg { width: 13px !important; height: 13px !important; color: #fff; stroke: #fff; }
.mcc-home-badge-premium svg { color: #FFD24A !important; stroke: #FFD24A !important; }

/* Hover-Play (mittig) */
.mcc-home-play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.mcc-home-play svg { width: 30px; height: 30px; color: var(--mcc-primary); margin-left: 3px; }
.mcc-home-play::before {
    content: '';
    position: absolute;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    z-index: -1;
    transform: scale(0.8);
    transition: transform .25s ease;
}
.mcc-song-card-home:hover .mcc-home-play { opacity: 1; }
.mcc-song-card-home:hover .mcc-home-play::before { transform: scale(1); }

/* Content-Hierarchie */
.mcc-song-card-home .mcc-card-content {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mcc-song-card-home .mcc-card-title {
    font-family: var(--mcc-font-title);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    -webkit-line-clamp: 1;
    margin: 0;
    color: var(--mcc-dark);
}
.mcc-song-card-home .mcc-card-artist {
    font-size: 0.8rem;
    color: var(--mcc-gray-500);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mcc-home-genre {
    margin-top: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mcc-primary);
    background: rgba(61,124,133,0.08);
    padding: 2px 8px;
    border-radius: var(--mcc-radius-full);
    align-self: flex-start;
}

/* Badge Styles */
.mcc-badge-premium,
.mcc-badge.mcc-badge-premium {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    color: #000000 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    width: auto !important;
    height: auto !important;
}
.mcc-badge-premium svg { stroke: #000 !important; width: 14px !important; height: 14px !important; }

.mcc-badge-noten,
.mcc-badge.mcc-badge-noten {
    background: #E8924F !important;
    color:#111416 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
}
.mcc-badge-noten svg { stroke: #fff !important; width: 14px !important; height: 14px !important; }

.mcc-badge-new,
.mcc-badge.mcc-badge-new {
    background: #E91E63 !important;
    color: white !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
}
.mcc-badge-new svg { stroke: #fff !important; width: 14px !important; height: 14px !important; }

/* Loading State */
.mcc-home-loading {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #6c757d;
}

.mcc-home-empty-text {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #6c757d;
}

.mcc-spinner-small {
    width: 24px;
    height: 24px;
    border: 3px solid #e9ecef;
    border-top-color: #3D7C85;
    border-radius: 50%;
    animation: mcc-spin 1s linear infinite;
}

/* ============================================
   PREMIUM TAB - OVERVIEW LIST
   ============================================ */

.mcc-premium-list-container {
    padding: 0;
}

.mcc-premium-title-star {
    color: #FFD700;
}

.mcc-premium-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 16px !important;
}
@media (min-width: 1200px) {
    .mcc-premium-grid { grid-template-columns: repeat(5, 1fr) !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .mcc-premium-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .mcc-premium-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 767px) {
    .mcc-premium-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}

/* Premium Song Card */
.mcc-premium-song-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
}

.mcc-premium-song-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(61,124,133,0.15);
    border-color: #3D7C85;
}

.mcc-premium-song-card.locked {
    opacity: 0.85;
}

/* Premium Song Thumbnail */
.mcc-premium-song-thumb {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
    background-size: cover;
    background-position: center;
    position: relative;
}

.mcc-premium-song-thumb-letter {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-premium-song-thumb-letter span {
    font-size: 56px;
    font-weight: 700;
    font-family: 'Akko', sans-serif;
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.mcc-premium-song-star {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,0.9);
    padding: 6px;
    border-radius: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mcc-premium-song-star svg { width: 16px !important; height: 16px !important; stroke: #D4910A !important; }

.mcc-difficulty svg,
.mcc-bundle-difficulty svg { width: 12px !important; height: 12px !important; stroke: var(--m-gold, #D9A441) !important; }

.mcc-premium-song-body {
    padding: 16px 20px;
}

.mcc-premium-song-title {
    font-size: 16px;
    font-weight: 700;
    color: #111416;
    margin-bottom: 4px;
    font-family: 'Akko', sans-serif;
}

.mcc-premium-song-artist {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 12px;
}

.mcc-premium-song-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.mcc-premium-song-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 4px 10px;
    background: #FAF8F3;
    border-radius: 12px;
    color: #495057;
}

.mcc-premium-song-tag.has-noten {
    background: rgba(232,146,79,0.15);
    color: #CA7A2C;
}

.mcc-premium-song-tag.has-materials {
    background: rgba(61,124,133,0.1);
    color: #3D7C85;
}

.mcc-premium-song-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.mcc-premium-song-access {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
}

.mcc-premium-song-access.unlocked {
    color: #28a745;
}

.mcc-premium-song-access.locked {
    color: #ffc107;
}

.mcc-premium-song-btn {
    background: #3D7C85;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mcc-premium-song-btn:hover {
    background: #1F737A;
    transform: scale(1.05);
}

/* Premium Empty State */
.mcc-premium-empty {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.mcc-premium-empty .mcc-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.mcc-premium-empty h3 {
    font-size: 20px;
    font-weight: 600;
    color: #111416;
    margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 1200px) {
    .mcc-home-row > * {
        flex: 0 0 calc((100% - 48px) / 4);
        min-width: 0;
    }
}

@media (max-width: 992px) {
    .mcc-home-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mcc-home-row > * {
        flex: 0 0 calc((100% - 32px) / 3);
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .mcc-home-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .mcc-stat-card {
        padding: 12px;
        gap: 10px;
        border-radius: 12px;
    }
    
    .mcc-stat-icon {
        font-size: 20px;
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
    .mcc-stat-icon svg { width: 18px !important; height: 18px !important; }
    
    .mcc-stat-number {
        font-size: 18px;
    }
    
    .mcc-stat-label {
        font-size: 12px;
    }
    
    .mcc-home-row {
        gap: 12px;
    }
    .mcc-home-row > * {
        flex: 0 0 calc((100% - 12px) / 2);
        min-width: 0;
    }
    
    .mcc-home-section-header h3 {
        font-size: 18px;
    }
    
    .mcc-premium-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .mcc-home-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .mcc-stat-card {
        flex-direction: column;
        text-align: center;
        gap: 6px;
        padding: 10px 8px;
    }
    
    .mcc-stat-icon {
        font-size: 18px;
        width: 32px;
        height: 32px;
    }
    .mcc-stat-icon svg { width: 16px !important; height: 16px !important; }
    
    .mcc-stat-number {
        font-size: 16px;
    }
    
    .mcc-stat-label {
        font-size: 11px;
    }
    
    .mcc-home-row > * {
        flex: 0 0 calc((100% - 12px) / 2);
        min-width: 0;
    }
}

/* ============================================
   NOTEN+ STATS HEADER
   ============================================ */

.mcc-noten-stats-header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    background: var(--m-weiss, #fff);
    border: 1px solid var(--m-kartenlinie, #EDF2F2);
    padding: 18px 20px 20px;
    border-radius: var(--m-radius-karte, 20px);
    box-shadow: var(--m-karte-tief, 0 2px 14px rgba(26,52,56,.06));
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.mcc-noten-stats-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #3D7C85 0%, #3D7C85 22%, #E8924F 45%, rgba(232,146,79,.25) 75%, rgba(232,146,79,0) 100%);
}

.mcc-noten-stat {
    text-align: center;
    color: var(--m-tinte, #111416);
}

.mcc-noten-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    font-family: 'Akko', sans-serif;
    line-height: 1.2;
    color: var(--m-teal, #3D7C85);
}

.mcc-noten-stat-label {
    display: block;
    font-size: 12px;
    color: var(--m-gedaempft, #4a5658);
    opacity: 1;
    margin-top: 4px;
}

/* ============================================
   MATERIAL BADGES ON SONG CARDS
   ============================================ */

.mcc-card-badges {
    display: flex;
    gap: 6px;
    margin: 10px 0;
    flex-wrap: wrap;
}

.mcc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #f0f0f0;
    border-radius: 6px;
    font-size: 14px;
    cursor: help;
    transition: transform 0.2s, background 0.2s;
}
.mcc-badge svg { width: 16px !important; height: 16px !important; }

.mcc-badge:hover {
    transform: scale(1.15);
    background: #e0e0e0;
}

.mcc-badge-musicxml { background: rgba(232, 146, 79, 0.15); color: #D66500; }
.mcc-badge-musicxml svg { stroke: #D66500 !important; }
.mcc-badge-pdf { background: rgba(244, 67, 54, 0.1); color: #E53935; }
.mcc-badge-pdf svg { stroke: #E53935 !important; }
.mcc-badge-idea { background: rgba(255, 193, 7, 0.15); color: #D4910A; }
.mcc-badge-idea svg { stroke: #D4910A !important; }
.mcc-badge-video { background: rgba(156, 39, 176, 0.1); color: #9C27B0; }
.mcc-badge-video svg { stroke: #9C27B0 !important; }
.mcc-badge-audio { background: rgba(61, 124, 133, 0.1); color: #3D7C85; }
.mcc-badge-audio svg { stroke: #3D7C85 !important; }
.mcc-badge-worksheet { background: rgba(33, 150, 243, 0.1); color: #2196F3; }
.mcc-badge-worksheet svg { stroke: #2196F3 !important; }

/* Completeness Bar */
.mcc-card-completeness {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.mcc-completeness-bar {
    flex: 1;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
}

.mcc-completeness-fill {
    height: 100%;
    background: linear-gradient(90deg, #E8924F, #3D7C85);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.mcc-completeness-text {
    font-size: 11px;
    color: #888;
    font-weight: 600;
}

/* Song card with materials indicator: gleiche Form wie jede andere Karte.
   Das Vorhandensein von Material zeigen die Symbole in .mcc-card-badges. */
.mcc-song-card.has-materials {
    border: 1px solid var(--m-kartenlinie, #EDF2F2);
}

/* Downloads badge in footer */
.mcc-card-downloads {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #3D7C85;
    font-weight: 600;
}

/* ============================================
   NOTEN+ TAB LAYOUT (with sidebar)
   ============================================ */

#mcc-tab-noten-plus {
    display: none;
}

#mcc-tab-noten-plus.active {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
}

.mcc-noten-stats-header,
#mcc-tab-noten-plus > .mcc-list-header {
    grid-column: 1 / -1;
}

.mcc-noten-grid {
    grid-column: 1;
}

#mcc-noten-load-more {
    grid-column: 1;
}

/* ============================================
   NOTEN+ SIDEBAR WIDGETS
   ============================================ */

.mcc-noten-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mcc-noten-widget {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mcc-widget-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 12px 0;
    font-family: 'Akko', sans-serif;
    color: #111416;
}

.mcc-widget-title svg { width: 16px; height: 16px; color: var(--m-teal, #3D7C85); flex: 0 0 auto; }

.mcc-widget-desc {
    font-size: 12px;
    color: #888;
    margin: 0 0 10px 0;
}

.mcc-widget-empty {
    font-size: 13px;
    color: #999;
    font-style: italic;
    margin: 0;
}

/* Trending List */
.mcc-trending-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mcc-trending-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #FAF8F3;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.mcc-trending-item:hover {
    background: #e8f5e9;
}

.mcc-trending-rank {
    font-size: 16px;
    font-weight: 700;
    color: #3D7C85;
    width: 24px;
    text-align: center;
}

.mcc-trending-info {
    flex: 1;
    min-width: 0;
}

.mcc-trending-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #111416;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-trending-meta {
    display: block;
    font-size: 11px;
    color: #888;
}

/* Contributors List */
.mcc-contributors-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mcc-contributor-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.mcc-contributor-medal {
    font-size: 16px;
    width: 24px;
}

.mcc-contributor-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #111416;
}

.mcc-contributor-count {
    font-size: 11px;
    color: #888;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Needed Materials List */
.mcc-widget-needed {
    background: linear-gradient(135deg, #fff8e1 0%, #fff3e0 100%);
    border: 1px solid #ffcc80;
}

.mcc-needed-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mcc-needed-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.mcc-needed-item:last-child {
    border-bottom: none;
}

.mcc-needed-item:hover .mcc-needed-title {
    color: #3D7C85;
}

.mcc-needed-title {
    font-size: 13px;
    color: #111416;
    transition: color 0.2s;
}

.mcc-needed-views {
    font-size: 11px;
    color: #888;
}

/* ============================================
   SEARCH INLINE
   ============================================ */

.mcc-search-inline {
    position: relative;
}

.mcc-search-inline input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    width: 180px;
    transition: border-color 0.2s, width 0.3s;
}

.mcc-search-inline input:focus {
    outline: none;
    border-color: #3D7C85;
    width: 220px;
}

/* ============================================
   FAVORITES TAB
   ============================================ */

.mcc-favorites-grid .mcc-song-card {
    position: relative;
}

.mcc-favorites-grid .mcc-song-card::before {
    content: '⭐';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 20px;
    z-index: 2;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 900px) {
    #mcc-tab-noten-plus.active {
        grid-template-columns: 1fr;
    }
    
    .mcc-noten-sidebar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .mcc-tabs-navigation {
        padding: 0;
        gap: 5px;
    }
    
    .mcc-tab-btn {
        padding: 8px 12px;
        font-size: 12px;
        gap: 5px;
    }
    
    .mcc-tab-text {
        display: inline !important;
        font-size: 10px;
    }
    
    /* Home tab: show text like all other tabs */
    
    /* Alle Songs → Alle on mobile */
    .mcc-tabs-navigation .mcc-tab-full { display: none !important; }
    .mcc-tabs-navigation .mcc-tab-short { display: inline !important; }
    
    /* Hide Noten+ & Favoriten tabs on mobile - accessible via stat cards on Home */
    .mcc-tab-btn[data-tab="noten-plus"],
    .mcc-tab-btn[data-tab="favorites"] {
        display: none !important;
    }
}

/* Very small screens: tighter tabs */
@media (max-width: 400px) {
    .mcc-tab-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
        gap: 4px !important;
    }
    .mcc-tab-icon {
        width: 16px !important;
        height: 16px !important;
    }
    .mcc-tab-icon svg { width: 12px !important; height: 12px !important; }
    .mcc-tab-badge {
        min-width: 16px !important;
        height: 16px !important;
        font-size: 9px !important;
    }
    
    .mcc-noten-stats-header {
        grid-template-columns: repeat(2, 1fr);
        padding: 16px;
    }
    
    .mcc-noten-stat-value {
        font-size: 22px;
    }
    
    .mcc-card-badges {
        gap: 4px;
    }
    
    .mcc-badge {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
    
    .mcc-search-inline input {
        width: 140px;
    }
    
    .mcc-search-inline input:focus {
        width: 160px;
    }
}

/* ==========================================
   PREMIUM TAB STYLES
   ========================================== */

/* Premium: Fläche wie bei den übrigen Reitern, der Ton steckt im
   Sternsymbol (siehe Bedienmuster). */

.mcc-content-tab[data-tab="premium"] svg {
    fill: #3D7C85;
}

.mcc-content-tab[data-tab="premium"].active svg {
    fill: white;
}

/* Premium Content Container */
.mcc-premium-content {
    padding: 0;
}

/* Premium Sub-Tabs */
.mcc-premium-subtabs {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: #FAF8F3;
    border-bottom: 1px solid #e9ecef;
    position: relative;
    z-index: 100;
}

.mcc-premium-subtab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: white;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.mcc-premium-subtab:hover {
    background: #e9ecef;
}

/* Der aktive Unterreiter ist ein weisses Plättchen (Bedienmuster).
   Ein weiss gestrichenes Symbol darauf ist unsichtbar — es folgt
   darum der Schriftfarbe. */

.mcc-premium-subtab-badge {
    background: rgba(255,255,255,0.3);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

/* Premium Sub-Tab Content */
.mcc-premium-subtab-content {
    display: none;
}

.mcc-premium-subtab-content.active {
    display: block;
}

/* WICHTIG: Der Noten-Tab mit dem XML Player darf nicht mit display:none versteckt werden!
   OSMD braucht einen sichtbaren Container zum Rendern.
   Stattdessen verwenden wir visibility + position für diesen spezifischen Tab. */
#mcc-premium-noten {
    display: block !important;
    visibility: hidden;
    position: absolute;
    left: -9999px;
    width: 100%;
}

#mcc-premium-noten.active {
    visibility: visible;
    position: relative;
    left: 0;
}

/* Premium Loading Overlay - zentraler Spinner */
.mcc-premium-loading-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #6c757d;
    min-height: 300px;
}

.mcc-premium-loading-overlay .mcc-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e9ecef;
    border-top-color: #3D7C85;
    border-radius: 50%;
    animation: mcc-spin 1s linear infinite;
    margin-bottom: 20px;
}

.mcc-premium-loading-overlay p {
    font-size: 15px;
    color: #6c757d;
}

/* Premium Player Container */
.mcc-premium-player-container {
    min-height: 300px;
    background: white;
}

.mcc-premium-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #6c757d;
}

.mcc-premium-loading .mcc-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e9ecef;
    border-top-color: #3D7C85;
    border-radius: 50%;
    animation: mcc-spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes mcc-spin {
    to { transform: rotate(360deg); }
}

.mcc-premium-error {
    padding: 40px;
    text-align: center;
    color: #dc3545;
}

/* Noten laden Prompt */
.mcc-premium-load-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background: linear-gradient(135deg, rgba(61,124,133,0.05), rgba(232,146,79,0.05));
    border-radius: 12px;
    margin: 20px;
}

.mcc-load-prompt-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.mcc-premium-load-prompt p {
    color: #6c757d;
    margin-bottom: 20px;
    font-size: 15px;
}

.mcc-load-notes-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #3D7C85, #E8924F);
    color: white;
    border: none;
    border-radius: 25px;
    font-family: 'Akko', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(61,124,133,0.3);
}

.mcc-load-notes-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(61,124,133,0.4);
}

.mcc-load-notes-btn:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

.mcc-load-notes-btn svg {
    stroke: white;
}

.mcc-spinner-small {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: mcc-spin 1s linear infinite;
}

/* ==========================================
   PREMIUM MATERIALS - Card Layout (wie Noten+)
   ========================================== */

.mcc-premium-materials-container {
    padding: 16px;
}

.mcc-material-section {
    margin-bottom: 24px;
}

.mcc-material-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #111416;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
}

.mcc-material-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

/* Material Card */
.mcc-material-card {
    background: white;
    border-radius: 16px;
    border: 1px solid rgba(61, 124, 133, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mcc-material-card:hover {
    border-color: #3D7C85;
    box-shadow: 0 12px 32px rgba(61, 124, 133, 0.18);
    transform: translateY(-4px);
}

.mcc-material-card-locked {
    border-color: rgba(255, 193, 7, 0.3);
}

.mcc-material-card-locked:hover {
    border-color: #ffc107;
    box-shadow: 0 12px 32px rgba(255, 193, 7, 0.2);
}

/* Card Header mit Typ-spezifischer Vorschau */
.mcc-material-card-header {
    position: relative;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(135deg, #FAF8F3 0%, #e9ecef 100%);
}

/* PDF Vorschau */
.mcc-material-card-header[data-type="pdf"],
.mcc-material-card-header[data-type="worksheet"] {
    background: linear-gradient(145deg, #ffffff 0%, #f0f2f5 50%, #e8eaed 100%);
}

/* Video Vorschau */
.mcc-material-card-header[data-type="video"] {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

/* Audio Vorschau */
.mcc-material-card-header[data-type="audio"] {
    background: linear-gradient(135deg, #3D7C85 0%, #2E5F65 100%);
}

/* XML Vorschau */
.mcc-material-card-header[data-type="xml"],
.mcc-material-card-header[data-type="musicxml"] {
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
}

/* ====== Material Thumbnails ====== */
.mcc-material-thumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.mcc-thumb-icon {
    font-size: 36px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* PDF Thumbnail */
.mcc-thumb-pdf {
    background: linear-gradient(145deg, #ffffff 0%, #FAF8F3 50%, #f0f2f5 100%);
    position: relative;
}

.mcc-pdf-thumb-preview {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: top center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mcc-pdf-thumb-preview.loaded {
    opacity: 1;
}

.mcc-pdf-thumb-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.mcc-pdf-thumb-icon.has-preview {
    opacity: 0;
}

.mcc-pdf-thumb-icon svg {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    animation: pdfPulse 2s ease-in-out infinite;
}

@keyframes pdfPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.mcc-pdf-badge {
    background: #3D7C85;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mcc-thumb-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mcc-thumb-lines span {
    height: 3px;
    background: rgba(61, 124, 133, 0.3);
    border-radius: 2px;
    animation: lineShimmer 2s ease-in-out infinite;
}

.mcc-thumb-lines span:nth-child(1) { width: 50px; animation-delay: 0s; }
.mcc-thumb-lines span:nth-child(2) { width: 40px; animation-delay: 0.2s; }
.mcc-thumb-lines span:nth-child(3) { width: 45px; animation-delay: 0.4s; }

@keyframes lineShimmer {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Video Thumbnail */
.mcc-thumb-video {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    background-size: cover;
    background-position: center;
}

.mcc-thumb-play {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #1a1a2e;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.mcc-material-card:hover .mcc-thumb-play {
    transform: scale(1.1);
}

/* Audio Thumbnail */
.mcc-thumb-audio {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.mcc-thumb-wave {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
}

.mcc-thumb-wave span {
    width: 6px;
    background: rgba(255,255,255,0.9);
    border-radius: 3px;
    animation: wave 1s ease-in-out infinite;
}

.mcc-thumb-wave span:nth-child(1) { height: 20px; animation-delay: 0s; }
.mcc-thumb-wave span:nth-child(2) { height: 35px; animation-delay: 0.1s; }
.mcc-thumb-wave span:nth-child(3) { height: 25px; animation-delay: 0.2s; }
.mcc-thumb-wave span:nth-child(4) { height: 40px; animation-delay: 0.3s; }
.mcc-thumb-wave span:nth-child(5) { height: 30px; animation-delay: 0.4s; }

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

/* XML/MusicXML Thumbnail */
.mcc-thumb-xml {
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
}

.mcc-thumb-xml .mcc-thumb-icon {
    color: white;
}

.mcc-thumb-staff {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    letter-spacing: 4px;
}

/* Image Thumbnail */
.mcc-thumb-image {
    background-size: cover;
    background-position: center;
    background-color: #f0f0f0;
}

/* Generic Thumbnail */
.mcc-thumb-generic {
    background: linear-gradient(135deg, #e0e0e0 0%, #c0c0c0 100%);
}

/* ====== Alte Styles (Fallback) ====== */
.mcc-material-pdf-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.mcc-pdf-icon {
    font-size: 40px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.mcc-pdf-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mcc-pdf-lines span {
    height: 4px;
    background: rgba(61, 124, 133, 0.2);
    border-radius: 2px;
}

.mcc-pdf-lines span:nth-child(1) { width: 60px; }
.mcc-pdf-lines span:nth-child(2) { width: 45px; }
.mcc-pdf-lines span:nth-child(3) { width: 55px; }
.mcc-pdf-lines span:nth-child(4) { width: 35px; }

/* Video Vorschau */
.mcc-material-card-header[data-type="video"] {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.mcc-material-video-preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-video-play {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #3D7C85, #E8924F);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    padding-left: 4px;
    box-shadow: 0 4px 20px rgba(61, 124, 133, 0.4);
    transition: transform 0.2s;
}

.mcc-material-card:hover .mcc-video-play {
    transform: scale(1.1);
}

/* Audio Vorschau */
.mcc-material-card-header[data-type="audio"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.mcc-material-audio-preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-audio-wave {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
}

.mcc-audio-wave span {
    width: 6px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 3px;
    animation: audioWave 1s ease-in-out infinite;
}

.mcc-audio-wave span:nth-child(1) { height: 20px; animation-delay: 0s; }
.mcc-audio-wave span:nth-child(2) { height: 35px; animation-delay: 0.1s; }
.mcc-audio-wave span:nth-child(3) { height: 25px; animation-delay: 0.2s; }
.mcc-audio-wave span:nth-child(4) { height: 40px; animation-delay: 0.3s; }
.mcc-audio-wave span:nth-child(5) { height: 30px; animation-delay: 0.4s; }

@keyframes audioWave {
    0%, 100% { transform: scaleY(0.5); }
    50% { transform: scaleY(1); }
}

/* Generic Vorschau */
.mcc-material-card-header[data-type="other"] {
    background: linear-gradient(135deg, #FAF8F3 0%, #e9ecef 100%);
}

.mcc-material-generic-preview {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-generic-icon {
    font-size: 44px;
}

/* Lock Overlay für gesperrte Inhalte */
.mcc-material-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-lock-badge {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #111416;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Card Body */
.mcc-material-card-body {
    padding: 14px 16px;
    flex: 1;
}

.mcc-material-card-title {
    font-family: 'Akko', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #111416;
    margin: 0 0 6px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mcc-material-card-desc {
    font-family: 'Akko', sans-serif;
    font-size: 12px;
    color: #6c757d;
    margin: 0 0 10px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tags */
.mcc-material-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mcc-tag {
    font-size: 9px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mcc-tag-type {
    background: rgba(61, 124, 133, 0.1);
    color: #3D7C85;
}

.mcc-tag-free {
    background: rgba(232, 146, 79, 0.15);
    color: #C55D0F;
}

.mcc-tag-premium {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 152, 0, 0.2));
    color: #b36b00;
}

/* Card Action */
.mcc-material-card-action {
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}

/* Button-Gruppe für gekaufte Materialien */
.mcc-material-btn-group {
    display: flex;
    gap: 8px;
    width: 100%;
}

.mcc-material-btn-group .mcc-btn-view,
.mcc-material-btn-group .mcc-btn-download {
    flex: 1;
    width: auto;
}

.mcc-btn-download,
.mcc-btn-preview,
.mcc-btn-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    width: 100%;
    justify-content: center;
}

.mcc-btn-download {
    background: linear-gradient(135deg, #3D7C85, #E8924F);
    color: white;
}

.mcc-btn-download:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(61, 124, 133, 0.3);
    color: white;
}

.mcc-btn-view {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.mcc-btn-view:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    color: white;
}

.mcc-btn-preview {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #111416;
}

.mcc-btn-preview:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}

.mcc-btn-preview.mcc-btn-preview-info {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
}

.mcc-btn-preview.mcc-btn-preview-info:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Unlocked Header Style */
.mcc-preview-header-unlocked {
    background: linear-gradient(135deg, #3D7C85, #E8924F) !important;
}

.mcc-badge-unlocked {
    background: rgba(255,255,255,0.25) !important;
    color: white !important;
}

.mcc-preview-full .mcc-preview-body {
    background: #000;
}

/* PDF Vollansicht Modal */
.mcc-preview-pdf-full .mcc-preview-modal-content {
    width: 90vw;
    max-width: 1200px;
    height: 90vh;
    display: flex;
    flex-direction: column;
}

.mcc-preview-body-pdf {
    flex: 1;
    background: #525659;
    padding: 0;
    overflow: hidden;
}

.mcc-pdf-full-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: white;
}

.mcc-preview-footer {
    padding: 12px 20px;
    background: #FAF8F3;
    border-top: 1px solid #e0e0e0;
    text-align: center;
}

.mcc-btn-newtab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #3D7C85;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.mcc-btn-newtab:hover {
    background: #1F737A;
    color: white;
}

/* XML Vollansicht Modal */
.mcc-preview-xml-full .mcc-preview-body {
    background: #FAF8F3;
    min-height: 400px;
}

.mcc-xml-player-container {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.mcc-xml-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 200px;
    color: #666;
}

.mcc-xml-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px;
    text-align: center;
}

.mcc-xml-fallback .mcc-xml-icon {
    font-size: 64px;
}

.mcc-btn-download-xml {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #3D7C85, #E8924F);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.mcc-btn-download-xml:hover {
    transform: scale(1.02);
    color: white;
}

.mcc-btn-licensed {
    background: linear-gradient(135deg, #3D7C85, #47939B) !important;
}

.mcc-btn-licensed::after {
    content: '✓';
    margin-left: 6px;
    font-size: 10px;
}

.mcc-locked-hint {
    display: block;
    text-align: center;
    font-size: 11px;
    color: #6c757d;
    font-style: italic;
}

.mcc-no-materials {
    padding: 40px;
    text-align: center;
    color: #6c757d;
}

/* ==========================================
   PREMIUM CTA BANNER
   ========================================== */

.mcc-premium-cta-banner {
    background: linear-gradient(135deg, rgba(61, 124, 133, 0.08) 0%, rgba(232, 146, 79, 0.12) 100%);
    border: 1px solid rgba(61, 124, 133, 0.2);
    border-radius: 12px;
    margin: 16px;
    overflow: hidden;
}

.mcc-cta-content {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
}

.mcc-cta-icon {
    font-size: 36px;
    flex-shrink: 0;
}

.mcc-cta-text {
    flex: 1;
}

.mcc-cta-text h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 700;
    color: #111416;
}

.mcc-cta-text p {
    margin: 0;
    font-size: 13px;
    color: #6c757d;
}

.mcc-cta-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.mcc-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.mcc-cta-buy {
    background: linear-gradient(135deg, #3D7C85, #47939B);
    color: white;
    box-shadow: 0 4px 12px rgba(61, 124, 133, 0.3);
}

.mcc-cta-buy:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(61, 124, 133, 0.4);
    color: white;
}

.mcc-cta-btn-price {
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
}

.mcc-cta-abo {
    background: white;
    color: #3D7C85;
    border: 2px solid #3D7C85;
}

.mcc-cta-abo:hover {
    background: rgba(61, 124, 133, 0.05);
    color: #3D7C85;
}

/* PREMIUM Tag */
.mcc-tag-premium {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #111416;
}

/* ==========================================
   PREVIEW MODAL (Video/Audio/PDF) - NOTEN+ STYLE
   ========================================== */

.mcc-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mcc-preview-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(17, 20, 22, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Hauptcontainer - wie meldo-xml-player */
.mcc-preview-modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    max-width: 97vw;
    width: 97vw;
    max-height: 97vh;
    height: 97vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(61, 124, 133, 0.08);
    animation: mccModalSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Akko', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@keyframes mccModalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Fullscreen Modal für PDF/Video */
.mcc-preview-full {
    max-width: 97vw;
    width: 97vw;
    max-height: 97vh;
    height: 97vh;
}

.mcc-preview-pdf-full {
    max-width: 90vw;
    width: 1200px;
}

.mcc-preview-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 28px;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.mcc-preview-close:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

/* Header - Sticky wie player-controls im Noten+ */
.mcc-preview-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 60px 16px 20px;
    background: rgba(250, 248, 243, 0.95);
    border-bottom: 1px solid rgba(17, 20, 22, 0.05);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px 20px 0 0;
}

/* Header - Locked (gelb/orange für Vorschau) */
.mcc-preview-header:not(.mcc-preview-header-unlocked) {
    background: linear-gradient(135deg, #ffc107, #ff9800) !important;
}

/* Header - Unlocked (Gekauft) - Meldo Gradient */
.mcc-preview-header-unlocked {
    background: linear-gradient(135deg, #3D7C85 0%, #2E5F65 100%) !important;
}

.mcc-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mcc-badge-unlocked {
    background: rgba(232, 146, 79, 0.35) !important;
}

.mcc-preview-title {
    margin: 12px 0 0 0;
    font-size: 18px;
    font-weight: 700;
    color: white;
    font-family: 'Akko', -apple-system, sans-serif;
}

/* Body - Content Area wie Noten+ */
.mcc-preview-body {
    flex: 1;
    background: #FAF8F3;
    position: relative;
    min-height: 300px;
    overflow: auto;
}

/* PDF Body */
.mcc-preview-body-pdf {
    background: #525659;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mcc-pdf-full-iframe {
    width: 100%;
    flex: 1;
    min-height: 60vh;
    border: none;
    background: white;
}

/* Video Container */
.mcc-preview-video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
}

.mcc-preview-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mcc-preview-video {
    width: 100%;
    max-height: 70vh;
    display: block;
    background: #000;
}

.mcc-preview-note {
    text-align: center;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    padding: 12px;
    margin: 0;
    background: rgba(0,0,0,0.3);
}

/* Audio Container - Meldo Farben */
.mcc-preview-audio-container {
    padding: 48px 32px;
    text-align: center;
    background: linear-gradient(135deg, #3D7C85 0%, #2E5F65 100%);
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mcc-audio-visual {
    font-size: 72px;
    margin-bottom: 24px;
    animation: mccAudioPulse 1.5s ease-in-out infinite;
    filter: drop-shadow(0 4px 16px rgba(255, 255, 255, 0.25));
}

@keyframes mccAudioPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.05); opacity: 1; }
}

.mcc-preview-audio {
    width: 100%;
    max-width: 450px;
    height: 48px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.1);
}

/* PDF Preview (Locked) */
.mcc-preview-pdf-canvas-container {
    position: relative;
    background: linear-gradient(to bottom, #f0f0f0 0%, #e0e0e0 100%);
    min-height: 500px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* XML Preview Container (für eingeschränkte Vorschau) */
.mcc-preview-xml-container {
    position: relative;
    background: linear-gradient(to bottom, #f5f5f5 0%, #ebebeb 100%);
    min-height: 400px;
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    padding: 20px;
}

.mcc-xml-preview-wrapper {
    position: relative;
    background: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    max-width: 800px;
    max-height: 60vh;
}

.mcc-xml-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to bottom, transparent 0%, white 70%, white 100%);
    pointer-events: none;
    z-index: 5;
}

.mcc-xml-watermark-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(61, 124, 133, 0.9);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.mcc-xml-preview-info {
    text-align: center;
    padding: 16px;
    background: #FAF8F3;
    border-top: 1px solid #e9ecef;
}

.mcc-xml-preview-info p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.mcc-xml-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #666;
    gap: 12px;
}

.mcc-xml-preview-error {
    text-align: center;
    padding: 40px;
    color: #dc3545;
}

.mcc-pdf-preview-wrapper {
    position: relative;
    background: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border-radius: 4px;
    overflow: hidden;
    max-width: 90%;
    max-height: 80vh;
}

.mcc-pdf-preview-image {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Schutzschicht über dem Bild - verhindert Rechtsklick/Download */
.mcc-pdf-preview-protected {
    position: relative;
    display: inline-block;
}

.mcc-preview-protection-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 10;
    cursor: default;
}

/* Verlauf unten für eingeschränkte Vorschau */
.mcc-preview-gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(0,0,0,0.1) 30%,
        rgba(0,0,0,0.4) 60%,
        rgba(0,0,0,0.85) 100%
    );
    z-index: 5;
    pointer-events: none;
}

/* PDF Preview nicht verfügbar */
.mcc-pdf-preview-unavailable {
    text-align: center;
    padding: 40px;
    color: #666;
}

.mcc-pdf-preview-unavailable .mcc-preview-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.mcc-pdf-preview-unavailable p {
    margin: 0 0 8px;
    font-size: 16px;
}

.mcc-pdf-preview-unavailable small {
    color: #999;
}

.mcc-pdf-canvas-wrapper {
    position: relative;
    background: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border-radius: 4px;
    overflow: hidden;
    max-width: 90%;
    max-height: 70vh;
}

.mcc-pdf-canvas {
    display: block;
    max-width: 100%;
    max-height: 60vh;
}

.mcc-pdf-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 12px;
    color: #666;
    font-size: 14px;
}

.mcc-pdf-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to bottom, transparent 0%, white 100%);
    pointer-events: none;
}

.mcc-pdf-watermark-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    font-size: 48px;
    font-weight: 900;
    color: rgba(61, 124, 133, 0.12);
    text-transform: uppercase;
    letter-spacing: 10px;
    pointer-events: none;
    white-space: nowrap;
}

.mcc-pdf-preview-info {
    padding: 12px;
    text-align: center;
    background: #FAF8F3;
    border-top: 1px solid #e0e0e0;
}

.mcc-pdf-preview-info p {
    margin: 0;
    font-size: 12px;
    color: #666;
}

/* Footer */
.mcc-preview-footer {
    padding: 16px 24px;
    background: #FAF8F3;
    border-top: 1px solid #e0e0e0;
    text-align: center;
}

.mcc-preview-footer p {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #666;
}

.mcc-preview-cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.mcc-btn-preview-buy,
.mcc-btn-preview-abo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.mcc-btn-preview-buy {
    background: linear-gradient(135deg, #3D7C85, #47939B);
    color: white;
}

.mcc-btn-preview-buy:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(61, 124, 133, 0.4);
    color: white;
}

.mcc-btn-preview-abo {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.mcc-btn-preview-abo:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    color: white;
}

/* Neuer Tab Button */
.mcc-btn-newtab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #3D7C85, #E8924F);
    color: white;
    border-radius: 50px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.mcc-btn-newtab:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(61, 124, 133, 0.35);
    color: white;
}

/* XML/Music Fallback */
.mcc-xml-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    text-align: center;
    background: linear-gradient(135deg, #FAF8F3 0%, #e9ecef 100%);
    min-height: 300px;
}

.mcc-xml-fallback .mcc-xml-icon {
    font-size: 72px;
    margin-bottom: 16px;
}

.mcc-xml-fallback p {
    color: #666;
    margin: 0 0 24px 0;
    font-size: 16px;
}

.mcc-btn-download-xml {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #3D7C85, #E8924F);
    color: white;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.mcc-btn-download-xml:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(61, 124, 133, 0.4);
    color: white;
}

/* Locked PDF State */
.mcc-preview-pdf-locked {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: linear-gradient(135deg, #FAF8F3 0%, #e9ecef 100%);
}

.mcc-pdf-no-preview {
    text-align: center;
    padding: 40px;
}

.mcc-pdf-lock-icon {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.mcc-pdf-no-preview h4 {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 18px;
}

.mcc-pdf-no-preview p {
    margin: 0;
    color: #666;
    font-size: 14px;
}
    width: 100%;
    max-width: 400px;
}

/* PDF Canvas Preview - Echte PDF Vorschau als Bild */
.mcc-preview-pdf-canvas-container {
    position: relative;
    background: #111416;
    min-height: 300px;
    max-height: 400px;
    overflow: hidden;
}

.mcc-pdf-canvas-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    max-height: 350px;
    overflow: hidden;
}

.mcc-pdf-canvas {
    max-width: 100%;
    max-height: 500px; /* Größer als Container für Clip */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    background: white;
    display: none; /* Versteckt bis geladen */
    user-select: none;
    -webkit-user-drag: none;
}

.mcc-pdf-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #aaa;
    font-size: 14px;
    padding: 60px 20px;
}

.mcc-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: #3D7C85;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Fade am unteren Rand */
.mcc-pdf-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to bottom, transparent 0%, rgba(17,20,22,0.9) 60%, rgba(17,20,22,1) 100%);
    pointer-events: none;
}

/* Wasserzeichen Overlay */
.mcc-pdf-watermark-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.mcc-pdf-watermark-overlay span {
    display: inline-block;
    background: rgba(255, 193, 7, 0.9);
    color: #111416;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.mcc-pdf-preview-info {
    background: #FAF8F3;
    padding: 12px 16px;
    text-align: center;
    border-top: 1px solid #e9ecef;
}

.mcc-pdf-preview-info p {
    margin: 0;
    font-size: 12px;
    color: #6c757d;
}

/* Fallback wenn kein URL */
.mcc-pdf-no-preview {
    padding: 60px 30px;
    text-align: center;
    background: linear-gradient(135deg, #FAF8F3 0%, #e9ecef 100%);
}

.mcc-pdf-no-preview .mcc-pdf-lock-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.mcc-pdf-no-preview h4 {
    margin: 0 0 8px 0;
    color: #111416;
}

.mcc-pdf-no-preview p {
    margin: 0;
    color: #6c757d;
}

/* PDF Locked Preview - Stilisiert ohne echtes PDF */
.mcc-preview-pdf-locked {
    display: flex;
    align-items: stretch;
    min-height: 280px;
    background: linear-gradient(135deg, #FAF8F3 0%, #e9ecef 100%);
}

.mcc-pdf-preview-visual {
    flex: 0 0 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.mcc-pdf-page {
    width: 120px;
    height: 160px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    padding: 15px;
    position: relative;
}

.mcc-pdf-header-bar {
    height: 8px;
    background: linear-gradient(90deg, #3D7C85, #E8924F);
    border-radius: 4px;
    margin-bottom: 12px;
}

.mcc-pdf-line {
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin-bottom: 8px;
}

.mcc-pdf-line.short { width: 60%; }
.mcc-pdf-line.medium { width: 80%; }

.mcc-pdf-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    opacity: 0.15;
}

.mcc-pdf-locked-info {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mcc-pdf-locked-info h4 {
    margin: 0 0 12px 0;
    font-family: 'Akko', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #111416;
}

.mcc-pdf-locked-info p {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: #6c757d;
    line-height: 1.5;
}

.mcc-pdf-locked-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mcc-pdf-locked-info li {
    font-size: 13px;
    color: #3D7C85;
    font-weight: 500;
    margin-bottom: 6px;
}

/* Modal Backdrop für besseres Schließen */
.mcc-preview-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

/* Preview Footer */
.mcc-preview-footer {
    padding: 16px 20px;
    background: #FAF8F3;
    text-align: center;
    border-top: 1px solid #e9ecef;
}

.mcc-preview-footer p {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #6c757d;
}

.mcc-preview-cta {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.mcc-btn-preview-buy,
.mcc-btn-preview-abo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.mcc-btn-preview-buy {
    background: linear-gradient(135deg, #3D7C85, #47939B);
    color: white;
}

.mcc-btn-preview-buy:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(61, 124, 133, 0.4);
    color: white;
}

.mcc-btn-preview-abo {
    background: white;
    color: #3D7C85;
    border: 2px solid #3D7C85;
}

.mcc-btn-preview-abo:hover {
    background: rgba(61, 124, 133, 0.05);
    color: #3D7C85;
}

/* Preview End Overlay */
.mcc-preview-end-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.mcc-end-message {
    text-align: center;
    color: white;
}

.mcc-end-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.mcc-end-message p {
    font-size: 18px;
    margin: 0 0 20px 0;
}

.mcc-btn-unlock {
    display: inline-block;
    background: linear-gradient(135deg, #3D7C85, #E8924F);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
}

.mcc-btn-unlock:hover {
    color: white;
    transform: scale(1.05);
}

/* Unavailable Preview */
.mcc-preview-unavailable {
    max-width: 400px;
}

.mcc-unavailable-content {
    padding: 40px 30px;
    text-align: center;
}

.mcc-unavailable-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.mcc-unavailable-content h3 {
    margin: 0 0 12px 0;
    font-size: 18px;
    color: #111416;
}

.mcc-unavailable-content p {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #6c757d;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Premium Info Footer */
.mcc-premium-info {
    padding: 12px 16px;
    background: #FAF8F3;
    border-top: 1px solid #e9ecef;
}

.mcc-premium-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #6c757d;
}

.mcc-premium-meta span:not(:empty)::before {
    margin-right: 6px;
}

.mcc-premium-publisher::before {
    content: '📚';
}

.mcc-premium-instrumentation::before {
    content: '🎸';
}

.mcc-premium-difficulty::before {
    content: '';
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mcc-cta-content {
        flex-direction: column;
        text-align: center;
    }
    
    .mcc-cta-actions {
        width: 100%;
        flex-direction: column;
    }
    
    .mcc-cta-btn {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .mcc-premium-subtabs {
        padding: 8px 12px;
    }
    
    .mcc-premium-subtab {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .mcc-material-cards {
        grid-template-columns: 1fr;
    }
    
    .mcc-premium-meta {
        flex-direction: column;
        gap: 8px;
    }
    
    .mcc-preview-modal-content {
        margin: 1.5vh;
        width: 97vw;
        max-width: 97vw;
        height: 97vh;
        max-height: 97vh;
    }
    
    .mcc-preview-pdf-container {
        height: 350px;
    }
    
    .mcc-preview-cta {
        flex-direction: column;
    }
}

/* ============================================
   BUNDLES TAB STYLES
   ============================================ */

/* Bundles Grid */
.mcc-bundles-container {
    padding: 20px;
}

.mcc-bundles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 20px;
}

/* Bundle Card */
.mcc-bundle-card {
    background: var(--m-weiss, #fff);
    border-radius: var(--m-radius-karte, 20px);
    overflow: hidden;
    box-shadow: var(--m-karte-tief, 0 2px 14px rgba(26,52,56,.06));
    cursor: pointer;
    transition: border-color var(--m-uebergang, .18s), transform var(--m-uebergang, .18s);
    border: 1px solid var(--m-kartenlinie, #EDF2F2);
}

.mcc-bundle-card:hover {
    transform: translateY(-2px);
    border-color: var(--m-teal, #3D7C85);
}

.mcc-bundle-card.locked {
    opacity: 0.9;
}

/* Bundle Cover */
.mcc-bundle-cover {
    height: 160px;
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
    position: relative;
    overflow: hidden;
}

.mcc-bundle-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mcc-bundle-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    color: rgba(255,255,255,0.7);
}

/* Mosaic Cover */
.mcc-bundle-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
}

.mcc-bundle-mosaic-tile {
    background-size: cover;
    background-position: center;
}

/* Bundle Badges */
.mcc-bundle-featured-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--m-weiss, #fff);
    color: var(--m-lime-d, #DC7910);
    padding: 5px 11px;
    border-radius: 999px;
    font-family: 'Akko', sans-serif;
    font-size: 11px;
    font-weight: 700;
    box-shadow: var(--m-karte, 0 1px 4px rgba(0,0,0,.12));
}

.mcc-bundle-featured-badge svg { width: 13px; height: 13px; }

/* Schlosszeichen der Karte. Eigener Kontext, damit die gleichnamige
   Regel der Detailansicht weiter unten nicht dagegenhält. */
.mcc-bundle-card .mcc-bundle-access-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: var(--m-weiss, #fff);
    color: var(--m-teal, #3D7C85);
    border-radius: 10px;
    box-shadow: var(--m-karte, 0 1px 4px rgba(0,0,0,.12));
    margin-bottom: 0;
}

/* Bundle Content */
.mcc-bundle-content {
    padding: 16px 20px 20px;
}

.mcc-bundle-category {
    display: flex;
    line-height: 0;
    color: var(--m-teal, #3D7C85);
    margin-bottom: 8px;
}

.mcc-bundle-meta svg { width: 14px; height: 14px; color: var(--m-gedaempft, #4a5658); }

.mcc-bundle-title {
    font-size: 18px;
    font-weight: 700;
    color: #111416;
    margin-bottom: 8px;
    font-family: "Akko", sans-serif;
    line-height: 1.3;
}

.mcc-bundle-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: #666;
    margin-bottom: 16px;
}

.mcc-bundle-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mcc-bundle-difficulty {
    font-size: 11px;
    letter-spacing: -2px;
}

/* Bundle Footer */
.mcc-bundle-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.mcc-bundle-pricing {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mcc-bundle-price {
    font-size: 20px;
    font-weight: 700;
    color: #3D7C85;
}

.mcc-bundle-price.sale {
    color: #d63638;
}

.mcc-bundle-price.free {
    color: #E8924F;
}

.mcc-bundle-price-original {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
}

.mcc-bundle-savings {
    background: var(--m-lime-l, #FCF3E9);
    color: var(--m-lime-d, #DC7910);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

/* Bundle Empty State */
.mcc-bundles-empty {
    text-align: center;
    padding: 60px 20px;
}

.mcc-bundles-empty .mcc-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

/* ============================================
   BUNDLE MODAL
   ============================================ */

.mcc-bundle-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.mcc-bundle-modal {
    background: #fff;
    border-radius: 20px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.mcc-bundle-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.1);
    color: #333;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mcc-bundle-modal-close:hover {
    background: rgba(0,0,0,0.2);
}

.mcc-bundle-modal-header {
    display: flex;
    gap: 24px;
    padding: 24px;
    border-bottom: 1px solid #eee;
}

.mcc-bundle-modal-cover {
    width: 180px;
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.mcc-bundle-modal-cover-placeholder {
    width: 180px;
    height: 120px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    flex-shrink: 0;
}

.mcc-bundle-modal-info h2 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: #111416;
    font-family: "Akko", sans-serif;
}

.mcc-bundle-modal-meta {
    color: #666;
    font-size: 14px;
    margin-bottom: 12px;
}

.mcc-bundle-modal-desc {
    color: #444;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.mcc-bundle-modal-price {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

.mcc-bundle-modal-price .price {
    font-size: 28px;
    font-weight: 700;
    color: #3D7C85;
}

.mcc-bundle-buy-btn {
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.mcc-bundle-buy-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(61,124,133,0.4);
}

/* Songs List */
.mcc-bundle-modal-songs {
    padding: 24px;
}

.mcc-bundle-modal-songs h3 {
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mcc-bundle-play-all {
    background: #E8924F;
    color:#111416;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* Bundle Sections */
.mcc-bundle-section-group {
    margin-bottom: 2px;
}
.mcc-bundle-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #FAF8F3 0%, #f0f1f2 100%);
    border-left: 4px solid #999;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.mcc-bundle-section-header:hover {
    background: linear-gradient(135deg, #f0f1f2 0%, #e8e9ea 100%);
}
.mcc-bundle-section-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mcc-bundle-section-name {
    font-family: 'Akko', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #111416;
    flex: 1;
}
.mcc-bundle-section-count {
    font-size: 12px;
    color: #888;
}
.mcc-bundle-section-arrow {
    font-size: 12px;
    color: #aaa;
    transition: transform 0.3s ease;
}
.mcc-bundle-section-group.collapsed .mcc-bundle-section-arrow {
    transform: rotate(-90deg);
}
.mcc-bundle-section-songs {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.mcc-bundle-section-group.collapsed .mcc-bundle-section-songs {
    max-height: 0;
}

.mcc-bundle-songs-list {
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
}

.mcc-bundle-song-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
    cursor: pointer;
}

.mcc-bundle-song-item:last-child {
    border-bottom: none;
}

.mcc-bundle-song-item:hover {
    background: #FAF8F3;
}

.mcc-bundle-song-pos {
    width: 30px;
    font-weight: 600;
    color: #3D7C85;
    flex-shrink: 0;
}

.mcc-bundle-song-label {
    background: #3D7C85;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Akko', sans-serif;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.2px;
}

.mcc-bundle-song-label-inline {
    display: none;
    color: #3D7C85;
    font-size: 11px;
    font-weight: 600;
}

.mcc-bundle-placeholder {
    opacity: 0.6;
    background: #FAFAFA;
    cursor: default;
}

@media (max-width: 768px) {
    .mcc-bundle-song-label { display: none; }
    .mcc-bundle-song-label-inline { display: inline; }
}

.mcc-bundle-song-thumb {
    width: 48px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    margin-right: 12px;
    flex-shrink: 0;
}

.mcc-bundle-song-thumb-placeholder {
    width: 48px;
    height: 36px;
    background: #EBF1F2;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.mcc-bundle-song-info {
    flex: 1;
    min-width: 0;
}

.mcc-bundle-song-title {
    font-weight: 600;
    color: #111416;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-bundle-song-artist {
    font-size: 12px;
    color: #666;
}

.mcc-bundle-song-key {
    background: #EBF1F2;
    color: #3D7C85;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    margin-right: 10px;
}

.mcc-bundle-song-play {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #E8924F;
    color:#111416;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mcc-bundle-song-play:hover {
    transform: scale(1.1);
}

.mcc-bundle-song-locked {
    width: 32px;
    text-align: center;
    font-size: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .mcc-bundles-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
    }
    
    .mcc-bundle-modal-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .mcc-bundle-modal-cover,
    .mcc-bundle-modal-cover-placeholder {
        width: 100%;
        max-width: 250px;
        height: 150px;
    }
    
    .mcc-bundle-modal-price {
        flex-direction: column;
    }
}


/* ============================================
   HOME BUNDLES SECTION
   ============================================ */

.mcc-home-bundles-row {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.mcc-home-bundles-row::-webkit-scrollbar {
    height: 6px;
}

.mcc-home-bundles-row::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
}

.mcc-home-bundles-row::-webkit-scrollbar-thumb {
    background: #3D7C85;
    border-radius: 3px;
}

.mcc-home-bundle-card {
    flex: 0 0 220px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.3s ease;
    scroll-snap-align: start;
}

.mcc-home-bundle-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(61,124,133,0.2);
}

.mcc-home-bundle-cover {
    height: 120px;
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
    position: relative;
    overflow: hidden;
}

.mcc-home-bundle-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mcc-home-bundle-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
}

.mcc-home-bundle-mosaic > div {
    background-size: cover;
    background-position: center;
}

.mcc-home-bundle-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: rgba(255,255,255,0.7);
}

.mcc-home-bundle-featured {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
}

.mcc-home-bundle-access {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255,255,255,0.9);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 14px;
}

.mcc-home-bundle-info {
    padding: 12px;
}

.mcc-home-bundle-title {
    font-weight: 700;
    font-size: 14px;
    color: #111416;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Akko", sans-serif;
}

.mcc-home-bundle-meta {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.mcc-home-bundle-meta span {
    display: flex;
    align-items: center;
    gap: 3px;
}

.mcc-home-bundle-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mcc-home-bundle-price {
    font-weight: 700;
    font-size: 16px;
    color: #3D7C85;
}

.mcc-home-bundle-price.free {
    color: #E8924F;
}

/* bundles icon now in combined rule above */

@media (max-width: 768px) {
    .mcc-home-bundle-card {
        flex: 0 0 180px;
    }
    
    .mcc-home-bundle-cover {
        height: 100px;
    }
}


/* ============================================
   BUNDLE PROGRESS & PLAYLIST STYLES
   ============================================ */

/* Progress Bar */
.mcc-bundle-progress {
    margin: 16px 0;
}

.mcc-bundle-progress-bar {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.mcc-bundle-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3D7C85, #E8924F);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.mcc-bundle-progress-text {
    font-size: 12px;
    color: #666;
}

/* Access Status Badge */
.mcc-bundle-access-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}

.mcc-bundle-access-status.unlocked {
    background: #d4edda;
    color: #155724;
}

.mcc-bundle-access-status.locked {
    background: #fff3cd;
    color: #856404;
}

/* Song Status in List */
.mcc-bundle-song-status {
    width: 24px;
    text-align: center;
    font-size: 14px;
    flex-shrink: 0;
}

.mcc-bundle-song-item.completed {
    background: #f0fdf4;
}

.mcc-bundle-song-item.completed .mcc-bundle-song-title {
    color: #166534;
}

/* Songs Header with Actions */
.mcc-bundle-songs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.mcc-bundle-songs-header h3 {
    margin: 0;
}

.mcc-bundle-songs-actions {
    display: flex;
    gap: 8px;
}

.mcc-bundle-play-all,
.mcc-bundle-load-playlist,
.mcc-bundle-play-audio,
.mcc-bundle-open-setlist {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.mcc-bundle-play-all,
.mcc-bundle-play-audio {
    background: #E8924F;
    color:#111416;
}

.mcc-bundle-play-all:hover,
.mcc-bundle-play-audio:hover {
    background: #E57C25;
}

.mcc-bundle-load-playlist,
.mcc-bundle-open-setlist {
    background: #EBF1F2;
    color: #3D7C85;
}

.mcc-bundle-load-playlist:hover,
.mcc-bundle-open-setlist:hover {
    background: #3D7C85;
    color: #fff;
}

/* Bundle Playlist View */
.mcc-bundle-playlist-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.mcc-bundle-playlist-view .mcc-playlist-view-header {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 16px;
}

.mcc-bundle-playlist-view .mcc-playlist-icon {
    font-size: 32px;
}

.mcc-bundle-playlist-view h3 {
    margin: 0;
    font-size: 18px;
}

.mcc-bundle-playlist-view .mcc-playlist-count {
    font-size: 13px;
    color: #666;
}

.mcc-bundle-unlocked-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 14px;
}

.mcc-bundle-locked-badge {
    display: inline-block;
    margin-left: 8px;
    background: #fff3cd;
    color: #856404;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

.mcc-bundle-playlist-view .mcc-playlist-view-actions {
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
}

.mcc-bundle-playlist-view .mcc-playlist-view-songs {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.mcc-bundle-playlist-view .mcc-playlist-songs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mcc-bundle-playlist-view .mcc-playlist-song-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s;
}

.mcc-bundle-playlist-view .mcc-playlist-song-item:hover {
    background: #FAF8F3;
}

.mcc-bundle-playlist-view .mcc-playlist-song-item.completed {
    background: #f0fdf4;
}

.mcc-bundle-playlist-view .mcc-playlist-song-info {
    flex: 1;
    min-width: 0;
    margin-left: 12px;
}

.mcc-bundle-playlist-view .mcc-playlist-song-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-bundle-playlist-view .mcc-playlist-song-artist {
    font-size: 12px;
    color: #666;
}

.mcc-bundle-playlist-view .mcc-playlist-song-key {
    background: #EBF1F2;
    color: #3D7C85;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    margin-right: 10px;
}

.mcc-bundle-playlist-view .mcc-play-song {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #E8924F;
    color:#111416;
    cursor: pointer;
    font-size: 12px;
}

@media (max-width: 768px) {
    .mcc-bundle-songs-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .mcc-bundle-songs-actions {
        width: 100%;
    }
    
    .mcc-bundle-play-all,
    .mcc-bundle-load-playlist,
    .mcc-bundle-play-audio,
    .mcc-bundle-open-setlist {
        flex: 1;
        justify-content: center;
    }
}


/* ============================================
   BUNDLE PLAYLIST MODAL (Full Screen)
   ============================================ */

.mcc-bundle-playlist-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    animation: slideInUp 0.3s ease;
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.mcc-bundle-playlist-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #3D7C85 0%, #1F737A 100%);
    color: #fff;
}

.mcc-bundle-playlist-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
}

.mcc-bundle-playlist-close:hover {
    background: rgba(255,255,255,0.3);
}

.mcc-bundle-playlist-title-area {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.mcc-bundle-playlist-icon {
    font-size: 36px;
}

.mcc-bundle-playlist-title-area h2 {
    margin: 0;
    font-size: 20px;
    font-family: "Akko", sans-serif;
}

.mcc-bundle-playlist-meta {
    font-size: 13px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mcc-access-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.mcc-access-badge.unlocked {
    background: rgba(255,255,255,0.3);
}

.mcc-access-badge.locked {
    background: rgba(255,193,7,0.3);
}

.mcc-bundle-playlist-progress {
    padding: 12px 20px;
    background: #FAF8F3;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mcc-bundle-playlist-progress .mcc-bundle-progress-bar {
    flex: 1;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.mcc-bundle-playlist-progress .mcc-bundle-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3D7C85, #E8924F);
    border-radius: 4px;
}

.mcc-bundle-playlist-progress span {
    font-size: 13px;
    color: #666;
    white-space: nowrap;
}

.mcc-bundle-playlist-actions {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.mcc-bundle-playlist-play-all,
.mcc-bundle-playlist-shuffle {
    padding: 12px 24px;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.mcc-bundle-playlist-play-all {
    background: #E8924F;
    color:#111416;
    flex: 1;
}

.mcc-bundle-playlist-play-all:hover {
    background: #E57C25;
}

.mcc-bundle-playlist-shuffle {
    background: #EBF1F2;
    color: #3D7C85;
}

.mcc-bundle-playlist-shuffle:hover {
    background: #3D7C85;
    color: #fff;
}

.mcc-bundle-playlist-songs {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.mcc-bundle-playlist-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
    gap: 12px;
}

.mcc-bundle-playlist-item:hover {
    background: #FAF8F3;
}

.mcc-bundle-playlist-item.completed {
    background: #f0fdf4;
}

.mcc-bundle-playlist-item.completed:hover {
    background: #dcfce7;
}

.mcc-bundle-playlist-status {
    width: 24px;
    text-align: center;
    font-size: 14px;
    flex-shrink: 0;
}

.mcc-bundle-playlist-pos {
    width: 24px;
    text-align: center;
    font-size: 13px;
    color: #999;
    font-weight: 600;
    flex-shrink: 0;
}

.mcc-bundle-playlist-thumb {
    width: 48px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.mcc-bundle-playlist-thumb-placeholder {
    width: 48px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3D7C85, #E8924F);
    border-radius: 6px;
    font-size: 18px;
    flex-shrink: 0;
}

.mcc-bundle-playlist-info {
    flex: 1;
    min-width: 0;
}

.mcc-bundle-playlist-title {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #111416;
}

.mcc-bundle-playlist-artist {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-bundle-playlist-key {
    background: #EBF1F2;
    color: #3D7C85;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.mcc-bundle-playlist-play {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #E8924F;
    color:#111416;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    transition: all 0.2s;
}

.mcc-bundle-playlist-play:hover {
    background: #E57C25;
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .mcc-bundle-playlist-header {
        padding: 12px 16px;
    }
    
    .mcc-bundle-playlist-icon {
        font-size: 28px;
    }
    
    .mcc-bundle-playlist-title-area h2 {
        font-size: 16px;
    }
    
    .mcc-bundle-playlist-actions {
        padding: 10px 16px;
    }
    
    .mcc-bundle-playlist-item {
        padding: 10px 16px;
        gap: 8px;
    }
    
    .mcc-bundle-playlist-thumb {
        width: 40px;
        height: 30px;
    }
}


/* ============================================
   BUNDLE NAVIGATION BAR
   ============================================ */

.mcc-bundle-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #3D7C85 0%, #1F737A 100%);
    border-radius: 12px;
    margin-bottom: 16px;
    color: #fff;
}

.mcc-bundle-nav-prev,
.mcc-bundle-nav-next,
.mcc-bundle-nav-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.2);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mcc-bundle-nav-prev:hover:not(:disabled),
.mcc-bundle-nav-next:hover:not(:disabled) {
    background: rgba(255,255,255,0.3);
    transform: scale(1.1);
}

.mcc-bundle-nav-prev:disabled,
.mcc-bundle-nav-next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.mcc-bundle-nav-close {
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.1);
    margin-left: auto;
}

.mcc-bundle-nav-close:hover {
    background: rgba(255,255,255,0.2);
}

.mcc-bundle-nav-info {
    flex: 1;
    text-align: center;
}

.mcc-bundle-nav-title {
    display: block;
    font-weight: 600;
    font-size: 14px;
    font-family: "Akko", sans-serif;
}

.mcc-bundle-nav-pos {
    display: block;
    font-size: 12px;
    opacity: 0.8;
}

@media (max-width: 480px) {
    .mcc-bundle-nav {
        padding: 10px 12px;
        gap: 8px;
    }
    
    .mcc-bundle-nav-prev,
    .mcc-bundle-nav-next {
        width: 32px;
        height: 32px;
    }
    
    .mcc-bundle-nav-title {
        font-size: 13px;
    }
}


/* ============================================
   BUNDLE DETAIL VIEW (v3.77.7)
   ============================================ */

.mcc-bundle-detail-view {
    padding: 0;
}

.mcc-bundle-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #FAF8F3;
    border: none;
    border-radius: 8px;
    color: #111416;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 20px;
}

.mcc-bundle-back-btn:hover {
    background: #e9ecef;
    transform: translateX(-2px);
}

.mcc-bundle-detail-header {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(61,124,133,0.05) 0%, rgba(232,146,79,0.05) 100%);
    border-radius: 16px;
    padding: 24px;
}

.mcc-bundle-detail-cover {
    flex-shrink: 0;
    width: 180px;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.mcc-bundle-detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mcc-bundle-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
}

.mcc-bundle-detail-info {
    flex: 1;
    min-width: 0;
}

.mcc-bundle-detail-title {
    font-family: "Akko", sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #111416;
    margin: 0 0 12px 0;
}

.mcc-bundle-access-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}

.mcc-bundle-access-badge.unlocked {
    background: rgba(232,146,79,0.15);
    color: #C55D0F;
}

.mcc-bundle-access-badge.locked {
    background: rgba(255,152,0,0.15);
    color: #e65100;
}

.mcc-bundle-access-badge.admin {
    background: rgba(156,39,176,0.15);
    color: #7b1fa2;
}

.mcc-bundle-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
    color: #666;
    font-size: 14px;
}

.mcc-bundle-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mcc-bundle-difficulty {
    color: #f5a623;
    letter-spacing: 1px;
}

.mcc-bundle-detail-desc {
    color: #555;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

/* CTA Box */
.mcc-bundle-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-top: 16px;
}

.mcc-bundle-price {
    font-size: 24px;
    font-weight: 700;
    color: #3D7C85;
}

.mcc-bundle-price-old {
    font-size: 16px;
    color: #999;
    text-decoration: line-through;
}

.mcc-bundle-price-sale {
    font-size: 24px;
    font-weight: 700;
    color: #e53935;
}

.mcc-bundle-cta .mcc-bundle-buy-btn {
    padding: 12px 24px;
    font-size: 15px;
}

/* Action Buttons */
.mcc-bundle-detail-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.mcc-bundle-detail-actions button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mcc-btn-secondary {
    background: #FAF8F3;
    border: 2px solid #e0e0e0;
    color: #111416;
}

.mcc-btn-secondary:hover {
    background: #e9ecef;
    border-color: #3D7C85;
    color: #3D7C85;
}

.mcc-btn-primary {
    background: linear-gradient(135deg, #3D7C85 0%, #438992 100%);
    border: none;
    color: #fff;
    box-shadow: 0 4px 12px rgba(61,124,133,0.3);
}

.mcc-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(61,124,133,0.4);
}

.mcc-btn-large {
    padding: 14px 32px;
    font-size: 16px;
}

/* Songs Section */
.mcc-bundle-detail-songs {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.mcc-bundle-songs-title {
    font-family: "Akko", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #111416;
    margin: 0 0 16px 0;
}

/* Bottom CTA */
.mcc-bundle-bottom-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 24px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #3D7C85 0%, #438992 100%);
    border-radius: 12px;
    color: #fff;
}

.mcc-bundle-cta-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mcc-bundle-cta-text {
    font-size: 14px;
    opacity: 0.9;
}

.mcc-bundle-bottom-cta .mcc-bundle-price,
.mcc-bundle-bottom-cta .mcc-bundle-price-sale {
    color: #fff;
}

.mcc-bundle-bottom-cta .mcc-bundle-price-old {
    color: rgba(255,255,255,0.6);
}

.mcc-bundle-bottom-cta .mcc-bundle-buy-btn {
    background: #fff;
    color: #3D7C85;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.mcc-bundle-bottom-cta .mcc-bundle-buy-btn:hover {
    background: #FAF8F3;
}

/* Navigation CTA Button */
.mcc-bundle-nav-buy {
    padding: 8px 16px !important;
    background: #fff !important;
    color: #3D7C85 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    white-space: nowrap;
    width: auto !important;
    height: auto !important;
}

.mcc-bundle-nav-buy:hover {
    background: #FAF8F3 !important;
    transform: scale(1.02);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mcc-bundle-detail-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }
    
    .mcc-bundle-detail-cover {
        width: 150px;
        height: 150px;
    }
    
    .mcc-bundle-detail-title {
        font-size: 22px;
    }
    
    .mcc-bundle-detail-meta {
        justify-content: center;
    }
    
    .mcc-bundle-cta {
        flex-direction: column;
        text-align: center;
    }
    
    .mcc-bundle-detail-actions {
        flex-direction: column;
    }
    
    .mcc-bundle-detail-actions button {
        width: 100%;
        justify-content: center;
    }
    
    .mcc-bundle-bottom-cta {
        flex-direction: column;
        text-align: center;
    }
    
    .mcc-bundle-bottom-cta .mcc-bundle-buy-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .mcc-bundle-detail-header {
        padding: 16px;
    }
    
    .mcc-bundle-detail-cover {
        width: 120px;
        height: 120px;
    }
    
    .mcc-bundle-detail-title {
        font-size: 20px;
    }
    
    .mcc-bundle-nav-buy {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
}

/* ============================================
   BUNDLE UPSELL PANEL (v3.77.8)
   Smart Upsell für Premium-Songs mit Bundles
   ============================================ */

.mcc-bundle-upsell-panel {
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(61,124,133,0.03) 0%, rgba(232,146,79,0.03) 100%);
    border: 1px solid rgba(61,124,133,0.15);
    border-radius: 16px;
}

.mcc-upsell-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.mcc-upsell-icon {
    font-size: 24px;
}

.mcc-upsell-title {
    font-family: "Akko", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #111416;
}

.mcc-upsell-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mcc-upsell-option {
    position: relative;
    padding: 16px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    transition: all 0.2s;
}

.mcc-upsell-option:hover {
    border-color: #3D7C85;
    box-shadow: 0 4px 12px rgba(61,124,133,0.15);
}

.mcc-upsell-best {
    border-color: #3D7C85;
    background: linear-gradient(135deg, rgba(61,124,133,0.02) 0%, #fff 100%);
}

.mcc-upsell-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    padding: 4px 12px;
    background: linear-gradient(135deg, #3D7C85 0%, #438992 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mcc-upsell-option-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.mcc-upsell-option-icon {
    font-size: 20px;
}

.mcc-upsell-option-title {
    font-family: "Akko", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #111416;
}

.mcc-upsell-option-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 14px;
    color: #666;
}

.mcc-upsell-price {
    font-weight: 700;
    color: #3D7C85;
}

.mcc-upsell-price-old {
    text-decoration: line-through;
    color: #999;
    font-size: 13px;
}

.mcc-upsell-savings {
    padding: 2px 8px;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
}

.mcc-upsell-option-value {
    font-size: 13px;
    color: #E8924F;
    font-weight: 600;
    margin-bottom: 12px;
}

.mcc-upsell-option-actions {
    display: flex;
    gap: 10px;
}

.mcc-upsell-view-btn {
    flex: 1;
    padding: 10px 16px;
    background: #FAF8F3;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #111416;
    cursor: pointer;
    transition: all 0.2s;
}

.mcc-upsell-view-btn:hover {
    background: #e9ecef;
    border-color: #3D7C85;
    color: #3D7C85;
}

.mcc-upsell-buy-btn {
    flex: 1;
    padding: 10px 16px;
    background: linear-gradient(135deg, #3D7C85 0%, #438992 100%);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.mcc-upsell-buy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(61,124,133,0.3);
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .mcc-bundle-upsell-panel {
        padding: 16px;
        margin-top: 20px;
    }
    
    .mcc-upsell-title {
        font-size: 16px;
    }
    
    .mcc-upsell-option {
        padding: 14px;
    }
    
    .mcc-upsell-option-title {
        font-size: 15px;
    }
    
    .mcc-upsell-option-actions {
        flex-direction: column;
    }
    
    .mcc-upsell-view-btn,
    .mcc-upsell-buy-btn {
        width: 100%;
    }
}

/* Bundle Hint for Admins */
.mcc-bundle-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #F5F8F8 0%, #f5faf5 100%);
    border: 1px solid #E9EDEE;
    border-radius: 8px;
    margin: 12px 0;
    font-size: 14px;
    color: #111416;
}

.mcc-bundle-hint-icon {
    font-size: 16px;
}

.mcc-bundle-hint-text {
    color: #666;
}

.mcc-bundle-hint-link {
    color: #3D7C85;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.mcc-bundle-hint-link:hover {
    color: #2E5F65;
    text-decoration: underline;
}


/* Premium Tab Skeleton Loading */
.mcc-premium-skeleton {
    animation: mcc-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes mcc-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.mcc-premium-skeleton-bars {
    padding: 40px;
    background: #fafafa;
    border-radius: 12px;
}

.mcc-premium-skeleton-bar {
    height: 8px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: mcc-skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 24px;
}

.mcc-premium-skeleton-bar:nth-child(1) { width: 100%; }
.mcc-premium-skeleton-bar:nth-child(2) { width: 85%; }
.mcc-premium-skeleton-bar:nth-child(3) { width: 70%; }
.mcc-premium-skeleton-bar:nth-child(4) { width: 90%; }
.mcc-premium-skeleton-bar:nth-child(5) { width: 60%; margin-bottom: 0; }

@keyframes mcc-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* OSMD loading state - prevent milky effect */
.mcc-osmd-loading {
    min-height: 400px;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-osmd-loading::after {
    content: "Noten werden gerendert...";
    color: #999;
    font-size: 14px;
}


/* Bundle CTA Banner - Professional Upsell */
.mcc-bundle-cta-banner {
    background: linear-gradient(135deg, #FBFDFD 0%, #f5faf5 100%);
    border: 2px solid #3D7C85;
    border-radius: 16px;
    padding: 20px;
    margin: 16px 0;
    box-shadow: 0 4px 20px rgba(61, 124, 133, 0.1);
}

.mcc-bundle-cta-inner {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mcc-bundle-cta-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.mcc-bundle-cta-content {
    flex: 1;
    min-width: 0;
}

.mcc-bundle-cta-label {
    font-size: 12px;
    font-weight: 600;
    color: #3D7C85;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.mcc-bundle-cta-title {
    font-family: 'Akko', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #111416;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-bundle-cta-meta {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mcc-bundle-cta-divider {
    color: #ccc;
}

.mcc-bundle-cta-value {
    color: #E8924F;
    font-weight: 600;
}

.mcc-bundle-cta-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.mcc-bundle-cta-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mcc-cta-price-old {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
}

.mcc-cta-price-new {
    font-size: 20px;
    font-weight: 700;
    color: #111416;
}

.mcc-cta-savings {
    background: #E8924F;
    color:#111416;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.mcc-bundle-cta-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #3D7C85 0%, #438892 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mcc-bundle-cta-btn:hover {
    background: linear-gradient(135deg, #2E5F65 0%, #3D7C85 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(61, 124, 133, 0.3);
}

.mcc-bundle-cta-more {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #E9EDEE;
    font-size: 13px;
    color: #666;
}

.mcc-bundle-more-link {
    color: #3D7C85;
    text-decoration: none;
    font-weight: 500;
}

.mcc-bundle-more-link:hover {
    text-decoration: underline;
}

/* Responsive Bundle CTA */
@media (max-width: 600px) {
    .mcc-bundle-cta-inner {
        flex-direction: column;
        text-align: center;
    }
    
    .mcc-bundle-cta-meta {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .mcc-bundle-cta-actions {
        align-items: center;
        width: 100%;
    }
    
    .mcc-bundle-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== App Loading State ===== */
/* Zeigt subtil an, dass die App noch initialisiert wird */
.mcc-app:not(.mcc-ready) .mcc-content-tab,
.mcc-app:not(.mcc-ready) .mcc-action-btn,
.mcc-app:not(.mcc-ready) .mcc-tb-btn {
    pointer-events: auto; /* Erlaubt Klicks für Early Binding */
}

.mcc-app:not(.mcc-ready) .mcc-audio-tab,
.mcc-app:not(.mcc-ready) .mcc-stems-tab-btn {
    opacity: 0.6;
    cursor: wait;
}

.mcc-app.mcc-ready .mcc-audio-tab,
.mcc-app.mcc-ready .mcc-stems-tab-btn {
    opacity: 1;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

/* =====================================================
   VIEW TOGGLE - Grid/List Switcher
   ===================================================== */

.mcc-view-toggle {
    display: flex;
    gap: 4px;
    background: #f1f3f4;
    padding: 4px;
    border-radius: 10px;
}

.mcc-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: #5f6368;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mcc-view-btn:hover {
    background: rgba(0,0,0,0.05);
}

.mcc-view-btn.active {
    background: white;
    color: #3D7C85;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.mcc-view-btn svg {
    width: 18px;
    height: 18px;
}

/* =====================================================
   LIST VIEW - Kompakte Listenansicht
   ===================================================== */

.mcc-song-grid.mcc-list-view {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.mcc-song-grid.mcc-list-view .mcc-song-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 8px 12px !important;
    gap: 12px !important;
    border-radius: 10px !important;
    background: white !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    min-height: auto !important;
    height: auto !important;
}

.mcc-song-grid.mcc-list-view .mcc-song-card:hover {
    background: #FAF8F3 !important;
    box-shadow: 0 2px 8px rgba(61,124,133,0.1) !important;
}

/* Thumbnail in List View */
.mcc-song-grid.mcc-list-view .mcc-card-thumbnail {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    background-size: cover !important;
    background-position: center !important;
}

.mcc-song-grid.mcc-list-view .mcc-card-thumbnail-letter {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #3D7C85, #E8924F) !important;
    color: white !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.mcc-song-grid.mcc-list-view .mcc-card-thumbnail-letter span {
    font-size: 18px !important;
}

/* Content in List View */
.mcc-song-grid.mcc-list-view .mcc-card-content {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Header (Key + Genre) */
.mcc-song-grid.mcc-list-view .mcc-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    order: 2 !important;
}

.mcc-song-grid.mcc-list-view .mcc-card-key {
    width: 32px !important;
    height: 24px !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.mcc-song-grid.mcc-list-view .mcc-card-genre {
    font-size: 10px !important;
    padding: 2px 8px !important;
    display: none !important;
}

/* Title & Artist Container */
.mcc-song-grid.mcc-list-view .mcc-card-title,
.mcc-song-grid.mcc-list-view .mcc-card-artist {
    margin: 0 !important;
    padding: 0 !important;
}

.mcc-song-grid.mcc-list-view .mcc-card-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    order: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.mcc-song-grid.mcc-list-view .mcc-card-artist {
    font-size: 12px !important;
    color: #6c757d !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    order: 1 !important;
    flex-shrink: 0 !important;
    max-width: 120px !important;
}

/* Hide elements in List View */
.mcc-song-grid.mcc-list-view .mcc-card-badges,
.mcc-song-grid.mcc-list-view .mcc-card-completeness,
.mcc-song-grid.mcc-list-view .mcc-card-footer,
.mcc-song-grid.mcc-list-view .mcc-card-hover {
    display: none !important;
}

/* Show small badges inline */
.mcc-song-grid.mcc-list-view .mcc-card-difficulty {
    display: inline-flex !important;
    font-size: 10px !important;
    order: 3 !important;
    flex-shrink: 0 !important;
}

/* Mobile List View */
@media (max-width: 768px) {
    .mcc-song-grid.mcc-list-view {
        gap: 2px !important;
    }
    
    .mcc-song-grid.mcc-list-view .mcc-song-card {
        padding: 6px 10px !important;
        gap: 10px !important;
        border-radius: 8px !important;
    }
    
    .mcc-song-grid.mcc-list-view .mcc-card-thumbnail {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
    }
    
    .mcc-song-grid.mcc-list-view .mcc-card-thumbnail-letter span {
        font-size: 16px !important;
    }
    
    .mcc-song-grid.mcc-list-view .mcc-card-content {
        gap: 8px !important;
    }
    
    .mcc-song-grid.mcc-list-view .mcc-card-title {
        font-size: 12px !important;
    }
    
    .mcc-song-grid.mcc-list-view .mcc-card-artist {
        font-size: 11px !important;
        max-width: 80px !important;
    }
    
    .mcc-song-grid.mcc-list-view .mcc-card-key {
        width: 28px !important;
        height: 22px !important;
        font-size: 10px !important;
    }
    
    .mcc-song-grid.mcc-list-view .mcc-card-difficulty {
        display: none !important;
    }
}

/* =====================================================
   BUDDYBOSS OVERRIDE FIXES - Maximum Specificity
   ===================================================== */

/* 0. Song Grid - Force multi-column layout against BuddyBoss */
body.buddyboss-theme .mcc-song-grid:not(.mcc-list-view),
body .mcc-app .mcc-song-grid:not(.mcc-list-view),
#mcc-chord-collection .mcc-song-grid:not(.mcc-list-view) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 16px !important;
}
@media (min-width: 1200px) {
    body.buddyboss-theme .mcc-song-grid:not(.mcc-list-view),
    body .mcc-app .mcc-song-grid:not(.mcc-list-view) { grid-template-columns: repeat(5, 1fr) !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    body.buddyboss-theme .mcc-song-grid:not(.mcc-list-view),
    body .mcc-app .mcc-song-grid:not(.mcc-list-view) { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
    body.buddyboss-theme .mcc-song-grid:not(.mcc-list-view),
    body .mcc-app .mcc-song-grid:not(.mcc-list-view) { grid-template-columns: repeat(3, 1fr) !important; }
}

/* 1. Premium Badge in Song Cards - Weiss mit goldenem Rahmen */
body.buddyboss-theme .mcc-badge.mcc-badge-premium,
body.flavor-developer .mcc-badge.mcc-badge-premium,
body .mcc-app .mcc-badge.mcc-badge-premium,
body #mcc-chord-collection .mcc-badge.mcc-badge-premium,
.mcc-home-song .mcc-badge.mcc-badge-premium,
.mcc-song-card .mcc-badge.mcc-badge-premium,
.mcc-badge.mcc-badge-premium[title="Premium"],
span.mcc-badge.mcc-badge-premium {
    background: #ffffff !important;
    color: #b8860b !important;
    border: 2px solid #FFD700 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    line-height: 1 !important;
    text-shadow: none !important;
    box-shadow: 0 2px 6px rgba(255,215,0,0.4) !important;
    min-width: auto !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    text-decoration: none !important;
    font-family: 'Akko', -apple-system, sans-serif !important;
}
body.buddyboss-theme .mcc-badge.mcc-badge-premium svg,
body .mcc-app .mcc-badge.mcc-badge-premium svg,
.mcc-badge.mcc-badge-premium svg {
    stroke: #b8860b !important;
    width: 14px !important;
    height: 14px !important;
} 

/* 2. Header Nav Buttons - Mehr Abstand auf Mobile */
@media (max-width: 768px) {
    body.buddyboss-theme .mcc-header-nav,
    body .mcc-app .mcc-header-nav,
    body #mcc-chord-collection .mcc-header-nav,
    .mcc-header-nav {
        gap: 20px !important;
        margin-left: 20px !important;
    }
    
    body.buddyboss-theme .mcc-header-nav .mcc-nav-btn,
    body .mcc-app .mcc-header-nav .mcc-nav-btn,
    .mcc-header-nav .mcc-nav-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        flex-shrink: 0 !important;
    }
}

/* 3. Home Stat Cards - Kompakter und horizontal auf Mobile */
@media (max-width: 768px) {
    body.buddyboss-theme .mcc-home-stats,
    body .mcc-app .mcc-home-stats,
    .mcc-home-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
    }
    
    body.buddyboss-theme .mcc-stat-card,
    body .mcc-app .mcc-stat-card,
    .mcc-stat-card {
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
    }
    
    body.buddyboss-theme .mcc-stat-icon,
    body .mcc-app .mcc-stat-icon,
    .mcc-stat-icon {
        font-size: 18px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }
    
    body.buddyboss-theme .mcc-stat-info,
    body .mcc-app .mcc-stat-info,
    .mcc-stat-info {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    body.buddyboss-theme .mcc-stat-number,
    body .mcc-app .mcc-stat-number,
    .mcc-stat-number {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }
    
    body.buddyboss-theme .mcc-stat-label,
    body .mcc-app .mcc-stat-label,
    .mcc-stat-label {
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (max-width: 480px) {
    body.buddyboss-theme .mcc-stat-card,
    body .mcc-app .mcc-stat-card,
    .mcc-stat-card {
        padding: 8px 10px !important;
    }
    
    body.buddyboss-theme .mcc-stat-icon,
    body .mcc-app .mcc-stat-icon,
    .mcc-stat-icon {
        font-size: 16px !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
    }
    
    body.buddyboss-theme .mcc-stat-number,
    body .mcc-app .mcc-stat-number,
    .mcc-stat-number {
        font-size: 14px !important;
    }
    
    body.buddyboss-theme .mcc-stat-label,
    body .mcc-app .mcc-stat-label,
    .mcc-stat-label {
        font-size: 10px !important;
    }
}


/* ==========================================================================
   v3.89.76 - MOBILE QUEUE BUTTON ALIGNMENT FIX
   ========================================================================== */
@media (max-width: 768px) {
    /* Queue Button auf gleiche Höhe wie Tabs - Mobile */
    .mcc-player-tabs-row #mcc-queue-toggle,
    .mcc-player-mode-section #mcc-queue-toggle,
    #mcc-queue-toggle {
        margin-top: 9px !important;
        align-self: flex-start !important;
    }
}

@media (max-width: 480px) {
    .mcc-player-tabs-row #mcc-queue-toggle,
    .mcc-player-mode-section #mcc-queue-toggle,
    #mcc-queue-toggle {
        margin-top: 11px !important;
        align-self: flex-start !important;
    }
}

/* ==========================================================================
   v3.89.93 - PLAY ALONG SYSTEM
   ========================================================================== */

/* Play Along Button - Desktop */
.mcc-play-along-tab-btn {
    display: none; /* JS setzt display:flex wenn verfügbar */
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #3D7C85, #448B94);
    border: none;
    border-radius: 10px;
    color: white;
    font-family: var(--mcc-font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.mcc-play-along-tab-btn:hover {
    background: linear-gradient(135deg, #448B94, #4A97A1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(61, 124, 133, 0.4);
}

.mcc-play-along-tab-btn svg {
    flex-shrink: 0;
}

.mcc-play-along-text {
    display: inline;
}

/* Mobile: Play Along Button quadratisch */
@media (max-width: 768px) {
    .mcc-play-along-tab-btn {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .mcc-play-along-tab-btn .mcc-play-along-text {
        display: none !important;
    }
}

/* ==========================================================================
   PLAY ALONG FULLSCREEN MODAL
   ========================================================================== */
.mcc-play-along-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FAF8F3;
    z-index: 999999;
    display: none;
    flex-direction: column;
    font-family: var(--mcc-font-text);
    color: #111416;
}
.mcc-play-along-modal.active { display: flex; }

.mcc-play-along-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; background: #FFF;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.mcc-play-along-back {
    display: flex; align-items: center; gap: 8px; background: none;
    border: none; color: #3D7C85; font-size: 1rem; cursor: pointer;
    padding: 8px 12px; margin: -8px -12px; border-radius: 8px; transition: background 0.2s;
}
.mcc-play-along-back:hover { background: rgba(61,124,133,0.08); }
.mcc-play-along-title { font-family: var(--mcc-font-heading); font-size: 1rem; font-weight: 600; color: #111416; display: flex; align-items: center; gap: 8px; }
.mcc-pa-logo { width: 28px; height: 28px; flex-shrink: 0; }
.mcc-play-along-song-title { font-family: var(--mcc-font-heading); font-size: 1rem; font-weight: 500; color: #111416; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.mcc-play-along-song-info { text-align: right; color: rgba(17,20,22,0.6); font-size: 0.85rem; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mcc-play-along-main {
    display: flex; flex-direction: column; align-items: stretch;
    flex: 1; overflow: hidden; min-height: 0;
}
/* View Tabs */
.mcc-pa-view-tabs-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 6px; flex-shrink: 0; gap: 8px; border-bottom: 1px solid rgba(0,0,0,.06); }
.mcc-pa-view-tabs-seg { display: flex; gap: 3px; background: rgba(0,0,0,.04); border-radius: 10px; padding: 3px; }
.mcc-pa-view-tab { background: transparent; border: none; padding: 5px 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; color: rgba(17,20,22,0.45); cursor: pointer; transition: all 0.15s; font-family: var(--mcc-font-body); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.mcc-pa-view-tab.active { background: #fff; color: #3D7C85; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.mcc-pa-view-tab:hover:not(.active) { color: rgba(17,20,22,0.7); background: rgba(255,255,255,.5); }
/* Waterfall subtle hint - teal dot */
.mcc-pa-tab-waterfall-hint:not(.active)::after { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #3D7C85; margin-left: 5px; vertical-align: middle; opacity: 0.7; animation: mcc-wf-hint 2.5s ease-in-out infinite; }
@keyframes mcc-wf-hint { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:1;transform:scale(1.3)} }
/* Context options */
.mcc-pa-view-tab-options { display: flex; gap: 4px; }
.mcc-pa-tab-opt { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(0,0,0,.1); background: transparent; font-size: 0.72rem; font-weight: 600; color: rgba(17,20,22,.5); cursor: pointer; transition: all .15s; font-family: var(--mcc-font-body); white-space: nowrap; }
.mcc-pa-tab-opt:hover { border-color: rgba(61,124,133,.35); color: #3D7C85; background: rgba(61,124,133,.05); }
.mcc-pa-tab-opt-active { background: rgba(61,124,133,.08) !important; border-color: rgba(61,124,133,.3) !important; color: #3D7C85 !important; }
/* Shared progress */
.mcc-pa-progress-shared { padding: 8px 16px 4px; flex-shrink: 0; }
/* View containers */
.mcc-pa-view { flex: 1; min-height: 0; overflow: hidden; }
.mcc-pa-view-chordsheet { display: flex; flex-direction: row; }
.mcc-pa-view-diagrams { display: flex; flex-direction: column; }
/* Desktop strip container */
.mcc-pa-strip-desktop { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Bars row — own scroll, collapsible */
.mcc-pa-bars-row { flex-shrink: 0; padding: 8px 20px 0; }
.mcc-pa-bars-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.mcc-pa-bars-scroll::-webkit-scrollbar { height: 3px; }
.mcc-pa-bars-scroll::-webkit-scrollbar-thumb { background: rgba(61,124,133,0.15); border-radius: 2px; }
/* Diagram strip scroll */
.mcc-pa-strip-scroll { flex: 1; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; min-height: 0; }
.mcc-pa-strip-scroll::-webkit-scrollbar { height: 4px; }
.mcc-pa-strip-scroll::-webkit-scrollbar-thumb { background: rgba(61,124,133,0.2); border-radius: 2px; }
/* Toolbar: toggle + zoom */
.mcc-pa-strip-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 6px; flex-shrink: 0; }
.mcc-pa-bars-toggle { display: flex; align-items: center; gap: 4px; background: rgba(61,124,133,0.06); border: 1.5px solid rgba(61,124,133,0.15); border-radius: 6px; color: rgba(17,20,22,0.5); font-family: var(--mcc-font-body); font-size: 0.7rem; font-weight: 600; cursor: pointer; padding: 3px 10px; transition: all 0.15s; }
.mcc-pa-bars-toggle:hover { background: rgba(61,124,133,0.12); border-color: rgba(61,124,133,0.3); color: #3D7C85; }
.mcc-pa-bars-toggle-icon { font-size: 0.55rem; transition: transform 0.2s; }
.mcc-pa-bar { height: 26px; border-radius: 6px; background: rgba(61,124,133,0.06); border: 1.5px solid rgba(61,124,133,0.12); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; overflow: hidden; }
.mcc-pa-bar-name { font-family: var(--mcc-font-heading); font-size: 0.65rem; font-weight: 700; color: rgba(17,20,22,0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.mcc-pa-bar:hover { background: rgba(61,124,133,0.12); border-color: rgba(61,124,133,0.3); }
.mcc-pa-bar.played { opacity: 0.35; }
.mcc-pa-bar.active { background: rgba(61,124,133,0.2); border-color: #3D7C85; }
.mcc-pa-bar.active .mcc-pa-bar-name { color: #3D7C85; font-weight: 800; }
.mcc-pa-bar.next { border-color: rgba(61,124,133,0.25); }

/* Strip Takt beat-grid bars */
.mcc-strip-takt {
    height: auto !important;
    flex-direction: column;
    padding: 2px 0 1px;
    gap: 0;
}
.mcc-strip-beat-markers {
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding: 0 4px;
    height: 6px;
    align-items: center;
}
.mcc-strip-beat-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(61,124,133,0.15);
    transition: all 0.15s;
}
.mcc-strip-takt.active .mcc-strip-beat-dot {
    background: rgba(61,124,133,0.3);
}
.mcc-strip-beat-dot.active {
    background: #E8924F !important;
    box-shadow: 0 0 4px rgba(232,146,79,0.5);
    transform: scale(1.3);
}
.mcc-strip-beat-grid {
    display: grid;
    grid-template-columns: var(--bpb-grid, repeat(4, 1fr));
    width: 100%;
    gap: 0;
}
.mcc-strip-beat-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 14px;
    border-right: 1px solid rgba(61,124,133,0.06);
}
.mcc-strip-beat-cell:last-child { border-right: none; }
.mcc-strip-beat-cell.has-chord {
    border-right-color: rgba(61,124,133,0.12);
}
.mcc-strip-chord-text {
    font-family: var(--mcc-font-heading);
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(17,20,22,0.45);
    white-space: nowrap;
}
.mcc-strip-takt.active .mcc-strip-chord-text {
    color: #3D7C85;
    font-weight: 800;
}
.mcc-strip-cont {
    color: rgba(17,20,22,0.15);
    font-size: 0.55rem;
}
.mcc-strip-takt.active .mcc-strip-cont {
    color: rgba(61,124,133,0.25);
}

/* Baukasten pause slot */
.mcc-builder-slot-pause {
    color: rgba(17,20,22,0.35) !important;
    font-style: italic;
    font-size: 0.7em !important;
}

/* === Tiles Toolbar (Meldo Style) === */
.mcc-tiles-toolbar {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 6px 8px;
    background: #FAF8F3;
    border-radius: 12px;
}
.mcc-tiles-toolbar-label {
    font-family: 'Akko', sans-serif;
    font-size: 0.75rem;
    color: rgba(17,20,22,0.5);
    font-weight: 500;
    margin-right: 2px;
}
.mcc-tiles-toolbar-btn {
    font-family: 'Akko', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    min-width: 30px;
    border: 1.5px solid rgba(61,124,133,0.2);
    border-radius: 20px;
    background: #fff;
    color: rgba(17,20,22,0.55);
    cursor: pointer;
    transition: all 0.2s ease;
}
.mcc-tiles-toolbar-btn:hover {
    background: rgba(61,124,133,0.06);
    border-color: rgba(61,124,133,0.4);
    color: #3D7C85;
}
.mcc-tiles-toolbar-btn.active {
    background: #3D7C85;
    border-color: #3D7C85;
    color: #fff;
    box-shadow: 0 2px 8px rgba(61,124,133,0.3);
}
.mcc-tiles-toolbar-divider {
    width: 1.5px;
    height: 18px;
    background: rgba(61,124,133,0.15);
    border-radius: 1px;
    margin: 0 4px;
}

/* === Tiles Beat-Grid (Kachelansicht) === */
.mcc-tiles-bar {
    height: auto !important;
    flex-direction: column !important;
    padding: 3px 4px 6px !important;
    border-right: 1.5px solid rgba(61,124,133,0.15) !important;
    background: rgba(61,124,133,0.03) !important;
    border-radius: 8px !important;
    margin: 0 1px;
    transition: all 0.2s ease;
}
.mcc-tiles-bar.playing {
    background: rgba(61,124,133,0.08) !important;
    border-color: #3D7C85 !important;
    box-shadow: 0 2px 12px rgba(61,124,133,0.15);
}

/* Beat marker dots */
.mcc-tiles-beat-markers {
    display: grid;
    grid-template-columns: var(--bpb-grid, repeat(4, 1fr));
    height: 8px;
    margin-bottom: 2px;
}
.mcc-tiles-beat-marker {
    display: flex;
    justify-content: flex-start;
    padding-left: 3px;
}
.mcc-tiles-beat-marker::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(61,124,133,0.2);
    transition: all 0.1s ease;
}
.mcc-tiles-bar.playing .mcc-tiles-beat-marker::before {
    background: rgba(61,124,133,0.4);
}
.mcc-tiles-beat-marker.active::before {
    background: #3D7C85 !important;
    width: 7px;
    height: 7px;
    margin-top: -1px;
    box-shadow: 0 0 6px rgba(61,124,133,0.6);
    animation: mcc-beat-pulse 0.15s ease-out;
}

/* 4-column beat grid */
.mcc-tiles-beat-grid {
    display: grid;
    grid-template-columns: var(--bpb-grid, repeat(4, 1fr));
    gap: 2px;
    width: 100%;
}
.mcc-tiles-beat-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 2px;
    border-radius: 5px;
    background: rgba(61,124,133,0.04);
    border: 1px solid transparent;
    min-height: 28px;
    transition: all 0.12s ease;
}
.mcc-tiles-beat-cell.has-chord {
    background: rgba(61,124,133,0.08);
    border-color: rgba(61,124,133,0.12);
}
.mcc-tiles-beat-cell.beat-active {
    background: rgba(61,124,133,0.15) !important;
    border-color: #3D7C85 !important;
    box-shadow: inset 0 0 0 1.5px #3D7C85, 0 0 8px rgba(61,124,133,0.3);
    animation: mcc-tiles-cell-pulse 0.18s ease-out;
}
.mcc-tiles-chord {
    font-family: var(--mcc-font-heading, 'Akko', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    color: #111416;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mcc-tiles-beat-cell.beat-active .mcc-tiles-chord {
    color: #3D7C85;
}
.mcc-tiles-continuation {
    font-size: 0.6rem;
    color: rgba(61,124,133,0.25);
}
.mcc-tiles-beat-cell.beat-active .mcc-tiles-continuation {
    color: rgba(61,124,133,0.6);
}
@keyframes mcc-tiles-cell-pulse {
    0% { transform: scale(1.08); box-shadow: inset 0 0 0 1.5px #3D7C85, 0 0 14px rgba(61,124,133,0.5); }
    100% { transform: scale(1); box-shadow: inset 0 0 0 1.5px #3D7C85, 0 0 8px rgba(61,124,133,0.3); }
}

/* Mobile: smaller tiles */
@media (max-width: 600px) {
    .mcc-tiles-beat-cell { padding: 3px 1px; min-height: 22px; }
    .mcc-tiles-chord { font-size: 0.65rem; }
}
/* Bars flex layout */
.mcc-pa-bars { display: flex; gap: 3px; min-width: min-content; }
/* Diagram strip — equal-width cards */
.mcc-pa-strip { display: flex; gap: 8px; padding: 10px 20px 8px; min-width: min-content; --strip-svg-size: 156px; --strip-svg-active: 192px; --strip-name-size: 1rem; --strip-name-active: 1.3rem; align-items: stretch; height: 100%; max-height: 100%; }
.mcc-pa-strip-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex-shrink: 0; cursor: pointer; transition: all 0.25s ease; opacity: 0.65; padding: 6px 8px; border-radius: 12px; border: 2px solid rgba(0,0,0,0.05); background: rgba(255,255,255,0.85); max-height: 100%; overflow: hidden; box-sizing: border-box; }
.mcc-pa-strip-item:hover { opacity: 0.85; border-color: rgba(61,124,133,0.2); }
.mcc-pa-strip-item.played { opacity: 0.35; }
.mcc-pa-strip-item.active { opacity: 1; border-color: #3D7C85; background: rgba(61,124,133,0.05); box-shadow: 0 4px 16px rgba(61,124,133,0.15); transform: scale(1.05); z-index: 2; }
.mcc-pa-strip-item.next { opacity: 0.8; border-color: rgba(61,124,133,0.12); }
.mcc-pa-strip-item .mcc-pa-strip-diagram { pointer-events: none; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; width: var(--strip-svg-size); }
.mcc-pa-strip-item .mcc-pa-strip-diagram svg { width: 100%; height: 100%; display: block; }
.mcc-pa-strip-item.active .mcc-pa-strip-diagram { width: var(--strip-svg-active); }
.mcc-pa-strip-name { font-family: var(--mcc-font-heading); font-weight: 700; font-size: var(--strip-name-size); color: rgba(17,20,22,0.55); white-space: nowrap; transition: all 0.25s ease; flex-shrink: 0; }
.mcc-pa-strip-item.active .mcc-pa-strip-name { font-size: var(--strip-name-active); color: #3D7C85; }
/* Zoom control (inside toolbar) */
.mcc-pa-strip-zoom { display: flex; align-items: center; gap: 6px; }
.mcc-pa-strip-zoom-icon { font-size: 0.75rem; opacity: 0.4; }
.mcc-pa-strip-zoom-slider { width: 110px; height: 3px; -webkit-appearance: none; appearance: none; background: rgba(0,0,0,0.1); border-radius: 2px; outline: none; cursor: pointer; }
.mcc-pa-strip-zoom-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #3D7C85; cursor: pointer; }
.mcc-pa-strip-zoom-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #3D7C85; cursor: pointer; border: none; }
/* Mobile: hidden on desktop */
.mcc-pa-strip-mobile { display: none; }
/* Mobile Grid (2 columns, vertical scroll) */
.mcc-pa-bars-mobile { display: flex; gap: 2px; padding: 6px 10px; flex-shrink: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; position: sticky; top: 0; z-index: 3; background: rgba(245,247,245,0.95); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid rgba(0,0,0,0.04); }
.mcc-pa-bars-mobile::-webkit-scrollbar { height: 3px; }
.mcc-pa-bars-mobile::-webkit-scrollbar-thumb { background: rgba(61,124,133,0.2); border-radius: 2px; }
.mcc-pa-bars-mobile .mcc-pa-bar { height: 22px; }

.mcc-pa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px 10px 10px; align-items: start; }
.mcc-pa-grid-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; border: 2px solid rgba(0,0,0,0.05); background: rgba(255,255,255,0.85); cursor: pointer; transition: all 0.2s ease; opacity: 0.6; justify-content: flex-start; }
.mcc-pa-grid-item:hover { opacity: 0.8; }
.mcc-pa-grid-item.played { opacity: 0.3; }
.mcc-pa-grid-item.active { opacity: 1; border-color: #3D7C85; background: rgba(61,124,133,0.05); box-shadow: 0 2px 12px rgba(61,124,133,0.15); }
.mcc-pa-grid-item.next { opacity: 0.75; border-color: rgba(61,124,133,0.12); }
.mcc-pa-grid-item .mcc-pa-grid-diagram { pointer-events: none; }
.mcc-pa-grid-item .mcc-pa-grid-diagram svg { width: 100%; max-width: 130px; height: auto; display: block; }
.mcc-pa-grid-name { font-family: var(--mcc-font-heading); font-weight: 700; font-size: 0.8rem; color: rgba(17,20,22,0.55); margin-bottom: 2px; }
.mcc-pa-grid-item.active .mcc-pa-grid-name { color: #3D7C85; font-size: 0.9rem; }
.mcc-play-along-chord-name { font-family: var(--mcc-font-heading); font-size: 2.5rem; font-weight: 700; color: #3D7C85; line-height: 1; }
.mcc-play-along-diagram { background: #FFF; border-radius: 12px; padding: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.mcc-play-along-diagram svg { width: 160px; height: auto; max-height: 200px; }

.mcc-play-along-next-chord { font-family: var(--mcc-font-heading); font-size: 1.5rem; font-weight: 600; color: #111416; }
.mcc-play-along-next-diagram { background: #FFF; border-radius: 10px; padding: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
.mcc-play-along-next-diagram svg { width: 110px; height: auto; }
.mcc-play-along-next.approaching { opacity: 1; animation: pulse-next-light 0.5s ease infinite; }
@keyframes pulse-next-light { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }

.mcc-play-along-progress { width: 100%; }
.mcc-play-along-progress-bar { height: 10px; background: rgba(0,0,0,0.08); border-radius: 5px; overflow: hidden; cursor: pointer; position: relative; transition: height 0.15s ease; }
.mcc-play-along-progress-bar:hover { height: 14px; background: rgba(0,0,0,0.12); }
.mcc-play-along-progress-fill { height: 100%; background: linear-gradient(90deg,#3D7C85,#E8924F); border-radius: 5px; transition: width 0.1s linear; width: 0%; pointer-events: none; }
.mcc-play-along-progress-text { display: flex; justify-content: space-between; margin-top: 4px; font-size: 0.75rem; color: rgba(17,20,22,0.4); }

/* Chord Sheet */
.mcc-play-along-chord-sheet { flex: 1; overflow-y: auto; padding: 8px 16px; background: transparent; scroll-behavior: smooth; }
.mcc-play-along-section { margin-bottom: 16px; }
.mcc-play-along-section-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mcc-font-heading); font-size: 0.8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; padding: 4px 12px; border-radius: 20px; margin-bottom: 8px;
}
.mcc-play-along-section-label.verse { background: rgba(61,124,133,0.1); color: #3D7C85; }
.mcc-play-along-section-label.chorus { background: rgba(232,146,79,0.15); color: #D66500; }
.mcc-play-along-section-label.prechorus, .mcc-play-along-section-label.pre-chorus { background: rgba(99,179,237,0.12); color: #3182CE; }
.mcc-play-along-section-label.bridge { background: rgba(107,114,128,0.12); color: #6B7280; }
.mcc-play-along-section-label.intro, .mcc-play-along-section-label.outro { background: rgba(107,114,128,0.08); color: #9CA3AF; }
.mcc-play-along-section-label.solo { background: rgba(245,158,11,0.12); color: #D97706; }
.mcc-play-along-section-label.interlude, .mcc-play-along-section-label.instrumental { background: rgba(168,85,247,0.1); color: #7C3AED; }
.mcc-play-along-section-chords { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.mcc-play-along-sheet-chord {
    padding: 6px 4px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;
    font-family: 'Courier New',monospace; font-size: 0.9rem; font-weight: 600; color: #111416;
    cursor: pointer; transition: all 0.2s ease; text-align: center;
    box-sizing: border-box; overflow: hidden; white-space: nowrap;
}
.mcc-play-along-sheet-chord:hover { background: rgba(61,124,133,0.08); border-color: #3D7C85; }
.mcc-play-along-sheet-chord.active { background: #3D7C85; color: #FFF; border-color: #3D7C85; transform: scale(1.08); box-shadow: 0 2px 10px rgba(61,124,133,0.3); }
.mcc-play-along-sheet-chord.played { opacity: 0.4; }

/* Hide old timeline */
.mcc-play-along-timeline { display: none !important; }

/* Controls – Compact 2-Row Toolbar */
.mcc-play-along-controls { display: flex; flex-direction: column; gap: 6px; padding: 8px 16px; background: #FFF; border-top: 1px solid rgba(0,0,0,0.08); box-shadow: 0 -2px 8px rgba(0,0,0,0.03); position: relative; z-index: 60; flex-shrink: 0; }
.mcc-pa-toolbar-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; position: static; }
.mcc-play-along-play-btn { width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; border-radius: 50% !important; background: linear-gradient(135deg,#E8924F,#E5761F) !important; border: none !important; color:#111416 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: 0 3px 12px rgba(232,146,79,0.35) !important; flex-shrink: 0 !important; padding: 0 !important; }
.mcc-play-along-play-btn:hover { transform: scale(1.06); box-shadow: 0 5px 18px rgba(232,146,79,0.45) !important; }
.mcc-play-along-play-btn.playing { background: linear-gradient(135deg,#3D7C85,#32666D) !important; box-shadow: 0 3px 12px rgba(61,124,133,0.4) !important; }
.mcc-play-along-play-btn svg.play-icon, .mcc-play-along-play-btn .pause-icon svg { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; fill: #fff !important; stroke: #fff !important; pointer-events: none !important; flex-shrink: 0 !important; }

.mcc-pa-play-controls { display: flex; align-items: center; gap: 8px; }
.mcc-pa-reset-btn { width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 50% !important; background: #F0F1F3 !important; border: 1px solid rgba(0,0,0,0.08) !important; color: #555 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.15s ease !important; padding: 0 !important; }
.mcc-pa-reset-btn:hover { background: #E4E5E7 !important; color: #333 !important; transform: scale(1.06); }
.mcc-pa-reset-btn svg { pointer-events: none; }

.mcc-play-along-tempo { display: flex; align-items: center; gap: 8px; padding: 5px 12px; background: transparent; border-radius: 20px; border: 1px solid rgba(255,255,255,0.08); }
.mcc-play-along-tempo-label { font-size: 0.75rem; color: rgba(17,20,22,0.5); }
.mcc-play-along-tempo-value { font-family: var(--mcc-font-heading); font-size: 0.85rem; font-weight: 600; color: #111416; min-width: 60px; text-align: center; }
.mcc-play-along-tempo-slider { width: 90px; -webkit-appearance: none; appearance: none; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; outline: none; }
.mcc-play-along-tempo-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #3D7C85; cursor: pointer; box-shadow: 0 1px 4px rgba(61,124,133,0.3); }
/* Key Select (Tonart) */
.mcc-pa-key-select { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: transparent; border-radius: 20px; border: 1px solid rgba(255,255,255,0.08); }
.mcc-pa-key-label { font-size: 0.7rem; color: rgba(17,20,22,0.5); text-transform: uppercase; letter-spacing: 0.5px; }
.mcc-pa-key-dropdown { font-family: var(--mcc-font-heading); font-size: 0.8rem; font-weight: 600; color: #111416; background: transparent; border: none; cursor: pointer; padding: 2px 4px; border-radius: 6px; transition: background 0.15s; max-width: 100px; }
.mcc-pa-key-dropdown:hover { background: rgba(0,0,0,0.05); }
.mcc-pa-key-dropdown:focus { outline: none; background: rgba(61,124,133,0.1); }
.mcc-pa-key-dropdown option { font-size: 0.85rem; padding: 4px 8px; }
.mcc-pa-key-dropdown optgroup { font-weight: 600; color: #666; font-style: normal; }
/* Recommended options with star have green tint */
.mcc-pa-key-dropdown option[data-mode="major"], .mcc-pa-key-dropdown option[data-mode="minor"] { padding: 4px 8px; }
.mcc-pa-key-dropdown.song-major option[data-mode="major"] { background: rgba(61,124,133,0.06); }
.mcc-pa-key-dropdown.song-minor option[data-mode="minor"] { background: rgba(61,124,133,0.06); }
/* Non-matching mode options are dimmed */
.mcc-pa-key-dropdown.song-major option[data-mode="minor"] { color: #888; }
.mcc-pa-key-dropdown.song-minor option[data-mode="major"] { color: #888; }
.mcc-pa-key-current { font-family: var(--mcc-font-heading); font-size: 0.9rem; font-weight: 700; color: #3D7C85; background: transparent; padding: 3px 10px; border-radius: 12px; min-width: 32px; text-align: center; }

/* Chordsheet Key Select Mode Highlighting */
.mcc-key-select.song-major option[data-mode="major"] { background: rgba(61,124,133,0.06); }
.mcc-key-select.song-minor option[data-mode="minor"] { background: rgba(61,124,133,0.06); }
.mcc-key-select.song-major option[data-mode="minor"] { color: #888; }
.mcc-key-select.song-minor option[data-mode="major"] { color: #888; }

.mcc-pa-transpose { display: flex; align-items: center; gap: 2px; padding: 3px 6px; background: transparent; border-radius: 20px; border: 1px solid rgba(255,255,255,0.08); }
/* Prefer Flats Button */
.mcc-pa-prefer-flats-btn { width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(0,0,0,0.06); color: rgba(17,20,22,0.45); font-size: 1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; line-height: 1; padding: 0; margin-right: 4px; outline: none; }
.mcc-pa-prefer-flats-btn:hover { background: rgba(61,124,133,0.15); color: #3D7C85; }
.mcc-pa-prefer-flats-btn:focus { outline: none; }
.mcc-pa-prefer-flats-btn.active { background: #3D7C85 !important; color: #fff !important; box-shadow: 0 2px 6px rgba(61,124,133,0.3); }
.mcc-pa-prefer-flats-btn:not(.active) { background: rgba(0,0,0,0.06) !important; color: rgba(17,20,22,0.5) !important; box-shadow: none !important; }
.mcc-pa-prefer-flats-btn .mcc-flat-symbol { font-family: serif; font-size: 1.1rem; font-weight: 700; line-height: 1; }
.mcc-pa-transpose-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: #fff; font-size: 1.1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; line-height: 1; padding: 0; }
.mcc-pa-transpose-btn:hover { background: rgba(61,124,133,0.25); }
.mcc-pa-transpose-btn:active { transform: scale(0.9); }
.mcc-pa-transpose-display { font-family: var(--mcc-font-heading); font-size: 0.85rem; font-weight: 600; color: rgba(17,20,22,0.5); min-width: 28px; text-align: center; cursor: pointer; padding: 2px 4px; border-radius: 8px; transition: all 0.15s; }
.mcc-pa-transpose-display.active { color: #3D7C85; background: rgba(61,124,133,0.1); }
.mcc-pa-transpose-display:hover { background: rgba(0,0,0,0.05); }
/* Easy Key Toggle */
.mcc-pa-easy-key-toggle { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-left: 6px; cursor: pointer; padding: 3px 6px; border-radius: 8px; transition: all 0.2s ease; background: rgba(0,0,0,0.03); }
.mcc-pa-easy-key-toggle:hover { background: rgba(61,124,133,0.1); }
.mcc-pa-easy-key-toggle.active { background: rgba(232,146,79,0.15); }
.mcc-easy-key-icon { color: #999; transition: all 0.2s ease; }
.mcc-pa-easy-key-toggle:hover .mcc-easy-key-icon { color: #3D7C85; }
.mcc-pa-easy-key-toggle.active .mcc-easy-key-icon { color: #E8924F; }
/* Toggle Switch */
.mcc-easy-key-switch { width: 28px; height: 14px; background: #ddd; border-radius: 7px; position: relative; transition: all 0.2s ease; }
.mcc-pa-easy-key-toggle.active .mcc-easy-key-switch { background: #E8924F; }
.mcc-easy-key-knob { width: 10px; height: 10px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.mcc-pa-easy-key-toggle.active .mcc-easy-key-knob { left: 16px; }
.mcc-pa-tempo-reset-btn { width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0,0,0,0.06); color: rgba(17,20,22,0.5); font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; padding: 0; flex-shrink: 0; }
.mcc-pa-tempo-reset-btn:hover { background: rgba(0,0,0,0.12); color: #111416; }

.mcc-play-along-style { display: flex; align-items: center; gap: 8px; position: relative; }
.mcc-play-along-style-label { font-size: 0.8rem; color: rgba(17,20,22,0.5); }
.mcc-play-along-style-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: #FAF8F3; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; color: #111416; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; }
.mcc-play-along-style-btn:hover { border-color: #3D7C85; background: rgba(61,124,133,0.05); }
.mcc-play-along-style-btn svg { color: rgba(17,20,22,0.4); }
.mcc-style-current { font-weight: 500; }

.mcc-style-browser { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.9); width: 90%; max-width: 700px; max-height: 80vh; background: #FFF; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); z-index: 10002; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
.mcc-style-browser.active { opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); }
.mcc-style-browser-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.mcc-style-browser-header h3 { margin: 0; font-size: 1.2rem; color: #111416; }
.mcc-style-browser-close { width: 32px; height: 32px; border: none; background: #FAF8F3; border-radius: 50%; color: #111416; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.mcc-style-browser-close:hover { background: rgba(231,76,60,0.1); color: #e74c3c; }
.mcc-style-browser-search { padding: 12px 20px; }
.mcc-style-browser-search input { width: 100%; padding: 12px 16px; background: #FAF8F3; border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; color: #111416; font-size: 1rem; outline: none; transition: all 0.2s; }
.mcc-style-browser-search input:focus { border-color: #3D7C85; background: #FFF; box-shadow: 0 0 0 3px rgba(61,124,133,0.1); }
.mcc-style-browser-search input::placeholder { color: rgba(17,20,22,0.35); }
.mcc-style-categories { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 12px; }
.mcc-style-cat { padding: 6px 12px; background: #FAF8F3; border: 1px solid rgba(0,0,0,0.08); border-radius: 20px; color: rgba(17,20,22,0.6); font-size: 0.8rem; cursor: pointer; transition: all 0.2s; }
.mcc-style-cat:hover { background: rgba(61,124,133,0.06); color: #3D7C85; }
.mcc-style-cat.active { background: #3D7C85; border-color: #3D7C85; color: white; }
.mcc-style-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 10px; padding: 16px 20px; overflow-y: auto; max-height: 400px; }
.mcc-style-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; background: #FAF8F3; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; color: #111416; cursor: pointer; transition: all 0.2s ease; }
.mcc-style-item:hover { background: rgba(61,124,133,0.05); border-color: rgba(61,124,133,0.2); transform: translateY(-2px); }
.mcc-style-item.active { background: rgba(61,124,133,0.1); border-color: #3D7C85; }
.mcc-style-icon { font-size: 1.5rem; }
.mcc-style-name { font-size: 0.8rem; text-align: center; line-height: 1.2; color: rgba(17,20,22,0.8); }
.mcc-style-empty { grid-column: 1/-1; text-align: center; padding: 40px; color: rgba(17,20,22,0.35); }

.mcc-play-along-instrument { display: flex; gap: 5px; align-items: center; }
.mcc-pa-instrument-dropdown { position: relative; }
.mcc-pa-instrument-trigger { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; background: #3D7C85; border: 1px solid #3D7C85; border-radius: 8px; color: white; font-size: 0.8rem; cursor: pointer; transition: all 0.2s ease; font-weight: 600; }
.mcc-pa-instrument-trigger:hover { background: #1F737A; }
.mcc-pa-instrument-trigger svg { transition: transform 0.2s ease; }
.mcc-pa-instrument-trigger.open svg { transform: rotate(180deg); }
.mcc-pa-instrument-menu { display: none; position: absolute; bottom: calc(100% + 6px); left: 0; background: white; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05); padding: 6px; min-width: 180px; z-index: 100; }
.mcc-pa-instrument-menu.open { display: flex; flex-direction: column; gap: 2px; animation: mcc-dropup-in 0.15s ease; }
@keyframes mcc-dropup-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.mcc-pa-instr-option { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: none; background: transparent; border-radius: 7px; font-size: 0.85rem; color: #111416; cursor: pointer; transition: background 0.15s ease; text-align: left; white-space: nowrap; }
.mcc-pa-instr-option svg { flex-shrink: 0; }
.mcc-pa-instr-icon { display: inline-flex; align-items: center; }
.mcc-pa-instr-icon svg { width: 18px; height: 18px; }
.mcc-pa-instr-option:hover { background: #F0F0F0; }
.mcc-pa-instr-option.active { background: #EFF4F4; color: #3D7C85; font-weight: 600; }
.mcc-pa-instr-piano-row { display: flex; gap: 2px; }
.mcc-pa-instr-piano-row .mcc-pa-instr-option { flex: 1; }
.mcc-pa-instr-piano-color { justify-content: center; padding: 8px 10px; min-width: 44px; flex: 0 !important; }
.mcc-pa-instr-piano-color .mcc-bw-dots { margin: 0; }
.mcc-mixer-toggle-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.08) !important; background: #FAF8F3 !important; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; color: #666 !important; padding: 0 !important; }
.mcc-mixer-toggle-btn:hover { background: #EEF3F4 !important; border-color: #3D7C85 !important; color: #3D7C85 !important; }
.mcc-mixer-toggle-btn svg { color: currentColor; width: 18px !important; height: 18px !important; pointer-events: none; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; }
/* Protect stroke-based SVG icons in play-along controls from BuddyBoss overrides */
.mcc-play-along-controls svg:not([fill="currentColor"]) { fill: none !important; stroke: currentColor !important; }
.mcc-play-along-controls svg[fill="currentColor"] { fill: currentColor !important; stroke: none !important; }
.mcc-pa-strip-toolbar svg:not([fill="currentColor"]) { fill: none !important; stroke: currentColor !important; }
.mcc-pa-instrument-dropdown svg[fill="currentColor"] { fill: currentColor !important; stroke: none !important; }
.mcc-mixer-panel { position: fixed; bottom: 180px; right: 20px; width: 280px; background: #fff; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); z-index: 1000010; overflow: hidden; border: 1px solid rgba(61,124,133,0.12); }
.mcc-mixer-header { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; background: linear-gradient(135deg, #3D7C85, #448C94); cursor: grab; user-select: none; }
.mcc-mixer-header:active { cursor: grabbing; }
.mcc-mixer-title { color: #fff; font-family: 'Akko', sans-serif; font-size: 0.9rem; font-weight: 600; }
.mcc-mixer-title { color: #fff; font-family: 'Akko', sans-serif; font-weight: 700; font-size: 0.9rem; }
.mcc-mixer-close { background: none; border: none; color: rgba(255,255,255,0.8); font-size: 1.1rem; cursor: pointer; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s; }
.mcc-mixer-close:hover { background: rgba(255,255,255,0.2); color: #fff; }
.mcc-mixer-channels { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.mcc-mixer-channel { display: flex; align-items: center; gap: 8px; }
.mcc-mixer-label { font-family: 'Akko', sans-serif; font-size: 0.75rem; font-weight: 600; color: #111416; width: 90px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcc-mixer-slider { flex: 1; height: 4px; -webkit-appearance: none; appearance: none; background: #E0E5E9; border-radius: 2px; outline: none; cursor: pointer; }
.mcc-mixer-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #3D7C85; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.mcc-mixer-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #3D7C85; cursor: pointer; border: none; }
.mcc-mixer-value { font-family: 'Akko', sans-serif; font-size: 0.7rem; color: #888; width: 36px; text-align: right; flex-shrink: 0; }
.mcc-mixer-loading { font-size: 0.8rem; color: #999; text-align: center; padding: 12px; }

/* Stems Mixer */
.mcc-stem-row { display: flex; align-items: center; gap: 4px; height: 26px; }
.mcc-stem-lbl { font-family: 'Akko', sans-serif; font-size: 0.68rem; color: #555; width: 62px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mcc-sbp-mixer .mcc-stem-lbl, .mcc-sb-sheet-body .mcc-stem-lbl { color: rgba(255,255,255,.85) !important; }
#mcc-sbp-mixer .mcc-mixer-label, .mcc-sb-sheet-body .mcc-mixer-label { color: rgba(255,255,255,.85) !important; }
#mcc-sbp-mixer .mcc-mixer-value, .mcc-sb-sheet-body .mcc-mixer-value { color: rgba(255,255,255,.5) !important; }
#mcc-sbp-mixer .mcc-stem-pct, .mcc-sb-sheet-body .mcc-stem-pct { color: rgba(255,255,255,.45) !important; }
#mcc-sbp-mixer .mcc-mixer-loading, .mcc-sb-sheet-body .mcc-mixer-loading { color: rgba(255,255,255,.4) !important; }
#mcc-sbp-mixer .mcc-stem-no-stems p, .mcc-sb-sheet-body .mcc-stem-no-stems p { color: rgba(255,255,255,.5) !important; }
#mcc-sbp-mixer .mcc-stem-vol, .mcc-sb-sheet-body .mcc-stem-vol { background: rgba(255,255,255,.18) !important; }
#mcc-sbp-mixer .mcc-mixer-slider, .mcc-sb-sheet-body .mcc-mixer-slider { background: rgba(255,255,255,.18) !important; }
#mcc-sbp-mixer .mcc-stem-btn, .mcc-sb-sheet-body .mcc-stem-btn { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.7) !important; color: #fff !important; }
#mcc-sbp-mixer .mcc-stem-mute-btn.active, .mcc-sb-sheet-body .mcc-stem-mute-btn.active { background: #e74c3c !important; border-color: #e74c3c !important; color: #fff !important; }
#mcc-sbp-mixer .mcc-stem-solo-btn.active, .mcc-sb-sheet-body .mcc-stem-solo-btn.active { background: #f39c12 !important; border-color: #f39c12 !important; color: #fff !important; }
.mcc-stem-btn { width: 18px; height: 18px; border-radius: 3px; border: 1px solid rgba(255,255,255,.7); font-size: 8px; font-weight: 700; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: #fff; transition: all 0.15s; flex-shrink: 0; }
.mcc-stem-btn:focus { outline: none; }
.mcc-stem-btn:not(.active):focus { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.7); }
.mcc-stem-mute-btn:hover:not(.active) { border-color: #e74c3c; color: #e74c3c; }
.mcc-stem-solo-btn:hover:not(.active) { border-color: #f39c12; color: #f39c12; }
.mcc-stem-mute-btn.active { background: #e74c3c; border-color: #e74c3c; color: #fff; }
.mcc-stem-solo-btn.active { background: #f39c12; border-color: #f39c12; color: #fff; }
.mcc-stem-vol { flex: 1; height: 3px; -webkit-appearance: none; appearance: none; background: #E0E5E9; border-radius: 2px; outline: none; cursor: pointer; }
.mcc-stem-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #3D7C85; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.mcc-stem-vol::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #3D7C85; cursor: pointer; border: none; }
.mcc-stem-pct { font-family: 'Akko', sans-serif; font-size: 0.62rem; color: #999; width: 30px; text-align: right; flex-shrink: 0; }
.mcc-stem-no-stems { text-align: center; padding: 10px 6px; font-size: 0.78rem; color: #777; }
.mcc-stem-generate-btn { background: linear-gradient(135deg, #3D7C85, #E8924F); color: #fff; border: none; border-radius: 8px; padding: 7px 16px; font-family: 'Akko', sans-serif; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.mcc-stem-generate-btn:hover:not(:disabled) { transform: scale(1.03); box-shadow: 0 3px 10px rgba(61,124,133,0.3); }
.mcc-stem-generate-btn:disabled { opacity: 0.7; cursor: default; }
.mcc-stem-loading-state { text-align: center; padding: 10px 6px; font-size: 0.78rem; color: #888; }

/* Mini stem buttons in lyrics bar */
.mcc-stem-mini-strip {
    display: flex; gap: 6px; flex-shrink: 0; align-items: center;
}
.mcc-stem-mini {
    width: 24px; height: 24px; border: 1px solid rgba(0,0,0,0.12); border-radius: 6px;
    background: rgba(0,0,0,0.05); cursor: pointer; padding: 0;
    font-size: 12px; line-height: 24px; text-align: center;
    transition: all 0.15s; opacity: 1;
    color: rgba(17,20,22,0.7);
    display: flex; align-items: center; justify-content: center;
}
.mcc-stem-mini:hover { background: rgba(61,124,133,0.1); border-color: rgba(61,124,133,0.4); color: #3D7C85; opacity: 1; }
.mcc-stem-mini:focus { outline: none; }
.mcc-stem-mini svg { stroke: currentColor !important; }
.mcc-stem-mini:hover svg { stroke: #3D7C85 !important; }

.mcc-stem-mini.muted {
    opacity: 0.35; background: rgba(0,0,0,0.03);
    filter: grayscale(1);
}
.mcc-stem-mini.loading {
    opacity: 0.25; filter: grayscale(1); cursor: default;
    animation: mcc-stem-pulse 1.2s ease-in-out infinite;
}
@keyframes mcc-stem-pulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.45; }
}
.mcc-stem-mini-generate {
    width: 24px; height: 24px; border: 1px dashed rgba(232,146,79,0.5); border-radius: 6px;
    background: rgba(232,146,79,0.1); cursor: pointer; padding: 0;
    font-size: 11px; line-height: 24px; text-align: center;
    transition: all 0.2s; opacity: 0.75;
}
.mcc-stem-mini-generate:hover { background: rgba(232,146,79,0.25); opacity: 1; border-color: #E8924F; }
.mcc-stem-mini-generate:disabled { cursor: default; animation: mcc-stem-pulse 1.5s ease-in-out infinite; }
@media (max-width: 600px) {
    .mcc-stem-mini-strip { gap: 3px; }
    .mcc-stem-mini { width: 22px; height: 22px; font-size: 11px; line-height: 22px; }
}

.mcc-pa-options-compact { display: flex; gap: 4px; }
.mcc-pa-pill { display: flex; align-items: center; cursor: pointer; user-select: none; }
.mcc-pa-pill input[type="checkbox"] { display: none; }
.mcc-pa-pill span { display: flex; align-items: center; justify-content: center; min-width: 32px; height: 28px; padding: 0 8px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 20px; font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.7); transition: all 0.2s ease; }
.mcc-pa-pill input:checked + span { background: #3D7C85; border-color: #3D7C85; color: #FFF; }
.mcc-pa-pill:hover span { border-color: rgba(61,124,133,0.3); }

/* Style selector inline */
.mcc-pa-style-inline { margin-bottom: 0 !important; position: static; }
.mcc-pa-style-inline .mcc-style-selector-header { padding: 4px 10px; background: #FAF8F3; border-radius: 8px; border: 1px solid rgba(0,0,0,0.06); cursor: pointer; }
.mcc-pa-style-inline .mcc-style-dropdown { position: absolute; bottom: 100%; left: 0; right: 0; background: #FFF; border: 1px solid rgba(0,0,0,0.1); border-radius: 12px 12px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.12); padding: 12px 16px; margin-bottom: 0; z-index: 200; }

/* Split Main Layout (Original/Begleitung) – like Builder */
.mcc-pa-main-left {
    flex: 1; display: flex; flex-direction: column; overflow-y: auto; min-width: 0;
}
.mcc-pa-main-left .mcc-play-along-chord-sheet { flex: 1; overflow-y: auto; padding: 8px 16px 16px; display: block !important; }
.mcc-pa-main-right {
    width: 200px; flex-shrink: 0; display: flex; flex-direction: column;
    align-items: center; gap: 12px; padding: 16px 12px;
    background: rgba(250,248,243,0.6); border-left: 1px solid rgba(0,0,0,0.06);
    overflow-y: auto;
}
.mcc-pa-main-diagram-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%;
}
.mcc-pa-main-diagram-card.current .mcc-play-along-chord-name { font-size: 2.2rem; }
.mcc-pa-main-diagram-card.current .mcc-play-along-diagram { padding: 8px; }
.mcc-pa-main-diagram-card.current .mcc-play-along-diagram svg { width: 160px; }
.mcc-pa-main-diagram-card.next { opacity: 0.6; }
.mcc-pa-main-diagram-card.next .mcc-play-along-next-chord { font-size: 1.4rem; }
.mcc-pa-main-diagram-card.next .mcc-play-along-next-diagram svg { width: 110px; }
.mcc-pa-main-diagram-label { font-size: 0.65rem; color: rgba(17,20,22,0.4); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }

.mcc-play-along-loading { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 40px 20px; flex: 1; }
.mcc-play-along-loading.active { display: flex; }
.mcc-play-along-spinner { width: 44px; height: 44px; border: 3px solid rgba(0,0,0,0.08); border-top-color: #3D7C85; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mcc-play-along-loading-text { color: rgba(17,20,22,0.6); font-size: 0.95rem; font-family: 'Akko', sans-serif; }

/* v4.32.13: Minimaler Loader (Ringe + Welle + schwebende Noten) */
.mcc-pa-loader { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 380px; }
.mcc-pa-loader-visual { position: relative; width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; overflow: visible; }
.mcc-pa-ring { position: absolute; border-radius: 50%; border: 2px solid #3D7C85; opacity: 0; }
.mcc-pa-ring-1 { width: 60px; height: 60px; animation: mccPARing 2.4s ease-out infinite; }
.mcc-pa-ring-2 { width: 60px; height: 60px; animation: mccPARing 2.4s ease-out infinite 0.8s; }
.mcc-pa-ring-3 { width: 60px; height: 60px; animation: mccPARing 2.4s ease-out infinite 1.6s; }
@keyframes mccPARing {
    0% { transform: scale(0.4); opacity: 1; border-color: #3D7C85; border-width: 3px; }
    60% { opacity: 0.5; border-color: #E8924F; }
    100% { transform: scale(2.4); opacity: 0; border-color: #E8924F; border-width: 1px; }
}
.mcc-pa-loader-wave { position: relative; display: flex; align-items: center; gap: 3px; height: 32px; z-index: 2; }
.mcc-pa-loader-wave span { display: inline-block; width: 4px; background: linear-gradient(180deg, #3D7C85 0%, #E8924F 100%); border-radius: 2px; animation: mccPAWave 1.3s ease-in-out infinite; transform-origin: center; }
.mcc-pa-loader-wave span:nth-child(1) { height: 12px; animation-delay: 0.0s; }
.mcc-pa-loader-wave span:nth-child(2) { height: 20px; animation-delay: 0.1s; }
.mcc-pa-loader-wave span:nth-child(3) { height: 28px; animation-delay: 0.2s; }
.mcc-pa-loader-wave span:nth-child(4) { height: 32px; animation-delay: 0.3s; }
.mcc-pa-loader-wave span:nth-child(5) { height: 28px; animation-delay: 0.4s; }
.mcc-pa-loader-wave span:nth-child(6) { height: 20px; animation-delay: 0.5s; }
.mcc-pa-loader-wave span:nth-child(7) { height: 12px; animation-delay: 0.6s; }
@keyframes mccPAWave {
    0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
    50% { transform: scaleY(1.3); opacity: 1; }
}

/* Schwebende Noten — rein dekorativ, erscheinen erst nach 4s via .visible */
.mcc-pa-notes { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.mcc-pa-note { position: absolute; font-size: 1.5rem; opacity: 0; bottom: 50%; }
.mcc-pa-notes.visible .mcc-pa-note-1 { color: #3D7C85; left: 10%; animation: mccPANoteFloat 4s ease-in infinite 0s; }
.mcc-pa-notes.visible .mcc-pa-note-2 { color: #E8924F; left: 30%; animation: mccPANoteFloat 4.5s ease-in infinite 1s; font-size: 1.2rem; }
.mcc-pa-notes.visible .mcc-pa-note-3 { color: #3D7C85; right: 30%; animation: mccPANoteFloat 5s ease-in infinite 2s; font-size: 1.3rem; }
.mcc-pa-notes.visible .mcc-pa-note-4 { color: #E8924F; right: 10%; animation: mccPANoteFloat 4.2s ease-in infinite 0.5s; }
@keyframes mccPANoteFloat {
    0% { opacity: 0; transform: translateY(0) rotate(-10deg); }
    20% { opacity: 0.7; }
    80% { opacity: 0.7; }
    100% { opacity: 0; transform: translateY(-80px) rotate(20deg); }
}

/* Dezenter Status-Text (fade in nach 4s) */
.mcc-pa-loader-status { font-family: 'Akko', sans-serif; font-size: 0.95rem; color: rgba(17,20,22,0.55); letter-spacing: 0.2px; text-align: center; }

/* Progress bar (von Anfang an sichtbar) */
.mcc-pa-progress-wrap { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.mcc-pa-progress { height: 6px; background: rgba(61,124,133,0.1); border-radius: 3px; overflow: hidden; position: relative; }
.mcc-pa-progress-fill { height: 100%; background: linear-gradient(90deg, #3D7C85 0%, #E8924F 100%); border-radius: 3px; width: 0%; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; }
.mcc-pa-progress-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%); animation: mccPAShimmer 1.8s linear infinite; }
@keyframes mccPAShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.mcc-pa-progress-label { font-family: 'Akko', sans-serif; font-size: 0.75rem; color: rgba(17,20,22,0.5); text-align: right; font-variant-numeric: tabular-nums; }

/* First-Time-Notice (fade in nach 10s) */
.mcc-pa-first-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; background: linear-gradient(135deg, rgba(61,124,133,0.06) 0%, rgba(232,146,79,0.06) 100%); border-left: 3px solid #E8924F; border-radius: 10px; font-family: 'Akko', sans-serif; font-size: 0.82rem; color: rgba(17,20,22,0.75); line-height: 1.4; max-width: 100%; }
.mcc-pa-first-icon { font-size: 1.1rem; flex-shrink: 0; line-height: 1.2; }

.mcc-play-along-error { display: none; flex-direction: column; align-items: center; gap: 16px; padding: 60px 40px; text-align: center; flex: 1; }
.mcc-play-along-error.active { display: flex; }
.mcc-play-along-error-icon { font-size: 3rem; }
.mcc-play-along-error-text { color: rgba(17,20,22,0.6); font-size: 0.95rem; max-width: 300px; }
.mcc-play-along-retry-btn { padding: 10px 24px; background: #3D7C85; border: none; border-radius: 8px; color: white; font-size: 0.9rem; cursor: pointer; transition: background 0.2s; }
.mcc-play-along-retry-btn:hover { background: #448B94; }

/* Audio Source Toggle */
.mcc-play-along-source-toggle { display: flex; gap: 3px; padding: 3px; background: rgba(17,20,22,0.06); border-radius: 10px; }
.mcc-source-btn { display: flex; align-items: center; gap: 6px; padding: 8px 20px; border: none; border-radius: 10px; background: transparent; color: rgba(17,20,22,0.6); font-family: 'Akko', sans-serif; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.25s ease; }
.mcc-source-btn:hover { color: #111416; background: rgba(255,255,255,0.5); }
.mcc-source-btn.active { background: #3D7C85; color: white; box-shadow: 0 2px 8px rgba(61,124,133,0.3); }
.mcc-source-btn svg { flex-shrink: 0; }

/* Style Selector */
.mcc-play-along-style-selector { padding: 0 8px 8px; position: static; z-index: 2; }
.mcc-style-selector-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(61,124,133,0.06); border-radius: 10px; cursor: pointer; transition: all 0.2s ease; }
.mcc-style-selector-header:hover { background: rgba(61,124,133,0.1); }
.mcc-style-selector-label { font-family: 'Akko', sans-serif; font-size: 0.75rem; color: rgba(17,20,22,0.5); text-transform: uppercase; letter-spacing: 0.5px; }
.mcc-style-current-name { font-family: 'Akko', sans-serif; font-size: 0.85rem; font-weight: 600; color: #3D7C85; flex: 1; }
.mcc-style-expand-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: none; color: #3D7C85; cursor: pointer; transition: transform 0.2s ease; padding: 0; }
.mcc-style-expand-btn.expanded { transform: rotate(180deg); }
.mcc-style-dropdown { padding: 8px 0 4px; }
.mcc-style-category-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; -ms-overflow-style: none; }

/* Style Category Tabs */
.mcc-style-category-tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; -ms-overflow-style: none; }
.mcc-style-category-tabs::-webkit-scrollbar { display: none; }
.mcc-style-cat-tab { flex-shrink: 0; padding: 5px 12px; border: none; border-radius: 8px; background: rgba(17,20,22,0.06); color: rgba(17,20,22,0.65); font-family: 'Akko', sans-serif; font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; }
.mcc-style-cat-tab:hover { background: rgba(61,124,133,0.1); color: #3D7C85; }
.mcc-style-cat-tab.active { background: #3D7C85; color: white; }

/* Style Chips */
.mcc-style-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; max-height: 120px; overflow-y: auto; scrollbar-width: thin; }
.mcc-style-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1.5px solid rgba(17,20,22,0.1); border-radius: 20px; background: white; color: #111416; font-family: 'Akko', sans-serif; font-size: 0.75rem; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; }
.mcc-style-chip:hover { border-color: #3D7C85; background: rgba(61,124,133,0.05); }
.mcc-style-chip.active { background: #E8924F; border-color: #E8924F; color:#111416; font-weight: 600; box-shadow: 0 2px 6px rgba(232,146,79,0.3); }
.mcc-style-chip-icon { font-size: 0.85rem; }
.mcc-style-chip-name { font-size: 0.73rem; }

/* Style Generating Indicator */
.mcc-style-generating { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; color: rgba(17,20,22,0.6); font-size: 0.8rem; }
.mcc-style-generating .mcc-play-along-spinner { width: 16px; height: 16px; border-width: 2px; }

@media (max-width: 600px) {
    .mcc-style-browser { width: 95%; max-height: 85vh; }
    .mcc-style-grid { grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); }
    .mcc-style-categories { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; }
    .mcc-style-cat { flex-shrink: 0; }
}
@media (max-width: 768px) {
    .mcc-play-along-header { padding: 10px 12px; }
    .mcc-play-along-song-info { display: none; }
    .mcc-play-along-song-title { max-width: 140px; font-size: 0.9rem; }
    .mcc-pa-logo { width: 24px; height: 24px; }
    .mcc-play-along-chord-name { font-size: 1.8rem; }
    .mcc-play-along-diagram svg { width: 120px; }
    .mcc-pa-main-right { width: 140px; padding: 10px 8px; }
    .mcc-pa-view-tabs { padding: 6px 10px 0; }
    .mcc-pa-view-tabs-row { padding: 5px 8px 4px; gap: 6px; flex-wrap: wrap; }
    .mcc-pa-view-tabs-seg { gap: 2px; padding: 2px; }
    .mcc-pa-view-tab { padding: 7px 10px; font-size: 0; min-width: 36px; min-height: 36px; justify-content: center; }
    .mcc-pa-view-tab .mcc-tab-label { display: none; }
    .mcc-pa-view-tab svg { display: block; width: 18px; height: 18px; }
    .mcc-pa-tab-opt { padding: 7px 9px; font-size: 0; gap: 0; min-width: 36px; min-height: 36px; justify-content: center; }
    .mcc-pa-tab-opt .mcc-opt-label { display: none; }
    .mcc-pa-tab-opt svg { display: block; width: 17px; height: 17px; }
    .mcc-pa-tab-waterfall-hint:not(.active)::after { margin-left: 2px; }
    .mcc-pa-strip { padding: 8px 20px; gap: 5px; }
    .mcc-pa-strip-zoom-slider { width: 60px; }
    .mcc-pa-strip-desktop { display: none; }
    .mcc-pa-strip-mobile { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
    .mcc-pa-main-diagram-card.current .mcc-play-along-diagram svg { width: 110px; }
    .mcc-pa-main-diagram-card.next .mcc-play-along-next-diagram svg { width: 80px; }
    .mcc-pa-toolbar-row { gap: 6px; }
    .mcc-play-along-tempo-slider { width: 70px; }
    .mcc-source-btn { padding: 5px 10px; font-size: 0.75rem; }
    .mcc-source-btn svg { display: none; }
    .mcc-style-chips { max-height: 90px; }
    .mcc-style-chip { padding: 4px 8px; font-size: 0.7rem; }
}
@media (max-width: 480px) {
    .mcc-play-along-chord-name { font-size: 1.5rem; }
    .mcc-play-along-diagram svg { width: 100px; }
    .mcc-play-along-play-btn { width: 50px !important; height: 50px !important; min-width: 50px !important; min-height: 50px !important; }
    .mcc-play-along-play-btn svg.play-icon, .mcc-play-along-play-btn svg.pause-icon { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; }
    .mcc-play-along-tempo { padding: 4px 8px; }
    .mcc-pa-key-select { padding: 2px 6px; gap: 4px; }
    .mcc-pa-key-label { display: none; }
    .mcc-pa-key-dropdown { font-size: 0.75rem; max-width: 70px; }
    .mcc-pa-key-current { font-size: 0.8rem; padding: 2px 8px; min-width: 28px; }
    .mcc-pa-transpose { padding: 2px 4px; }
    .mcc-pa-prefer-flats-btn { width: 22px; height: 22px; font-size: 0.85rem; margin-right: 2px; }
    .mcc-pa-transpose-btn { width: 22px; height: 22px; font-size: 0.9rem; }
    .mcc-pa-transpose-display { font-size: 0.75rem; min-width: 22px; }
    .mcc-pa-easy-key-toggle { padding: 2px 4px; }
    .mcc-easy-key-icon { width: 14px; height: 14px; }
    .mcc-easy-key-switch { width: 24px; height: 12px; }
    .mcc-easy-key-knob { width: 8px; height: 8px; }
    .mcc-pa-easy-key-toggle.active .mcc-easy-key-knob { left: 14px; }
    .mcc-pa-tempo-reset-btn { width: 20px; height: 20px; font-size: 0.75rem; }
    .mcc-play-along-tempo-slider { width: 50px; }
    .mcc-play-along-tempo-label { display: none; }
    .mcc-play-along-sheet-chord { padding: 5px 10px; font-size: 0.8rem; min-width: 36px; }
    .mcc-source-btn { padding: 4px 8px; font-size: 0.7rem; }
    .mcc-pa-options-compact { gap: 3px; }
    .mcc-pa-pill span { min-width: 28px; height: 26px; padding: 0 5px; font-size: 0.75rem; }
    .mcc-pa-instrument-trigger { padding: 4px 8px; font-size: 0.75rem; }
    .mcc-pa-instrument-menu { min-width: 160px; }
    .mcc-pa-main-right { width: 120px; padding: 8px 6px; gap: 8px; }
    .mcc-pa-main-diagram-card.current .mcc-play-along-chord-name { font-size: 1.3rem; }
    .mcc-pa-main-diagram-card.current .mcc-play-along-diagram svg { width: 90px; }
    .mcc-pa-main-diagram-card.next .mcc-play-along-next-diagram svg { width: 70px; }
    .mcc-style-cat-tab { padding: 4px 8px; font-size: 0.7rem; }
    .mcc-style-chips { max-height: 70px; gap: 4px; }
}

/* Portrait: Griffbilder kleiner (Lyrics-Bar nimmt Platz) */
@media (orientation: portrait) and (max-width: 768px) {
    .mcc-play-along-diagram svg { width: 100px; max-height: 130px; }
    .mcc-play-along-next-diagram svg { width: 70px; }
    .mcc-pa-main-diagram-card.current .mcc-play-along-diagram svg { width: 95px; }
    .mcc-pa-main-diagram-card.next .mcc-play-along-next-diagram svg { width: 65px; }
    .mcc-pa-main-diagram-card.current .mcc-play-along-chord-name { font-size: 1.5rem; }
    .mcc-builder-diagram-svg svg { width: 95px; max-height: 120px; }
    .mcc-builder-diagram-card.next .mcc-builder-diagram-svg svg { width: 70px; max-height: 90px; }
}
@media (orientation: portrait) and (max-width: 480px) {
    .mcc-play-along-diagram svg { width: 80px; max-height: 110px; }
    .mcc-play-along-next-diagram svg { width: 58px; }
    .mcc-pa-main-diagram-card.current .mcc-play-along-diagram svg { width: 78px; }
    .mcc-pa-main-diagram-card.next .mcc-play-along-next-diagram svg { width: 55px; }
    .mcc-pa-main-diagram-card.current .mcc-play-along-chord-name { font-size: 1.2rem; }
}

/* Landscape: Griffbilder grösser */
@media (orientation: landscape) and (max-height: 500px) {
    .mcc-play-along-diagram svg { width: 150px; max-height: 180px; }
    .mcc-play-along-next-diagram svg { width: 105px; }
    .mcc-pa-main-diagram-card.current .mcc-play-along-diagram svg { width: 145px; }
    .mcc-pa-main-diagram-card.next .mcc-play-along-next-diagram svg { width: 100px; }
    .mcc-builder-diagram-svg svg { width: 130px; max-height: 155px; }
    .mcc-builder-diagram-card.next .mcc-builder-diagram-svg svg { width: 90px; max-height: 110px; }
}

/* ====================================
   BUILDER (Akkord-Baukasten)
   ==================================== */
.mcc-builder-container { padding: 16px; flex: 1; overflow-y: auto; overflow-x: hidden; flex-direction: column; position: relative; z-index: 50; display: none; scroll-padding-top: 16px; }
.mcc-builder-container.active { display: flex !important; }
.mcc-builder-bars { display: flex; flex-direction: column; gap: 0; padding: 8px 4px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; overflow-y: auto; scroll-padding-top: 12px; }
.mcc-builder-bars::-webkit-scrollbar { height: 4px; }
.mcc-builder-bars::-webkit-scrollbar-thumb { background: rgba(61,124,133,0.3); border-radius: 2px; }

.mcc-builder-bar { flex-shrink: 0; background: #FFF; border-radius: 14px; padding: 8px 10px 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); border: 2px solid rgba(61,124,133,0.1); min-width: 0; transition: border-color 0.25s ease, box-shadow 0.25s ease; position: relative; overflow: visible; }
.mcc-builder-bar:hover { border-color: rgba(61,124,133,0.3); box-shadow: 0 4px 16px rgba(61,124,133,0.1); }
.mcc-builder-bar.playing { border-color: #3D7C85; box-shadow: 0 4px 20px rgba(61,124,133,0.25); background: rgba(61,124,133,0.03); }
.mcc-builder-slot.playing { background: linear-gradient(135deg, #3D7C85, #438892) !important; border-color: #3D7C85 !important; border-style: solid !important; }
.mcc-builder-slot.playing .mcc-builder-slot-chord { color: #FFF !important; }
.mcc-builder-slot.playing .mcc-builder-slot-beat { color: rgba(255,255,255,0.8) !important; }

/* Beat-Puls: aktueller Schlag leuchtet rhythmisch auf */
.mcc-builder-slot.beat-active {
    box-shadow: inset 0 0 0 2px #3D7C85, 0 0 12px rgba(61,124,133,0.4) !important;
    animation: mcc-builder-beat-pulse 0.2s ease-out;
}
.mcc-builder-slot.beat-active:not(.playing) {
    background: rgba(61,124,133,0.12) !important;
    border-color: #3D7C85 !important;
}
.mcc-builder-slot.beat-active .mcc-builder-slot-beat {
    color: #3D7C85 !important;
    font-weight: 700 !important;
}
@keyframes mcc-builder-beat-pulse {
    0% { transform: scale(1.06); box-shadow: inset 0 0 0 2px #3D7C85, 0 0 18px rgba(61,124,133,0.6); }
    100% { transform: scale(1); box-shadow: inset 0 0 0 2px #3D7C85, 0 0 12px rgba(61,124,133,0.4); }
}

/* Selected slot (user clicked) */
.mcc-builder-slot.selected { box-shadow: 0 0 0 2px #E8924F, 0 0 12px rgba(232,146,79,0.3); border-color: #E8924F !important; border-style: solid !important; background: rgba(232,146,79,0.06) !important; }
.mcc-builder-slot.selected .mcc-builder-slot-chord { color: #C86111 !important; }

/* Pulse animation for diagram card */
@keyframes mcc-diagram-pulse { 0% { box-shadow: 0 2px 12px rgba(61,124,133,0.1); } 50% { box-shadow: 0 2px 20px rgba(232,146,79,0.35); } 100% { box-shadow: 0 2px 12px rgba(61,124,133,0.1); } }
.mcc-builder-diagram-card.pulse { animation: mcc-diagram-pulse 0.6s ease; }
.mcc-builder-bar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; padding: 0 2px; }
.mcc-builder-bar-num { font-family: 'Akko', sans-serif; font-size: 0.7rem; font-weight: 700; color: rgba(61,124,133,0.5); }
.mcc-builder-bar-remove { width: 18px; height: 18px; border: none; background: rgba(220,53,69,0.08); color: #dc3545; border-radius: 50%; font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; opacity: 0; }
.mcc-builder-bar:hover .mcc-builder-bar-remove { opacity: 1; }
.mcc-builder-bar-remove:hover { background: rgba(220,53,69,0.15); transform: scale(1.15); }

.mcc-builder-slots { display: grid; grid-template-columns: var(--bpb-grid, repeat(4, 1fr)); gap: 4px; overflow: visible; }
.mcc-builder-slot { position: relative; height: 44px; border-radius: 8px; background: rgba(61,124,133,0.04); border: 2px dashed rgba(61,124,133,0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; user-select: none; overflow: visible; }
.mcc-builder-slot:hover { border-color: rgba(61,124,133,0.4); background: rgba(61,124,133,0.08); }
.mcc-builder-slot.has-chord { border-style: solid; border-color: #3D7C85; background: linear-gradient(135deg, rgba(61,124,133,0.08), rgba(232,146,79,0.06)); cursor: pointer; }
.mcc-builder-slot.has-chord:hover { border-color: #E8924F; }
.mcc-builder-slot-beat { font-family: 'Akko', sans-serif; font-size: 0.7rem; color: rgba(61,124,133,0.3); font-weight: 600; }
.mcc-builder-slot-chord { font-family: 'Courier New', monospace; font-size: 0.85rem; font-weight: 700; color: #3D7C85; }
.mcc-builder-slot-clear { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border: none; background: #dc3545; color: #FFF; border-radius: 50%; font-size: 10px; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(220,53,69,0.3); z-index: 5; }
.mcc-builder-slot.has-chord:hover .mcc-builder-slot-clear { display: flex; }

/* Builder Actions (bottom buttons) */
.mcc-builder-actions { display: flex; gap: 8px; padding-top: 8px; flex-shrink: 0; }
.mcc-builder-add-bar, .mcc-builder-add-section { display: flex; align-items: center; justify-content: center; gap: 5px; flex: 1; padding: 9px 12px; border: 2px dashed rgba(61,124,133,0.25); border-radius: 12px; background: transparent; color: #3D7C85; font-family: 'Akko', sans-serif; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.25s ease; }
.mcc-builder-add-bar:hover, .mcc-builder-add-section:hover { border-color: #3D7C85; background: rgba(61,124,133,0.04); }
.mcc-builder-add-section { border-color: rgba(232,146,79,0.3); color: #C86111; }
.mcc-builder-add-section:hover { border-color: #E8924F; background: rgba(232,146,79,0.04); }
.mcc-builder-scale-beats { min-width: 40px !important; flex: 0 !important; padding: 9px 10px !important; font-weight: 800 !important; font-size: 0.85rem !important; letter-spacing: -0.5px; border-color: rgba(61,124,133,0.3) !important; color: #3D7C85 !important; }
.mcc-builder-scale-beats:hover { border-color: #3D7C85 !important; background: rgba(61,124,133,0.06) !important; }
.mcc-builder-add-bar svg, .mcc-builder-add-section svg, .mcc-builder-copy-song svg { flex-shrink: 0; }

/* Insert bar button between bars (legacy) */
.mcc-builder-insert-bar { flex-shrink: 0; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; max-width: 24px !important; max-height: 24px !important; padding: 0 !important; border: 2px dashed rgba(61,124,133,0.3) !important; border-radius: 50% !important; background: transparent !important; color: rgba(61,124,133,0.5); font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; align-self: center; transition: all 0.2s ease; margin: 0 -4px; box-sizing: border-box !important; }
.mcc-builder-insert-bar:hover { border-color: #3D7C85 !important; color: #3D7C85; background: rgba(61,124,133,0.1) !important; transform: scale(1.15); }

/* New Insert Cell (between bars) */
.mcc-builder-insert-cell { position: relative; display: flex; align-items: center; justify-content: center; width: 18px; flex-shrink: 0; margin: 0 2px; }
.mcc-builder-insert-cell.mcc-builder-insert-start { margin-left: 0; margin-right: 4px; }
.mcc-builder-insert-plus { width: 18px; height: 18px; min-width: 18px; min-height: 18px; max-width: 18px; max-height: 18px; border: 1.5px dashed rgba(61,124,133,0.4); border-radius: 50%; background: transparent; color: rgba(61,124,133,0.6); font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0; box-sizing: border-box; }
.mcc-builder-insert-plus:hover { border-color: #3D7C85; border-style: solid; color: #3D7C85; background: rgba(61,124,133,0.1); transform: scale(1.1); }
.mcc-builder-insert-dropdown { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; z-index: 1000; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); overflow: hidden; min-width: 130px; white-space: nowrap; }
.mcc-builder-insert-dropdown.open { display: block; }
.mcc-builder-insert-choice { display: block; width: 100%; padding: 10px 14px; border: none; background: #fff; cursor: pointer; text-align: left; font-size: 13px; color: #333; border-bottom: 1px solid #eee; font-family: 'Akko', sans-serif; }
.mcc-builder-insert-choice:last-child { border-bottom: none; }
.mcc-builder-insert-choice:hover { background: #F4F6F6; color: #3D7C85; }

/* Builder Row - Flexbox for insert buttons between bars */
.mcc-builder-row { display: flex; align-items: stretch; gap: 6px; margin-bottom: 10px; }
/* Desktop: Bars begrenzte Breite damit unvollständige Zeilen nicht gestreckt werden */
.mcc-builder-bar { flex: 1 1 0; min-width: 80px; max-width: calc((100% - 140px) / 4); }

/* Mobile: kleinere Insert-Buttons, Bars passen sich an (JS setzt 2 pro Zeile) */
@media (max-width: 600px) {
    .mcc-builder-bar { max-width: calc((100% - 80px) / 2); min-width: 60px; }
    .mcc-builder-insert-cell { width: 14px; margin: 0 1px; }
    .mcc-builder-insert-plus { width: 14px; height: 14px; min-width: 14px; min-height: 14px; max-width: 14px; max-height: 14px; font-size: 12px; border-width: 1px; }
}

/* Builder Sections */
.mcc-builder-section { border-left: 3px solid var(--section-color, #3D7C85); border-radius: 4px; padding-left: 10px; margin-bottom: 12px; }
.mcc-builder-section-header { display: flex; align-items: center; gap: 8px; padding: 4px 0 8px; }
.mcc-builder-section-color { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; flex-shrink: 0; transition: transform 0.15s ease, box-shadow 0.15s ease; border: 2px solid rgba(255,255,255,0.8); box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.mcc-builder-section-color:hover { transform: scale(1.15); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.mcc-builder-section-name { flex: 1; border: none; border-bottom: 1.5px solid transparent; background: transparent; font-family: 'Akko', sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--section-color, #3D7C85); padding: 2px 4px; outline: none; transition: border-color 0.2s ease; min-width: 0; }
.mcc-builder-section-name:focus { border-bottom-color: var(--section-color, #3D7C85); }
.mcc-builder-section-name::placeholder { color: rgba(17,20,22,0.25); font-weight: 500; }
.mcc-builder-section-remove { width: 20px; height: 20px; border: none; background: transparent; color: rgba(17,20,22,0.25); font-size: 12px; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; flex-shrink: 0; }
.mcc-builder-section-remove:hover { background: rgba(224,85,119,0.08); color: #E05577; }
.mcc-builder-section-bars { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }

/* Panel button text fix for BuddyBoss - removed, no longer needed */

.mcc-builder-generating { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 8px; color: rgba(17,20,22,0.6); font-size: 0.8rem; }
.mcc-pa-toast-error { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); background: #e74c3c; color: #FFF; padding: 8px 20px; border-radius: 8px; font-size: 0.8rem; font-weight: 500; box-shadow: 0 4px 16px rgba(231,76,60,0.3); z-index: 200; white-space: nowrap; animation: mcc-toast-in 0.3s ease; }
@keyframes mcc-toast-in { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* Chord Picker Dropdown */
/* Chord Picker Backdrop */
.mcc-builder-picker-backdrop { position: fixed; inset: 0; z-index: 999998; background: rgba(0,0,0,0.3); animation: mcc-picker-fade-in 0.15s ease; }
@keyframes mcc-picker-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Chord Picker Modal — always centered in viewport */
.mcc-builder-picker { position: fixed; z-index: 999999; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #FFF; border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.06); padding: 16px; width: 380px; max-width: 92vw; max-height: 80vh; overflow-y: auto; animation: mcc-picker-modal-in 0.2s ease; }
@keyframes mcc-picker-modal-in { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.mcc-builder-picker::-webkit-scrollbar { width: 5px; }
.mcc-builder-picker::-webkit-scrollbar-thumb { background: rgba(61,124,133,0.2); border-radius: 3px; }
/* Picker close button */
.mcc-builder-picker-close { position: sticky; top: -16px; float: right; margin: -8px -8px 4px 0; background: rgba(0,0,0,0.06); border: none; border-radius: 50%; width: 28px; height: 28px; font-size: 1.1rem; line-height: 1; color: rgba(17,20,22,0.5); cursor: pointer; z-index: 2; transition: all 0.15s; display: flex; align-items: center; justify-content: center; }
.mcc-builder-picker-close:hover { background: rgba(0,0,0,0.12); color: #111416; }
.mcc-builder-picker-group { margin-bottom: 8px; }
.mcc-builder-picker-group:last-child { margin-bottom: 0; }
.mcc-builder-picker-label { font-family: 'Akko', sans-serif; font-size: 0.65rem; font-weight: 700; color: rgba(17,20,22,0.4); text-transform: uppercase; letter-spacing: 1px; padding: 0 4px 4px; }
.mcc-builder-picker-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mcc-builder-picker-chip { padding: 5px 10px; border: 1.5px solid rgba(61,124,133,0.2); border-radius: 8px; background: transparent; color: #111416; font-family: 'Courier New', monospace; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; }
.mcc-builder-picker-chip:hover { border-color: #3D7C85; background: rgba(61,124,133,0.08); color: #3D7C85; }
.mcc-picker-root-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mcc-picker-root { padding: 7px 4px; border: 1.5px solid rgba(61,124,133,0.15); border-radius: 8px; background: transparent; color: #111416; font-family: 'Courier New', monospace; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.15s ease; text-align: center; }
.mcc-picker-root:hover { border-color: #3D7C85; background: rgba(61,124,133,0.08); color: #3D7C85; }
.mcc-picker-root.active { border-color: #3D7C85; background: #3D7C85; color: #fff; }
.mcc-picker-quality-panel { margin-top: 6px; }
.mcc-picker-quality-header { display: flex; align-items: center; gap: 8px; padding: 0 2px 6px; }
.mcc-picker-selected-root { font-family: 'Akko', sans-serif; font-size: 1.1rem; font-weight: 700; color: #3D7C85; }
.mcc-picker-root-back { background: none; border: 1.5px solid rgba(61,124,133,0.2); border-radius: 6px; padding: 2px 8px; font-size: 0.85rem; cursor: pointer; color: #3D7C85; transition: all 0.15s ease; }
.mcc-picker-root-back:hover { background: rgba(61,124,133,0.08); border-color: #3D7C85; }
.mcc-picker-quality-groups { display: flex; flex-direction: column; gap: 6px; }
.mcc-picker-qgroup { }
.mcc-picker-qgroup-label { font-family: 'Akko', sans-serif; font-size: 0.58rem; font-weight: 700; color: rgba(17,20,22,0.3); text-transform: uppercase; letter-spacing: 0.8px; padding: 0 2px 2px; }
.mcc-picker-qgroup-items { display: flex; flex-wrap: wrap; gap: 4px; }
.mcc-picker-quality { padding: 5px 10px; border: 1.5px solid rgba(232,146,79,0.25); border-radius: 8px; background: transparent; color: #111416; font-family: 'Courier New', monospace; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; }
.mcc-picker-quality:hover { border-color: #E8924F; background: rgba(232,146,79,0.1); color: #111416; }
.mcc-picker-quality.active { border-color: #E8924F; background: #E8924F; color:#111416; }
.mcc-picker-bass-section { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(0,0,0,0.06); }
.mcc-picker-bass-btn { background: none; border: 1.5px dashed rgba(61,124,133,0.25); border-radius: 8px; padding: 4px 12px; font-family: 'Akko', sans-serif; font-size: 0.72rem; font-weight: 600; color: rgba(17,20,22,0.5); cursor: pointer; transition: all 0.15s ease; width: 100%; }
.mcc-picker-bass-btn:hover, .mcc-picker-bass-btn.active { border-color: #3D7C85; color: #3D7C85; border-style: solid; background: rgba(61,124,133,0.04); }
.mcc-picker-bass-notes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 5px; }
.mcc-picker-bass-note { padding: 5px 4px; border: 1.5px solid rgba(61,124,133,0.15); border-radius: 7px; background: transparent; color: #111416; font-family: 'Courier New', monospace; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all 0.15s ease; text-align: center; }
.mcc-picker-bass-note:hover { border-color: #3D7C85; background: rgba(61,124,133,0.08); color: #3D7C85; }

/* Builder Tabs (Mobile only) */
/* Builder Sub-Tabs (Song vs Custom) */
.mcc-builder-subtabs { display: flex; gap: 0; flex-shrink: 0; background: rgba(61,124,133,0.04); border-radius: 12px; padding: 3px; margin-bottom: 8px; }
.mcc-builder-subtab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border: none; background: transparent; border-radius: 10px; font-family: 'Akko', sans-serif; font-size: 0.8rem; font-weight: 600; color: rgba(17,20,22,0.5); cursor: pointer; transition: all 0.2s ease; white-space: nowrap; }
.mcc-builder-subtab:hover { color: #3D7C85; background: rgba(61,124,133,0.04); }
.mcc-builder-subtab.active { background: #FFF; color: #3D7C85; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.mcc-builder-subtab svg { flex-shrink: 0; }

/* Copy Song Button */
.mcc-builder-copy-song { border-color: rgba(232,146,79,0.3) !important; color: #C86111 !important; }
.mcc-builder-copy-song:hover { border-color: #E8924F !important; background: rgba(232,146,79,0.04) !important; }

.mcc-builder-tabs { display: none; gap: 0; flex-shrink: 0; background: rgba(61,124,133,0.04); border-radius: 12px; padding: 3px; margin-bottom: 8px; }
.mcc-builder-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border: none; border-radius: 10px; background: transparent; color: rgba(17,20,22,0.5); font-family: 'Akko', sans-serif; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; }
.mcc-builder-tab.active { background: #FFF; color: #3D7C85; box-shadow: 0 2px 8px rgba(61,124,133,0.12); }
.mcc-builder-tab svg { flex-shrink: 0; }

/* Builder Split Layout */
/* Builder Timeline Strip */
.mcc-builder-timeline {
    display: flex;
    background: rgba(0,0,0,0.03);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 0;
    flex-shrink: 0;
}
.mcc-builder-timeline-scroll {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 5px 8px;
    gap: 3px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.mcc-builder-timeline-scroll::-webkit-scrollbar { display: none; }
.mcc-btl-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
    padding: 3px 6px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    border: 1.5px solid transparent;
    flex-shrink: 0;
}
.mcc-btl-bar:hover { background: rgba(61,124,133,0.08); }
.mcc-btl-bar.active {
    background: rgba(232,146,79,0.15);
    border-color: #E8924F;
    transform: scale(1.05);
}
.mcc-btl-num {
    font-family: 'Akko', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.6;
}
.mcc-btl-bar.active .mcc-btl-num { opacity: 1; }
.mcc-btl-chord {
    font-family: 'Akko', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    color: #111416;
    white-space: nowrap;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mcc-btl-bar.active .mcc-btl-chord { color: #3D7C85; font-weight: 700; }

.mcc-builder-split { display: flex; flex: 1; gap: 16px; min-height: 0; overflow: hidden; }
.mcc-builder-left { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.mcc-builder-right { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(61,124,133,0.02); border-radius: 16px; border: 1px solid rgba(61,124,133,0.08); padding: 16px 12px; position: relative; }
.mcc-builder-resize-handle { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 10; border-radius: 4px 0 0 4px; transition: background 0.2s; }
.mcc-builder-resize-handle::after { content: ''; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 4px; height: 36px; border-radius: 2px; background: rgba(61,124,133,0.15); transition: background 0.2s, height 0.2s; }
.mcc-builder-resize-handle:hover::after { background: rgba(61,124,133,0.4); height: 48px; }
.mcc-builder-resize-handle:active::after { background: #3D7C85; height: 48px; }

/* Builder Diagram Cards */
.mcc-builder-diagrams { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.mcc-builder-diagram-card { text-align: center; width: 100%; padding: 12px 8px; border-radius: 14px; background: #FFF; transition: all 0.3s ease; }
.mcc-builder-diagram-card.current { box-shadow: 0 2px 12px rgba(61,124,133,0.1); }
.mcc-builder-diagram-card.current.has-chord { border: 1.5px solid rgba(61,124,133,0.15); }
.mcc-builder-diagram-card.next { opacity: 0.5; transform: scale(0.9); }
.mcc-builder-diagram-card.next.has-chord { opacity: 0.6; }
.mcc-builder-diagram-label { font-family: 'Akko', sans-serif; font-size: 0.6rem; font-weight: 700; color: rgba(17,20,22,0.35); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 2px; }
.mcc-builder-diagram-name { font-family: 'Akko', sans-serif; font-size: 1.8rem; font-weight: 700; color: #3D7C85; line-height: 1.1; margin-bottom: 6px; }
.mcc-builder-diagram-card.next .mcc-builder-diagram-name { font-size: 1.2rem; color: #111416; }
.mcc-builder-diagram-svg { display: flex; justify-content: center; }
.mcc-builder-diagram-svg svg { width: 130px; height: auto; max-height: 160px; }
.mcc-builder-diagram-card.next .mcc-builder-diagram-svg svg { width: 90px; max-height: 110px; }

/* Mobile: Tabs + stacked layout */
@media (max-width: 600px) {
    .mcc-builder-tabs { display: flex; }
    .mcc-builder-split { flex-direction: column; gap: 0; }
    .mcc-builder-left { display: flex; }
    .mcc-builder-left:not(.active) { display: none; }
    .mcc-builder-right { width: 100%; display: none; flex-direction: row; justify-content: center; gap: 16px; padding: 20px 16px; }
    .mcc-builder-right.active { display: flex; }
    .mcc-builder-diagrams { flex-direction: row; gap: 16px; justify-content: center; align-items: flex-start; }
    .mcc-builder-diagram-card { max-width: 160px; }
    .mcc-builder-diagram-card.next { transform: scale(0.95); }
    .mcc-builder-diagram-svg svg { width: 110px; max-height: 130px; }
    .mcc-builder-diagram-card.next .mcc-builder-diagram-svg svg { width: 80px; max-height: 100px; }
}
@media (max-width: 480px) {
    .mcc-builder-bar { min-width: 0; padding: 6px 8px 8px; }
    .mcc-builder-slot { height: 38px; }
    .mcc-builder-slot-chord { font-size: 0.75rem; }
    .mcc-builder-picker { width: 92vw; max-height: 75vh; padding: 14px; }
    .mcc-builder-picker-chip { padding: 4px 8px; font-size: 0.75rem; }
    .mcc-picker-root-row { grid-template-columns: repeat(4, 1fr); gap: 3px; }
    .mcc-picker-root { padding: 6px 3px; font-size: 0.8rem; }
    .mcc-picker-quality { padding: 4px 8px; font-size: 0.73rem; }
    .mcc-source-btn { padding: 6px 8px; font-size: 0.7rem; }
    .mcc-builder-tab { font-size: 0.75rem; padding: 8px 8px; }
}
@media (max-width: 360px) {
    .mcc-builder-diagram-card.next { display: none; }
}

/* ==========================================
   WATERFALL VISUALIZER
   ========================================== */
.mcc-builder-waterfall { display: none; flex: 1; flex-direction: column; align-items: stretch; min-height: 0; overflow: hidden; position: relative; background: #1a1a2e; border-radius: 12px; gap: 0; padding: 4px; }
.mcc-builder-waterfall.active { display: flex !important; }
.mcc-bwf-mode-tabs { display: flex; gap: 3px; padding: 6px 8px 2px; width: 100%; justify-content: center; flex-shrink: 0; flex-wrap: wrap; z-index: 2; }
.mcc-bwf-mode-btn { display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.55); font-size: 11px; font-family: 'Akko', sans-serif; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; font-weight: 600; }
.mcc-bwf-mode-btn:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); }
.mcc-bwf-mode-btn.active { background: rgba(61,124,133,0.25); border-color: rgba(61,124,133,0.5); color: #4D9BA7; }
/* MIDI view: canvas fills space, piano at bottom visible */
.mcc-bwf-midi-view { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 0; width: 100%; overflow: hidden; position: relative; }
/* Chord view: toolbar top, canvas fills, piano/tubes at bottom */
.mcc-bwf-chord-view { display: none; flex: 1; flex-direction: column; min-height: 0; width: 100%; overflow: hidden; position: relative; }
.mcc-bwf-chord-view .mcc-song-wf-toolbar { padding: 4px 8px; flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mcc-bwf-chord-view .mcc-song-wf-scroll { flex: 1; min-height: 0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.mcc-bwf-chord-view .mcc-song-wf-inner { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mcc-bwf-chord-view .mcc-song-wf-canvas-wrapper { flex: 1; min-height: 0; display: flex; align-items: flex-end; overflow: hidden; }
.mcc-bwf-chord-view .mcc-song-wf-piano-wrapper { flex-shrink: 0; display: flex; justify-content: center; }
.mcc-waterfall-canvas-wrapper { flex: 1; min-height: 0; display: flex; align-items: flex-end; overflow: hidden; position: relative; }
.mcc-waterfall-canvas { display: block; border-radius: 8px 8px 0 0; }
.mcc-waterfall-piano-wrapper { flex-shrink: 0; display: flex; justify-content: center; overflow-x: auto; overflow-y: hidden; }
.mcc-waterfall-piano { position: relative; flex-shrink: 0; }
.mcc-wf-key-white { transition: background 0.05s ease; box-sizing: border-box; }
.mcc-wf-key-black { transition: background 0.05s ease; box-sizing: border-box; }
.mcc-wf-key-active { box-shadow: 0 0 12px rgba(61,124,133,0.6) !important; }
.mcc-bwf-tube { transition: filter 0.1s ease, transform 0.1s ease; }
.mcc-bwf-tube svg { display: block; margin: 0 auto; }

/* Guitar Waterfall Cards */
.mcc-gwf-cards {
    min-height: 100px;
    align-items: center;
    scrollbar-width: none;
}
.mcc-gwf-cards::-webkit-scrollbar { display: none; }

.mcc-gwf-card {
    flex-shrink: 0;
    width: 180px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 8px 10px 10px;
    position: relative;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s, opacity 0.2s;
    border: 1.5px solid rgba(255,255,255,0.06);
    cursor: default;
    user-select: none;
}
.mcc-gwf-name {
    text-align: center;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    font-family: 'Akko', sans-serif;
    margin-bottom: 5px;
    transition: color 0.2s, text-shadow 0.2s;
}
.mcc-gwf-section {
    position: absolute;
    top: -16px;
    left: 8px;
    font-size: 9px;
    color: #E8924F;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: 'Akko', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
}

/* Progress bar */
.mcc-gwf-bar-bg {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
    position: relative;
}
.mcc-gwf-beat-marker {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(255,255,255,0.15);
    z-index: 1;
}
.mcc-gwf-bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #3D7C85, #47919B);
    border-radius: 4px;
    position: relative;
    z-index: 2;
    transition: width 0.06s linear;
}
.mcc-gwf-bar-glow {
    position: absolute;
    right: -2px;
    top: -3px;
    width: 8px;
    height: 14px;
    border-radius: 50%;
    background: rgba(232,146,79,0.6);
    filter: blur(4px);
    opacity: 0;
    transition: opacity 0.1s;
}

/* Beat pulse dots */
.mcc-gwf-beat-dots {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 3px 4px;
    gap: 2px;
}
.mcc-gwf-beat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    transition: all 0.1s ease;
}
.mcc-gwf-card.mcc-gwf-active .mcc-gwf-beat-dot {
    background: rgba(61,124,133,0.3);
}
.mcc-gwf-beat-dot.active {
    background: #E8924F !important;
    width: 8px;
    height: 8px;
    box-shadow: 0 0 8px rgba(232,146,79,0.7), 0 0 3px rgba(232,146,79,0.9);
    animation: mcc-gwf-dot-pulse 0.15s ease-out;
}
@keyframes mcc-gwf-dot-pulse {
    0% { transform: scale(1.5); box-shadow: 0 0 14px rgba(232,146,79,0.9); }
    100% { transform: scale(1); box-shadow: 0 0 8px rgba(232,146,79,0.7); }
}
.mcc-gwf-card.mcc-gwf-past .mcc-gwf-beat-dot,
.mcc-gwf-card.mcc-gwf-idle .mcc-gwf-beat-dot {
    background: rgba(255,255,255,0.06);
}

/* SVG container */
.mcc-gwf-svg {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 0;
}
.mcc-gwf-svg svg {
    width: 100%;
    height: auto;
    transition: filter 0.2s;
}

/* === STATES === */

/* Active card: glowing, scaled up, green accents */
.mcc-gwf-card.mcc-gwf-active {
    background: rgba(61,124,133,0.12);
    border-color: rgba(61,124,133,0.5);
    box-shadow: 0 0 24px rgba(61,124,133,0.25), 0 0 8px rgba(232,146,79,0.15), inset 0 0 0 0.5px rgba(232,146,79,0.2);
    transform: scale(1.06);
}
.mcc-gwf-card.mcc-gwf-active .mcc-gwf-name {
    color: #E8924F;
    text-shadow: 0 0 12px rgba(232,146,79,0.4);
}
.mcc-gwf-card.mcc-gwf-active .mcc-gwf-bar-fill {
    background: linear-gradient(90deg, #3D7C85, #E8924F);
}
.mcc-gwf-card.mcc-gwf-active .mcc-gwf-bar-glow {
    opacity: 1;
}
.mcc-gwf-card.mcc-gwf-active .mcc-gwf-bar-bg {
    background: rgba(61,124,133,0.15);
}
.mcc-gwf-card.mcc-gwf-active .mcc-gwf-svg svg {
    filter: drop-shadow(0 0 6px rgba(232,146,79,0.3));
}

/* Upcoming card: pulsing blink */
.mcc-gwf-card.mcc-gwf-upcoming {
    background: rgba(232,146,79,0.08);
    border-color: rgba(232,146,79,0.3);
    animation: mcc-gwf-blink 0.5s ease-in-out infinite alternate;
}
.mcc-gwf-card.mcc-gwf-upcoming .mcc-gwf-name {
    color: rgba(232,146,79,0.85);
}
@keyframes mcc-gwf-blink {
    0%   { box-shadow: 0 0 4px rgba(232,146,79,0.1); }
    100% { box-shadow: 0 0 18px rgba(232,146,79,0.3), inset 0 0 0 1px rgba(232,146,79,0.25); }
}

/* Past card: faded */
.mcc-gwf-card.mcc-gwf-past {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.03);
    transform: scale(0.95);
    opacity: 0.45;
}
.mcc-gwf-card.mcc-gwf-past .mcc-gwf-name {
    color: rgba(255,255,255,0.35);
}
.mcc-gwf-card.mcc-gwf-past .mcc-gwf-bar-fill {
    background: rgba(61,124,133,0.3);
}

/* Idle card */
.mcc-gwf-card.mcc-gwf-idle {
    border-color: rgba(255,255,255,0.06);
}
.mcc-gwf-card.mcc-gwf-idle .mcc-gwf-name {
    color: rgba(255,255,255,0.75);
}
.mcc-waterfall-info { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 5; }
.mcc-waterfall-hint { color: rgba(255,255,255,0.4); font-size: 0.85rem; font-family: 'Akko', sans-serif; text-align: center; padding: 16px; }

/* Notation overlay inside canvas area (top of waterfall) */
.mcc-waterfall-notation { position: absolute; top: 0; left: 0; right: 0; height: 130px; background: rgba(255,255,255,0.95); border-radius: 8px 8px 0 0; overflow: hidden; z-index: 10; box-shadow: 0 2px 16px rgba(0,0,0,0.25); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.mcc-waterfall-notation.visible { opacity: 1; pointer-events: auto; }
.mcc-waterfall-notation-viewport { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
.mcc-waterfall-notation-content { position: absolute; top: 0; left: 0; transform-origin: top left; white-space: nowrap; will-change: transform; }
.mcc-waterfall-notation-content svg { display: block; }
/* Cursor line fixed at center */
.mcc-waterfall-notation-cursor { position: absolute; top: 0; bottom: 0; width: 3px; left: 0; background: #3D7C85; z-index: 15; pointer-events: none; box-shadow: 0 0 10px rgba(61,124,133,0.7), 0 0 20px rgba(61,124,133,0.3); border-radius: 2px; transition: left 0.05s linear; }
/* Close button inside notation */
.mcc-waterfall-notation-close { position: absolute; top: 4px; right: 4px; z-index: 18; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,0.08); border: none; color: #666; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; padding: 0; }
.mcc-waterfall-notation-close:hover { background: rgba(0,0,0,0.15); color: #333; }
/* Fade edges */
.mcc-waterfall-notation::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40px; background: linear-gradient(to right, rgba(255,255,255,0.95), transparent); z-index: 12; pointer-events: none; }
.mcc-waterfall-notation::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 40px; background: linear-gradient(to left, rgba(255,255,255,0.95), transparent); z-index: 12; pointer-events: none; }
/* Toggle button in waterfall container */
.mcc-waterfall-notation-toggle { display: none; position: absolute; top: 8px; right: 8px; z-index: 20; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.95); border: 2px solid rgba(61,124,133,0.3); color: #888; cursor: pointer; align-items: center; justify-content: center; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.2); padding: 0; }
.mcc-waterfall-notation-toggle.has-notation { display: flex !important; }

/* === Song Waterfall (Play-Along Tab) === */
.mcc-pa-view-waterfall { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.mcc-pa-view-waterfall.active { display: flex !important; }
.mcc-song-wf-container { display: flex; flex-direction: column; flex: 1; min-height: 250px; background: #1a1a2e; border-radius: 12px; overflow: hidden; padding: 4px; gap: 0; position: relative; }
.mcc-song-wf-scroll { flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; display: flex; justify-content: center; }
.mcc-song-wf-inner { display: flex; flex-direction: column; flex-shrink: 0; min-width: min-content; }
.mcc-song-wf-canvas-wrapper { flex: 1; min-height: 0; display: flex; align-items: flex-end; }
.mcc-song-wf-canvas-wrapper canvas { display: block; border-radius: 8px 8px 0 0; flex-shrink: 0; }
.mcc-song-wf-piano-wrapper { flex-shrink: 0; }

/* Song Waterfall Toolbar */
.mcc-song-wf-toolbar { display: flex; gap: 8px; justify-content: flex-end; padding: 4px 8px; flex-shrink: 0; align-items: center; flex-wrap: wrap; }
.mcc-song-wf-btn-group { display: inline-flex; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.15); }
.mcc-song-wf-btn-group .mcc-song-wf-toggle { border-radius: 0; border: none; border-right: 1px solid rgba(255,255,255,0.1); padding: 5px 10px; font-weight: 600; }
.mcc-song-wf-btn-group .mcc-song-wf-toggle:last-child { border-right: none; }
.mcc-song-wf-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.65); font-size: 12px; font-family: 'Akko', sans-serif; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; }
.mcc-song-wf-toggle:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); }
.mcc-song-wf-toggle.active { background: rgba(61,124,133,0.25); border-color: rgba(61,124,133,0.5); color: #4D9BA7; }
.mcc-bravura { font-family: 'Bravura Text', serif; font-size: 18px; line-height: 1; }
.mcc-song-wf-chord-badge { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 6px; padding: 4px 14px; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); border-radius: 16px; border: 1px solid rgba(255,255,255,0.12); font-family: 'Akko', sans-serif; pointer-events: none; }
.mcc-wf-badge-current { font-size: 15px; font-weight: 700; color: #4D9BA7; }
.mcc-wf-badge-arrow { font-size: 11px; color: rgba(255,255,255,0.35); }
.mcc-wf-badge-next { font-size: 13px; font-weight: 500; color: rgba(17,20,22,0.45); }
.mcc-song-wf-switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 3px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); transition: all 0.2s ease; user-select: none; position: relative; overflow: hidden; }
.mcc-song-wf-switch:hover { background: rgba(255,255,255,0.08); }
.mcc-song-wf-switch input { position: absolute !important; width: 0 !important; height: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.mcc-song-wf-switch-slider { width: 30px; height: 16px; border-radius: 8px; background: rgba(255,255,255,0.15); position: relative; transition: background 0.2s ease; flex-shrink: 0; }
.mcc-song-wf-switch-slider::after { content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.5); top: 2px; left: 2px; transition: all 0.2s ease; }
.mcc-song-wf-switch input:checked + .mcc-song-wf-switch-slider { background: rgba(61,124,133,0.6); }
.mcc-song-wf-switch input:checked + .mcc-song-wf-switch-slider::after { left: 16px; background: #4D9BA7; }
.mcc-song-wf-switch-text { font-size: 12px; font-family: 'Akko', sans-serif; color: rgba(255,255,255,0.55); white-space: nowrap; transition: color 0.2s ease; }
.mcc-song-wf-switch input:checked ~ .mcc-song-wf-switch-text { color: #4D9BA7; }
.mcc-waterfall-notation-toggle:hover { background: #fff; color: #3D7C85; border-color: #3D7C85; transform: scale(1.05); }
.mcc-waterfall-notation-toggle.active { background: #3D7C85; color: #fff; border-color: #3D7C85; box-shadow: 0 2px 12px rgba(61,124,133,0.4); }
.mcc-waterfall-notation-toggle svg { width: 18px; height: 18px; fill: none !important; stroke: currentColor !important; }
/* Instrument part toggles inside notation overlay */
.mcc-notation-instrument-toggles { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); z-index: 18; display: flex; gap: 4px; padding: 2px 6px; background: rgba(255,255,255,0.9); border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.mcc-notation-part-btn { display: flex; align-items: center; gap: 3px; padding: 2px 8px; border: 1.5px solid #ccc; border-radius: 10px; background: rgba(255,255,255,0.8); font-family: 'Akko', sans-serif; font-size: 0.6rem; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; opacity: 0.45; }
.mcc-notation-part-btn.active { opacity: 1; background: #fff; }
.mcc-notation-part-btn:hover { opacity: 0.85; }
.mcc-notation-part-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* View Mode Tabs: Bearbeitung vs Waterfall (nested under subtabs) */
.mcc-builder-viewtabs { display: flex; gap: 0; flex-shrink: 0; background: rgba(61,124,133,0.02); border-radius: 7px; padding: 2px; margin: -4px 20% 6px; }
.mcc-builder-viewtab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 3px 8px; border: none; background: transparent; border-radius: 5px; font-family: 'Akko', sans-serif; font-size: 0.65rem; font-weight: 500; color: rgba(17,20,22,0.35); cursor: pointer; transition: all 0.2s ease; white-space: nowrap; letter-spacing: 0.02em; }
.mcc-builder-viewtab:hover { color: #3D7C85; background: rgba(61,124,133,0.04); }
.mcc-builder-viewtab.active { background: rgba(61,124,133,0.08); color: #3D7C85; }
.mcc-builder-viewtab svg { flex-shrink: 0; opacity: 0.5; width: 11px; height: 11px; }
.mcc-builder-viewtab.active svg { opacity: 0.8; }

/* Bars per Line Selector */
.mcc-builder-bars-per-line { display: flex; align-items: center; gap: 5px; margin-left: auto; padding: 0 8px; }
.mcc-builder-bars-per-line .mcc-bpl-label { font-size: 0.65rem; color: rgba(17,20,22,0.5); font-family: 'Akko', sans-serif; }
.mcc-builder-bars-per-line .mcc-bpl-select { font-size: 0.7rem; padding: 2px 4px; border: 1px solid rgba(61,124,133,0.2); border-radius: 4px; background: #fff; color: #3D7C85; font-weight: 600; cursor: pointer; }
.mcc-builder-bars-per-line .mcc-bpl-select:focus { outline: none; border-color: #3D7C85; }

/* Notation Toggle (Jazz/Pop) */
.mcc-builder-notation-toggle { display: none; gap: 0; background: rgba(0,0,0,0.04); border-radius: 4px; padding: 2px; margin-left: 6px; }
.mcc-notation-btn { padding: 2px 8px; border: none; background: transparent; font-size: 0.6rem; font-weight: 600; color: rgba(17,20,22,0.4); cursor: pointer; border-radius: 3px; transition: all 0.15s; font-family: 'Akko', sans-serif; }
.mcc-notation-btn:hover { color: #3D7C85; }
.mcc-notation-btn.active { background: #3D7C85; color: #fff; }

/* Leadsheet Zoom Slider */
.mcc-leadsheet-zoom { display: none; align-items: center; gap: 5px; margin-left: 8px; padding: 0 6px; background: rgba(0,0,0,0.03); border-radius: 4px; }
.mcc-leadsheet-zoom svg { opacity: 0.4; flex-shrink: 0; }
.mcc-leadsheet-zoom .mcc-ls-zoom-slider { width: 60px; height: 3px; -webkit-appearance: none; appearance: none; background: rgba(0,0,0,0.1); border-radius: 2px; cursor: pointer; }
.mcc-leadsheet-zoom .mcc-ls-zoom-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #3D7C85; cursor: pointer; }
.mcc-leadsheet-zoom .mcc-ls-zoom-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #3D7C85; cursor: pointer; border: none; }
.mcc-leadsheet-zoom .mcc-ls-zoom-value { font-size: 0.6rem; font-weight: 600; color: #3D7C85; min-width: 32px; font-family: 'Akko', sans-serif; }

/* ================================================================
   LEADSHEET VIEW (Jazz Real Book Style)
   ================================================================ */
.mcc-builder-leadsheet {
    display: none;
    flex: 1;
    flex-direction: column;
    padding: 24px 16px;
    background: #FFFFFF;
    border-radius: 12px;
    overflow-y: auto;
    position: relative;
    min-height: 0;
}
.mcc-builder-leadsheet.bg-white { background: #FFFFFF; }
.mcc-builder-leadsheet.bg-cream { background: #F5F2E8; }
.mcc-builder-leadsheet.bg-gray { background: #F0F0F0; }
.mcc-builder-leadsheet.active { display: flex !important; }

/* Background color picker */
.mcc-leadsheet-bg-picker {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    z-index: 10;
}
.mcc-ls-bg-dot {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    cursor: pointer;
    border: 1.5px solid rgba(0,0,0,0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mcc-ls-bg-dot:hover { transform: scale(1.15); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.mcc-ls-bg-dot.active { border-color: #3D7C85; box-shadow: 0 0 0 2px rgba(61,124,133,0.3); }
.mcc-ls-bg-dot[data-bg="white"] { background: #FFFFFF; }
.mcc-ls-bg-dot[data-bg="cream"] { background: #F5F2E8; }
.mcc-ls-bg-dot[data-bg="gray"] { background: #F0F0F0; }

.mcc-leadsheet-content {
    --ls-zoom: 1.2;
    display: flex;
    flex-direction: column;
    gap: calc(14px * var(--ls-zoom));
    max-width: 100%;
}

.mcc-leadsheet-empty {
    text-align: center;
    padding: 40px;
    color: rgba(17,20,22,0.4);
    font-style: italic;
}

/* Leadsheet Line (row of bars) */
.mcc-ls-line {
    display: flex;
    align-items: stretch;
    min-height: calc(52px * var(--ls-zoom));
}

/* Marker column - fixed width for alignment */
.mcc-ls-marker-col {
    display: flex;
    align-items: center;
    gap: 2px;
    width: calc(50px * var(--ls-zoom));
    flex-shrink: 0;
    padding-right: 4px;
}

/* Section Marker (A, B, C, etc.) */
.mcc-ls-section-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(22px * var(--ls-zoom));
    height: calc(22px * var(--ls-zoom));
    background: #111416;
    color: #fff;
    font-size: calc(14px * var(--ls-zoom));
    font-weight: 700;
    font-family: 'Patrick Hand', cursive;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Time Signature */
.mcc-ls-time-sig {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(14px * var(--ls-zoom));
    font-weight: 400;
    font-family: 'Patrick Hand', cursive;
    color: #111416;
    line-height: 1;
    flex-shrink: 0;
}
.mcc-ls-time-top, .mcc-ls-time-bottom {
    display: block;
    text-align: center;
}

/* Barline Cell - contains the vertical line */
.mcc-ls-barline-cell {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 3px;
    flex-shrink: 0;
    padding: 4px 0;
}

/* The actual barline */
.mcc-ls-barline {
    width: 2px;
    background: #111416;
    border-radius: 1px;
}
.mcc-ls-barline.double {
    width: 5px;
    background: linear-gradient(to right, #111416 2px, transparent 2px, transparent 3px, #111416 3px);
}

/* Bar (Measure) with 4 beat slots */
.mcc-ls-bar {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: calc(140px * var(--ls-zoom));
    position: relative;
    transition: background 0.2s ease;
    border-radius: 6px;
    padding: 4px 0;
    cursor: pointer;
}
.mcc-ls-bar:hover { background: rgba(61,124,133,0.05); }
.mcc-ls-bar.playing {
    background: rgba(232, 146, 79, 0.1);
}

/* v4.32.17: Auftakt-Bar (Pickup/Anacrusis) */
.mcc-ls-bar-pickup {
    flex: 0 0 auto !important;
    min-width: calc(60px * var(--ls-zoom)) !important;
    background: rgba(232, 146, 79, 0.04);
    border: 1px dashed rgba(61, 124, 133, 0.3);
    position: relative;
    padding-top: 18px !important;
}
.mcc-ls-bar-pickup[data-bar-beats="2"] { min-width: calc(85px * var(--ls-zoom)) !important; }
.mcc-ls-bar-pickup[data-bar-beats="3"] { min-width: calc(110px * var(--ls-zoom)) !important; }
.mcc-ls-pickup-label {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Akko', sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: #3D7C85;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 2;
}

/* Strip-Bar Auftakt (Play-Along Strip) */
.mcc-pa-bar-pickup {
    background: rgba(61, 124, 133, 0.06) !important;
    border-left: 2px dashed rgba(61, 124, 133, 0.4) !important;
    border-right: 2px dashed rgba(61, 124, 133, 0.4) !important;
    position: relative;
}
.mcc-pa-bar-pickup-label {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Akko', sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(61, 124, 133, 0.7);
    padding: 1px 6px;
    border-radius: 3px;
    z-index: 2;
}

/* Beat indicator dots */
.mcc-ls-beat-dots {
    display: flex;
    justify-content: space-around;
    padding: 0 8px;
    height: calc(16px * var(--ls-zoom));
    align-items: center;
}
.mcc-ls-beat-dot {
    width: calc(8px * var(--ls-zoom));
    height: calc(8px * var(--ls-zoom));
    border-radius: 50%;
    background: rgba(232, 146, 79, 0.2);
    transition: all 0.1s ease;
}
.mcc-ls-beat-dot.active {
    background: #E8924F;
    box-shadow: 0 0 8px rgba(232, 146, 79, 0.6);
    animation: mcc-beat-bounce 0.3s ease;
}
@keyframes mcc-beat-bounce {
    0% { transform: scale(1) translateY(0); }
    30% { transform: scale(1.4) translateY(-6px); }
    60% { transform: scale(1.1) translateY(-2px); }
    100% { transform: scale(1) translateY(0); }
}

/* Chord container row */
.mcc-ls-bar-chords {
    display: flex;
    align-items: center;
}

/* Beat slot - 4 per bar */
.mcc-ls-beat {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: calc(4px * var(--ls-zoom)) calc(8px * var(--ls-zoom));
    min-height: calc(44px * var(--ls-zoom));
}

/* Chord Notation - Jazz style (Patrick Hand - handwritten) */
.mcc-leadsheet-content.jazz .mcc-ls-chord {
    font-size: calc(30px * var(--ls-zoom));
    font-weight: 400;
    font-family: 'Patrick Hand', cursive;
    color: #111416;
    white-space: nowrap;
}
.mcc-leadsheet-content.jazz .mcc-ls-root {
    font-weight: 400;
}
.mcc-leadsheet-content.jazz .mcc-ls-suffix {
    font-weight: 400;
    font-size: 0.85em;
}

/* Chord Notation - Pop style (Akko) */
.mcc-leadsheet-content.pop .mcc-ls-chord {
    font-size: calc(26px * var(--ls-zoom));
    font-weight: 600;
    font-family: 'Akko', 'Helvetica Neue', sans-serif;
    color: #111416;
    white-space: nowrap;
}
.mcc-leadsheet-content.pop .mcc-ls-root {
    font-weight: 700;
}
.mcc-leadsheet-content.pop .mcc-ls-suffix {
    font-weight: 500;
    font-size: 0.85em;
}

/* Empty beat styling */
.mcc-ls-chord.empty {
    color: rgba(17,20,22,0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mcc-builder-leadsheet { padding: 12px 8px; }
    .mcc-ls-bar { min-width: calc(100px * var(--ls-zoom)); }
    .mcc-ls-beat { padding: calc(2px * var(--ls-zoom)) calc(4px * var(--ls-zoom)); }
    .mcc-ls-beat-dots { height: calc(12px * var(--ls-zoom)); }
    .mcc-ls-beat-dot { width: calc(6px * var(--ls-zoom)); height: calc(6px * var(--ls-zoom)); }
    .mcc-ls-marker-col { width: calc(40px * var(--ls-zoom)); }
    .mcc-builder-bars-per-line { display: none; }
    .mcc-builder-notation-toggle { display: none; }
    .mcc-leadsheet-zoom { display: none; }
}

/* ================================================================
   SPLITSCREEN SYSTEM
   ================================================================ */
/* Checkbox panel */
/* Desktop splitscreen checkboxes */
.mcc-pa-split-checkboxes { display: flex; gap: 10px; flex-wrap: wrap; padding: 6px 12px; background: #3D7C85; border-radius: 8px; margin: 0 8px 4px; }
/* Mobile splitscreen checkbox bar (above controls) */
.mcc-pa-split-bar-mobile { display: none; }
@media (max-width: 767px) {
    .mcc-pa-split-bar-mobile { display: none; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 6px; padding: 5px 10px; background: #3D7C85; }
    .mcc-pa-split-bar-mobile.active { display: flex; }
    .mcc-pa-split-cb-m { display: flex; align-items: center; gap: 2px; color: #fff; font-size: 0.7rem; cursor: pointer; white-space: nowrap; }
    .mcc-pa-split-cb-m input { accent-color: #E8924F; width: 14px; height: 14px; }
    /* Hide original checkboxes on mobile */
    .mcc-pa-split-checkboxes { display: none !important; }
}
.mcc-pa-split-cb { display: flex; align-items: center; gap: 4px; font-size: 0.78rem; font-family: 'Akko', sans-serif; color: #fff; cursor: pointer; white-space: nowrap; }
.mcc-pa-split-cb input { accent-color: #E8924F; }

/* Split panel headers */
.mcc-split-header { padding: 5px 10px; background: #3D7C85; font-size: 0.72rem; font-weight: 600; font-family: 'Akko', sans-serif; color: #fff; letter-spacing: 0.03em; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mcc-split-opts { display: flex; gap: 3px; flex-shrink: 0; }
.mcc-split-opt-btn { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: #fff; border-radius: 4px; padding: 1px 5px; font-size: 0.65rem; cursor: pointer; line-height: 1.3; transition: all 0.15s ease; }
.mcc-split-opt-btn:hover { background: rgba(255,255,255,0.3); }
.mcc-split-opt-btn.active { background: rgba(232,146,79,0.5); border-color: rgba(232,146,79,0.7); }
.mcc-split-wf-panel .mcc-split-header { background: rgba(20,20,40,0.95); color: #E8924F; }
.mcc-split-wf-panel .mcc-split-opt-btn { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #ccc; }
.mcc-split-wf-panel .mcc-split-opt-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
.mcc-split-wf-panel .mcc-split-opt-btn.active { background: rgba(232,146,79,0.4); border-color: rgba(232,146,79,0.6); color: #E8924F; }

/* Grifftabelle split panels — dark border, white bg */
.mcc-split-panel { display: flex; flex-direction: column; background: #fff; overflow: hidden; min-width: 0; min-height: 0; border: 2px solid #3D7C85; border-radius: 4px; max-height: 100%; }
.mcc-split-strip { display: flex; overflow-x: auto; gap: 8px; padding: 4px 8px; align-items: stretch; flex: 1; scrollbar-width: none; position: relative; min-height: 0; }
.mcc-split-strip.mcc-pa-strip { min-width: 0 !important; overflow-x: auto !important; height: 100%; max-height: 100%; }
.mcc-split-strip .mcc-pa-strip-item { max-height: 100%; padding: 4px; box-sizing: border-box; overflow: hidden; }
.mcc-split-strip .mcc-pa-strip-diagram { width: clamp(40px, 100%, var(--strip-svg-size)); min-height: 0; overflow: hidden; }
.mcc-split-strip .mcc-pa-strip-diagram svg { width: 100%; height: auto; }
.mcc-split-strip::-webkit-scrollbar { display: none; }

/* Split grid fills its scroll parent */
.mcc-split-grid { flex: 1; min-height: 0; overflow: hidden; }
#mcc-pa-strip:has(.mcc-split-grid) { flex: 1; display: flex; flex-direction: column; padding: 0; gap: 0; overflow: hidden; }
/* Fallback for browsers without :has */
.mcc-pa-strip-scroll { min-height: 0; }

/* Waterfall split panels — dark theme */
.mcc-split-wf-panel { display: flex; flex-direction: column; overflow: hidden; background: #1a1a2e; min-width: 0; min-height: 0; border: 2px solid #333; border-radius: 4px; }
.mcc-split-wf-panel .mcc-gwf-cards { align-items: stretch; }
.mcc-split-wf-panel .mcc-gwf-card { min-width: 80px !important; max-height: 100%; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; }
.mcc-split-wf-panel .mcc-gwf-name { font-size: 0.85rem; flex-shrink: 0; }
.mcc-split-wf-panel .mcc-gwf-svg { flex: 1; min-height: 0; overflow: hidden; }
.mcc-split-wf-panel .mcc-gwf-svg svg { width: 100%; height: 100%; }
.mcc-split-wf-panel .mcc-gwf-bar-bg { flex-shrink: 0; }
.mcc-split-wf-panel .mcc-gwf-beat-dots { flex-shrink: 0; }

/* Splitter handle */
.mcc-split-splitter { position: absolute; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 20; background: transparent; transition: background 0.15s; }
.mcc-split-splitter:hover { background: rgba(61,124,133,0.4); }
.mcc-split-splitter:active { background: rgba(61,124,133,0.6); }
.mcc-split-splitter::after { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 2px; height: 32px; background: rgba(61,124,133,0.3); border-radius: 1px; }
.mcc-split-splitter:hover::after { background: rgba(61,124,133,0.7); height: 48px; }

/* Mobile splitscreen */
.mcc-split-mobile-section { display: flex; flex-direction: column; width: 100%; border-bottom: 2px solid rgba(61,124,133,0.15); }
.mcc-split-mobile-section:last-child { border-bottom: none; }
.mcc-pa-grid-split { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 6px 8px; }

@media (max-width: 767px) {
    .mcc-split-grid, .mcc-split-wf-grid { grid-template-columns: 1fr !important; }
    .mcc-split-splitter { display: none; }
    /* Splitscreen mobile: override grid → vertical stack, each section 50% */
    .mcc-pa-grid.mcc-pa-grid-splitmode { display: flex; flex-direction: column; gap: 0; padding: 0; width: 100%; flex: 1; min-height: 0; }
    .mcc-pa-grid-splitmode .mcc-split-mobile-section { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
    .mcc-pa-grid-splitmode .mcc-split-mobile-section .mcc-pa-grid-split { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px 6px; align-content: start; }
    /* Parent: no scroll when in splitscreen */
    .mcc-pa-strip-mobile.mcc-pa-strip-mobile-split { overflow-y: hidden; }
    /* Checkboxes: hidden on mobile (replaced by mcc-pa-split-bar-mobile) */
}

/* ================================================================
   MEMBERSHIP REQUIRED MODAL
   ================================================================ */
.mcc-membership-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mcc-modal-fade-in 0.2s ease;
}

@keyframes mcc-modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mcc-membership-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.mcc-membership-modal-content {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 32px 40px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: mcc-modal-scale-in 0.25s ease;
}

@keyframes mcc-modal-scale-in {
    from { 
        opacity: 0;
        transform: scale(0.9);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

.mcc-membership-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcc-membership-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
}

.mcc-membership-modal-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.mcc-membership-modal-content h3 {
    font-family: 'Akko', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111416;
    margin: 0 0 8px;
}

.mcc-membership-feature-name {
    font-family: 'Akko', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #3D7C85;
    margin: 0 0 16px;
}

.mcc-membership-message {
    font-family: 'Akko', sans-serif;
    font-size: 0.95rem;
    color: #555;
    margin: 0 0 8px;
    line-height: 1.5;
}

.mcc-membership-submessage {
    font-family: 'Akko', sans-serif;
    font-size: 0.85rem;
    color: #888;
    margin: 0 0 24px;
}

.mcc-membership-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mcc-btn-membership {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #3D7C85 0%, #1F737A 100%);
    color: #fff !important;
    font-family: 'Akko', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(61, 124, 133, 0.3);
}

.mcc-btn-membership:hover {
    background: linear-gradient(135deg, #438892 0%, #3D7C85 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(61, 124, 133, 0.4);
}

.mcc-membership-modal .mcc-btn-secondary {
    padding: 10px 20px;
    background: transparent;
    color: #666;
    font-family: 'Akko', sans-serif;
    font-size: 0.9rem;
    border: 1px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mcc-membership-modal .mcc-btn-secondary:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

/* Time Limit Modal Specific */
.mcc-time-limit-modal .mcc-membership-modal-icon {
    color: #ff6b35;
}

.mcc-time-limit-modal h3 {
    color: #ff6b35;
}

/* Stems Button Disabled State */
.mcc-stems-btn-disabled,
.mcc-player-stems-btn-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #ccc !important;
}

.mcc-stems-btn-disabled:hover,
.mcc-player-stems-btn-disabled:hover {
    background: #ccc !important;
    transform: none !important;
}

/* Mobile Adjustments */
@media (max-width: 480px) {
    .mcc-membership-modal-content {
        padding: 24px 20px;
        margin: 16px;
    }
    
    .mcc-membership-modal-content h3 {
        font-size: 1.25rem;
    }
    
    .mcc-membership-feature-name {
        font-size: 1rem;
    }
    
    .mcc-btn-membership {
        padding: 12px 24px;
        font-size: 0.95rem;
    }
}

/* Stems Button Locked State */
#mcc-player-stems-btn.locked {
    opacity: 0.7;
    background: linear-gradient(135deg, #999 0%, #777 100%) !important;
}

#mcc-player-stems-btn.locked:hover {
    cursor: pointer;
    transform: scale(1.02);
}

#mcc-player-stems-btn.locked .mcc-stems-btn-status {
    font-size: 12px !important;
}

/* Stems Panel Locked State */
.mcc-stems-locked-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    text-align: center;
}

.mcc-stems-locked-icon {
    font-size: 28px;
}

.mcc-stems-locked-text {
    font-family: 'Akko', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.mcc-stems-membership-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #3D7C85 0%, #1F737A 100%);
    color: #fff !important;
    font-family: 'Akko', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    margin-top: 4px;
}

.mcc-stems-membership-link:hover {
    background: linear-gradient(135deg, #438892 0%, #3D7C85 100%);
    transform: translateY(-1px);
}

/* ===== Akkordübersicht Sub-Tabs (Chord Chart / Kachelansicht) ===== */
.mcc-pa-chord-subtabs {
    display: flex;
    gap: 0;
    background: rgba(61,124,133,0.06);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 12px;
}

.mcc-pa-chord-subtab {
    flex: 1;
    padding: 8px 14px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-family: 'Akko', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(17,20,22,0.5);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.mcc-pa-chord-subtab:hover {
    color: #3D7C85;
    background: rgba(61,124,133,0.04);
}

.mcc-pa-chord-subtab.active {
    background: #FFF;
    color: #3D7C85;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ===== Original Chord Chart View ===== */
.mcc-pa-chord-chart-view {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    border-radius: 10px;
    transition: background 0.2s;
    scroll-padding-top: 12px;
}
.mcc-pa-chord-chart-view.bg-white { background: #FFFFFF; }
.mcc-pa-chord-chart-view.bg-cream { background: #F5F2E8; }
.mcc-pa-chord-chart-view.bg-gray { background: #F0F0F0; }

/* Orig Chart Toolbar */
.mcc-origchart-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(250,248,243,0.85);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    border-radius: 10px 10px 0 0;
    flex-wrap: wrap;
}
.mcc-origchart-toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
}
.mcc-origchart-toolbar-label {
    font-family: 'Akko', sans-serif;
    font-size: 0.72rem;
    color: #666;
}
.mcc-origchart-toolbar-divider {
    width: 1px;
    height: 18px;
    background: rgba(61,124,133,0.2);
}
.mcc-origchart-bpl-select {
    font-family: 'Akko', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    border: 1px solid rgba(61,124,133,0.3);
    border-radius: 8px;
    background: #fff;
    color: #111416;
    cursor: pointer;
}
.mcc-origchart-notation-btn {
    font-family: 'Akko', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 10px;
    border: 1px solid rgba(61,124,133,0.3);
    border-radius: 20px;
    background: transparent;
    color: #3D7C85;
    cursor: pointer;
    transition: all 0.15s;
}
.mcc-origchart-notation-btn.active {
    background: #3D7C85;
    color: #fff;
    border-color: #3D7C85;
}
.mcc-origchart-zoom-slider {
    width: 70px;
    height: 4px;
    accent-color: #3D7C85;
    cursor: pointer;
}
.mcc-origchart-zoom-value {
    font-family: 'Akko', sans-serif;
    font-size: 0.68rem;
    color: #666;
    min-width: 30px;
}
.mcc-origchart-bg-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s;
}
.mcc-origchart-bg-dot[data-bg="white"] { background: #FFFFFF; border-color: #ddd; }
.mcc-origchart-bg-dot[data-bg="cream"] { background: #F5F2E8; border-color: #e0dac8; }
.mcc-origchart-bg-dot[data-bg="gray"] { background: #E8E8E8; border-color: #ccc; }
.mcc-origchart-bg-dot.active {
    border-color: #3D7C85 !important;
    box-shadow: 0 0 0 2px rgba(61,124,133,0.25);
}

.mcc-pa-chord-chart-content {
    --ls-zoom: 1.2;
    padding: calc(10px * var(--ls-zoom)) calc(8px * var(--ls-zoom));
}

.mcc-pa-chord-chart-content .mcc-ls-line {
    display: flex;
    align-items: stretch;
    margin-bottom: calc(16px * var(--ls-zoom));
}

.mcc-pa-chord-chart-content .mcc-ls-marker-col {
    width: calc(40px * var(--ls-zoom));
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-top: 4px;
}

.mcc-pa-chord-chart-content .mcc-ls-section-marker {
    width: calc(22px * var(--ls-zoom));
    height: calc(22px * var(--ls-zoom));
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3D7C85;
    color: #fff;
    font-family: 'Akko', sans-serif;
    font-size: calc(14px * var(--ls-zoom));
    font-weight: 700;
    border-radius: 4px;
}

.mcc-pa-chord-chart-content .mcc-ls-time-sig {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Akko', sans-serif;
    font-size: calc(14px * var(--ls-zoom));
    font-weight: 700;
    color: #111416;
    line-height: 1;
}

.mcc-pa-chord-chart-content .mcc-ls-barline-cell {
    display: flex;
    align-items: stretch;
}

.mcc-pa-chord-chart-content .mcc-ls-barline {
    width: 2px;
    background: rgba(17,20,22,0.3);
    border-radius: 1px;
}

.mcc-pa-chord-chart-content .mcc-ls-barline.double {
    width: 4px;
    background: linear-gradient(90deg, rgba(17,20,22,0.5) 0%, rgba(17,20,22,0.5) 40%, transparent 40%, transparent 60%, rgba(17,20,22,0.5) 60%, rgba(17,20,22,0.5) 100%);
}

/* Original Chord Chart Bar */
.mcc-orig-chart-bar {
    flex: 1;
    min-width: 0;
    padding: calc(4px * var(--ls-zoom, 1.2)) calc(6px * var(--ls-zoom, 1.2)) calc(8px * var(--ls-zoom, 1.2));
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--ls-zoom, 1.2));
    border-radius: 6px;
    transition: all 0.15s ease;
}

.mcc-orig-chart-bar.playing {
    background: rgba(61,124,133,0.12);
    box-shadow: 0 0 0 2px rgba(61,124,133,0.3);
}

.mcc-orig-chart-bar .mcc-ls-beat-dots {
    display: none;
}

.mcc-orig-chart-bar .mcc-ls-beat-dot {
    display: none;
}

.mcc-orig-chart-bar .mcc-ls-beat-dot.active {
    display: none;
}

.mcc-orig-chart-bar .mcc-ls-bar-chords {
    display: grid;
    grid-template-columns: var(--bpb-grid, repeat(4, 1fr));
    min-height: calc(28px * var(--ls-zoom, 1.2));
    width: 100%;
}

.mcc-orig-chart-bar .mcc-ls-beat-markers {
    display: grid;
    grid-template-columns: var(--bpb-grid, repeat(4, 1fr));
    height: calc(10px * var(--ls-zoom, 1.2));
    margin-bottom: 2px;
}

.mcc-orig-chart-bar .mcc-ls-beat-marker {
    display: flex;
    justify-content: flex-start;
    padding-left: 2px;
}

.mcc-orig-chart-bar .mcc-ls-beat-marker::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(61,124,133,0.25);
}

.mcc-orig-chart-bar.playing .mcc-ls-beat-marker::before {
    background: rgba(61,124,133,0.5);
}

/* Aktiver Beat-Marker Animation */
.mcc-orig-chart-bar .mcc-ls-beat-marker.active::before {
    background: #3D7C85;
    width: 8px;
    height: 8px;
    margin-top: -2px;
    box-shadow: 0 0 6px rgba(61,124,133,0.6);
    animation: mcc-beat-pulse 0.15s ease-out;
}

@keyframes mcc-beat-pulse {
    0% {
        transform: scale(1.4);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.mcc-orig-chart-bar .mcc-ls-beat-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: calc(3px * var(--ls-zoom, 1.2));
    font-family: 'Akko', sans-serif;
    font-size: calc(14px * var(--ls-zoom, 1.2));
    font-weight: 600;
    color: #111416;
    min-height: calc(24px * var(--ls-zoom, 1.2));
    border-left: 1px solid rgba(0,0,0,0.06);
}

.mcc-orig-chart-bar .mcc-ls-beat-cell:first-child {
    border-left: none;
}

.mcc-orig-chart-bar .mcc-ls-beat {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: calc(4px * var(--ls-zoom, 1.2));
    font-family: 'Akko', sans-serif;
    font-size: calc(14px * var(--ls-zoom, 1.2));
    font-weight: 600;
    color: #111416;
}

.mcc-orig-chart-bar .mcc-ls-beat-empty {
    /* Empty beat slot - no content */
}

.mcc-orig-chart-bar .mcc-ls-chord {
    white-space: nowrap;
}

/* Origchart Jazz notation */
.mcc-pa-chord-chart-content.jazz .mcc-ls-chord {
    font-family: 'Patrick Hand', cursive;
    font-weight: 400;
}
.mcc-pa-chord-chart-content.jazz .mcc-ls-root {
    font-weight: 400;
}
.mcc-pa-chord-chart-content.jazz .mcc-ls-suffix {
    font-weight: 400;
    font-size: 0.85em;
}

/* Origchart Pop notation */
.mcc-pa-chord-chart-content.pop .mcc-ls-chord {
    font-family: 'Akko', 'Helvetica Neue', sans-serif;
    font-weight: 600;
}
.mcc-pa-chord-chart-content.pop .mcc-ls-root {
    font-weight: 700;
}
.mcc-pa-chord-chart-content.pop .mcc-ls-suffix {
    font-size: 0.7em;
    opacity: 0.8;
}

/* Tiles View */
.mcc-pa-tiles-view {
    flex: 1;
    overflow-y: auto;
}

/* Empty state */
.mcc-ls-empty {
    text-align: center;
    padding: 24px;
    color: rgba(17,20,22,0.4);
    font-family: 'Akko', sans-serif;
    font-size: 0.9rem;
}

/* Pause styling in leadsheet */
.mcc-ls-pause {
    color: rgba(17,20,22,0.35) !important;
    font-style: italic;
    font-weight: 500 !important;
    font-size: 0.85em;
}

/* Pause summary bar (compressed intro) */
.mcc-pause-summary-bar {
    background: rgba(61,124,133,0.04) !important;
    border: 1px dashed rgba(61,124,133,0.2) !important;
    min-height: auto !important;
}
.mcc-pause-summary-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    justify-content: center;
}
.mcc-pause-summary-icon {
    font-size: 1.3em;
    color: rgba(61,124,133,0.4);
    line-height: 1;
}
.mcc-pause-summary-text {
    font-family: 'Akko', sans-serif;
    font-size: 0.82rem;
    color: rgba(17,20,22,0.45);
    font-style: italic;
}
.mcc-pause-summary-dur {
    font-family: 'Akko', sans-serif;
    font-size: 0.7rem;
    color: rgba(61,124,133,0.5);
    background: rgba(61,124,133,0.08);
    padding: 1px 6px;
    border-radius: 8px;
    transition: all 0.2s;
}
.mcc-pause-summary-dur.mcc-countdown-active {
    color: #3D7C85;
    background: rgba(61,124,133,0.15);
    font-weight: 600;
    animation: mcc-countdown-pulse 1s ease-in-out infinite;
}

/* Pause in Griffbild panel */
.mcc-pause-label {
    display: block;
    font-family: 'Akko', sans-serif;
    font-size: 1.2em;
    font-weight: 600;
    color: rgba(17,20,22,0.4);
}
.mcc-pause-countdown {
    display: block;
    font-family: 'Akko', sans-serif;
    font-size: 0.85em;
    color: #3D7C85;
    font-weight: 600;
    margin-top: 2px;
    animation: mcc-countdown-pulse 1s ease-in-out infinite;
}
@keyframes mcc-countdown-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Count-in beat styles */
.mcc-countin-beat {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    color: #E8924F !important;
    text-shadow: 0 0 16px rgba(232,146,79,0.5);
    animation: none !important;
    transition: transform 0.1s, opacity 0.1s;
    display: inline-block;
    font-family: var(--mcc-font-heading);
}
.mcc-pause-countdown.mcc-countin-beat {
    margin-top: 4px;
    line-height: 1;
}
.mcc-pause-summary-dur.mcc-countin-beat {
    font-size: 1.8rem !important;
    background: rgba(232,146,79,0.12) !important;
    color: #E8924F !important;
    padding: 4px 12px !important;
    min-width: 48px;
    text-align: center;
}
.mcc-strip-beat-dot.countin {
    background: #E8924F !important;
    box-shadow: 0 0 6px rgba(232,146,79,0.6) !important;
    transform: scale(1.5) !important;
}

/* Count-in diagram (Griffbild panel) */
.mcc-countin-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    min-height: 80px;
}
.mcc-countin-dots {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.mcc-ci-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(61,124,133,0.15);
    transition: all 0.12s;
}
.mcc-ci-dot.active {
    background: #E8924F;
    box-shadow: 0 0 8px rgba(232,146,79,0.6);
    transform: scale(1.4);
}
.mcc-ci-dot.past {
    background: rgba(232,146,79,0.4);
}
.mcc-countin-number {
    font-family: var(--mcc-font-heading);
    font-size: 3.5rem;
    font-weight: 800;
    color: #E8924F;
    text-shadow: 0 0 20px rgba(232,146,79,0.4);
    line-height: 1;
    transition: transform 0.08s, opacity 0.08s;
    display: inline-block;
}

.mcc-pause-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 8px;
    min-height: 80px;
}
.mcc-pause-icon {
    font-size: 3em;
    color: rgba(61,124,133,0.25);
    line-height: 1;
    margin-bottom: 8px;
}
.mcc-pause-next-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.mcc-pause-next-label {
    font-family: 'Akko', sans-serif;
    font-size: 0.65rem;
    color: rgba(17,20,22,0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mcc-pause-next-name {
    font-family: 'Akko', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #3D7C85;
}

/* Pause chord in flow view */
.mcc-play-along-sheet-chord.mcc-pause-chord {
    color: rgba(17,20,22,0.35);
    font-style: italic;
    background: rgba(61,124,133,0.03);
}

/* Mini pause diagram for strip/grid */
.mcc-pause-diagram-mini {
    font-size: 2em;
    color: rgba(61,124,133,0.3);
    text-align: center;
    line-height: 1;
    padding: 8px 0;
}

/* Strip pause visual ring */
.mcc-strip-pause-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}
.mcc-strip-pause-ring {
    filter: drop-shadow(0 0 4px rgba(61,124,133,0.2));
}
.mcc-pa-strip-pause.active .mcc-strip-pause-ring {
    filter: drop-shadow(0 0 8px rgba(61,124,133,0.4));
}
.mcc-strip-pause-next {
    transition: opacity 0.3s;
}

/* Pause bar in strip */
.mcc-pa-bar-pause {
    background: rgba(61,124,133,0.08) !important;
    border: 1px dashed rgba(61,124,133,0.25) !important;
}
.mcc-pa-strip-pause,
.mcc-pa-grid-pause {
    opacity: 0.7;
    transition: opacity 0.3s;
}
.mcc-pa-strip-pause.active,
.mcc-pa-grid-pause.active {
    opacity: 1;
}

/* Grid pause countdown */
.mcc-grid-pause-cd {
    text-align: center;
    animation: mcc-countdown-pulse 1s ease-in-out infinite;
}

/* Guitar WF pause card */
.mcc-gwf-card-pause .mcc-gwf-name {
    color: rgba(255,255,255,0.35) !important;
    font-style: italic;
}

/* Waterfall HTML count-in overlay (Guitar WF) */
.mcc-wf-countin-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: rgba(26,26,46,0.85);
    border-radius: 16px;
    padding: 16px 28px;
    border: 2px solid rgba(232,146,79,0.4);
    box-shadow: 0 0 24px rgba(232,146,79,0.15);
    pointer-events: none;
}
.mcc-wf-ci-dots {
    display: flex;
    gap: 8px;
}
.mcc-wf-ci-num {
    font-family: var(--mcc-font-heading);
    font-size: 3rem;
    font-weight: 800;
    color: #E8924F;
    text-shadow: 0 0 20px rgba(232,146,79,0.5);
    line-height: 1;
    transition: transform 0.08s, opacity 0.08s;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .mcc-pa-chord-subtab {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
    
    .mcc-origchart-toolbar {
        gap: 5px;
        padding: 4px 6px;
    }
    
    .mcc-origchart-zoom-slider {
        width: 50px;
    }
}

/* =========================================================================
   LYRICS BAR (Play-Along Grifftabellen + Waterfall)
   ========================================================================= */
.mcc-pa-lyrics-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.07);
    border-radius: 0 0 10px 10px;
    min-height: 62px;
    transition: opacity 0.3s ease;
}

.mcc-pa-lyrics-close {
    position: absolute;
    top: 4px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(17, 20, 22, 0.45);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    z-index: 2;
}
.mcc-pa-lyrics-close:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #111416;
}

.mcc-pa-lyrics-bar.mcc-lyrics-collapsed .mcc-pa-lyrics-content {
    display: none;
}

/* Hide lyrics pill by default, show when lyrics available */
#mcc-pa-lyrics-pill {
    display: none;
}

.mcc-lyrics-sync-hint {
    font-family: 'Akko', 'Akko', sans-serif;
    font-size: 11px;
    color: rgba(180, 130, 0, 0.85);
    white-space: nowrap;
    margin-right: 4px;
    animation: mcc-hint-pulse 2s ease-in-out 1;
}
@keyframes mcc-hint-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.mcc-pa-lyrics-content {
    flex: 1;
    min-width: 0;
    text-align: center;
    overflow: hidden;
}

.mcc-pa-lyrics-prev,
.mcc-pa-lyrics-next {
    font-family: 'Akko', 'Akko', sans-serif;
    font-size: 85%;
    font-weight: 400;
    color: rgba(17, 20, 22, 0.4);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.25s ease;
    min-height: 1.3em;
}

.mcc-pa-lyrics-current {
    font-family: 'Akko', 'Akko', sans-serif;
    font-size: 115%;
    font-weight: 600;
    color: #111416;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.25s ease, transform 0.25s ease;
    text-shadow: none;
    margin: 2px 0;
}

.mcc-pa-lyrics-current.mcc-lyrics-fade {
    opacity: 0;
    transform: translateY(-4px);
}

.mcc-pa-lyrics-bar .mcc-lyrics-section-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #3D7C85;
    background: rgba(61, 124, 133, 0.15);
    border: 1px solid rgba(61, 124, 133, 0.3);
    border-radius: 6px;
    padding: 1px 6px;
    margin-right: 6px;
    vertical-align: middle;
}

/* Mobile */
@media (max-width: 768px) {
    .mcc-pa-lyrics-bar {
        padding: 10px 10px;
        gap: 8px;
        min-height: 72px;
    }
    .mcc-pa-lyrics-current {
        font-size: 105%;
    }
    .mcc-pa-lyrics-prev,
    .mcc-pa-lyrics-next {
        font-size: 80%;
    }
    .mcc-pa-lyrics-sync {
        gap: 2px;
    }
    .mcc-lyrics-sync-btn {
        width: 22px;
        height: 22px;
        font-size: 13px;
    }
    .mcc-lyrics-sync-value {
        font-size: 9px;
        min-width: 32px;
    }
}

/* Lyrics Sync Controls */
.mcc-pa-lyrics-sync {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.mcc-lyrics-sync-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.05);
    color: rgba(17, 20, 22, 0.7);
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    padding: 0;
    line-height: 1;
}
.mcc-lyrics-sync-btn:hover {
    background: rgba(61, 124, 133, 0.15);
    border-color: rgba(61, 124, 133, 0.4);
    color: #3D7C85;
}
.mcc-lyrics-sync-btn:active {
    transform: scale(0.9);
}

.mcc-lyrics-sync-value {
    font-family: 'Akko', monospace;
    font-size: 10px;
    color: rgba(17, 20, 22, 0.5);
    min-width: 36px;
    text-align: center;
    user-select: none;
    cursor: default;
    transition: color 0.2s ease;
}
.mcc-lyrics-sync-value.mcc-lyrics-sync-active {
    color: #3D7C85;
}

/* ===================================================================
   PROGRESS BAR - Mobile Optimierung (Touch-freundlich)
   =================================================================== */
@media (max-width: 768px) {
    .mcc-playlist-player .mcc-player-progress-bar {
        height: 8px !important;
    }
    
    .mcc-playlist-player .mcc-player-progress-bar::before {
        top: -22px !important;
        bottom: -22px !important;
    }
    
    /* Thumb immer sichtbar auf Mobile */
    .mcc-playlist-player .mcc-player-progress-fill::after {
        transform: translateY(-50%) scale(1) !important;
        width: 16px !important;
        height: 16px !important;
        right: -8px !important;
    }
    
    .mcc-playlist-player .mcc-player-progress-bar.mcc-scrubbing {
        height: 10px !important;
    }
    
    .mcc-playlist-player .mcc-player-progress-bar.mcc-scrubbing .mcc-player-progress-fill::after {
        transform: translateY(-50%) scale(1.3) !important;
        box-shadow: 0 0 0 6px rgba(61,124,133,0.2), 0 1px 4px rgba(0,0,0,0.4) !important;
    }
    
    /* Mini-Player Progress dicker */
    body #mcc-mini-player .mcc-mini-player-progress,
    #mcc-mini-player .mcc-mini-player-progress {
        height: 6px !important; /* Dicker für bessere Sichtbarkeit */
    }
    
        min-width: 32px;
    }
}

/* Lyrics Sync Controls */
.mcc-pa-lyrics-sync {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.mcc-lyrics-sync-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.05);
    color: rgba(17, 20, 22, 0.7);
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    padding: 0;
    line-height: 1;
}
.mcc-lyrics-sync-btn:hover {
    background: rgba(61, 124, 133, 0.15);
    border-color: rgba(61, 124, 133, 0.4);
    color: #3D7C85;
}
.mcc-lyrics-sync-btn:active {
    transform: scale(0.9);
}

.mcc-lyrics-sync-value {
    font-family: 'Akko', monospace;
    font-size: 10px;
    color: rgba(17, 20, 22, 0.5);
    min-width: 36px;
    text-align: center;
    user-select: none;
    cursor: default;
    transition: color 0.2s ease;
}
.mcc-lyrics-sync-value.mcc-lyrics-sync-active {
    color: rgba(17, 20, 22, 0.8);
}

/* Mobile mini-player adjustments */
@media (max-width: 768px) {
    body #mcc-mini-player,
    #mcc-mini-player {
        bottom: 56px !important;
    }
    
    body #mcc-mini-player .mcc-mini-player-progress::before,
    #mcc-mini-player .mcc-mini-player-progress::before {
        top: -22px !important;
    }
    
    .mcc-scrub-tooltip {
        top: -36px !important;
        font-size: 13px !important;
        padding: 4px 10px !important;
    }
}

/* ==========================================
   DESKTOP LAYOUT & PADDING FIXES v4.15.6
   ========================================== */

/* Mobile: Mehr Padding links/rechts */
@media (max-width: 767px) {
    .mcc-chord-sheet {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Tablet: Mehr Padding */
@media (min-width: 768px) and (max-width: 1199px) {
    .mcc-chord-sheet {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* Desktop: A4-Layout mit grauen Seitenbereichen */
@media (min-width: 1200px) {
    /* Akkorde-Tab: Grauer Hintergrund OHNE padding-top (kein Streifen zwischen Toolbar und Content) */
    #mcc-tab-chords {
        background: #f5f5f5 !important;
        min-height: 400px;
        padding-bottom: 30px;
    }
    
    /* Song Meta (Titel, Artist): Weißer Bereich, zentriert */
    #mcc-tab-chords .mcc-song-meta,
    #mcc-tab-chords #mcc-song-meta {
        max-width: 900px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 30px !important;
        margin-bottom: 0 !important;
        padding: 20px 40px !important;
        background: white !important;
        border-radius: 8px 8px 0 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    
    /* Chord Sheet: Weißer Bereich, zentriert, direkt unter Song Meta */
    #mcc-tab-chords .mcc-chord-sheet {
        max-width: 900px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0 !important;
        background: white !important;
        padding: 40px !important;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    
    /* Premium Tab */
    #mcc-tab-premium {
        background: #f5f5f5 !important;
        padding: 30px 0;
    }
    
    #mcc-tab-premium #mcc-premium-player {
        max-width: 900px;
        margin: 0 auto;
        background: white !important;
        padding: 40px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

/* Dark Mode für Desktop */
@media (min-width: 1200px) {
    .mcc-app.dark-mode #mcc-tab-chords {
        background: #1a1a1a !important;
    }
    
    .mcc-app.dark-mode #mcc-tab-chords .mcc-song-meta,
    .mcc-app.dark-mode #mcc-tab-chords #mcc-song-meta,
    .mcc-app.dark-mode #mcc-tab-chords .mcc-chord-sheet {
        background: #111416 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    .mcc-app.dark-mode #mcc-tab-premium {
        background: #1a1a1a !important;
    }
    
    .mcc-app.dark-mode #mcc-tab-premium #mcc-premium-player {
        background: #111416 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
}

/* Section Labels: Explizit sichtbar + grüne Farbe erzwingen */
.mcc-section-label {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #E8924F !important;
    font-family: var(--mcc-font-title) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 24px 0 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #E8924F !important;
}

/* ==========================================
   SONG HEADER DESKTOP LAYOUT v4.17.0
   Ergänzung zu v4.15.6 - Song Header auch zentrieren
   ========================================== */

@media (min-width: 1200px) {
    /* Song Header: Auch zentriert mit 900px, weißer Hintergrund */
    .mcc-song-display .mcc-song-header {
        max-width: 900px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 30px !important;
        margin-bottom: 0 !important;
        background: white !important;
        border-bottom: none !important;
        border-radius: 8px 8px 0 0 !important;
        padding: 24px 40px !important;
        box-shadow: none !important;
    }
    
    /* Grauer Hintergrund für gesamten Song Display Bereich */
    .mcc-song-display {
        background: #f5f5f5 !important;
        min-height: 400px;
    }
}

/* Dark Mode für Song Header */
@media (min-width: 1200px) {
    .mcc-app.dark-mode .mcc-song-display {
        background: #1a1a1a !important;
    }
    
    .mcc-app.dark-mode .mcc-song-display .mcc-song-header {
        background: #111416 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
}

/* Light Mode Override - Explizit weißer Hintergrund erzwingen */
@media (min-width: 1200px) {
    body:not(.dark-mode) .mcc-app:not(.dark-mode) #mcc-tab-chords #mcc-song-meta,
    body:not(.dark-mode) #mcc-tab-chords #mcc-song-meta,
    .mcc-app:not(.dark-mode) #mcc-tab-chords #mcc-song-meta {
        background: white !important;
        background-color: white !important;
    }
}

/* ================================================
   SMART SUGGESTIONS - Similar Songs Recommendations
   ================================================ */

.mcc-smart-suggestions {
    margin: 60px 0 40px 0;
    padding: 0;
}

.mcc-suggestions-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 600;
    color: #111416;
    margin-bottom: 24px;
    font-family: 'Akko', sans-serif;
}

.mcc-suggestions-title svg {
    color: #E8924F;
    flex-shrink: 0;
}

.mcc-suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

@media (max-width: 768px) {
    .mcc-suggestions-grid {
        grid-template-columns: 1fr;
    }
}

.mcc-suggestion-card {
    background: white;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.mcc-suggestion-card:hover {
    border-color: #3D7C85;
    box-shadow: 0 4px 12px rgba(61, 124, 133, 0.15);
    transform: translateY(-2px);
}

.mcc-suggestion-header {
    margin-bottom: 12px;
}

.mcc-suggestion-title {
    font-size: 18px;
    font-weight: 600;
    color: #111416;
    margin: 0 0 4px 0;
    font-family: 'Akko', sans-serif;
    line-height: 1.3;
}

.mcc-suggestion-artist {
    font-size: 14px;
    color: #666;
    display: block;
}

.mcc-suggestion-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.mcc-suggestion-meta span {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.mcc-suggestion-key {
    background: #3D7C85;
    color: white;
}

.mcc-suggestion-genre {
    background: #E8924F;
    color:#111416;
}

.mcc-suggestion-difficulty {
    background: #FAF8F3;
    color: #666;
    font-size: 14px;
}

.mcc-suggestion-tempo {
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
}

.mcc-suggestion-reason {
    background: linear-gradient(135deg, rgba(61, 124, 133, 0.08) 0%, rgba(232, 146, 79, 0.08) 100%);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #111416;
    margin-bottom: 14px;
    line-height: 1.4;
}

.mcc-suggestion-open-btn {
    width: 100%;
    background: linear-gradient(135deg, #3D7C85 0%, #31626A 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Akko', sans-serif;
}

.mcc-suggestion-open-btn:hover {
    background: linear-gradient(135deg, #31626A 0%, #264D53 100%);
    transform: scale(1.02);
}

.mcc-suggestion-open-btn svg {
    flex-shrink: 0;
}

/* Dark Mode Support */
.dark-mode .mcc-suggestions-title {
    color: #111416;
}

.dark-mode .mcc-suggestion-card {
    background: #1a1a1a;
    border-color: #333;
}

.dark-mode .mcc-suggestion-card:hover {
    border-color: #3D7C85;
    box-shadow: 0 4px 12px rgba(61, 124, 133, 0.3);
}

.dark-mode .mcc-suggestion-title {
    color: #111416;
}

.dark-mode .mcc-suggestion-artist {
    color: #aaa;
}

.dark-mode .mcc-suggestion-difficulty {
    background: #2a2a2a;
    color: #aaa;
}

.dark-mode .mcc-suggestion-tempo {
    color: #888;
}

.dark-mode .mcc-suggestion-reason {
    background: linear-gradient(135deg, rgba(61, 124, 133, 0.15) 0%, rgba(232, 146, 79, 0.15) 100%);
    color: #111416;
}

/* Responsive */
@media (max-width: 480px) {
    .mcc-smart-suggestions {
        margin: 40px 0 30px 0;
    }
    
    .mcc-suggestions-title {
        font-size: 20px;
    }
    
    .mcc-suggestion-card {
        padding: 16px;
    }
    
    .mcc-suggestion-title {
        font-size: 16px;
    }
}

/* Loading State */
.mcc-suggestions-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #666;
}

.mcc-suggestions-loading::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 3px solid #f0f0f0;
    border-top-color: #3D7C85;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 10px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ================================================
   SMART SUGGESTIONS - SIDEBAR (Desktop)
   ================================================ */

.mcc-suggestions-sidebar {
    position: sticky;
    top: 100px;
    right: 0;
    width: 280px;
    float: right;
    margin-left: 30px;
    margin-bottom: 30px;
    background: white;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.mcc-sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #111416;
    margin: 0 0 16px 0;
    font-family: 'Akko', sans-serif;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
}

.mcc-sidebar-title svg {
    color: #E8924F;
    flex-shrink: 0;
}

.mcc-sidebar-suggestions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mcc-sidebar-suggestion {
    padding: 12px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fafafa;
}

.mcc-sidebar-suggestion:hover {
    border-color: #3D7C85;
    background: white;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(61, 124, 133, 0.15);
}

.mcc-sidebar-song-info {
    margin-bottom: 8px;
}

.mcc-sidebar-song-title {
    font-size: 14px;
    font-weight: 600;
    color: #111416;
    margin-bottom: 2px;
    font-family: 'Akko', sans-serif;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcc-sidebar-song-artist {
    font-size: 12px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcc-sidebar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.mcc-sidebar-meta span {
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.mcc-sidebar-key {
    background: #3D7C85;
    color: white;
}

.mcc-sidebar-genre {
    background: #E8924F;
    color:#111416;
}

.mcc-sidebar-difficulty {
    background: #FAF8F3;
    color: #666;
    font-size: 11px;
}

.mcc-sidebar-match {
    font-size: 12px;
    color: #3D7C85;
    font-weight: 600;
}

/* Dark Mode - Sidebar */
.dark-mode .mcc-suggestions-sidebar {
    background: #1a1a1a;
    border-color: #333;
}

.dark-mode .mcc-sidebar-title {
    color: #111416;
    border-bottom-color: #333;
}

.dark-mode .mcc-sidebar-suggestion {
    background: #2a2a2a;
    border-color: #3a3a3a;
}

.dark-mode .mcc-sidebar-suggestion:hover {
    background: #1a1a1a;
    border-color: #3D7C85;
}

.dark-mode .mcc-sidebar-song-title {
    color: #111416;
}

.dark-mode .mcc-sidebar-song-artist {
    color: #aaa;
}

.dark-mode .mcc-sidebar-difficulty {
    background: #3a3a3a;
    color: #aaa;
}

.dark-mode .mcc-sidebar-match {
    color: #E8924F;
}

/* Responsive: Hide sidebar on small screens */
@media (max-width: 1199px) {
    .mcc-suggestions-sidebar {
        display: none;
    }
}

/* Responsive: Hide bottom cards on large screens */
@media (min-width: 1200px) {
    .mcc-smart-suggestions {
        display: none;
    }
}


/* Desktop Layout mit Sidebar */
@media (min-width: 1200px) {
    .mcc-song-display {
        position: relative;
    }
    
    /* Chord Sheet bekommt max-width für Sidebar-Platz */
    .mcc-song-display .mcc-chord-sheet {
        max-width: calc(100% - 320px); /* 280px Sidebar + 40px Abstand */
    }
    
    /* Song Meta auch anpassen */
    .mcc-song-display #mcc-song-meta {
        max-width: calc(100% - 320px);
    }
}


/* SIDEBAR FIX - Bessere Positionierung */

/* Remove old float-based approach */
.mcc-suggestions-sidebar {
    position: absolute !important;
    top: 320px !important;
    right: 20px !important;
    width: 280px !important;
    float: none !important;
    margin: 0 !important;
    background: white;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    z-index: 100;
}

/* Thumbnail in sidebar */
.mcc-sidebar-thumbnail {
    width: 100%;
    height: 80px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    margin-bottom: 10px;
}

/* Adjust spacing with thumbnail */
.mcc-sidebar-suggestion {
    padding: 10px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fafafa;
}

/* Responsive - Desktop only */
@media (min-width: 1200px) {
    .mcc-suggestions-sidebar {
        display: block !important;
    }
    
    .mcc-smart-suggestions {
        display: none !important;
    }
}

@media (max-width: 1199px) {
    .mcc-suggestions-sidebar {
        display: none !important;
    }
    
    .mcc-smart-suggestions {
        display: block !important;
    }
}

/* Dark Mode */
.dark-mode .mcc-suggestions-sidebar {
    background: #1a1a1a;
    border-color: #333;
}

.dark-mode .mcc-sidebar-suggestion {
    background: #2a2a2a;
    border-color: #3a3a3a;
}

.dark-mode .mcc-sidebar-suggestion:hover {
    background: #1a1a1a;
}


/* ================================================
   SMART SUGGESTIONS - COMPLETE FIX
   ================================================ */

/* Sidebar Positioning - Bündig mit Song Meta */
.mcc-suggestions-sidebar {
    position: absolute !important;
    top: 0 !important;              /* Bündig mit Song-Meta! */
    right: 0 !important;
    width: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 50 !important;
}

/* Sidebar Container */
.mcc-sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #111416;
    margin: 0 0 16px 0;
    padding: 16px 20px 12px 20px;
    font-family: 'Akko', sans-serif;
    border-bottom: 2px solid #f0f0f0;
    background: white;
    border-radius: 12px 12px 0 0;
}

.mcc-sidebar-title svg {
    color: #E8924F;
    flex-shrink: 0;
}

.mcc-sidebar-suggestions {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: white;
    border-radius: 0 0 12px 12px;
    padding: 0 10px 10px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Individual Suggestion */
.mcc-sidebar-suggestion {
    padding: 12px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fafafa;
    margin-bottom: 8px;
}

.mcc-sidebar-suggestion:hover {
    border-color: #3D7C85;
    background: white;
    transform: translateX(-4px);
    box-shadow: 0 2px 8px rgba(61, 124, 133, 0.15);
}

/* Thumbnail */
.mcc-sidebar-thumbnail {
    width: 100%;
    height: 70px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    margin-bottom: 8px;
    background-color: #f0f0f0;
}

/* Song Info */
.mcc-sidebar-song-info {
    margin-bottom: 6px;
}

.mcc-sidebar-song-title {
    font-size: 14px;
    font-weight: 600;
    color: #111416;
    margin-bottom: 2px;
    font-family: 'Akko', sans-serif;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mcc-sidebar-song-artist {
    font-size: 12px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Meta Tags */
.mcc-sidebar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.mcc-sidebar-meta span {
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.mcc-sidebar-key {
    background: #3D7C85;
    color: white;
}

.mcc-sidebar-genre {
    background: #E8924F;
    color:#111416;
}

.mcc-sidebar-difficulty {
    background: #FAF8F3;
    color: #666;
    font-size: 11px;
}

.mcc-sidebar-match {
    font-size: 12px;
    color: #3D7C85;
    font-weight: 600;
}

/* Layout Adjustments - Prevent Overlap */
@media (min-width: 1400px) {
    /* Show sidebar on wide screens */
    .mcc-suggestions-sidebar {
        display: block !important;
    }
    
    .mcc-smart-suggestions {
        display: none !important;
    }
    
    /* Make space for sidebar */
    .mcc-song-display {
        position: relative;
        padding-right: 320px;  /* 300px sidebar + 20px gap */
    }
    
    /* Song meta and chord sheet max-width */
    #mcc-song-meta,
    .mcc-chord-sheet,
    #mcc-song-toolbar {
        max-width: 100% !important;
    }
}

/* Medium screens: Cards at bottom */
@media (min-width: 768px) and (max-width: 1399px) {
    .mcc-suggestions-sidebar {
        display: none !important;
    }
    
    .mcc-smart-suggestions {
        display: block !important;
    }
}

/* Small screens: Cards at bottom */
@media (max-width: 767px) {
    .mcc-suggestions-sidebar {
        display: none !important;
    }
    
    .mcc-smart-suggestions {
        display: block !important;
    }
}

/* Dark Mode */
.dark-mode .mcc-sidebar-title {
    color: #111416;
    border-bottom-color: #333;
    background: #1a1a1a;
}

.dark-mode .mcc-sidebar-suggestions {
    background: #1a1a1a;
}

.dark-mode .mcc-sidebar-suggestion {
    background: #2a2a2a;
    border-color: #3a3a3a;
}

.dark-mode .mcc-sidebar-suggestion:hover {
    background: #1a1a1a;
    border-color: #3D7C85;
}

.dark-mode .mcc-sidebar-song-title {
    color: #111416;
}

.dark-mode .mcc-sidebar-song-artist {
    color: #aaa;
}

.dark-mode .mcc-sidebar-difficulty {
    background: #3a3a3a;
    color: #aaa;
}

.dark-mode .mcc-sidebar-match {
    color: #E8924F;
}

.dark-mode .mcc-sidebar-thumbnail {
    background-color: #2a2a2a;
}


/* ================================================
   SMART SUGGESTIONS - LIBRARY TAB
   ================================================ */

.mcc-suggestions-grid-library {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 0;
}

.mcc-suggestion-card-library {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mcc-suggestion-card-library:hover {
    background: white;
    border-color: #3D7C85;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(61, 124, 133, 0.15);
}

.mcc-suggestion-thumbnail {
    width: 100%;
    height: 100px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    margin-bottom: 10px;
    background-color: #e0e0e0;
}

.mcc-suggestion-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mcc-suggestion-title {
    font-size: 15px;
    font-weight: 600;
    color: #111416;
    font-family: 'Akko', sans-serif;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mcc-suggestion-artist {
    font-size: 13px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcc-suggestion-meta-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mcc-suggestion-meta-inline span {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.mcc-meta-key {
    background: #3D7C85;
    color: white;
}

.mcc-meta-genre {
    background: #E8924F;
    color:#111416;
}

.mcc-meta-difficulty {
    background: #FAF8F3;
    color: #666;
}

.mcc-suggestion-match-badge {
    display: inline-block;
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(61, 124, 133, 0.1) 0%, rgba(232, 146, 79, 0.1) 100%);
    border-radius: 6px;
    font-size: 12px;
    color: #3D7C85;
    font-weight: 600;
    margin-top: 2px;
}

/* Dark Mode */
.dark-mode .mcc-suggestion-card-library {
    background: #2a2a2a;
    border-color: #3a3a3a;
}

.dark-mode .mcc-suggestion-card-library:hover {
    background: #1a1a1a;
    border-color: #3D7C85;
}

.dark-mode .mcc-suggestion-title {
    color: #111416;
}

.dark-mode .mcc-suggestion-artist {
    color: #aaa;
}

.dark-mode .mcc-meta-difficulty {
    background: #3a3a3a;
    color: #aaa;
}

.dark-mode .mcc-suggestion-match-badge {
    background: linear-gradient(135deg, rgba(61, 124, 133, 0.15) 0%, rgba(232, 146, 79, 0.15) 100%);
    color: #E8924F;
}

.dark-mode .mcc-suggestion-thumbnail {
    background-color: #3a3a3a;
}

/* Loading State */
.mcc-suggestions-placeholder {
    padding: 20px;
    text-align: center;
}


/* Remove old smart suggestions from chord sheet */
.mcc-smart-suggestions,
.mcc-suggestions-sidebar {
    display: none !important;
}


/* Remove old sidebar layout - no longer needed */
@media (min-width: 1400px) {
    .mcc-song-display {
        position: relative;
        /* padding-right: 320px; REMOVED - No more sidebar */
    }
}


/* ================================================
   SONG DISPLAY - CENTERED (No sidebar anymore)
   ================================================ */

/* Ensure song display is centered.
   v4.32.383: ohne seitliche Polsterung. Breite und Rand kommen aus dem
   Block "Header / Suche / Main-Content gleich breit" weiter unten; die
   20 px hier blieben davon unberuehrt und machten das weisse Feld des
   Chordsheets schmaler als die Kopfleiste. */
.mcc-song-display {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

#mcc-song-meta,
.mcc-chord-sheet,
#mcc-song-toolbar {
    max-width: 100%;
}


/* ================================================
   LIBRARY - PROFESSIONAL SEARCH/CREATE INPUT
   ================================================ */

/* Better playlist creation inline */
.mcc-create-playlist-inline {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.mcc-input-sm {
    flex: 1 !important;
    padding: 10px 14px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    background: white !important;
    color: #111416 !important;
    font-family: 'Akko', sans-serif !important;
    transition: all 0.2s ease !important;
}

.mcc-input-sm:focus {
    outline: none !important;
    border-color: #3D7C85 !important;
    background: white !important;
    box-shadow: 0 0 0 3px rgba(61, 124, 133, 0.1) !important;
}

.mcc-input-sm::placeholder {
    color: #aaa !important;
}

.mcc-btn-sm {
    padding: 10px 20px !important;
    background: linear-gradient(135deg, #3D7C85 0%, #31626A 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-family: 'Akko', sans-serif !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.mcc-btn-sm:hover {
    background: linear-gradient(135deg, #31626A 0%, #264D53 100%) !important;
    transform: scale(1.02) !important;
}

.mcc-btn-sm:active {
    transform: scale(0.98) !important;
}

/* Dark Mode */
.dark-mode .mcc-create-playlist-inline {
    background: #2a2a2a;
    border-color: #3a3a3a;
}

.dark-mode .mcc-input-sm {
    background: #1a1a1a !important;
    border-color: #3a3a3a !important;
    color: #FAF8F3 !important;
}

.dark-mode .mcc-input-sm:focus {
    border-color: #3D7C85 !important;
    background: #1a1a1a !important;
}

.dark-mode .mcc-input-sm::placeholder {
    color: #666 !important;
}


/* Empty State - Centered */
.mcc-empty-list-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}


/* ================================================
   SEARCH INPUT - CENTERED & COMPACT (1/3 width)
   ================================================ */

.mcc-search-input-group {
    flex: none !important;
    max-width: 600px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Responsive - smaller on mobile */
@media (max-width: 768px) {
    .mcc-search-input-group {
        max-width: 100% !important;
        padding: 0 20px !important;
    }
}


/* ================================================
   SMART SUGGESTIONS - COMPACT LIST WITH THUMBNAILS
   ================================================ */

.mcc-suggestions-list-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
}

.mcc-suggestion-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mcc-suggestion-compact:hover {
    background: white;
    border-color: #3D7C85;
    transform: translateX(4px);
    box-shadow: 0 2px 6px rgba(61, 124, 133, 0.15);
}

.mcc-suggestion-compact-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.mcc-suggestion-thumb-small {
    width: 50px;
    height: 50px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    background-color: #e0e0e0;
    flex-shrink: 0;
}

.mcc-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e0e0e0 0%, #d0d0d0 100%);
}

.mcc-thumb-placeholder svg {
    color: #999;
}

.mcc-suggestion-compact-info {
    flex: 1;
    min-width: 0;
}

.mcc-suggestion-compact-title {
    font-size: 14px;
    font-weight: 600;
    color: #111416;
    font-family: 'Akko', sans-serif;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcc-suggestion-compact-artist {
    font-size: 12px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcc-suggestion-compact-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.mcc-compact-badge {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.mcc-badge-key {
    background: #3D7C85;
    color: white;
}

.mcc-badge-genre {
    background: #E8924F;
    color:#111416;
}

.mcc-compact-match {
    font-size: 13px;
    font-weight: 600;
    color: #3D7C85;
    white-space: nowrap;
}

/* Dark Mode */
.dark-mode .mcc-suggestion-compact {
    background: #2a2a2a;
    border-color: #3a3a3a;
}

.dark-mode .mcc-suggestion-compact:hover {
    background: #1a1a1a;
    border-color: #3D7C85;
}

.dark-mode .mcc-suggestion-compact-title {
    color: #111416;
}

.dark-mode .mcc-suggestion-compact-artist {
    color: #aaa;
}

.dark-mode .mcc-thumb-placeholder {
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
}

.dark-mode .mcc-thumb-placeholder svg {
    color: #666;
}

.dark-mode .mcc-compact-match {
    color: #E8924F;
}


/* ================================================
   LIBRARY - FIXES FOR BUDDYBOSS & SCROLLING
   ================================================ */

/* Fix active tab text color (BuddyBoss override) */
.mcc-library-sidebar .mcc-tab.active {
    color: #fff !important;
    background: #3D7C85 !important;
    border-bottom-color: #3D7C85 !important;
    font-weight: 600 !important;
    border-radius: 6px 6px 0 0 !important;
}

.mcc-library-sidebar .mcc-tab {
    color: #666 !important;
}

.mcc-library-sidebar .mcc-tab:hover {
    color: #111416 !important;
}

/* Ensure scrolling works properly */
.mcc-library-content {
    flex: 1 !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 180px) !important;
}

/* Smooth scrolling */
.mcc-library-content {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #3D7C85 #f0f0f0;
}

.mcc-library-content::-webkit-scrollbar {
    width: 8px;
}

.mcc-library-content::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}

.mcc-library-content::-webkit-scrollbar-thumb {
    background: #3D7C85;
    border-radius: 4px;
}

.mcc-library-content::-webkit-scrollbar-thumb:hover {
    background: #31626A;
}

/* Dark Mode */
.dark-mode .mcc-library-sidebar .mcc-tab.active {
    color: #E8924F !important;
    border-bottom-color: #E8924F !important;
}

.dark-mode .mcc-library-sidebar .mcc-tab {
    color: #aaa !important;
}

.dark-mode .mcc-library-sidebar .mcc-tab:hover {
    color: #FAF8F3 !important;
}

.dark-mode .mcc-library-content::-webkit-scrollbar-track {
    background: #2a2a2a;
}

.dark-mode .mcc-library-content::-webkit-scrollbar-thumb {
    background: #E8924F;
}

.dark-mode .mcc-library-content::-webkit-scrollbar-thumb:hover {
    background: #3D7C85;
}


/* ================================================
   FINAL CORRECT FIX - Nur Suchfeld anpassen!
   ================================================ */

/* 1. Mobile - Volle Breite */
@media (max-width: 1024px) {
    .mcc-song-display {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .mcc-song-container {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
}

/* 2. ChordSheet - Keine 900px Begrenzung */
@media (min-width: 1200px) {
    #mcc-tab-chords #mcc-song-meta {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 20px 30px !important;
        background: white !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    
    #mcc-tab-chords .mcc-chord-sheet {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 30px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    
    #mcc-tab-chords {
        background: white !important;
        padding-bottom: 0 !important;
    }
}

/* 3. Suchfeld - GLEICH wie Toolbar (nur padding anpassen) */
.mcc-search-form {
    width: 100% !important;
}

.mcc-search-wrapper,
.mcc-search-container {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 15px !important;  /* GENAU wie .mcc-content-tabs */
    margin: 0 !important;
}

.mcc-search-input-group {
    flex: 1 !important;
    min-width: 0 !important;
}

.mcc-search-btn {
    flex-shrink: 0 !important;
    padding: 12px 14px !important;
    min-width: 48px !important;
    height: 48px !important;
    border-radius: 10px !important;
}

.mcc-search-btn .mcc-btn-text {
    display: none !important;
}

@media (min-width: 769px) {
    .mcc-search-btn .mcc-btn-text {
        display: inline !important;
        margin-left: 6px !important;
    }
    
    .mcc-search-btn {
        padding: 12px 20px !important;
        min-width: auto !important;
        height: auto !important;
    }
}

@media (max-width: 768px) {
    .mcc-search-wrapper,
    .mcc-search-container {
        padding: 10px 12px !important;
    }
    
    .mcc-search-btn {
        padding: 10px !important;
        min-width: 44px !important;
        height: 44px !important;
    }
}


/* ================================================
   SEARCH PERFECT ALIGNMENT - Exakt wie Toolbar!
   ================================================ */

/* Search Form - Äußerer Container (wie Song Container) */
.mcc-search-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Search Container - EXAKT wie .mcc-content-tabs */
.mcc-search-wrapper,
.mcc-search-container {
    display: flex !important;
    gap: 10px !important;  /* Gleich wie Toolbar */
    padding: 12px 15px !important;  /* Gleich wie Toolbar */
    align-items: center !important;
    margin: 0 !important;
    max-width: none !important;
    width: auto !important;
}

/* Input Group - flex-grow */
.mcc-search-input-group {
    flex: 1 !important;
    max-width: none !important;
    min-width: 0 !important;
    display: flex !important;
    position: relative !important;
}

/* Search Button - kompakt */
.mcc-search-btn {
    flex-shrink: 0 !important;
    padding: 11px 18px !important;
    background: linear-gradient(135deg, #E8924F 0%, #E57721 100%) !important;
    color:#111416 !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 8px rgba(232, 146, 79, 0.3) !important;
}

.mcc-search-btn:hover {
    background: linear-gradient(135deg, #E57721 0%, #C55E17 100%) !important;
    transform: translateY(-1px) !important;
}

/* Button Text */
.mcc-search-btn .mcc-btn-text {
    display: inline !important;
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    .mcc-search-wrapper,
    .mcc-search-container {
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    
    .mcc-search-btn {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
    
    /* Button Text auf Mobile ausblenden */
    .mcc-search-btn .mcc-btn-text {
        display: none !important;
    }
    
    /* Nur Icon auf Mobile */
    .mcc-search-btn {
        min-width: 44px !important;
        justify-content: center !important;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .mcc-search-wrapper,
    .mcc-search-container {
        padding: 11px 14px !important;
    }
}


/* ================================================
   SEARCH FINAL FIX - Exakt wie .mcc-content-tabs
   ================================================ */

/* Form - äußerer Wrapper */
.mcc-search-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Wrapper - DER Container (wie .mcc-content-tabs) */
.mcc-search-wrapper {
    display: flex !important;
    gap: 10px !important;  /* Wie Toolbar */
    padding: 12px 15px !important;  /* Wie Toolbar */
    align-items: center !important;
    background: transparent !important;
    margin: 0 !important;
}

/* Input Group - flex-grow, enthält Icon + Input + Voice */
.mcc-search-input-group {
    flex: 1 !important;
    max-width: none !important;
    min-width: 0 !important;
    display: flex !important;
    position: relative !important;
}

/* Search Button - direkt neben Input */
.mcc-search-btn {
    flex-shrink: 0 !important;
    padding: 11px 18px !important;
    background: linear-gradient(135deg, #E8924F 0%, #E57721 100%) !important;
    color:#111416 !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 8px rgba(232, 146, 79, 0.3) !important;
    transition: all 0.2s ease !important;
}

.mcc-search-btn:hover {
    background: linear-gradient(135deg, #E57721 0%, #C55E17 100%) !important;
    transform: translateY(-1px) !important;
}

/* Mobile */
@media (max-width: 768px) {
    .mcc-search-wrapper {
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    
    .mcc-search-btn {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
    
    /* Nur Icon auf Mobile */
    .mcc-search-btn .mcc-btn-text {
        display: none !important;
    }
    
    .mcc-search-btn {
        min-width: 44px !important;
        justify-content: center !important;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .mcc-search-wrapper {
        padding: 11px 14px !important;
    }
}


/* ═══════════════════════════════════════════════════
   PERCUSSION – Complete Styles v6 (BuddyBoss-safe)
   Full-height, responsive allcards, icon anim
   ═══════════════════════════════════════════════════ */

/* Container – fill available height */
.mcc-perc-container {
    width: 100% !important;
    min-height: 180px;
    background: #FFFFFF !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    overflow: hidden;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Make parent stretch so perc fills to toolbar */
.mcc-pa-view-diagrams { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* PNG Icons – base */
.mcc-perc-icon {
    display: inline-block !important;
    vertical-align: middle !important;
    object-fit: contain !important;
    border: none !important;
    background: transparent !important;
    flex-shrink: 0;
    transition: transform 0.12s ease, filter 0.12s ease;
}
/* Grid icon animation on hit */
.mcc-perc-icon.perc-icon-hit {
    transform: scale(1.35) !important;
    filter: drop-shadow(0 2px 4px rgba(61,124,133,0.35));
}
.mcc-perc-icon.perc-icon-accent {
    transform: scale(1.5) !important;
    filter: drop-shadow(0 2px 6px rgba(232,146,79,0.45));
}

/* ── Tabs ── */
.mcc-perc-tabs {
    display: flex !important;
    border-bottom: 2px solid #F0F0F0 !important;
    background: #fff !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden;
    flex-shrink: 0;
}
.mcc-perc-tab {
    flex: 1 !important;
    padding: 10px 0 !important;
    border: none !important;
    background: #FAF8F3 !important;
    font-family: 'Akko', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #999 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    letter-spacing: 0.3px;
    line-height: 1.4 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    min-height: 0 !important;
}
.mcc-perc-tab:first-child { border-radius: 16px 0 0 0 !important; }
.mcc-perc-tab:last-child { border-radius: 0 16px 0 0 !important; }
.mcc-perc-tab:hover { color: #111416 !important; background: #EEF0F2 !important; }
.mcc-perc-tab.active {
    color: #3D7C85 !important;
    background: #fff !important;
    box-shadow: inset 0 -3px 0 #3D7C85 !important;
}

/* ── Body Percussion Toggle (Segmented Control) ── */
.mcc-perc-body-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin-left: auto !important;
    padding: 3px !important;
    background: #E8E8E8 !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    margin-right: 6px !important;
}
.mcc-perc-body-btn,
button.mcc-perc-body-btn {
    padding: 4px 8px !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    opacity: 0.5 !important;
}
.mcc-perc-body-btn.active,
button.mcc-perc-body-btn.active {
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
    opacity: 1 !important;
}
.mcc-perc-body-btn:hover { opacity: 0.8 !important; }

/* Dark theme variant (Waterfall) */
.mcc-perc-body-toggle-dark {
    background: rgba(255,255,255,0.1) !important;
}
.mcc-perc-body-toggle-dark .mcc-perc-body-btn.active {
    background: rgba(232,146,79,0.3) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* Split theme variant */
.mcc-perc-body-toggle-split {
    background: rgba(255,255,255,0.2) !important;
}
.mcc-perc-body-toggle-split .mcc-perc-body-btn.active {
    background: rgba(255,255,255,0.4) !important;
}

/* ── Selector Bar ── */
.mcc-perc-selector {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    background: linear-gradient(135deg, #3D7C85 0%, #448B94 100%) !important;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.mcc-perc-sel-label {
    font-family: 'Akko', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #fff !important;
    white-space: nowrap;
}
/* Dropdown – BB override */
.mcc-perc-sel-dropdown,
select.mcc-perc-sel-dropdown {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    border-radius: 8px !important;
    padding: 5px 28px 5px 10px !important;
    font-size: 13px !important;
    font-family: 'Akko', 'Akko', sans-serif !important;
    font-weight: 600 !important;
    flex: 1;
    min-width: 120px;
    max-width: 220px;
    cursor: pointer;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6.5 6.5-6.5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
}
.mcc-perc-sel-dropdown:focus { outline: none !important; background: rgba(255,255,255,0.3) !important; }
.mcc-perc-sel-dropdown option,
.mcc-perc-sel-dropdown optgroup {
    background: #111416 !important;
    color: #fff !important;
    font-family: 'Akko', sans-serif !important;
}

/* ── Global Mute Button (BB explicit sizing) ── */
.mcc-perc-global-mute,
button.mcc-perc-global-mute {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important; height: 36px !important;
    min-width: 36px !important; min-height: 36px !important;
    max-width: 36px !important; max-height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,0.4) !important;
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    padding: 0 !important; margin: 0 0 0 4px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    overflow: hidden !important;
}
.mcc-perc-global-mute:hover { background: rgba(255,255,255,0.25) !important; border-color: rgba(255,255,255,0.6) !important; }
.mcc-perc-global-mute.muted,
button.mcc-perc-global-mute.muted {
    background: rgba(220,53,69,0.85) !important;
    border-color: rgba(220,53,69,1) !important;
    box-shadow: 0 0 0 3px rgba(220,53,69,0.25) !important;
    animation: mcc-perc-mute-pulse 2s ease-in-out infinite !important;
}
.mcc-perc-global-mute svg { width: 20px !important; height: 20px !important; color: #fff !important; display: block !important; }
@keyframes mcc-perc-mute-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(220,53,69,0.25) !important; }
    50% { box-shadow: 0 0 0 6px rgba(220,53,69,0.12) !important; }
}
.mcc-perc-vol.disabled { opacity: 0.35; pointer-events: none; }
.mcc-perc-vol { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.mcc-perc-vol-slider { width: 65px !important; height: 4px; accent-color: #E8924F !important; cursor: pointer; }

/* ── Grid ── */
.mcc-perc-grid {
    position: relative; display: flex; flex-direction: column; gap: 3px;
    padding: 12px 16px 16px; overflow-x: auto; flex: 1 1 auto;
}
.mcc-perc-row { display: flex; align-items: center; gap: 3px; transition: opacity 0.25s ease; }
.mcc-perc-row.muted { opacity: 0.3; }
.mcc-perc-header { margin-bottom: 4px; }
.mcc-perc-track-label {
    min-width: 140px; max-width: 140px;
    font-family: 'Akko', sans-serif !important;
    font-size: 13px !important; font-weight: 500; color: #111416 !important;
    display: flex; align-items: center; gap: 5px; padding-right: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mcc-perc-header .mcc-perc-track-label { color: transparent !important; }
.mcc-perc-mute-btn { cursor: pointer; font-size: 14px; user-select: none; flex-shrink: 0; line-height: 1; transition: transform 0.15s; }
.mcc-perc-mute-btn:hover { transform: scale(1.2); }
.mcc-perc-instr-name {
    cursor: pointer; transition: color 0.15s; color: #111416 !important;
    display: flex; align-items: center; gap: 4px;
}
.mcc-perc-instr-name:hover { color: #3D7C85 !important; }

/* Cells */
.mcc-perc-cell {
    flex: 1; min-width: 24px; max-width: 42px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; background: #FAF8F3; transition: background 0.12s, box-shadow 0.12s; position: relative;
}
.mcc-perc-cell.downbeat { background: #EEF0F2; }
.mcc-perc-cell.hit { background: rgba(61,124,133,0.12); }
.mcc-perc-cell.accent { background: rgba(232,146,79,0.15); }
.mcc-perc-cell.playing { box-shadow: inset 0 0 0 2.5px #3D7C85; background: rgba(61,124,133,0.08); }
.mcc-perc-cell.hit.playing { background: rgba(61,124,133,0.25); }
.mcc-perc-cell.accent.playing { background: rgba(232,146,79,0.3); box-shadow: inset 0 0 0 2.5px #E8924F; }

.mcc-perc-beat-num {
    font-family: 'Akko', sans-serif !important; font-size: 11px !important;
    font-weight: 700; color: #999; height: 22px !important; background: transparent !important;
}
.mcc-perc-beat-num.downbeat { color: #111416; }
.mcc-perc-dot { width: 11px; height: 11px; border-radius: 50%; background: #3D7C85; box-shadow: 0 1px 3px rgba(61,124,133,0.3); }
.mcc-perc-dot.accent { width: 13px; height: 13px; background: #E8924F; box-shadow: 0 1px 4px rgba(232,146,79,0.4); }
.mcc-perc-rest { color: #D0D0D0; font-size: 16px; line-height: 1; }

.mcc-perc-legend {
    display: flex; align-items: center; gap: 16px; padding: 8px 16px 12px;
    font-family: 'Akko', sans-serif !important; font-size: 11px; color: #888;
    border-top: 1px solid #F0F0F0; flex-shrink: 0;
}
.mcc-perc-legend-item { display: flex; align-items: center; gap: 5px; }
.mcc-perc-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.mcc-perc-legend-dot.accent { background: #E8924F; }
.mcc-perc-legend-dot.hit { background: #3D7C85; }
.mcc-perc-legend-dot.rest { background: #D0D0D0; }

.mcc-perc-empty {
    padding: 48px 20px; text-align: center; color: #999;
    font-family: 'Akko', sans-serif; font-size: 15px; font-weight: 600;
    flex: 1; display: flex; align-items: center; justify-content: center;
}

/* ── Practice: Header + Chips ── */
.mcc-perc-practice-header { padding: 14px 16px 0; flex-shrink: 0; }
.mcc-perc-practice-label {
    font-family: 'Akko', sans-serif !important; font-size: 13px; font-weight: 700; color: #111416; margin-bottom: 10px;
}
.mcc-perc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mcc-perc-chip,
button.mcc-perc-chip {
    padding: 5px 12px !important; border-radius: 20px !important;
    border: 2px solid #E0E0E0 !important; background: #FAF8F3 !important;
    font-family: 'Akko', sans-serif !important; font-size: 12px !important;
    font-weight: 600 !important; color: #111416 !important; cursor: pointer !important;
    transition: all 0.2s ease !important; white-space: nowrap;
    display: inline-flex !important; align-items: center !important; gap: 4px !important;
    line-height: 1.3 !important; margin: 0 !important; box-shadow: none !important;
    min-height: 0 !important; text-transform: none !important;
}
.mcc-perc-chip:hover { border-color: #3D7C85 !important; background: rgba(61,124,133,0.06) !important; color: #3D7C85 !important; }
.mcc-perc-chip.active,
button.mcc-perc-chip.active {
    border-color: #3D7C85 !important; background: #3D7C85 !important; color: #fff !important;
    box-shadow: 0 2px 8px rgba(61,124,133,0.3) !important;
}
.mcc-perc-chip.active .mcc-perc-icon { filter: brightness(10); }

/* ── Single Instrument Cue ── */
.mcc-perc-cue-area {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 20px 16px 16px; gap: 14px; flex: 1 1 auto;
}
.mcc-perc-cue-circle {
    width: 120px; height: 120px; border-radius: 50%;
    background: #F0F0F0; display: flex; align-items: center; justify-content: center;
    transition: transform 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
}
.mcc-perc-cue-circle.pulse {
    background: rgba(61,124,133,0.15);
    box-shadow: 0 0 0 12px rgba(61,124,133,0.08), 0 0 30px rgba(61,124,133,0.15);
    transform: scale(1.12);
}
.mcc-perc-cue-circle.pulse.accent {
    background: rgba(232,146,79,0.2);
    box-shadow: 0 0 0 16px rgba(232,146,79,0.1), 0 0 40px rgba(232,146,79,0.2);
    transform: scale(1.2);
}
.mcc-perc-cue-icon { line-height: 1; }
.mcc-perc-cue-text {
    font-family: 'Akko', sans-serif; font-size: 16px; font-weight: 700;
    color: #666; text-align: center; min-height: 24px;
}
.mcc-perc-mini-strip { display: flex; gap: 3px; margin-top: 4px; }
.mcc-perc-mini-cell {
    width: 26px; height: 26px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: #D0D0D0; background: #FAF8F3;
    transition: background 0.12s, box-shadow 0.12s;
}
.mcc-perc-mini-cell.downbeat { background: #EEF0F2; }
.mcc-perc-mini-cell.hit { color: #3D7C85; background: rgba(61,124,133,0.1); }
.mcc-perc-mini-cell.accent { color: #E8924F; background: rgba(232,146,79,0.12); }
.mcc-perc-mini-cell.playing { box-shadow: inset 0 0 0 2.5px #3D7C85; }
.mcc-perc-mini-cell.hit.playing { background: rgba(61,124,133,0.25); }
.mcc-perc-mini-cell.accent.playing { background: rgba(232,146,79,0.3); box-shadow: inset 0 0 0 2.5px #E8924F; }

/* ═══════════════════════════════════════════════════
   ALL INSTRUMENTS VIEW – Dynamic flex layout
   ═══════════════════════════════════════════════════ */
.mcc-perc-allcards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px;
    flex: 1 1 auto;
    overflow-y: auto;
    align-content: start;
    justify-content: center;
}
.mcc-perc-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px 8px;
    border-radius: 14px;
    background: #FAF8F3;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    cursor: pointer;
    min-width: 0;
    flex: 1 1 180px;
    max-width: 280px;
}
.mcc-perc-card:hover { background: #EEF0F2; }
.mcc-perc-card.flash-hit {
    background: rgba(61,124,133,0.12) !important;
    box-shadow: 0 0 0 3px rgba(61,124,133,0.2) !important;
    transform: scale(1.03);
}
.mcc-perc-card.flash-accent {
    background: rgba(232,146,79,0.15) !important;
    box-shadow: 0 0 0 3px rgba(232,146,79,0.25) !important;
    transform: scale(1.06);
}
.mcc-perc-card-circle {
    width: 72px; height: 72px; border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.mcc-perc-card-circle.pulse {
    background: rgba(61,124,133,0.1);
    box-shadow: 0 0 0 8px rgba(61,124,133,0.1), 0 2px 12px rgba(61,124,133,0.15);
    transform: scale(1.15);
}
.mcc-perc-card-circle.pulse-accent {
    background: rgba(232,146,79,0.12);
    box-shadow: 0 0 0 10px rgba(232,146,79,0.12), 0 2px 14px rgba(232,146,79,0.2);
    transform: scale(1.22);
}
.mcc-perc-card-name {
    font-family: 'Akko', sans-serif;
    font-size: 11px; font-weight: 700; color: #111416; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.mcc-perc-card-strip {
    display: flex; gap: 2px; flex-wrap: nowrap; justify-content: center; width: 100%;
}
.mcc-perc-card-strip .mcc-perc-mini-cell {
    width: 16px; height: 16px; font-size: 9px; border-radius: 3px; flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   MUSIC VOLUME – Bottom Toolbar
   ═══════════════════════════════════════════════════ */
.mcc-pa-music-vol {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0;
}
.mcc-pa-music-mute,
button.mcc-pa-music-mute {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important; height: 30px !important;
    min-width: 30px !important; min-height: 30px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(0,0,0,0.06) !important;
    color: #666 !important;
    cursor: pointer !important;
    padding: 0 !important; margin: 0 !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    line-height: 1 !important;
}
.mcc-pa-music-mute:hover { background: rgba(0,0,0,0.12) !important; color: #333 !important; }
.mcc-pa-music-mute.muted {
    background: rgba(220,53,69,0.12) !important;
    color: #dc3545 !important;
}
.mcc-pa-music-mute svg { color: currentColor; display: block !important; }
.mcc-pa-music-vol-slider {
    width: 60px !important;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    accent-color: rgba(255,255,255,0.85) !important;
    cursor: pointer;
}
.mcc-pa-music-vol.vol-muted .mcc-pa-music-vol-slider {
    opacity: 0.3;
    pointer-events: none;
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .mcc-perc-container { border-radius: 12px !important; }
    .mcc-perc-tab { font-size: 12px !important; padding: 8px 0 !important; }
    .mcc-perc-selector { padding: 8px 10px !important; gap: 6px !important; }
    .mcc-perc-sel-dropdown { font-size: 12px !important; }
    .mcc-perc-global-mute, button.mcc-perc-global-mute { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; }
    .mcc-perc-global-mute svg { width: 17px !important; height: 17px !important; }
    .mcc-perc-track-label { min-width: 105px; max-width: 105px; font-size: 11px !important; }
    .mcc-perc-cell { min-width: 20px; height: 28px; }
    .mcc-perc-dot { width: 9px; height: 9px; }
    .mcc-perc-dot.accent { width: 11px; height: 11px; }
    .mcc-perc-grid { padding: 8px 10px 12px; }
    .mcc-perc-legend { padding: 6px 10px 10px; gap: 10px; font-size: 10px; }
    .mcc-perc-chip, button.mcc-perc-chip { padding: 4px 8px !important; font-size: 10px !important; }
    .mcc-perc-cue-circle { width: 90px; height: 90px; }
    .mcc-perc-cue-text { font-size: 14px; }
    .mcc-perc-cue-area { padding: 14px 10px 12px; }
    .mcc-perc-mini-cell { width: 22px; height: 22px; font-size: 12px; }
    /* Allcards: 2 columns on mobile, scrollable */
    .mcc-perc-allcards {
        gap: 8px;
        padding: 10px;
    }
    .mcc-perc-card { padding: 8px 6px 6px; border-radius: 10px; flex: 1 1 140px; max-width: 50%; }
    .mcc-perc-card-circle { width: 52px; height: 52px; }
    .mcc-perc-card-name { font-size: 10px; }
    .mcc-perc-card-strip .mcc-perc-mini-cell { width: 12px; height: 12px; font-size: 7px; }
    .mcc-perc-practice-header { padding: 10px 10px 0; }
    /* Music vol mobile */
    .mcc-pa-music-vol-slider { width: 45px !important; }
    .mcc-pa-music-mute, button.mcc-pa-music-mute { width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; }
    .mcc-pa-music-mute svg { width: 14px !important; height: 14px !important; }
}

/* Very small screens: tighter */
@media (max-width: 380px) {
    .mcc-perc-allcards { gap: 6px; padding: 8px; }
    .mcc-perc-card { flex: 1 1 120px; }
    .mcc-perc-card-circle { width: 44px; height: 44px; }
    .mcc-perc-card-strip .mcc-perc-mini-cell { width: 10px; height: 10px; font-size: 6px; }
}

/* ═══════════════════════════════════════════════════
   PERCUSSION in WATERFALL – Dark Theme
   ═══════════════════════════════════════════════════ */

/* Wrapper inside waterfall panel */
.mcc-wf-perc-wrap { background: #1a1a2e; }

/* Top bar: dropdown + mute + volume */
.mcc-wf-perc-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.mcc-wf-perc-topbar .mcc-wf-perc-dropdown { flex: 1; }
.mcc-wf-perc-dropdown,
select.mcc-wf-perc-dropdown {
    width: 100% !important;
    background: rgba(232,146,79,0.12) !important;
    color: #E8924F !important;
    border: 1px solid rgba(232,146,79,0.3) !important;
    border-radius: 6px !important;
    padding: 5px 28px 5px 10px !important;
    font-size: 12px !important;
    font-family: 'Akko', sans-serif !important;
    font-weight: 600 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2395C11F' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6.5 6.5-6.5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    cursor: pointer;
}
.mcc-wf-perc-dropdown option,
.mcc-wf-perc-dropdown optgroup {
    background: #1a1a2e !important;
    color: #ccc !important;
}

/* Mute button – dark theme */
.mcc-wf-perc-mute,
button.mcc-wf-perc-mute {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important; height: 32px !important;
    min-width: 32px !important; min-height: 32px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(232,146,79,0.3) !important;
    background: rgba(232,146,79,0.1) !important;
    color: #E8924F !important;
    cursor: pointer !important;
    padding: 0 !important; margin: 0 !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    line-height: 1 !important;
}
.mcc-wf-perc-mute svg { color: #E8924F !important; display: block !important; }
.mcc-wf-perc-mute:hover { background: rgba(232,146,79,0.2) !important; border-color: rgba(232,146,79,0.5) !important; }
.mcc-wf-perc-mute.muted {
    background: rgba(220,53,69,0.2) !important;
    border-color: rgba(220,53,69,0.5) !important;
    animation: mcc-perc-mute-pulse 2s ease-in-out infinite !important;
}
.mcc-wf-perc-mute.muted svg { color: #dc3545 !important; }

/* Volume slider – dark theme */
.mcc-wf-perc-vol-slider {
    width: 60px !important;
    height: 4px;
    accent-color: #E8924F !important;
    cursor: pointer;
    flex-shrink: 0;
}
.mcc-wf-perc-vol-slider:disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Cards inside waterfall – dark theme */
.mcc-wf-perc-cards.mcc-perc-allcards {
    gap: 6px !important;
    padding: 0 !important;
    flex: 1 1 auto;
    align-content: start;
}
.mcc-wf-perc-cards .mcc-perc-card {
    background: rgba(255,255,255,0.05) !important;
    border-radius: 10px !important;
    padding: 8px 6px 6px !important;
    flex: 1 1 110px;
    max-width: 200px;
}
.mcc-wf-perc-cards .mcc-perc-card:hover {
    background: rgba(255,255,255,0.08) !important;
}
.mcc-wf-perc-cards .mcc-perc-card.flash-hit {
    background: rgba(61,124,133,0.2) !important;
    box-shadow: 0 0 0 2px rgba(61,124,133,0.35) !important;
}
.mcc-wf-perc-cards .mcc-perc-card.flash-accent {
    background: rgba(232,146,79,0.2) !important;
    box-shadow: 0 0 0 2px rgba(232,146,79,0.4) !important;
}

/* Card circle – dark */
.mcc-wf-perc-cards .mcc-perc-card-circle {
    width: 52px !important;
    height: 52px !important;
    background: rgba(255,255,255,0.08) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}
.mcc-wf-perc-cards .mcc-perc-card-circle.pulse {
    background: rgba(61,124,133,0.2) !important;
    box-shadow: 0 0 0 6px rgba(61,124,133,0.15), 0 2px 10px rgba(61,124,133,0.25) !important;
}
.mcc-wf-perc-cards .mcc-perc-card-circle.pulse-accent {
    background: rgba(232,146,79,0.2) !important;
    box-shadow: 0 0 0 8px rgba(232,146,79,0.15), 0 2px 12px rgba(232,146,79,0.3) !important;
}

/* Card name – light on dark */
.mcc-wf-perc-cards .mcc-perc-card-name {
    color: rgba(255,255,255,0.7) !important;
    font-size: 10px !important;
}

/* Mini cells – dark theme */
.mcc-wf-perc-cards .mcc-perc-mini-cell {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.2) !important;
    width: 14px !important;
    height: 14px !important;
    font-size: 8px !important;
    border-radius: 3px !important;
}
.mcc-wf-perc-cards .mcc-perc-mini-cell.downbeat {
    background: rgba(255,255,255,0.1) !important;
}
.mcc-wf-perc-cards .mcc-perc-mini-cell.hit {
    color: #4D9BA7 !important;
    background: rgba(61,124,133,0.2) !important;
}
.mcc-wf-perc-cards .mcc-perc-mini-cell.accent {
    color: #ED9D67 !important;
    background: rgba(232,146,79,0.2) !important;
}
.mcc-wf-perc-cards .mcc-perc-mini-cell.playing {
    box-shadow: inset 0 0 0 2px #4D9BA7 !important;
}
.mcc-wf-perc-cards .mcc-perc-mini-cell.accent.playing {
    box-shadow: inset 0 0 0 2px #ED9D67 !important;
}

/* ── Splitscreen Percussion Controls ── */
.mcc-split-perc-topbar {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    background: linear-gradient(135deg, #3D7C85 0%, #1F737A 100%) !important;
    flex-shrink: 0 !important;
}
.mcc-split-perc-dropdown,
select.mcc-split-perc-dropdown {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
    font-family: 'Akko', sans-serif !important;
    font-size: 11px !important;
    cursor: pointer !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    height: auto !important;
    line-height: 1.3 !important;
}
.mcc-split-perc-dropdown option,
.mcc-split-perc-dropdown optgroup {
    background: #1F737A !important;
    color: #fff !important;
}
.mcc-split-perc-mute,
button.mcc-split-perc-mute {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important; height: 26px !important;
    min-width: 26px !important; min-height: 26px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255,255,255,0.4) !important;
    background: rgba(255,255,255,0.15) !important;
    cursor: pointer !important;
    padding: 0 !important; margin: 0 !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    line-height: 1 !important;
}
.mcc-split-perc-mute svg { color: #fff !important; display: block !important; }
.mcc-split-perc-mute:hover { background: rgba(255,255,255,0.25) !important; }
.mcc-split-perc-mute.muted {
    background: rgba(220,53,69,0.3) !important;
    border-color: rgba(220,53,69,0.6) !important;
    animation: mcc-perc-mute-pulse 2s ease-in-out infinite !important;
}
.mcc-split-perc-mute.muted svg { color: #ff6b7a !important; }
.mcc-split-perc-vol,
input[type="range"].mcc-split-perc-vol {
    width: 50px !important;
    height: 4px !important;
    accent-color: #E8924F !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}
.mcc-split-perc-vol:disabled {
    opacity: 0.3 !important;
    pointer-events: none !important;
}

/* ==========================================================
   MCC STAGE BAR v4.29.87
   Desktop: Tabs in dark bar · Panels above
   Mobile:  Hamburger → bottom sheet (Tempo/Tonart/Optionen/Mixer)
   ========================================================== */

/* ── Controls container ── */
.mcc-play-along-controls {
    flex-direction: column !important;
    gap: 0 !important; padding: 0 !important;
    background: #1C1C1C !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,.2) !important;
}

/* ── PANELS (above dark bar) ── */
.mcc-sb-panels { background: #fff !important; border-bottom: 1px solid rgba(0,0,0,.06) !important; }
.mcc-sb-panel {
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    background: #fff;
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* ── TEMPO PANEL ── */
#mcc-sbp-tempo {
    flex-direction: row !important;
    align-items: center !important;
    padding: 9px 20px 10px !important;
    gap: 10px !important;
}
.mcc-play-along-tempo { display: flex !important; align-items: center !important; gap: 8px !important; flex: 1 !important; min-width: 0 !important; }
.mcc-play-along-tempo-label { display: none !important; }
.mcc-play-along-tempo-slider { flex: 1 !important; min-width: 0 !important; accent-color: #3D7C85 !important; }
.mcc-play-along-tempo-value { font-size: 20px !important; font-weight: 700 !important; font-family: "Akko",sans-serif !important; color: #111416 !important; white-space: nowrap !important; min-width: 74px !important; text-align: right !important; line-height: 1 !important; }
.mcc-pa-tempo-reset-btn { background: none !important; border: none !important; cursor: pointer !important; font-size: 16px !important; color: #ccc !important; padding: 0 !important; flex-shrink: 0 !important; }
.mcc-pa-music-vol { display: flex !important; align-items: center !important; gap: 5px !important; flex-shrink: 0 !important; }
.mcc-pa-music-mute { background: none !important; border: none !important; cursor: pointer !important; padding: 0 !important; display: flex !important; align-items: center !important; }
.mcc-pa-music-mute svg { width: 16px !important; height: 16px !important; stroke: #888 !important; fill: none !important; }
.mcc-pa-music-vol-slider { width: 80px !important; accent-color: #666 !important; }

/* ── TONART PANEL ── */
#mcc-sbp-tonart { justify-content: center !important; padding: 9px 20px 10px !important; gap: 10px !important; }
.mcc-pa-key-label { display: none !important; }
.mcc-pa-key-select { display: flex !important; align-items: center !important; gap: 8px !important; }
.mcc-pa-key-dropdown { font-size: 13px !important; font-weight: 700 !important; padding: 5px 10px !important; border: 1px solid #e0e0e0 !important; border-radius: 10px !important; background: #f5f5f5 !important; max-width: 110px !important; cursor: pointer !important; color: #111416 !important; }
.mcc-pa-key-current { font-size: 22px !important; font-weight: 700 !important; font-family: "Akko",sans-serif !important; color: #3D7C85 !important; min-width: 28px !important; text-align: center !important; line-height: 1 !important; }
.mcc-pa-transpose { display: flex !important; align-items: center !important; gap: 6px !important; }
.mcc-pa-prefer-flats-btn { width: 28px !important; height: 28px !important; border-radius: 50% !important; background: #f0f0f0 !important; border: 1px solid #ddd !important; font-size: 14px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #555 !important; }
.mcc-pa-transpose-btn { width: 30px !important; height: 30px !important; border-radius: 50% !important; background: #f0f0f0 !important; border: 1px solid #ddd !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #111416 !important; }
.mcc-pa-transpose-display { font-size: 15px !important; font-weight: 700 !important; font-family: "Akko",sans-serif !important; min-width: 24px !important; text-align: center !important; color: #111416 !important; }
.mcc-pa-easy-key-toggle { display: flex !important; align-items: center !important; gap: 5px !important; background: #f0f0f0 !important; border-radius: 20px !important; padding: 6px 13px !important; cursor: pointer !important; font-size: 11px !important; font-weight: 700 !important; color: #666 !important; font-family: "Akko",sans-serif !important; border: none !important; white-space: nowrap !important; transition: background .15s, color .15s !important; }
.mcc-pa-easy-key-toggle::before { content: "⚡ Auto" !important; }
.mcc-pa-easy-key-toggle.active { background: #E8924F !important; color:#111416 !important; }
.mcc-easy-key-switch, .mcc-easy-key-knob, .mcc-easy-key-icon { display: none !important; }

/* ── OPTIONEN PANEL ── */
#mcc-sbp-optionen { justify-content: center !important; padding: 9px 20px 10px !important; gap: 8px !important; }
.mcc-pa-options-compact { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; justify-content: center !important; }
.mcc-pa-pill span { padding: 6px 13px !important; font-size: 11px !important; font-family: "Akko",sans-serif !important; font-weight: 700 !important; }
.mcc-sb-style-inline { width: 100%; background: #fff; border-top: 1px solid rgba(0,0,0,.05); padding: 6px 0; }

/* ── MIXER PANEL (as tab) ── */
#mcc-sbp-mixer {
    flex-direction: column !important;
    padding: 10px 20px 12px !important;
    gap: 8px !important;
    min-height: 80px !important;
}
#mcc-sbp-mixer .mcc-mixer-channels { width: 100% !important; }
#mcc-sbp-mixer .mcc-mixer-header { display: none !important; }

/* ── DARK BAR ── */
.mcc-pa-toolbar-row:last-of-type {
    background: #1C1C1C !important;
    padding: 0 !important; gap: 0 !important;
    flex-wrap: nowrap !important; align-items: center !important;
    min-height: 68px !important; display: flex !important;
    position: relative !important;
}

/* Left: Instrument, flex:1 */
.mcc-play-along-instrument {
    flex: 1 !important; padding: 6px 4px 6px 12px !important;
    display: flex !important; align-items: center !important; gap: 4px !important;
    background: transparent !important; min-width: 0 !important;
}
.mcc-pa-instrument-trigger { background: rgba(255,255,255,.12) !important; border: none !important; border-radius: 16px !important; padding: 5px 10px !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; font-family: "Akko",sans-serif !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 5px !important; white-space: nowrap !important; }
.mcc-pa-instrument-trigger svg { stroke: #fff !important; fill: none !important; }

/* ── DESKTOP TABS IN DARK BAR ── */
.mcc-sb-tabbar-dark {
    display: flex !important;
    background: rgba(255,255,255,.07) !important;
    border-radius: 12px !important;
    padding: 3px !important;
    gap: 1px !important;
    flex-shrink: 0 !important;
}
.mcc-sb-tabbar-dark .mcc-sb-tab {
    display: inline-flex !important;
    align-items: center !important; gap: 5px !important;
    padding: 5px 12px !important;
    border: none !important; border-radius: 9px !important;
    background: transparent !important;
    font-size: 11px !important; font-weight: 700 !important;
    font-family: "Akko",sans-serif !important;
    color: rgba(255,255,255,.45) !important;
    cursor: pointer !important; white-space: nowrap !important;
    transition: all .15s !important;
}
.mcc-sb-tabbar-dark .mcc-sb-tab svg { width: 13px !important; height: 13px !important; stroke: rgba(255,255,255,.4) !important; fill: none !important; flex-shrink: 0 !important; }
.mcc-sb-tabbar-dark .mcc-sb-tab.active { background: rgba(255,255,255,.15) !important; color: #fff !important; }
.mcc-sb-tabbar-dark .mcc-sb-tab.active svg { stroke: #fff !important; }

/* Centre: Skip + Play */
.mcc-pa-play-controls { flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 10px !important; padding: 0 !important; background: transparent !important; }
.mcc-pa-reset-btn { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: rgba(255,255,255,.08) !important; border: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.mcc-pa-reset-btn svg { stroke: #fff !important; fill: none !important; }
.mcc-play-along-play-btn { width: 50px !important; height: 50px !important; min-width: 50px !important; min-height: 50px !important; border-radius: 50% !important; background: #3D7C85 !important; border: 3px solid rgba(76,156,167,.22) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 0 0 4px rgba(61,124,133,.18), 0 3px 10px rgba(61,124,133,.4) !important; transition: transform .12s !important; }
.mcc-play-along-play-btn:active { transform: scale(.93) !important; }
.mcc-play-along-play-btn.playing { background: #3D7C85 !important; box-shadow: 0 0 0 4px rgba(61,124,133,.25), 0 3px 10px rgba(61,124,133,.4) !important; }
.mcc-play-along-play-btn svg, .mcc-play-along-play-btn .play-icon svg, .mcc-play-along-play-btn .pause-icon svg { width: 20px !important; height: 20px !important; fill: #fff !important; stroke: #fff !important; }

/* Right: Source + Collapse, flex:1 */
.mcc-sb-dark-right { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; padding-right: 12px !important; }
.mcc-sb-src-in-bar { display: inline-flex !important; background: rgba(255,255,255,.1) !important; border-radius: 20px !important; padding: 2px !important; }
.mcc-sb-src-in-bar .mcc-source-btn { font-size: 11px !important; font-weight: 700 !important; padding: 5px 12px !important; border-radius: 18px !important; border: none !important; background: transparent !important; color: rgba(255,255,255,.45) !important; font-family: "Akko",sans-serif !important; cursor: pointer !important; white-space: nowrap !important; transition: all .15s !important; }
.mcc-sb-src-in-bar .mcc-source-btn svg { display: none !important; }
.mcc-sb-src-in-bar .mcc-source-btn.active { background: #3D7C85 !important; color: #fff !important; }
#mcc-source-backing { display: none !important; }
.mcc-sb-collapse { display: none !important; }
.mcc-sb-collapse:hover { background: rgba(255,255,255,.18) !important; }
.mcc-sb-collapsed .mcc-sb-panels { display: none !important; }

/* ── HAMBURGER (mobile only, hidden on desktop) ── */
.mcc-sb-hamburger { display: none; }

/* ── MOBILE BOTTOM SHEET ── */
.mcc-sb-sheet { display: none; position: fixed; inset: 0; z-index: 1000020; pointer-events: none; }
.mcc-sb-sheet.open { pointer-events: auto; }
.mcc-sb-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .3s; }
.mcc-sb-sheet.open .mcc-sb-sheet-backdrop { opacity: 1; }
.mcc-sb-sheet-body {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: #fff; border-radius: 18px 18px 0 0;
    transform: translateY(100%); transition: transform .32s cubic-bezier(.32,1,.5,1);
    max-height: 75vh; overflow-y: auto;
    box-shadow: 0 -4px 24px rgba(0,0,0,.18);
}
.mcc-sb-sheet.open .mcc-sb-sheet-body { transform: translateY(0); }
.mcc-sb-sheet-handle { width: 36px; height: 4px; background: #e0e0e0; border-radius: 2px; margin: 10px auto 6px; }
.mcc-sb-sheet-tabs { display: flex; background: #f0f0f0; margin: 0 14px 12px; border-radius: 10px; padding: 3px; gap: 2px; }
.mcc-sb-sheet-tabs .mcc-sb-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px; border: none; border-radius: 7px; background: transparent; font-size: 10px; font-weight: 700; font-family: "Akko",sans-serif; color: #999; cursor: pointer; white-space: nowrap; transition: all .15s; }
.mcc-sb-sheet-tabs .mcc-sb-tab svg { width: 12px; height: 12px; stroke: #bbb; fill: none; }
.mcc-sb-sheet-tabs .mcc-sb-tab.active { background: #fff; color: #3D7C85; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.mcc-sb-sheet-tabs .mcc-sb-tab.active svg { stroke: #3D7C85; }
.mcc-sb-sheet-panels { padding: 0 14px 20px; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    /* Show hamburger, hide desktop tab bar */
    .mcc-sb-hamburger { display: flex !important; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.1); border: none; cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; position: relative; }
.mcc-sb-hamburger::before,
.mcc-sb-hamburger::after,
.mcc-sb-hamburger span.mcc-ham-mid {
    display: none;
}
/* CSS-only hamburger: 3 white lines via box-shadow */
.mcc-sb-hamburger {
    background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(#fff, #fff),
        linear-gradient(#fff, #fff);
    background-size: 16px 2px;
    background-repeat: no-repeat;
    background-position:
        center 10px,
        center 17px,
        center 24px;
}
    .mcc-sb-tabbar-dark { display: none !important; }
    .mcc-sb-sheet { display: block; }
    /* Source: icon only */
    .mcc-sb-src-in-bar .mcc-source-btn { padding: 6px 9px !important; font-size: 0 !important; }
    .mcc-sb-src-in-bar .mcc-source-btn svg { display: block !important; width: 15px !important; height: 15px !important; stroke: rgba(255,255,255,.6) !important; fill: none !important; }
    .mcc-sb-src-in-bar .mcc-source-btn.active svg { stroke: #fff !important; }
    /* Mobile instrument: no label */
    .mcc-pa-instr-label { display: none !important; }
    .mcc-pa-music-vol-slider { width: 55px !important; }
    .mcc-play-along-tempo-value { font-size: 16px !important; }
}
/* ── Mixer tab: Stems generate button ── */
#mcc-sbp-mixer .mcc-stem-no-stems {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 14px 0 6px !important;
    gap: 10px !important;
    width: 100% !important;
}
#mcc-sbp-mixer .mcc-stem-generate-btn,
#mcc-sbp-mixer #mcc-stem-generate-btn {
    background: #3D7C85 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 9px 22px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: "Akko", sans-serif !important;
    cursor: pointer !important;
    transition: background .15s !important;
}
#mcc-sbp-mixer .mcc-stem-generate-btn:hover { background: #32666D !important; }
#mcc-sbp-mixer .mcc-stem-no-stems p,
#mcc-sbp-mixer .mcc-stem-no-stems small {
    font-size: 12px !important;
    color: #aaa !important;
    text-align: center !important;
    margin: 0 !important;
}
#mcc-sbp-mixer .mcc-mixer-channels {
    width: 100% !important;
    padding: 4px 0 !important;
}

/* MCC Stage Bar Dark v4.30.2 */
#mcc-sb-panels,#mcc-sbp-tempo,#mcc-sbp-tonart,#mcc-sbp-optionen,#mcc-sbp-mixer{background:#252525!important}
.mcc-sb-sheet-body{background:#252525!important}
#mcc-sbp-tempo #mcc-play-along-tempo-value{color:#fff!important}
#mcc-sbp-tonart #mcc-pa-key-dropdown{background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important}
#mcc-sbp-tonart #mcc-pa-key-current{color:#3D7C85!important}
#mcc-sbp-tonart .mcc-pa-transpose-btn,#mcc-sbp-tonart .mcc-pa-prefer-flats-btn{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important}
#mcc-sbp-tonart .mcc-pa-transpose-display{color:#fff!important}
#mcc-sbp-tonart .mcc-pa-easy-key-toggle{background:rgba(255,255,255,.12)!important;color:rgba(255,255,255,.7)!important;border:none!important}
#mcc-sbp-tonart .mcc-pa-easy-key-toggle.active{background:#E8924F!important;color:#111416!important}
.mcc-play-along-modal{background:#FAF8F3!important}
.mcc-play-along-header{background:#fff!important;border-bottom:1px solid rgba(0,0,0,.07)!important}
.mcc-play-along-main{background:#FAF8F3!important}

/* ── Lyrics Sync Onboarding Tooltip ── */
.mcc-sync-onboard-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* Pulse ring on sync buttons during onboarding */
.mcc-sync-onboard-active .mcc-lyrics-sync-btn {
    animation: mcc-sync-pulse 2s ease-in-out 3;
    position: relative;
}
@keyframes mcc-sync-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(61,124,133,0); }
    50% { box-shadow: 0 0 0 5px rgba(61,124,133,0.25); }
}
/* Tooltip popover */
.mcc-sync-onboard-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    background: #1C1C1C;
    color: #fff;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 12px;
    line-height: 1.5;
    font-family: "Akko", sans-serif;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateX(-50%) translateY(4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.mcc-sync-onboard-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1C1C1C;
}
.mcc-sync-onboard-active .mcc-sync-onboard-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.mcc-sync-onboard-tip strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #3D7C85;
    margin-bottom: 4px;
    font-family: "Akko", sans-serif;
}
.mcc-sync-onboard-tip kbd {
    display: inline-block;
    background: rgba(255,255,255,0.12);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 11px;
    font-family: monospace;
    margin: 0 1px;
}
.mcc-sync-onboard-close {
    display: block;
    margin-top: 8px;
    text-align: right;
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    cursor: pointer;
    pointer-events: auto;
    transition: color 0.15s;
}
.mcc-sync-onboard-close:hover { color: #fff; }
@media (max-width: 600px) {
    .mcc-sync-onboard-tip {
        width: 180px;
        font-size: 11px;
    }
}

/* ── Seekbar between lyrics and dark bar ── */
.mcc-sb-seekbar {
    background: #fff !important;
    padding: 8px 16px 6px !important;
    border-top: 1px solid rgba(0,0,0,.06) !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.mcc-sb-seekbar .mcc-play-along-progress-bar {
    height: 5px !important;
    border-radius: 3px !important;
    background: rgba(0,0,0,.10) !important;
    cursor: pointer !important;
    position: relative !important;
    transition: height 0.15s ease !important;
    overflow: visible !important;
    z-index: 1 !important;
}
.mcc-sb-seekbar .mcc-play-along-progress-bar:hover,
.mcc-sb-seekbar .mcc-play-along-progress-bar.pa-scrubbing { height: 8px !important; }
/* Knob via ::after on fill */
.mcc-sb-seekbar .mcc-play-along-progress-fill {
    position: relative !important;
    overflow: visible !important;
    z-index: 2 !important;
}
.mcc-sb-seekbar .mcc-play-along-progress-fill::after {
    content: '' !important;
    position: absolute !important;
    right: -7px !important;
    top: 50% !important;
    transform: translateY(-50%) scale(0) !important;
    width: 14px !important;
    height: 14px !important;
    background: #3D7C85 !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.25) !important;
    transition: transform 0.15s ease !important;
    pointer-events: none !important;
    z-index: 100 !important;
}
.mcc-sb-seekbar .mcc-play-along-progress-bar:hover .mcc-play-along-progress-fill::after,
.mcc-sb-seekbar .mcc-play-along-progress-bar.pa-scrubbing .mcc-play-along-progress-fill::after {
    transform: translateY(-50%) scale(1) !important;
}
.mcc-sb-seekbar .mcc-play-along-progress-text {
    font-size: 11px !important;
    color: rgba(17,20,22,.45) !important;
    margin-top: 3px !important;
}

/* ── Question mark button ── */
.mcc-sync-help-btn {
    width: 20px !important; height: 20px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0,0,0,.15) !important;
    background: rgba(0,0,0,.04) !important;
    color: rgba(17,20,22,.5) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all .15s !important;
    padding: 0 !important;
}
.mcc-sync-help-btn:hover {
    background: rgba(61,124,133,.1) !important;
    border-color: rgba(61,124,133,.4) !important;
    color: #3D7C85 !important;
}

/* ── Tooltip: stays within viewport ── */
.mcc-sync-onboard-tip {
    position: fixed !important;   /* fixed to viewport = never clipped */
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: min(240px, calc(100vw - 24px)) !important;
    width: max-content !important;
}
/* JS sets top dynamically – remove the old absolute positioning */
.mcc-sync-onboard-wrap { position: static !important; }

/* ── Help Tooltip (? button) - appended to body ── */
.mcc-sync-help-tip,
.mcc-sync-onboard-tip {
    position: fixed !important;
    z-index: 1000050 !important;
    width: 200px !important;
    background: #1C1C1C !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 11px 14px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    font-family: "Akko", sans-serif !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.3) !important;
    pointer-events: auto !important;
    /* Remove old positioning */
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    max-width: none !important;
}
.mcc-sync-help-tip strong,
.mcc-sync-onboard-tip strong {
    display: block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #3D7C85 !important;
    margin-bottom: 5px !important;
    font-family: "Akko", sans-serif !important;
}
.mcc-sync-help-tip kbd,
.mcc-sync-onboard-tip kbd {
    display: inline-block !important;
    background: rgba(255,255,255,.15) !important;
    border-radius: 4px !important;
    padding: 1px 5px !important;
    font-size: 11px !important;
    font-family: monospace !important;
}
.mcc-sync-onboard-tip .mcc-sync-onboard-close {
    display: block !important;
    margin-top: 8px !important;
    text-align: right !important;
    color: rgba(255,255,255,.5) !important;
    font-size: 11px !important;
    cursor: pointer !important;
}
.mcc-sync-onboard-tip .mcc-sync-onboard-close:hover { color: #fff !important; }
.mcc-pa-bars-mobile .mcc-strip-beat-markers { display: flex; justify-content: space-around; padding: 2px 4px 0; }
.mcc-pa-bars-mobile .mcc-strip-beat-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(61,124,133,0.15); transition: all 0.15s; }
.mcc-pa-bars-mobile .mcc-strip-beat-dot.active { background: #E8924F !important; box-shadow: 0 0 4px rgba(232,146,79,0.5); transform: scale(1.3); }
.mcc-pa-bars-mobile .mcc-strip-takt.active .mcc-strip-beat-dot { background: rgba(61,124,133,0.3); }
.mcc-pa-bars-mobile .mcc-pa-bar { display: flex; flex-direction: column; align-items: stretch; padding-top: 2px; }

.mcc-pa-bars-mobile { display: flex; overflow-x: auto; gap: 0; padding: 6px 8px 4px; flex-shrink: 0; }
.mcc-pa-bars-mobile.hidden { display: none; }

/* Mobile: hide stems, close btn, help btn in karaoke bar */
@media (max-width: 600px) {
    .mcc-stem-mini-strip { display: none !important; }
    .mcc-pa-lyrics-close { display: none !important; }
    .mcc-sync-help-btn { display: none !important; }
}
/* Tab opt icons size fix */
.mcc-pa-tab-opt svg { width: 16px; height: 16px; flex-shrink: 0; }
.mcc-pa-view-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Mobile strip: identical to desktop */
.mcc-pa-bars-mobile .mcc-strip-takt {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(61,124,133,0.08);
    padding: 2px 0 4px;
    min-width: 0;
}
.mcc-pa-bars-mobile .mcc-strip-beat-cell {
    justify-content: flex-start !important;
    padding-left: 3px !important;
}
.mcc-pa-bars-mobile .mcc-strip-beat-cell:first-child {
    justify-content: flex-start !important;
}
.mcc-pa-bars-mobile .mcc-strip-chord-text {
    font-family: var(--mcc-font-heading) !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: rgba(17,20,22,0.5) !important;
    white-space: nowrap !important;
}
.mcc-pa-bars-mobile .mcc-strip-takt.active .mcc-strip-chord-text {
    color: #3D7C85 !important;
    font-weight: 800 !important;
}
.mcc-pa-bars-mobile .mcc-strip-cont {
    color: rgba(17,20,22,0.15) !important;
    font-size: 0.55rem !important;
}
@media (max-width: 768px) {
    /* AI suggest: hide from desktop position, show inline in nav row */
    .mcc-home-greeting-row { display: none !important; }
    .mcc-mobile-ai-suggest { display: flex !important; }
}
@media (min-width: 769px) {
    .mcc-mobile-ai-suggest { display: none !important; }
}
/* Compact AI suggest style */
.mcc-ai-suggest {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #fff !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
    cursor: pointer !important;
    min-width: 0 !important;
    max-width: 320px !important;
}
.mcc-ai-suggest-thumb {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    background-size: cover !important;
    background-color: rgba(61,124,133,0.08) !important;
}
.mcc-ai-suggest-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #3D7C85 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
}
.mcc-ai-suggest-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #111416 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 180px !important;
}
.mcc-ai-suggest-reason {
    font-size: 11px !important;
    color: rgba(17,20,22,.5) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* Mobile AI suggest in nav row */
#mcc-ai-suggest-mobile {
    display: none;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    cursor: pointer;
    grid-column: 1 / -1;
    transition: all .2s;
}
#mcc-ai-suggest-mobile:hover { box-shadow: 0 4px 14px rgba(61,124,133,.12); }

/* Seekbar knob z-index fix */
.mcc-sb-seekbar .mcc-play-along-progress-bar { overflow: visible !important; }
.mcc-sb-seekbar .mcc-play-along-progress-fill { overflow: visible !important; }
.mcc-sb-seekbar .mcc-play-along-progress-fill::after { z-index: 9999 !important; }
.mcc-sb-seekbar .mcc-play-along-progress { overflow: visible !important; }
/* Custom fill-based tab icons (Meldo SVGs) */
.mcc-tab-icon svg[fill="currentColor"] { stroke: none !important; fill: currentColor !important; }
.mcc-mobile-nav-icon svg[fill="currentColor"] { stroke: none !important; fill: currentColor !important; }
/* Library sidebar tabs: SVG icons */
.mcc-library-tabs .mcc-tab svg { 
    width: 16px !important; height: 16px !important; 
    vertical-align: -3px !important;
    fill: currentColor !important; stroke: none !important;
    flex-shrink: 0 !important;
}
.mcc-favorite-icon svg {
    width: 14px !important; height: 14px !important;
    vertical-align: -2px !important;
    fill: currentColor !important; stroke: none !important;
}
/* Stems Mute/Solo in dark Audioplayer */
.mcc-playlist-player .mcc-stem-mute,
.mcc-playlist-player .mcc-stem-solo,
#mcc-playlist-player .mcc-stem-mute,
#mcc-playlist-player .mcc-stem-solo {
    border-color: rgba(255,255,255,0.5) !important;
    color: #fff !important;
    background: transparent !important;
}
.mcc-playlist-player .mcc-stem-mute:hover,
.mcc-playlist-player .mcc-stem-solo:hover,
#mcc-playlist-player .mcc-stem-mute:hover,
#mcc-playlist-player .mcc-stem-solo:hover {
    background: rgba(255,255,255,0.1) !important;
}
.mcc-playlist-player .mcc-stem-mute.active,
#mcc-playlist-player .mcc-stem-mute.active {
    background: #e74c3c !important;
    border-color: #e74c3c !important;
    color: #fff !important;
}
.mcc-playlist-player .mcc-stem-solo.active,
#mcc-playlist-player .mcc-stem-solo.active {
    background: #f39c12 !important;
    border-color: #f39c12 !important;
    color: #fff !important;
}

/* Prevent Dashboard bottom nav from overlapping MCC content on mobile */
@media (max-width: 768px) {
    .mcc-app { padding-bottom: 70px; }
}


/* ============================================================================
 * v4.32.39: AUDIOPLAYER VISUAL OVERHAUL
 * Saubere, hierarchische Optik:
 *  1. Cover-Blur als atmosphärischer Hintergrund (immer sichtbar, opacity je Modus)
 *  2. Container (Header, Tab-Bar, Mode-Section) komplett TRANSPARENT
 *  3. Buttons & Cards = Liquid-Glass-Pills (frosted, helle Reflexion oben)
 *  4. Now-Playing-Modal halbtransparent + backdrop-filter blur
 *  5. Knob als prominentes Liquid-Glass-Element
 * ============================================================================ */

:root {
    --mcc-np-bottom-reserve: 180px;
    --mcc-glass-bg-dark: rgba(255, 255, 255, 0.08);
    --mcc-glass-bg-dark-hover: rgba(255, 255, 255, 0.14);
    --mcc-glass-border-dark: rgba(255, 255, 255, 0.12);
    --mcc-glass-bg-light: rgba(255, 255, 255, 0.50);
    --mcc-glass-bg-light-hover: rgba(255, 255, 255, 0.70);
    --mcc-glass-border-light: rgba(0, 0, 0, 0.08);
}

/* ----------------------------------------------------------------------------
 * 1. PLAYER-WRAPPER: schwarzer Fallback-Hintergrund (hinter Cover-Blur)
 * ---------------------------------------------------------------------------- */
.mcc-playlist-player {
    background: #0a0a0a !important;
    overflow: hidden !important;
}
.mcc-playlist-player.light-theme {
    background: #FAF8F3 !important;
}

/* ----------------------------------------------------------------------------
 * 2. COVER-BLUR (Background-Layer)
 * ---------------------------------------------------------------------------- */
.mcc-player-bg-blur {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: blur(60px) saturate(1.6) !important;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), background-image 0.6s !important;
    pointer-events: none !important;
    z-index: 0 !important;
    transform: scale(1.5) !important;
}
.mcc-player-bg-blur.active {
    opacity: 0.55; /* normale Ansicht: deutlich sichtbar */
}
.mcc-playlist-player.light-theme .mcc-player-bg-blur.active {
    opacity: 0.30;
}
.mcc-playlist-player.mcc-now-playing-open .mcc-player-bg-blur.active {
    opacity: 0.85 !important; /* Now-Playing: maximal */
}

/* Verlaufsmaske über Blur damit untere Hälfte (Songs) lesbar bleibt */
.mcc-playlist-player::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(10, 10, 10, 0.20) 60%,
        rgba(10, 10, 10, 0.55) 100%
    );
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.4s ease;
}
.mcc-playlist-player.light-theme::after {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(250, 248, 243, 0.20) 60%,
        rgba(250, 248, 243, 0.55) 100%
    );
}
/* Im Now-Playing-Modus weniger Verlauf — Cover-Blur darf flächiger wirken */
.mcc-playlist-player.mcc-now-playing-open::after {
    opacity: 0.4;
}

/* Alles ausser dem Blur muss über dem Blur liegen */
.mcc-playlist-player > *:not(.mcc-player-bg-blur) {
    position: relative;
    z-index: 1;
}

/* ----------------------------------------------------------------------------
 * 3. CONTAINER TRANSPARENT (Header, Tab-Bar, Mode-Section)
 *    Damit Cover-Blur durchschimmert; Buttons darin werden Liquid-Glass-Pills
 * ---------------------------------------------------------------------------- */
.mcc-playlist-player .mcc-player-header,
.mcc-playlist-player .mcc-player-mode-section,
.mcc-playlist-player .mcc-player-tabs-bar,
.mcc-playlist-player .mcc-player-tabs-row {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
.mcc-playlist-player.light-theme .mcc-player-header,
.mcc-playlist-player.light-theme .mcc-player-mode-section,
.mcc-playlist-player.light-theme .mcc-player-tabs-bar,
.mcc-playlist-player.light-theme .mcc-player-tabs-row {
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

/* ----------------------------------------------------------------------------
 * 4. LIQUID-GLASS-PILLS (alle Tabs, Buttons, Inputs, Selectors)
 * ---------------------------------------------------------------------------- */
.mcc-playlist-player .mcc-mode-btn:not(.active),
.mcc-playlist-player .mcc-content-tab:not(.active),
.mcc-playlist-player .mcc-now-playing-tab:not(.active),
.mcc-playlist-player .mcc-quick-search-input,
.mcc-playlist-player .mcc-playlist-selector,
.mcc-playlist-player .mcc-queue-toggle {
    background: var(--mcc-glass-bg-dark) !important;
    backdrop-filter: blur(16px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
    border: 1px solid var(--mcc-glass-border-dark) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.20) !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
}
.mcc-playlist-player .mcc-mode-btn:not(.active):hover,
.mcc-playlist-player .mcc-content-tab:not(.active):hover,
.mcc-playlist-player .mcc-now-playing-tab:not(.active):hover,
.mcc-playlist-player .mcc-queue-toggle:hover {
    background: var(--mcc-glass-bg-dark-hover) !important;
    transform: translateY(-1px) !important;
}
.mcc-playlist-player.light-theme .mcc-mode-btn:not(.active),
.mcc-playlist-player.light-theme .mcc-content-tab:not(.active),
.mcc-playlist-player.light-theme .mcc-now-playing-tab:not(.active),
.mcc-playlist-player.light-theme .mcc-quick-search-input,
.mcc-playlist-player.light-theme .mcc-playlist-selector,
.mcc-playlist-player.light-theme .mcc-queue-toggle {
    background: var(--mcc-glass-bg-light) !important;
    border-color: var(--mcc-glass-border-light) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Aktive Tabs behalten ihre Originalfarbe (teal) — nur subtile Reflexion oben */
.mcc-playlist-player .mcc-mode-btn.active,
.mcc-playlist-player .mcc-content-tab.active,
.mcc-playlist-player .mcc-now-playing-tab.active {
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 4px 12px rgba(61, 124, 133, 0.35) !important;
}

/* Song-Items: dezente Glass-Karten */
.mcc-playlist-player .mcc-player-search-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}
.mcc-playlist-player .mcc-player-search-item:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    transform: translateX(2px) !important;
}
.mcc-playlist-player.light-theme .mcc-player-search-item {
    background: rgba(255, 255, 255, 0.40) !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
}
.mcc-playlist-player.light-theme .mcc-player-search-item:hover {
    background: rgba(255, 255, 255, 0.65) !important;
}

/* ----------------------------------------------------------------------------
 * 5. PLAYBAR + MINI-PLAYER: Liquid-Glass auch im Now-Playing-Modus
 * ---------------------------------------------------------------------------- */
.mcc-playlist-player .mcc-player-controls-bar,
.mcc-playlist-player .mcc-mini-player {
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(28px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.mcc-playlist-player.light-theme .mcc-player-controls-bar,
.mcc-playlist-player.light-theme .mcc-mini-player {
    background: rgba(255, 255, 255, 0.55) !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}

/* ----------------------------------------------------------------------------
 * 6. NOW-PLAYING-OVERLAY: stoppt vor Playbar, halbtransparent
 * ---------------------------------------------------------------------------- */
.mcc-playlist-player .mcc-now-playing-overlay.open {
    bottom: var(--mcc-np-bottom-reserve) !important;
    background: rgba(0, 0, 0, 0.50) !important;
    backdrop-filter: blur(24px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.3) !important;
}
.mcc-playlist-player.light-theme .mcc-now-playing-overlay.open {
    background: rgba(255, 255, 255, 0.45) !important;
}

/* ----------------------------------------------------------------------------
 * 7. NOW-PLAYING-KNOB (Liquid-Glass, beide Zustände)
 * ---------------------------------------------------------------------------- */
.mcc-playlist-player .mcc-now-playing-knob {
    top: -24px !important;
    width: 64px !important;
    height: 28px !important;
    background: rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(20px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-bottom: none !important;
    border-radius: 14px 14px 0 0 !important;
    box-shadow: 
        0 -2px 12px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.90) !important;
    transition: 
        background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.mcc-playlist-player .mcc-now-playing-knob:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 
        0 -4px 18px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
}
.mcc-playlist-player .mcc-now-playing-knob svg {
    color: rgba(255, 255, 255, 0.90) !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
}
.mcc-playlist-player.light-theme .mcc-now-playing-knob {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #111416 !important;
    box-shadow: 
        0 -2px 12px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05) !important;
}
.mcc-playlist-player.light-theme .mcc-now-playing-knob svg {
    color: #111416 !important;
}

/* Detached Knob — position fixed, dreht Icon */
.mcc-now-playing-knob.mcc-knob-detached[style] {
    position: fixed !important;
    transform: none !important;
    z-index: 99999 !important;
}
.mcc-now-playing-knob.mcc-knob-detached[style] svg {
    transform: rotate(180deg) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ----------------------------------------------------------------------------
 * 8. SEEKBAR-KNOB auf Touch-Geräten immer sichtbar
 * ---------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    .mcc-playlist-player .mcc-player-progress-fill::after,
    .mcc-playlist-player .mcc-mini-player-progress-fill::after {
        opacity: 1 !important;
        transform: translateY(-50%) scale(1) !important;
    }
    .mcc-playlist-player .mcc-player-progress-bar {
        height: 6px !important;
    }
}

/* ----------------------------------------------------------------------------
 * 9. SPOTIFY-STYLE: Cursor pointer auf Click-to-Open Bereichen
 * ---------------------------------------------------------------------------- */
.mcc-playlist-player .mcc-playbar-row-controls,
.mcc-playlist-player .mcc-mini-player-content {
    cursor: pointer;
}
.mcc-playlist-player .mcc-playbar-row-controls button,
.mcc-playlist-player .mcc-mini-player-content button,
.mcc-playlist-player .mcc-playbar-row-controls .mcc-player-progress-bar,
.mcc-playlist-player .mcc-mini-player-content .mcc-mini-player-progress {
    cursor: pointer;
}

/* ----------------------------------------------------------------------------
 * 10. MINI-PLAYER COVER (beibehalten aus v4.32.23)
 * ---------------------------------------------------------------------------- */
.mcc-mini-player-cover-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    background: #0a0a0a;
    position: relative;
}
#mcc-mini-player-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
#mcc-mini-player-cover.spinning {
    animation: mccVinylSpin 8s linear infinite;
}
@keyframes mccVinylSpin {
    to { transform: rotate(360deg); }
}
.mcc-mini-player-cover-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #E8924F, #3D7C85);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    z-index: 1;
    pointer-events: none;
}

/* ----------------------------------------------------------------------------
 * 11. BEAT-PULSE (BPM-synchron)
 * ---------------------------------------------------------------------------- */
:root {
    --mcc-player-beat-ms: 600ms;
}
.mcc-mini-player.mcc-pulsing.mcc-has-bpm .mcc-mini-player-cover-wrap {
    animation: mccCoverPulse var(--mcc-player-beat-ms) ease-in-out infinite;
}
@keyframes mccCoverPulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
    50% { box-shadow: 0 4px 20px rgba(61,124,133,0.5); }
}

/* ----------------------------------------------------------------------------
 * 12. LIQUID-SMOOTH SEEKBAR + GLOWING THUMB
 * ---------------------------------------------------------------------------- */
.mcc-player-progress-fill,
.mcc-mini-player-progress-fill {
    transition: width 80ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.mcc-player-progress-bar.scrubbing .mcc-player-progress-fill,
.mcc-mini-player-progress.scrubbing .mcc-mini-player-progress-fill {
    transition: none !important;
}

/* ----------------------------------------------------------------------------
 * 14. v4.32.40: Queue-Toggle Position-Fix
 *     Queue-Btn soll auf Höhe der Tab-Buttons (Zuletzt/Playlist/Shuffle) liegen,
 *     nicht in der Mitte der gesamten Mode-Section. Lösung: Tabs-Row positionieren.
 * ---------------------------------------------------------------------------- */
.mcc-playlist-player .mcc-player-tabs-row {
    position: relative !important;
    align-items: center !important;
}
.mcc-playlist-player .mcc-player-tabs-row .mcc-queue-toggle {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    align-self: center !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    margin-left: 12px !important;
    right: auto !important;
}
.mcc-playlist-player .mcc-player-tabs-row .mcc-queue-toggle:hover {
    transform: none !important; /* kein translateY beim Hover */
}

/* ----------------------------------------------------------------------------
 * 15. v4.32.40: Songliste-Container transparent (damit Cover-Blur durchscheint)
 * ---------------------------------------------------------------------------- */
.mcc-playlist-player .mcc-player-content,
.mcc-playlist-player .mcc-player-tabs-content,
.mcc-playlist-player .mcc-player-tab-panel,
.mcc-playlist-player #mcc-player-recent-list,
.mcc-playlist-player .mcc-player-search-results,
.mcc-playlist-player .mcc-song-list,
.mcc-playlist-player .mcc-player-recent-songs,
.mcc-playlist-player .mcc-player-playlist-songs {
    background: transparent !important;
}
/* ----------------------------------------------------------------------------
 * 17. v4.32.41: Aktiver Knob bleibt Liquid-Glass (war türkis) +
 *     Subtitles im Player heller damit auf Cover-Blur lesbar
 * ---------------------------------------------------------------------------- */
.mcc-playlist-player .mcc-now-playing-knob.active {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: rgba(255, 255, 255, 0.90) !important;
}
.mcc-playlist-player .mcc-now-playing-knob.active:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}
.mcc-playlist-player.light-theme .mcc-now-playing-knob.active {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #111416 !important;
}

/* Subtitles (Song-Count, Artist) heller damit auf Cover-Blur lesbar */
.mcc-playlist-player .mcc-player-search-item-subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
}
.mcc-playlist-player.light-theme .mcc-player-search-item-subtitle {
    color: rgba(17, 20, 22, 0.75) !important;
}

/* ----------------------------------------------------------------------------
 * 19. v4.32.46: NOW-PLAYING LYRICS-TAB (Spotify-Style)
 * ---------------------------------------------------------------------------- */
.mcc-playlist-player .mcc-now-playing-content#mcc-now-playing-lyrics-tab.active {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.mcc-playlist-player .mcc-now-playing-content#mcc-now-playing-lyrics-tab:not(.active) {
    display: none !important;
}
.mcc-np-lyrics-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}
.mcc-np-lyrics-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* Scrollbar dezent */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.mcc-np-lyrics-scroll::-webkit-scrollbar { width: 6px; }
.mcc-np-lyrics-scroll::-webkit-scrollbar-track { background: transparent; }
.mcc-np-lyrics-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

/* Spacer damit erste/letzte Zeile zentral scrollen können */
.mcc-np-lyrics-spacer-top { height: 38vh; }
.mcc-np-lyrics-spacer-bottom { height: 50vh; }

.mcc-np-lyric-line {
    font-family: var(--mcc-font-title, 'Akko'), sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.35);
    padding: 10px 16px;
    margin: 4px 0;
    text-align: center;
    cursor: pointer;
    transition: 
        color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s ease,
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        text-shadow 0.4s ease;
    border-radius: 8px;
    user-select: none;
}
.mcc-np-lyric-line:hover {
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.04);
}
.mcc-np-lyric-line.passed {
    color: rgba(255, 255, 255, 0.30);
    font-size: 20px;
}
.mcc-np-lyric-line.active {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    transform: scale(1.02);
    text-shadow: 
        0 1px 4px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(61, 124, 133, 0.15);
}

/* Light Theme */
.mcc-playlist-player.light-theme .mcc-np-lyric-line {
    color: rgba(17, 20, 22, 0.40);
}
.mcc-playlist-player.light-theme .mcc-np-lyric-line:hover {
    color: rgba(17, 20, 22, 0.70);
    background: rgba(0, 0, 0, 0.04);
}
.mcc-playlist-player.light-theme .mcc-np-lyric-line.passed {
    color: rgba(17, 20, 22, 0.35);
}
.mcc-playlist-player.light-theme .mcc-np-lyric-line.active {
    color: #111416;
    text-shadow: 
        0 1px 4px rgba(255, 255, 255, 0.6),
        0 0 24px rgba(61, 124, 133, 0.15);
}

/* Placeholder */
.mcc-np-lyrics-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    padding: 40px;
}
.mcc-np-lyrics-placeholder span {
    font-size: 48px;
    margin-bottom: 16px;
}
.mcc-np-lyrics-placeholder p {
    font-size: 16px;
    margin: 0;
}
.mcc-playlist-player.light-theme .mcc-np-lyrics-placeholder {
    color: rgba(17, 20, 22, 0.55);
}

/* Mobile: kleinere Schriften */
@media (max-width: 768px) {
    .mcc-np-lyrics-wrapper {
        padding: 0 16px;
    }
    .mcc-np-lyric-line {
        font-size: 18px;
    }
    .mcc-np-lyric-line.passed {
        font-size: 16px;
    }
    .mcc-np-lyric-line.active {
        font-size: 22px;
    }
}

/* v4.32.53: Player-Info im Now-Playing nicht zeigen — redundant zu Mini-Player + Tabs */
#mcc-now-playing-video-tab .mcc-np-info-compact,
#mcc-now-playing-video-tab .mcc-player-info {
    display: none !important;
}

/* v4.32.53: Stems-Panel über Now-Playing-Overlay legen */
.mcc-player-stems-panel,
.mcc-stems-modal {
    z-index: 9999999 !important;
}

/* v4.32.57: Wenn Now-Playing offen, übernimmt das Stems-Panel die Position
 * des Video-Wrappers (oben). Das Video wird ausgeblendet, die Lyrics bleiben
 * unten sichtbar in ihrem normalen Bereich. */
body.mcc-now-playing-open.mcc-stems-open #mcc-player-video {
    visibility: hidden !important;
}
body.mcc-now-playing-open.mcc-stems-open .mcc-np-video-wrapper {
    /* Wrapper bleibt für Höhen-Reservierung — Stems wird visuell hier platziert */
    visibility: hidden;
}
body.mcc-now-playing-open .mcc-player-stems-panel {
    /* Positionieren über JS gemessenen Video-Wrapper-Bounds */
    position: fixed !important;
    top: var(--mcc-np-video-top, 60px) !important;
    left: var(--mcc-np-video-left, 16px) !important;
    width: var(--mcc-np-video-width, calc(100% - 32px)) !important;
    height: var(--mcc-np-video-height, 45vh) !important;
    bottom: auto !important;
    right: auto !important;
    max-height: none !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    z-index: 9999999 !important;
}

/* Lyrics-Container im Now-Playing soll NICHT schrumpfen wenn Stems offen sind
 * (vorher: bottom: stems-height — das wollen wir jetzt nicht mehr).
 * v4.32.58: WICHTIG bottom: var(--mcc-np-bottom-reserve) damit Playbar sichtbar bleibt! */
body.mcc-stems-open.mcc-now-playing-open .mcc-now-playing-overlay.open {
    bottom: var(--mcc-np-bottom-reserve) !important;
    top: 52px !important;
}

/* ----------------------------------------------------------------------------
 * 22. v4.32.62: Lyrics-Sync-Adjust Bar (nur im Lyrics-Tab)
 *     User können Offset anpassen wenn nicht admin-locked
 * ---------------------------------------------------------------------------- */
.mcc-np-lyrics-adjust {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    flex-wrap: wrap;
}
.mcc-np-adj-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
}
.mcc-np-adj-btn:hover {
    background: rgba(61, 124, 133, 0.4);
    border-color: rgba(61, 124, 133, 0.6);
    transform: scale(1.05);
}
.mcc-np-adj-btn:active {
    transform: scale(0.95);
}
.mcc-np-adj-reset {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    opacity: 0.7;
}
.mcc-np-adj-reset:hover {
    opacity: 1;
}
.mcc-np-adj-value {
    font-family: var(--mcc-font-text), 'Akko', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    min-width: 56px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.mcc-np-adj-lock {
    font-size: 14px;
    margin-left: 4px;
    opacity: 0.7;
}
/* Wenn locked: Buttons disabled-Style (außer für Admin) */
.mcc-np-lyrics-adjust.locked .mcc-np-adj-btn:not(.mcc-np-admin-override) {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
.mcc-playlist-player.light-theme .mcc-np-lyrics-adjust {
    background: rgba(255, 255, 255, 0.55);
    border-top-color: rgba(0, 0, 0, 0.10);
}
.mcc-playlist-player.light-theme .mcc-np-adj-btn {
    color: #111416;
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.15);
}
.mcc-playlist-player.light-theme .mcc-np-adj-value {
    color: #111416;
}
@media (max-width: 768px) {
    .mcc-np-lyrics-adjust {
        gap: 8px;
        padding: 10px 12px;
    }
    .mcc-np-adj-btn {
        width: 34px;
        height: 34px;
    }
}


 *     Top: Video-Wrapper (~45% Höhe) | Mitte: Player-Info kompakt | Unten: Lyrics scrollend
 * ---------------------------------------------------------------------------- */
#mcc-now-playing-video-tab.mcc-now-playing-content.active {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 12px 16px !important;
    gap: 8px !important;
    overflow: hidden !important;
}
#mcc-now-playing-video-tab.mcc-now-playing-content:not(.active) {
    display: none !important;
}

/* Video oben — fixe Höhe */
.mcc-np-video-wrapper {
    flex: 0 0 auto;
    height: 45%;
    max-height: 45%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
#mcc-now-playing-video-tab .mcc-player-video {
    aspect-ratio: 16 / 9 !important;
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    background: transparent !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
    display: block !important;
    position: relative !important;
}
#mcc-now-playing-video-tab .mcc-player-video iframe,
#mcc-now-playing-video-tab .mcc-player-video #youtube-player {
    width: 100% !important;
    height: 100% !important;
    /* v4.32.56: iframe immer non-clickable, Shield + Custom-Controls übernehmen */
    pointer-events: none !important;
}

/* v4.32.54: Click-Shield blockiert YouTube-Hover-Overlays im Tab-Modus.
 * Liegt über dem iframe und fängt alle Mouse-Events ab → keine Title-Bar/Branding/etc.
 * v4.32.55: Auch im Fullscreen aktiv (sonst zeigt YouTube seine Controls).
 * Stattdessen haben wir eigene Custom-Controls die ÜBER dem Shield liegen. */
.mcc-video-click-shield {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: transparent;
    cursor: default;
    pointer-events: auto;
}

/* v4.32.55: Custom Video-Controls — nur im Fullscreen sichtbar.
 * Liegen über dem Shield, damit Klicks Play/Pause/Seek etc. korrekt verarbeiten. */
.mcc-video-custom-controls {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none; /* Container nicht interaktiv, nur Buttons & Seekbar */
    color: #fff;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.50) 0%,
        rgba(0,0,0,0) 25%,
        rgba(0,0,0,0) 75%,
        rgba(0,0,0,0.55) 100%
    );
    opacity: 0;
    transition: opacity 0.25s ease;
}
.mcc-player-video:fullscreen .mcc-video-custom-controls,
.mcc-player-video:-webkit-full-screen .mcc-video-custom-controls {
    display: flex !important;
}
/* Visible bei Maus-Bewegung im Fullscreen (Body-Klasse via JS) */
.mcc-player-video:fullscreen.mcc-vcc-visible .mcc-video-custom-controls,
.mcc-player-video:-webkit-full-screen.mcc-vcc-visible .mcc-video-custom-controls,
.mcc-player-video:fullscreen .mcc-video-custom-controls:hover,
.mcc-player-video:-webkit-full-screen .mcc-video-custom-controls:hover {
    opacity: 1;
}
.mcc-vcc-top {
    pointer-events: auto;
    padding: 24px 32px;
    font-family: var(--mcc-font-title), 'Akko', sans-serif;
    font-size: 22px;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.mcc-vcc-center {
    pointer-events: none; /* Container nicht, nur Buttons */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex: 1;
}
.mcc-vcc-center button {
    pointer-events: auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.20);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.2s ease;
}
.mcc-vcc-center button:hover {
    background: rgba(0,0,0,0.7);
    transform: scale(1.08);
}
.mcc-vcc-center button:active {
    transform: scale(0.95);
}
.mcc-vcc-playpause {
    width: 84px !important;
    height: 84px !important;
    background: rgba(61, 124, 133, 0.85) !important;
    border-color: rgba(255,255,255,0.30) !important;
}
.mcc-vcc-playpause:hover {
    background: rgba(61, 124, 133, 1) !important;
}
.mcc-vcc-bottom {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 32px;
    font-family: var(--mcc-font-text), 'Akko', sans-serif;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.mcc-vcc-seekbar-wrap {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.20);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.mcc-vcc-seekbar-progress {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0%;
    background: linear-gradient(to right, #3D7C85, #E8924F);
    border-radius: 3px;
    transition: width 0.1s linear;
}
.mcc-vcc-time-current,
.mcc-vcc-time-total {
    min-width: 44px;
    color: rgba(255,255,255,0.95);
}
.mcc-vcc-time-total {
    text-align: right;
}

/* v4.32.55: Im Fullscreen — iframe BLEIBT non-clickable (verhindert YouTube-Hover-UI).
 * Stattdessen werden unsere Custom-Controls verwendet. */
#mcc-now-playing-video-tab .mcc-player-video:fullscreen iframe,
#mcc-now-playing-video-tab .mcc-player-video:-webkit-full-screen iframe,
#mcc-now-playing-video-tab .mcc-player-video:fullscreen #youtube-player,
#mcc-now-playing-video-tab .mcc-player-video:-webkit-full-screen #youtube-player {
    pointer-events: none !important;
}
/* Im Fullscreen Video-Container füllt komplett */
#mcc-now-playing-video-tab .mcc-player-video:fullscreen,
#mcc-now-playing-video-tab .mcc-player-video:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    background: #000 !important;
    border-radius: 0 !important;
}

/* Player-Info kompakt zwischen Video und Lyrics */
.mcc-np-info-compact {
    flex: 0 0 auto;
    text-align: center;
    padding: 4px 8px;
    margin: 0 !important;
}
.mcc-np-info-compact .mcc-player-song-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}
.mcc-np-info-compact .mcc-player-song-artist {
    font-size: 13px !important;
    color: rgba(255,255,255,0.7) !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.2 !important;
}
.mcc-playlist-player.light-theme .mcc-np-info-compact .mcc-player-song-title {
    color: #111416 !important;
}
.mcc-playlist-player.light-theme .mcc-np-info-compact .mcc-player-song-artist {
    color: rgba(17,20,22,0.65) !important;
}

/* Lyrics-Mini-Container füllt den Rest, mit zentrierter Active-Zeile */
.mcc-np-lyrics-mini {
    flex: 1 1 auto;
    min-height: 0;
    display: block;
    overflow: hidden;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    position: relative;
}
.mcc-np-lyrics-mini-scroll {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    /* Vertikales Padding via flexbox; padding 50% wäre 50% der WIDTH (Bug) */
    padding: 0 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, transparent 100%);
}
/* Spacer vor/nach den Lyrics damit erste/letzte Zeile zentriert scrollen kann */
.mcc-np-lyrics-mini-scroll::before,
.mcc-np-lyrics-mini-scroll::after {
    content: '';
    flex: 0 0 50%;
    min-height: 50%;
}
.mcc-np-lyrics-mini-scroll::-webkit-scrollbar { width: 4px; }
.mcc-np-lyrics-mini-scroll::-webkit-scrollbar-track { background: transparent; }
.mcc-np-lyrics-mini-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 2px;
}

.mcc-np-lyric-line-mini {
    font-size: 16px !important;
    padding: 6px 12px !important;
    margin: 2px 0 !important;
    line-height: 1.4 !important;
    text-align: center !important;
}
.mcc-np-lyric-line-mini.passed {
    font-size: 14px !important;
}
.mcc-np-lyric-line-mini.active {
    font-size: 20px !important;
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    .mcc-np-video-wrapper {
        height: 40%;
        max-height: 40%;
    }
    .mcc-np-info-compact .mcc-player-song-title {
        font-size: 15px !important;
    }
    .mcc-np-info-compact .mcc-player-song-artist {
        font-size: 12px !important;
    }
    .mcc-np-lyric-line-mini {
        font-size: 14px !important;
    }
    .mcc-np-lyric-line-mini.active {
        font-size: 17px !important;
    }
}


 * ---------------------------------------------------------------------------- */
.mcc-player-video {
    position: relative;
}
.mcc-video-fullscreen-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20; /* Über Custom-Controls (15) damit immer klickbar */
    opacity: 0;
    transform: translateY(-4px);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
    pointer-events: auto !important;
    padding: 0;
}
.mcc-video-fullscreen-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mcc-player-video:hover .mcc-video-fullscreen-btn,
.mcc-player-video:fullscreen .mcc-video-fullscreen-btn,
.mcc-player-video:-webkit-full-screen .mcc-video-fullscreen-btn {
    opacity: 1;
    transform: translateY(0);
}
.mcc-video-fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.85);
    border-color: rgba(255, 255, 255, 0.25);
}
.mcc-video-fullscreen-btn:active {
    transform: scale(0.95);
}
/* Im Fullscreen-Mode: Video füllt Bildschirm, Button bleibt sichtbar */
.mcc-player-video:fullscreen,
.mcc-player-video:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    background: #000 !important;
    border-radius: 0 !important;
}
.mcc-player-video:fullscreen iframe,
.mcc-player-video:-webkit-full-screen iframe {
    pointer-events: auto !important; /* im Fullscreen YouTube-Controls erlauben */
}
.mcc-player-video:fullscreen .mcc-video-fullscreen-btn,
.mcc-player-video:-webkit-full-screen .mcc-video-fullscreen-btn {
    opacity: 1;
}

/* Touch-Geräte: Button immer sichtbar (kein hover) */
@media (hover: none) and (pointer: coarse) {
    .mcc-video-fullscreen-btn {
        opacity: 0.85;
    }
}

/* ----------------------------------------------------------------------------
 * 18. v4.32.43+44: Video im Now-Playing — sicheres Layout ohne Kollaps
 *     iframe nicht klickbar (verhindert YouTube-Hover-Overlays)
 *     Now-Playing-Header transparent (nicht der mcc-player-header — das war ein anderer)
 * ---------------------------------------------------------------------------- */

/* Now-Playing-Header transparent machen — der ECHTE Header im Now-Playing-Overlay */
#mcc-playlist-player .mcc-now-playing-header,
.mcc-playlist-player .mcc-now-playing-header {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.mcc-playlist-player .mcc-now-playing-overlay.open .mcc-player-video {
    aspect-ratio: 16 / 9 !important;
    /* Höhe füllt verfügbaren Platz (begrenzt durch viewport) */
    height: min(
        calc((100vw - 60px) * 9 / 16),
        calc(100vh - var(--mcc-np-bottom-reserve, 180px) - 180px)
    ) !important;
    width: auto !important;
    max-width: 100% !important;
    background: transparent !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
    display: block !important;
}
.mcc-playlist-player .mcc-now-playing-overlay.open .mcc-player-video iframe,
.mcc-playlist-player .mcc-now-playing-overlay.open .mcc-player-video #youtube-player {
    width: 100% !important;
    height: 100% !important;
    /* v4.32.56: iframe IMMER non-clickable damit YouTube-Hover-Overlays nie erscheinen.
     * Steuerung erfolgt im Tab über Click-Shield (Play/Pause), im Fullscreen über Custom-Controls. */
    pointer-events: none !important;
}

/* Header & Tab-Bar (in der Hauptansicht) zwingend transparent — höhere Spezifität */
#mcc-playlist-player.mcc-playlist-player .mcc-player-header,
#mcc-playlist-player.mcc-playlist-player .mcc-player-mode-section,
#mcc-playlist-player.mcc-playlist-player .mcc-player-tabs-bar,
#mcc-playlist-player.mcc-playlist-player .mcc-player-tabs-row {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ----------------------------------------------------------------------------
 * 18. MOBILE: Padding für Dashboard Bottom Nav
 * ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .mcc-app { padding-bottom: 70px; }
}


/* v4.32.86: Thumbnail-Visualisierung im mp3_only-Audio-Mode */
.mcc-thumbnail-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
}
.mcc-thumbnail-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mcc-thumbnail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 48px;
    color: rgba(255,255,255,0.3);
}
.mcc-thumbnail-overlay {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 2;
}
.mcc-yt-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s ease, transform 0.15s ease;
    border: none;
    cursor: pointer;
}
.mcc-yt-link-btn:hover {
    background: rgba(255,0,0,0.9);
    color: #fff;
    transform: scale(1.04);
}
.mcc-yt-link-btn svg {
    flex-shrink: 0;
}

/* v4.32.98: Mobile-App-Block Hinweis-Box */
.mcc-app-unavailable {
    max-width: 480px;
    margin: 32px auto;
    padding: 32px 24px;
    background: #FAF8F3;
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(61,124,133,0.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.mcc-app-unavailable-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    color: #3D7C85;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mcc-app-unavailable h3 {
    font-family: Akko, sans-serif;
    color: #111416;
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
}
.mcc-app-unavailable p {
    font-family: 'Akko', sans-serif;
    color: #666;
    line-height: 1.5;
    margin: 0;
    font-size: 14px;
}
.mcc-app-unavailable a {
    color: #3D7C85;
    text-decoration: none;
    font-weight: 600;
}
.mcc-app-unavailable a:hover {
    text-decoration: underline;
}

/* ======================================================================
   v4.32.110: Spotify-Style Context-Menu + Song-Info-Modals
   ====================================================================== */

/* 3-dot button in queue items AND main playlist items */
.queue-menu-btn,
.song-menu-btn {
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.6);
    padding: 8px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, color 0.15s;
}
.queue-menu-btn:hover,
.queue-menu-btn:focus-visible,
.song-menu-btn:hover,
.song-menu-btn:focus-visible {
    background-color: rgba(255,255,255,0.1);
    color: #fff;
}
.mcc-player-queue-item .queue-menu-btn {
    margin-right: 4px;
}
.mcc-player-song-item .song-menu-btn {
    margin-left: 8px;
}

/* Context Menu (Spotify-Style, dunkel) */
.mcc-context-menu {
    position: fixed;
    z-index: 2147483647;
    min-width: 280px;
    max-width: 360px;
    background: #282828;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    padding: 6px;
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
    transform-origin: top right;
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
    pointer-events: none;
}
.mcc-context-menu.is-open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.mcc-context-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.1s;
}
.mcc-context-menu-item:hover:not(.is-disabled),
.mcc-context-menu-item:focus-visible:not(.is-disabled) {
    background-color: rgba(255,255,255,0.1);
    outline: none;
}
.mcc-context-menu-item.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.mcc-context-menu-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
}
.mcc-context-menu-icon svg {
    width: 20px;
    height: 20px;
}

.mcc-context-menu-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcc-context-menu-divider {
    height: 1px;
    margin: 6px 4px;
    background: rgba(255,255,255,0.1);
}

/* Song-Info-Modal */
.mcc-ctx-modal-bg.mcc-song-info-modal-overlay,
.mcc-ctx-modal-bg.mcc-artist-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s;
    isolation: isolate;
}

.mcc-ctx-modal.mcc-song-info-modal,
.mcc-ctx-modal.mcc-artist-modal {
    position: relative;
    background: #282828;
    color: #fff;
    border-radius: 12px;
    padding: 28px 24px;
    max-width: 480px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    transform: scale(1);
    transition: transform 0.2s ease-out;
    z-index: 1;
    opacity: 1;
    visibility: visible;
}

.mcc-song-info-modal h2,
.mcc-artist-modal h2 {
    margin: 0 0 4px 0;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    padding-right: 32px;
}
.mcc-song-info-artist,
.mcc-artist-modal-count {
    margin: 0 0 18px 0;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
}

.mcc-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: background-color 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mcc-modal-close:hover {
    background-color: rgba(255,255,255,0.1);
    color: #fff;
}

.mcc-song-info-list {
    margin: 0;
    padding: 0;
}
.mcc-song-info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mcc-song-info-row:last-child {
    border-bottom: none;
}
.mcc-song-info-row dt {
    margin: 0;
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    font-weight: 400;
    flex-shrink: 0;
}
.mcc-song-info-row dd {
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}
.mcc-song-info-empty {
    color: rgba(255,255,255,0.5);
    font-style: italic;
    text-align: center;
    padding: 20px 0;
}

/* Künstler-Modal Songliste */
.mcc-artist-modal-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mcc-artist-song-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.1s;
    width: 100%;
}
.mcc-artist-song-item:hover {
    background-color: rgba(255,255,255,0.08);
}
.mcc-artist-song-title {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mcc-artist-song-key {
    flex-shrink: 0;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.85);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    min-width: 28px;
    text-align: center;
}

/* v4.32.117: Spotify-Style Song-Info Modal */
.mcc-ctx-modal-bg.mcc-spotify-info-bg {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 1;
    visibility: visible;
    isolation: isolate;
}
.mcc-ctx-modal.mcc-spotify-info-modal {
    position: relative;
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
    color: #fff;
    border-radius: 12px;
    padding: 24px;
    max-width: 480px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7);
    z-index: 1;
    opacity: 1;
    visibility: visible;
}
.mcc-spotify-info-header {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 24px;
}
.mcc-spotify-info-cover,
.mcc-spotify-info-cover-placeholder {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.mcc-spotify-info-cover-placeholder {
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
}
.mcc-spotify-info-text {
    flex: 1;
    min-width: 0;
}
.mcc-spotify-info-modal h2 {
    margin: 0 0 6px 0;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    word-break: break-word;
}
.mcc-spotify-info-artist {
    margin: 0;
    color: rgba(255,255,255,0.7);
    font-size: 15px;
    word-break: break-word;
}
.mcc-spotify-info-list {
    margin: 0;
    padding: 0;
}
.mcc-spotify-info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mcc-spotify-info-row:last-child {
    border-bottom: none;
}
.mcc-spotify-info-row dt {
    margin: 0;
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    font-weight: 400;
    flex-shrink: 0;
}
.mcc-spotify-info-row dd {
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}
.mcc-spotify-info-yt-link {
    display: block;
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(232, 146, 79, 0.15);
    color: #E8924F;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: background 0.15s;
}
.mcc-spotify-info-yt-link:hover {
    background: rgba(232, 146, 79, 0.25);
}

/* Hint im Künstler-Modal */
.mcc-artist-modal-hint {
    margin: 0 0 16px 0;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    font-style: italic;
}

/* v4.32.120: Künstler-Modal Hero-Bild + Song-Thumbnails */
.mcc-artist-modal {
    /* Mehr Platz für Hero - überschreibt 480px */
    max-width: 540px !important;
    padding: 0 !important;  /* Padding wird in Sub-Sektionen gesetzt */
    overflow: hidden !important;
}
.mcc-artist-modal h2 {
    margin: 0 !important;
    font-size: 28px !important;
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
.mcc-artist-modal .mcc-modal-close {
    z-index: 2;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
}

.mcc-artist-hero {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #1a1a1a;
}
.mcc-artist-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mcc-artist-hero-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.3);
    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
}
.mcc-artist-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 24px 16px 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
}
.mcc-artist-hero-overlay .mcc-artist-modal-count {
    margin: 4px 0 0 0;
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.mcc-artist-modal .mcc-artist-modal-hint {
    margin: 0;
    padding: 12px 24px 8px 24px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    font-style: italic;
}
.mcc-artist-modal .mcc-artist-modal-list {
    padding: 0 12px 16px 12px;
    max-height: 50vh;
    overflow-y: auto;
}
.mcc-artist-modal .mcc-artist-song-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.1s;
    width: 100%;
}
.mcc-artist-modal .mcc-artist-song-item:hover {
    background-color: rgba(255,255,255,0.08);
}
.mcc-artist-song-thumb {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    object-fit: cover;
    background: rgba(255,255,255,0.05);
}
.mcc-artist-song-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
}

/* ======================================================================
   v4.32.121: Standalone-Audioplayer Shortcode Layout
   ====================================================================== */

/* Wrapper-Container — nimmt minimal Platz, Player ist position:fixed */
.mcc-audioplayer-standalone {
    min-height: 60vh;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color: #fff;
}

/* Auf Standalone-Seite: MCC-Hero/Footer etc. ausblenden */
body.mcc-standalone-player-page .mcc-header,
body.mcc-standalone-player-page .mcc-search-section,
body.mcc-standalone-player-page .mcc-greeting-row,
body.mcc-standalone-player-page .mcc-promo-row,
body.mcc-standalone-player-page .mcc-section-features,
body.mcc-standalone-player-page .mcc-cta-section {
    display: none !important;
}

/* v4.32.123: Player wieder Vollbild (Spotify-Style). 
   Beim Minimieren erscheint das ChordSheet im Hauptbereich. */
body.mcc-standalone-player-page #mcc-playlist-player {
    /* Vollbild — keine Offsets */
}

/* Wenn Player minimiert ist im Standalone-Modus: ChordSheet wird sichtbar */
body.mcc-standalone-player-page.mcc-player-minimized .mcc-audioplayer-standalone {
    /* Hauptbereich nimmt sichtbaren Raum oberhalb der Mini-Bar (80px) */
    min-height: calc(100vh - 80px);
    padding-bottom: 100px; /* Platz für Mini-Player */
}

/* Mini-Player im Standalone-Modus: Back-Button im Mini-Player-Header */
body.mcc-standalone-player-page #mcc-mini-player {
    /* unverändert, klappt schon */
}

/* Floating Back-Button — sichtbar wenn Player minimiert ODER Vollbild */
.mcc-standalone-back-fab {
    position: fixed;
    /* v4.32.124: rechts statt links damit Logo nicht überdeckt wird */
    top: 16px;
    right: 16px;
    z-index: 2147483640;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    padding: 8px 14px 8px 12px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    display: none;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, transform 0.15s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.mcc-standalone-back-fab:hover {
    background: rgba(0,0,0,0.85);
    transform: translateX(2px);
    color: #fff;
    text-decoration: none;
}
body.mcc-standalone-player-page .mcc-standalone-back-fab {
    display: inline-flex;
}

/* v4.32.126: Standalone-Modus
   - Minimize-Button (⌄) ausblenden — auf der Standalone-Seite gibt's nichts darunter
   - Close-Button (X) NICHT ausblenden — er dient als "Zurück zur MCC-Hauptseite"
     (siehe initStandalonePlayer: wird umgewandelt zu ← Pfeil + Redirect)
   FAB rechts oben führt zur Dashboard-URL. */
body.mcc-standalone-player-mode #mcc-player-minimize {
    display: none !important;
}

/* Header-Buttons rechts: nur Theme-Toggle + Minimieren — Platz für FAB */
body.mcc-standalone-player-mode .mcc-player-header-buttons {
    /* FAB liegt drüber — etwas Padding rechts damit's nicht kollidiert */
    padding-right: 180px;
}
@media (max-width: 768px) {
    body.mcc-standalone-player-mode .mcc-player-header-buttons {
        padding-right: 60px; /* mobile FAB ist nur Pfeil */
    }
}

/* Loading-Hint während Player aufgeht */
.mcc-audioplayer-standalone:empty::before,
.mcc-audioplayer-standalone .mcc-on-overview:not(.mcc-ready)::after {
    content: 'Audioplayer wird geladen…';
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60vh;
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    font-style: italic;
}

/* v4.32.124: Mobile FAB - nur Pfeil, Text hidden */
@media (max-width: 768px) {
    .mcc-standalone-back-fab {
        padding: 8px 12px;
    }
    .mcc-standalone-back-fab span:nth-child(2) {
        display: none;  /* Text "Startseite" weg auf Mobile */
    }
}

/* v4.32.127: Download-Progress-Toast und Audio-Fallback-Toast */
.mcc-download-progress-toast {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-width: 280px;
}
.mcc-download-progress-toast .mcc-download-secs {
    margin-left: auto;
    color: rgba(255,255,255,0.7);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}
.mcc-spinner-mini {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #E8924F;
    border-radius: 50%;
    animation: mcc-spin-mini 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes mcc-spin-mini {
    to { transform: rotate(360deg); }
}
.mcc-toast-with-action {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
    min-width: 280px;
}
.mcc-toast-action-link {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(232, 146, 79, 0.2);
    color: #E8924F !important;
    border-radius: 6px;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s;
}
.mcc-toast-action-link:hover {
    background: rgba(232, 146, 79, 0.35);
    color: #fff !important;
}

/* v4.32.137: Time-Signature-Toggle in Play-Along-Header */
.mcc-pa-ts-control {
    position: relative;
    margin-left: 8px;
}
.mcc-pa-ts-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(61, 124, 133, 0.1);
    border: 1px solid rgba(61, 124, 133, 0.3);
    border-radius: 18px;
    color: #3D7C85;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: 'Akko', system-ui, sans-serif;
}
.mcc-pa-ts-btn:hover:not([disabled]) {
    background: rgba(61, 124, 133, 0.2);
    border-color: #3D7C85;
}
.mcc-pa-ts-btn[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
}
.mcc-pa-ts-icon {
    font-size: 16px;
    line-height: 1;
}
.mcc-pa-ts-value {
    font-variant-numeric: tabular-nums;
}
.mcc-pa-ts-lock {
    font-size: 11px;
    margin-left: 2px;
}
.mcc-pa-ts-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.15);
    padding: 8px;
    min-width: 200px;
    z-index: 1000;
}
.mcc-pa-ts-menu-title {
    padding: 8px 12px 6px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(0,0,0,0.5);
    font-weight: 600;
}
.mcc-pa-ts-option {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #111416;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.1s;
    font-family: 'Akko', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
}
.mcc-pa-ts-option:hover {
    background: rgba(61, 124, 133, 0.08);
}
.mcc-pa-ts-option.active {
    background: rgba(61, 124, 133, 0.15);
    color: #3D7C85;
    font-weight: 700;
}
.mcc-pa-ts-admin-row {
    border-top: 1px solid rgba(0,0,0,0.08);
    margin-top: 6px;
    padding-top: 6px;
}
.mcc-pa-ts-admin-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: rgba(0,0,0,0.7);
    cursor: pointer;
    border-radius: 6px;
}
.mcc-pa-ts-admin-row label:hover {
    background: rgba(0,0,0,0.04);
}
.mcc-pa-ts-admin-row input[type="checkbox"] {
    cursor: pointer;
}

/* ============================================================
   v4.32.179: Mobile-Tabs wie Desktop (horizontale Scroll-Pills)
   + grosse Noten+/Favoriten-Kacheln entfernt
   ============================================================ */
@media (max-width: 600px) {
    /* Alle Tabs sichtbar (auch Noten+/Favoriten) */
    .mcc-tab-btn[data-tab="noten-plus"],
    .mcc-tab-btn[data-tab="favorites"] { display: inline-flex !important; }

    /* Tab-Leiste: horizontale Pill-Rail */
    .mcc-tabs-navigation {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 2px 0 8px !important;
        margin: 0 0 12px !important;
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
        scrollbar-width: none !important;
    }
    .mcc-tabs-navigation::-webkit-scrollbar { display: none !important; }
    .mcc-tabs-navigation .mcc-stats-mini { display: none !important; }

    .mcc-tab-btn {
        flex: 0 0 auto !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
        border-radius: 50px !important;
        background: #fff !important;
        border: none !important;
        color: #555 !important;
        white-space: nowrap !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
        position: relative !important;
    }
    .mcc-tab-btn .mcc-tab-icon { width: 18px !important; height: 18px !important; }
    .mcc-tab-btn .mcc-tab-icon svg { width: 15px !important; height: 15px !important; stroke-width: 2px !important; }
    /* v4.32.387: Aktiv ist ein weisses Plaettchen (Bedienmuster) —
       keine tuerkise Fuellung, keine weissen Symbole. */
    .mcc-tab-btn .mcc-tab-text {
        display: inline !important;
        color: inherit !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }
    .mcc-tab-btn .mcc-tab-full { display: inline !important; }
    .mcc-tab-btn .mcc-tab-short { display: none !important; }
    .mcc-tab-btn .mcc-tab-badge {
        position: static !important;
        top: auto !important;
        right: auto !important;
    }

    /* Grosse Noten+/Favoriten-Kacheln raus — leben jetzt als Pills im Tab-Bar */
    .mcc-mobile-nav-row { display: none !important; }
}

/* ============================================================
   v4.32.180: Desktop-Layout hart erzwingen (gegen verflachtes
   Perfmatters-Used-CSS, das Mobile-Regeln auf Desktop durchschlägt)
   ============================================================ */
/* v4.32.381: Nur fuer die eigenstaendige Seite. Eingebettet (Dashboard)
   bringt das Panel seine Raender schon mit; diese Regeln haben mit
   ihrem !important die Einbettungsregeln weiter unten geschlagen und
   die App um 32 px eingerueckt. */
@media (min-width: 769px) {
    .mcc-app:not(.mcc-embedded) .mcc-main-content {
        max-width: 1400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .mcc-app:not(.mcc-embedded) .mcc-header,
    .mcc-app:not(.mcc-embedded) .mcc-search-section {
        max-width: 1336px !important;
        width: calc(100% - 64px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
    .mcc-app:not(.mcc-embedded) .mcc-song-list-container {
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* v4.32.180: FAB „letzte Session fortsetzen" entfernen */
#mcc-fab, .mcc-fab { display: none !important; }

/* v4.32.180: Such-Button entfernen — Enter + Dropdown („Alle Treffer") genügen */
.mcc-search-form-header .mcc-search-btn { display: none !important; }
.mcc-search-form-header .mcc-search-wrapper { gap: 0 !important; }

/* ============================================================
   v4.32.183: Geöffneter Song — weisses Chordsheet-Feld VOLLE BREITE
   (= Header) und BLEIBT WEISS. Nur der Wrapper dahinter (gray-100,
   dunkler als Seite) wird transparent → Seiten-Hintergrund.
   ============================================================ */
/* Wrapper hinter dem weissen Feld → transparent (kein dunkler Rahmen) */
.mcc-app #mcc-song-display { background: transparent !important; }

@media (min-width: 769px) {
    /* Weisses Feld + Inhalt: volle Breite, bündig zum Header.
       KEINE Hintergrund-Änderung — weiss bleibt weiss. */
    .mcc-app #mcc-song-display .mcc-song-container,
    .mcc-app #mcc-song-display .mcc-song-toolbar,
    .mcc-app #mcc-song-display .mcc-toolbar-inner,
    .mcc-app #mcc-song-display .mcc-song-header,
    .mcc-app #mcc-tab-chords,
    .mcc-app #mcc-tab-chords #mcc-song-meta,
    .mcc-app #mcc-tab-chords .mcc-chord-sheet {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   v4.32.185: Breite ohne Full-Bleed (Dashboard-Sidebar links!),
   Header=Chordsheet gleich breit, fast an die Ränder des Content-Bereichs,
   Shadows weg, Mobile breiter + Header-Reorder (Buttons oben rechts).
   ============================================================ */
@media (min-width: 769px) {
    /* Header / Suche / Main-Content: gleiche Breite, fast an die Ränder
       des Content-Bereichs (rechts der Sidebar). KEIN Full-Bleed. */
    /* v4.32.382: wie im Block darueber nur fuer die eigenstaendige
       Seite — die 48 px Randabzug haben im Dashboard-Panel nichts zu
       suchen und standen nach 4.32.381 als Letztes noch im Weg. */
    .mcc-app:not(.mcc-embedded) .mcc-header,
    .mcc-app:not(.mcc-embedded) .mcc-search-section,
    .mcc-app:not(.mcc-embedded) .mcc-main-content {
        max-width: none !important;
        width: calc(100% - 48px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
    .mcc-app .mcc-main-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .mcc-app .mcc-header-content { max-width: none !important; }
    /* Weisses Song-Feld = Main-Content (= Header), weiss bleibt weiss */
    .mcc-app #mcc-song-display,
    .mcc-app #mcc-song-display .mcc-song-container,
    .mcc-app .mcc-song-list-container {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* "Abdunklung" = Box-Shadows der weissen Karten → weg */
    .mcc-app .mcc-header,
    .mcc-app .mcc-search-section,
    .mcc-app #mcc-song-display .mcc-song-container {
        box-shadow: none !important;
    }
}

/* Mobile: Karten fast an den Bildschirmrand + Header in 2 Zeilen */
@media (max-width: 768px) {
    /* App aus dem (gepaddeten) Container ausbrechen — mobil KEINE Sidebar, daher sicher */
    .mcc-app {
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
    .mcc-app .mcc-header,
    .mcc-app .mcc-search-section,
    .mcc-app .mcc-main-content {
        width: calc(100% - 16px) !important;   /* ~8px Rand je Seite */
        max-width: calc(100% - 16px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .mcc-app .mcc-header { padding: 8px 12px !important; }
    .mcc-app #mcc-song-display .mcc-song-container,
    .mcc-app .mcc-song-list-container {
        width: 100% !important; max-width: 100% !important;
        margin-left: 0 !important; margin-right: 0 !important;
    }
    .mcc-app .mcc-header,
    .mcc-app #mcc-song-display .mcc-song-container { box-shadow: none !important; }

    /* Header-Reorder: Zeile 1 = Übersicht (links) + Bibliothek/Player/3-Punkte (rechts),
       Zeile 2 = Suche (volle Breite) */
    .mcc-app .mcc-header-content { flex-wrap: wrap !important; align-items: center !important; }
    .mcc-app .mcc-header-content > #mcc-header-overview { order: 1 !important; }
    .mcc-app .mcc-header-content > .mcc-header-special-btns {
        order: 2 !important; margin-left: auto !important; margin-right: 0 !important;
    }
    .mcc-app .mcc-header-content > .mcc-header-nav {
        order: 3 !important; margin-left: 8px !important;
    }
    .mcc-app .mcc-header-content > .mcc-search-form-header {
        order: 4 !important; flex: 1 0 100% !important; width: 100% !important; margin-top: 8px !important;
    }

    /* Song-View: Spezial-Buttons = saubere Icon-Kreise, Labels aus */
    .mcc-app:not(.mcc-on-overview) .mcc-header-special-btns {
        gap: 8px !important; flex-wrap: nowrap !important;
    }
    .mcc-app:not(.mcc-on-overview) .mcc-header-special-btn {
        width: 40px !important; min-width: 40px !important; max-width: 40px !important;
        height: 40px !important; padding: 0 !important; border-radius: 50% !important;
        flex: 0 0 40px !important; margin: 0 !important; gap: 0 !important; justify-content: center !important;
    }
    .mcc-app:not(.mcc-on-overview) .mcc-special-btn-label { display: none !important; }
}

/* v4.32.186: Header-Border (harter Rand) weg → konsistent mit randlosem
   Song-Feld; beide reines Weiss, gleiche Breite, keine Kante/Abdunklung. */
.mcc-app .mcc-header { border: none !important; }

/* v4.32.187: Mobile — Abstand über dem Header zusätzlich reduzieren */
@media (max-width: 768px) {
    .mcc-app { margin-top: -24px !important; }
    .mcc-app .mcc-header { margin-top: 4px !important; }
}

/* ============================================================
   v4.32.188: Background-Match, Header früher 2-zeilig, Toolbar früher ins 3-Punkte-Menü
   ============================================================ */
/* 3) MCC-Hintergrund = System-Hintergrund (kein Farbunterschied mehr) */
.mcc-app:not(.dark-mode) { background: transparent !important; }

/* 1) Toolbar: Stems & Play Along früher ins 3-Punkte-Menü verpacken.
   JS zeigt Dropdown-Items (#mcc-sheet-stems / #mcc-sheet-play-along) parallel,
   daher hier nur die prominenten Toolbar-Buttons ausblenden. */
/* v4.32.206: Stems/Play Along NICHT mehr bei 1180 ausblenden — in Zeile 1 ist Platz.
   Nur auf echtem Mobile (≤768) versteckt (dort im Bottom-Sheet). */

/* 2) Header früher 2-zeilig (Tablet 769–1180): Suche behält volle Breite.
   Zeile 1 = Übersicht (links) + Bibliothek/Audioplayer/3-Punkte (rechts), Zeile 2 = Suche */
@media (min-width: 769px) and (max-width: 1180px) {
    .mcc-app .mcc-header-content { flex-wrap: wrap !important; align-items: center !important; }
    .mcc-app .mcc-header-content > #mcc-header-overview { order: 1 !important; }
    .mcc-app .mcc-header-content > .mcc-header-special-btns { order: 2 !important; margin-left: auto !important; }
    .mcc-app .mcc-header-content > .mcc-header-nav { order: 3 !important; margin-left: 8px !important; }
    .mcc-app .mcc-header-content > .mcc-search-form-header {
        order: 4 !important; flex: 1 0 100% !important; width: 100% !important; margin-top: 8px !important;
    }
}

/* ============================================================
   v4.32.189: Container-Queries — kompakte Variante richtet sich nach der
   ECHTEN MCC-Breite (nicht Viewport), löst Sidebar-Cramping/Overflow.
   ============================================================ */
.mcc-app { container-type: inline-size; container-name: mccapp; }

/* Header 2-zeilig sobald der MCC-Bereich schmal wird (echte Breite ≤1100) */
@container mccapp (max-width: 1100px) {
    .mcc-app .mcc-header-content { flex-wrap: wrap !important; align-items: center !important; }
    .mcc-app .mcc-header-content > #mcc-header-overview { order: 1 !important; }
    .mcc-app .mcc-header-content > .mcc-header-special-btns { order: 2 !important; margin-left: auto !important; }
    .mcc-app .mcc-header-content > .mcc-header-nav { order: 3 !important; margin-left: 8px !important; }
    .mcc-app .mcc-header-content > .mcc-search-form-header {
        order: 4 !important; flex: 1 0 100% !important; width: 100% !important; margin-top: 8px !important;
    }
}

/* Kompakte Song-Toolbar (Mobile-artig, alles in einer Zeile) sobald
   der MCC-Bereich ≤1000px ist — egal ob Sidebar offen oder schmaler Viewport */
@container mccapp (max-width: 1000px) {
    /* Action-Icons (Favorit/Playlist/Teilen/Info) raus → ins 3-Punkte-Menü */
    .mcc-app .mcc-tabs-actions { display: none !important; }
    .mcc-app .mcc-more-btn { display: flex !important; width: 40px !important; height: 40px !important; }
    /* Texte raus (Abspielen etc.) */
    .mcc-app .mcc-desktop-only { display: none !important; }
    /* v4.32.207: Stems & Play Along bleiben sichtbar (mit Text wo Platz ist) */
    /* Abspielen = kompaktes Icon */
    .mcc-app .mcc-audio-tab,
    .mcc-app #mcc-tabs-audio-btn {
        width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 10px !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
    }
    .mcc-app .mcc-audio-tab .mcc-tab-text,
    .mcc-app #mcc-tabs-audio-btn .mcc-tab-text { display: none !important; }
}

/* ============================================================
   v4.32.190: A4-"Pult" entfernen + professionelles Action-Konzept
   ============================================================ */
/* 1) Chordsheet volle Breite (= Header), kein graues #f5f5f5 dahinter,
      keine abgeschnittenen Rundungen. Weiss kommt vom song-container. */
@media (min-width: 1200px) {
    .mcc-app #mcc-tab-chords { background: transparent !important; }
    .mcc-app #mcc-tab-chords .mcc-chord-sheet {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        padding: 28px 40px !important;
    }
    .mcc-app #mcc-tab-chords .mcc-song-meta,
    .mcc-app #mcc-tab-chords #mcc-song-meta {
        max-width: 100% !important;
        background: transparent !important;
    }
}

/* 2) Professionelles Action-Konzept: EINE Primary (Abspielen) + ruhige,
      einheitliche Secondary-Buttons (Stems, Play Along) als Gruppe.
      Schluss mit 3 konkurrierenden Vollfarben (orange/teal/grün). */
.mcc-app .mcc-stems-tab-btn,
.mcc-app .mcc-play-along-tab-btn {
    background: var(--mcc-white) !important;
    border: 1.5px solid #E4E8EC !important;
    color: #111416 !important;
    height: 42px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    gap: 8px !important;
    transition: border-color .15s ease, background .15s ease !important;
}
.mcc-app .mcc-stems-tab-btn:hover,
.mcc-app .mcc-play-along-tab-btn:hover {
    border-color: #3D7C85 !important;
    background: #F7FAFA !important;
    transform: none !important;
}
/* Icon-Akzente bleiben zur Wiedererkennung */
.mcc-app .mcc-stems-tab-btn svg,
.mcc-app .mcc-stems-tab-btn svg path { color: #F5A623 !important; fill: #F5A623 !important; }
.mcc-app .mcc-play-along-tab-btn svg,
.mcc-app .mcc-play-along-tab-btn svg path { color: #3D7C85 !important; fill: #3D7C85 !important; }
/* Abspielen = einzige gefüllte Primary, gleiche Höhe/Radius für saubere Gruppe */
.mcc-app .mcc-audio-tab,
.mcc-app #mcc-tabs-audio-btn {
    height: 42px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(61,124,133,0.25) !important;
}

/* v4.32.191: Toolbar-Zonen klarer — Utility-Icons (Favorit/Playlist/Teilen/Info)
   als ruhige, abgetrennte Sekundär-Gruppe vor der Aktions-Gruppe. */
.mcc-app .mcc-tabs-actions {
    gap: 2px !important;
    padding-right: 12px !important;
    margin-right: 6px !important;
    border-right: 1.5px solid #EDF0F2 !important;
}
.mcc-app .mcc-tabs-actions .mcc-action-btn {
    color: #9AA4AE !important;
    width: 34px !important;
    height: 34px !important;
}
.mcc-app .mcc-tabs-actions .mcc-action-btn:hover {
    color: #3D7C85 !important;
    background: #F7FAFA !important;
}
/* Favorit aktiv: klares Rot */
.mcc-app .mcc-tabs-favorite.is-favorite .mcc-heart-filled,
.mcc-app .mcc-tabs-favorite.is-favorite { color: #E5484D !important; }

/* ============================================================
   v4.32.192: Werkzeug-Popovers in der Song-Toolbar
   (Transponieren / Ansicht / Autoscroll) — saubere, ruhige Toolbar
   ============================================================ */
.mcc-pop-wrap{position:relative;display:inline-flex}
.mcc-app .mcc-pop-trigger{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border:1.5px solid #E4E8EC;background:var(--mcc-white);border-radius:11px;color:#111416;font-size:13.5px;font-weight:500;cursor:pointer;font-family:var(--mcc-font-body);transition:border-color .15s ease,background .15s ease;white-space:nowrap}
.mcc-app .mcc-pop-trigger:hover{border-color:#3D7C85;background:#F7FAFA}
.mcc-app .mcc-pop-trigger.mcc-pop-open{border-color:#3D7C85;background:#F7FAFA;color:#0F6E56}
.mcc-app .mcc-pop-trigger.mcc-pop-trigger--accent{border-color:#3D7C85;color:#0F6E56;background:#F7FAFA}
.mcc-pop-trigger .mcc-pop-ic{flex:0 0 auto}
.mcc-pop-caret{font-size:11px;color:#9AA4AE;transition:transform .18s}
.mcc-pop-trigger.mcc-pop-open .mcc-pop-caret{transform:rotate(180deg);color:#3D7C85}

.mcc-app .mcc-pop-panel{position:absolute;top:calc(100% + 9px);left:0;z-index:60;min-width:300px;max-width:calc(100vw - 32px);background:var(--mcc-white);border:0.5px solid #E7EBEE;border-radius:15px;box-shadow:0 12px 34px rgba(0,0,0,.12);padding:14px 16px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .16s,transform .16s}
.mcc-app .mcc-pop-panel.mcc-pop-open{opacity:1;transform:none;pointer-events:auto}
.mcc-pop-panel::before{content:"";position:absolute;top:-7px;left:26px;width:14px;height:14px;background:var(--mcc-white);border-left:0.5px solid #E7EBEE;border-top:0.5px solid #E7EBEE;transform:rotate(45deg);border-radius:3px}
.mcc-pop-title{font-size:11px;letter-spacing:.05em;color:#A6AEB6;margin-bottom:12px;text-transform:uppercase;font-weight:600}

/* gekapselte Gruppen im Popover immer sichtbar (auch .mcc-desktop-view) + gestapelt */
.mcc-app .mcc-pop-panel .mcc-tb-group.mcc-in-pop{display:flex !important;flex-wrap:wrap;align-items:center;gap:12px}
.mcc-app .mcc-pop-panel .mcc-mode-toggle{display:flex}
.mcc-app .mcc-pop-panel .mcc-size-slider-wrapper{display:flex !important;align-items:center;gap:8px;width:100%}
.mcc-app .mcc-pop-panel .mcc-size-slider{flex:1}
.mcc-app .mcc-pop-panel .mcc-group-scroll{width:100%}
.mcc-app .mcc-pop-panel .mcc-speed-slider{flex:1}
.mcc-app .mcc-pop-panel .mcc-group-transpose{flex-wrap:wrap;gap:8px}
.mcc-app .mcc-pop-panel .mcc-key-select{width:100%;margin-top:4px}

/* alte Mobile-Varianten ausblenden (jetzt durch Popovers ersetzt) */
.mcc-app .mcc-group-view-mobile,
.mcc-app .mcc-scroll-btn-mobile{display:none !important}
/* Trenner der alten Inline-Gruppen weg */
.mcc-app .mcc-toolbar-inner > .mcc-tb-divider{display:none !important}
/* Trigger-Reihe: Abstand */
.mcc-app .mcc-toolbar-inner{gap:9px;flex-wrap:wrap}

/* Vollbild & Druck immer sichtbar */
.mcc-app .mcc-group-right{display:flex !important;align-items:center;gap:6px}
.mcc-app #mcc-fullscreen-btn,
.mcc-app #mcc-print-btn{display:inline-flex !important}

/* v4.32.192b: Mobile-Slider-Reihe (alt) ausblenden; Trigger auf schmal = Icon-only */
.mcc-app .mcc-scroll-slider-row{display:none !important}
@container mccapp (max-width: 760px){
    .mcc-app .mcc-pop-label{display:none}
    .mcc-app .mcc-pop-trigger{padding:0 11px;gap:0}
    .mcc-app .mcc-pop-caret{display:none}
}
@media (max-width: 768px){
    .mcc-app .mcc-pop-label{display:none}
    .mcc-app .mcc-pop-trigger{padding:0 11px;gap:0}
    .mcc-app .mcc-pop-caret{display:none}
    .mcc-app .mcc-pop-panel{position:fixed;left:8px;right:8px;bottom:8px;top:auto;min-width:0;max-width:none;border-radius:18px}
    .mcc-pop-panel::before{display:none}
}

/* ============================================================
   v4.32.193: Premium-Tab-Optik + Mehr-Menü konsolidiert
   ============================================================ */
/* Premium = XML-/Premium-Notendarstellung, links, mit Akzent */
.mcc-app #mcc-premium-tab{order:-1}
.mcc-app #mcc-premium-tab:not(.active){background:linear-gradient(135deg,rgba(61,124,133,.07),rgba(232,146,79,.16)) !important;color:#B17F37 !important;border:1px solid rgba(232,146,79,.55) !important}
.mcc-app #mcc-premium-tab.active{background:linear-gradient(135deg,#3D7C85,#E8924F) !important;color:#fff !important;border-color:transparent !important}

/* Inline-Utility-Aktionen + Druck → ins Mehr-Menü verschoben */
.mcc-app .mcc-tabs-actions{display:none !important}
.mcc-app #mcc-print-btn{display:none !important}
.mcc-app #mcc-fullscreen-btn{display:inline-flex !important}

/* Mehr-Popover nur Desktop; Mobile behält das bestehende Bottom-Sheet */
@media (max-width:768px){ .mcc-app .mcc-mehr-wrap{display:none !important} }
@media (min-width:769px){ .mcc-app #mcc-more-actions-btn{display:none !important} }

/* Mehr-Menü-Items */
.mcc-app .mcc-mehr-panel{min-width:250px;padding:8px;left:auto;right:0}
.mcc-app .mcc-mehr-panel::before{left:auto;right:22px}
.mcc-app .mcc-mehr-panel .mcc-pop-title{padding:6px 10px 4px;margin:0}
.mcc-app .mcc-mehr-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:none;background:transparent;border-radius:10px;font-size:14px;color:#111416;cursor:pointer;font-family:var(--mcc-font-body);text-align:left;transition:background .12s}
.mcc-app .mcc-mehr-item:hover{background:#F7FAFA}
.mcc-app .mcc-mehr-item svg{width:19px;height:19px;color:#5C6770;flex:0 0 auto}
.mcc-app .mcc-mehr-sep{height:1px;background:#EDF0F2;margin:7px 6px}
.mcc-app .mcc-mehr-trigger{width:40px;justify-content:center;padding:0}

/* ============================================================
   v4.32.195: Abspielen Split-Button (Quelle Meldo-Player / YouTube)
   ============================================================ */
.mcc-app .mcc-audio-split{display:inline-flex;align-items:stretch;position:relative}

/* Caret-Segment (öffnet Quellenwahl) — nur Desktop wenn Video vorhanden */
.mcc-app .mcc-audio-caret{display:none;align-items:center;justify-content:center;height:42px;padding:0 11px;border:none;background:transparent;color:#fff;cursor:pointer;border-top-right-radius:12px;border-bottom-right-radius:12px;border-left:1.5px solid rgba(255,255,255,.45);transition:background .15s}
.mcc-app .mcc-audio-caret:hover{background:rgba(0,0,0,.08)}
/* Split = reiner Positions-Container (Verlauf liegt jetzt auf dem Trigger) */
.mcc-app.mcc-has-video .mcc-audio-split{background:transparent;box-shadow:none}
.mcc-app .mcc-audio-caret svg{transition:transform .2s}
.mcc-app .mcc-audio-split.mcc-open .mcc-audio-caret svg{transform:rotate(180deg)}

@media (min-width:769px){
    .mcc-app.mcc-has-video .mcc-audio-caret{display:inline-flex}
    .mcc-app.mcc-has-video .mcc-audio-split #mcc-tabs-audio-btn{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;box-shadow:none !important}
    .mcc-app.mcc-has-video .mcc-audio-split #mcc-tabs-audio-btn:hover{transform:none}
    /* YouTube ins Dropdown gefaltet → roten Solo-Button ausblenden */
    .mcc-app.mcc-has-video #mcc-toolbar-youtube{display:none !important}
}

/* Quellen-Dropdown */
.mcc-app .mcc-audio-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:296px;background:#fff;border:1px solid #EAEEF1;border-radius:14px;box-shadow:0 12px 34px rgba(36,44,46,.16);padding:7px;z-index:1001;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s}
.mcc-app .mcc-audio-split.mcc-open .mcc-audio-menu{opacity:1;visibility:visible;transform:translateY(0)}
.mcc-app .mcc-audio-src{display:flex;align-items:center;gap:13px;width:100%;border:none;background:transparent;padding:11px 12px;border-radius:11px;cursor:pointer;text-align:left;font-family:var(--mcc-font-body);transition:background .12s}
.mcc-app .mcc-audio-src:hover{background:#F7FAFA}
.mcc-app .mcc-audio-src-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.mcc-app .mcc-asrc-meldo{background:linear-gradient(135deg,#3D7C85,#E8924F)}
.mcc-app .mcc-asrc-yt{background:#FF0000}
.mcc-app .mcc-audio-src-ic svg{fill:#fff}
.mcc-app .mcc-audio-src-tx{display:flex;flex-direction:column;line-height:1.25}
.mcc-app .mcc-audio-src-t1{font-size:14.5px;font-weight:500;color:#111416}
.mcc-app .mcc-audio-src-t2{font-size:12px;color:#7A8590;margin-top:1px}

/* YouTube-Fold universal (auch Mobile): roter Solo-Button weg wenn Video vorhanden */
.mcc-app.mcc-has-video #mcc-toolbar-youtube{display:none !important}

/* Mobile-Play-Wrap mit Quellenwahl — Desktop aus, Mobile an wenn Video */
.mcc-app .mcc-mplay-wrap{display:none;position:relative}
.mcc-app .mcc-mplay-menu{left:auto;right:0}
.mcc-app .mcc-mplay-wrap.mcc-open .mcc-mplay-menu{opacity:1;visibility:visible;transform:translateY(0)}
@media (max-width:768px){
    .mcc-app .mcc-audio-split{display:none !important}
    .mcc-app.mcc-has-video .mcc-mplay-wrap{display:inline-flex;order:-1}
    .mcc-app .mcc-mobile-play{display:inline-flex !important;align-items:center;justify-content:center;background:linear-gradient(135deg,#3D7C85,#E8924F) !important;color:#fff !important;border:none !important;width:40px;height:40px;border-radius:10px;box-shadow:0 2px 8px rgba(61,124,133,.25)}
    .mcc-app .mcc-mobile-play svg{fill:#fff !important;stroke:none !important}
    /* Play-Menü als fixes Bottom-Sheet — sonst hinter dem Chordsheet versteckt */
    .mcc-app .mcc-mplay-menu{position:fixed;left:8px;right:8px;bottom:8px;top:auto;min-width:0;max-width:none;border-radius:18px;padding:10px;transform:translateY(16px);z-index:10000;box-shadow:0 -6px 30px rgba(36,44,46,.18)}
    .mcc-app .mcc-mplay-wrap.mcc-open .mcc-mplay-menu{transform:translateY(0)}
    .mcc-app .mcc-mplay-menu .mcc-audio-src{padding:13px 12px}
}

/* ============================================================
   v4.32.197/198: z-index — Dropdowns global über Notiz-Button(999)/content-tabs
   ============================================================ */
/* Panels hoch (Wrapper bleibt ohne z-index → kein Trap, geschlossene Trigger bleiben tief) */
.mcc-app .mcc-pop-panel{z-index:1001}
.mcc-app .mcc-mehr-panel{z-index:1001}
/* Header-Dropdown Einstellungen-Label wieder einblenden (Regel fürs Icon-only-Header-Settings trifft sonst auch das Menü-Item) */
.mcc-app .mcc-nav-more-dropdown .mcc-settings-btn span{display:inline !important}

/* ============================================================
   v4.32.201: Ein einziges ⋯ in der Song-Ansicht
   ============================================================ */
/* Header-⋯ in der Song-Ansicht ausblenden (Punkte sind jetzt im Toolbar-⋯) */
.mcc-app.mcc-song-view .mcc-nav-more-wrapper{display:none !important}
/* APP-Sektion im Mehr-Menü: Icons im Brand-Teal */
.mcc-app .mcc-mehr-app svg{color:#3D7C85}
/* Hell/Dunkel-Toggle in der Toolbar: Sonne (hell) / Mond (dunkel) */
.mcc-app .mcc-tb-theme .mcc-icon-sun{display:inline-flex}
.mcc-app .mcc-tb-theme .mcc-icon-moon{display:none}
.mcc-app.dark-mode .mcc-tb-theme .mcc-icon-sun{display:none}
.mcc-app.dark-mode .mcc-tb-theme .mcc-icon-moon{display:inline-flex}
/* Theme-Toolbar-Icon nur Desktop (Mobile hat Dark Mode im Bottom-Sheet) */
@media (max-width:768px){ .mcc-app .mcc-tb-theme{display:none !important} }

/* ============================================================
   v4.32.203: Live-Suche (inline) — Bibliothek · Cloud · Generieren
   ============================================================ */
.mcc-app #mcc-suggestions .mcc-suggestions-list{max-height:min(72vh,580px);overflow-y:auto;padding:6px}
.mcc-app .mcc-live-sec{display:flex;align-items:center;gap:8px;padding:11px 12px 6px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#9AA4AE;font-family:var(--mcc-font-body)}
.mcc-app .mcc-live-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.mcc-app .mcc-dot-lib{background:#E8924F}
.mcc-app .mcc-dot-cloud{background:#3D7C85}
.mcc-app .mcc-live-divider{height:1px;background:#F0F2F5;margin:6px 4px}

.mcc-app .mcc-live-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:11px;cursor:pointer;transition:background .12s;border:none;background:transparent}
.mcc-app .mcc-live-row:hover{background:#F7FAFA}
.mcc-app .mcc-live-thumb{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff}
.mcc-app .mcc-live-thumb svg{width:18px;height:18px}
.mcc-app .mcc-live-thumb-lib{background:linear-gradient(135deg,#3D7C85,#E8924F)}
.mcc-app .mcc-live-thumb-lib svg{color:#fff;fill:none;stroke:#fff}
.mcc-app .mcc-live-thumb-cloud{background:#EEF2F5;color:#3D7C85}
.mcc-app .mcc-live-thumb-cloud svg{color:#3D7C85;stroke:#3D7C85}
.mcc-app .mcc-live-thumb-gen{background:linear-gradient(135deg,#3D7C85,#E8924F)}
.mcc-app .mcc-live-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.mcc-app .mcc-live-t1{font-family:var(--mcc-font-title,'Akko',sans-serif);font-weight:600;font-size:14.5px;color:#111416;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcc-app .mcc-live-t2,.mcc-app .mcc-live-t2gen{font-size:12.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcc-app .mcc-live-t2{color:#7A8590}
.mcc-app .mcc-live-t2gen{color:#B17F37}
.mcc-app .mcc-live-badge-lib{font-size:11px;font-weight:600;padding:3px 9px;border-radius:7px;background:rgba(232,146,79,.16);color:#B17F37;flex:0 0 auto}
.mcc-app .mcc-live-empty{padding:6px 13px 12px;font-size:13px;color:#9AA4AE}

/* Cloud Shimmer */
.mcc-app .mcc-live-shimmer{display:flex;align-items:center;gap:12px;padding:9px 12px}
.mcc-app .mcc-sk{background:linear-gradient(90deg,#EEF1F4 25%,#F6F8FA 50%,#EEF1F4 75%);background-size:200% 100%;animation:mccLiveSh 1.2s infinite;border-radius:7px}
@keyframes mccLiveSh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.mcc-app .mcc-sk-thumb{width:38px;height:38px;border-radius:10px;flex:0 0 auto}
.mcc-app .mcc-sk-lines{flex:1}
.mcc-app .mcc-sk-l1{display:block;height:12px;width:55%;margin-bottom:7px}
.mcc-app .mcc-sk-l2{display:block;height:10px;width:32%}
.mcc-app .mcc-live-loadnote{display:flex;align-items:center;gap:8px;padding:4px 13px 8px;font-size:12.5px;color:#7A8590}
.mcc-app .mcc-live-spin{width:14px;height:14px;border:2px solid rgba(61,124,133,.25);border-top-color:#3D7C85;border-radius:50%;animation:mccLiveRot .7s linear infinite;display:inline-block;flex:0 0 auto}
@keyframes mccLiveRot{to{transform:rotate(360deg)}}

/* Mehr laden */
.mcc-app .mcc-live-loadmore-wrap{padding:4px 8px 8px}
.mcc-app .mcc-live-loadmore-btn{width:100%;padding:9px;border:1px dashed #E7EBEE;border-radius:10px;background:#FAFBFC;color:#3D7C85;font-weight:600;font-size:13px;cursor:pointer;font-family:var(--mcc-font-body);display:flex;align-items:center;justify-content:center;gap:8px}
.mcc-app .mcc-live-loadmore-btn:hover{background:#F3F5F5}
.mcc-app .mcc-live-loadmore-btn:disabled{opacity:.7;cursor:default}

/* Generieren */
.mcc-app .mcc-live-generate{display:flex;align-items:center;gap:12px;padding:11px 12px;margin-top:4px;border-radius:11px;cursor:pointer;background:linear-gradient(135deg,rgba(61,124,133,.05),rgba(232,146,79,.13));border-top:1px solid #F0F2F5}
.mcc-app .mcc-live-generate:hover{background:linear-gradient(135deg,rgba(61,124,133,.09),rgba(232,146,79,.2))}

/* ============================================================
   v4.32.204: Mobile-Header — zwei Pillen füllen die Breite, ⋯ rechts (keine Lücke)
   ============================================================ */
@media (max-width:768px){
    .mcc-header-content > .mcc-header-special-btns{margin-left:0 !important;margin-right:8px !important;flex:1 1 auto !important;gap:8px !important}
    .mcc-header-special-btns .mcc-header-special-btn{flex:1 1 0 !important;min-width:0 !important;width:auto !important;max-width:none !important;justify-content:center !important;padding:0 12px !important}
    .mcc-header-content > .mcc-header-nav{margin-left:0 !important}
}

/* v4.32.205: Cloud-Treffer mit Typ + Bewertung */
.mcc-app .mcc-live-rating{display:flex;align-items:center;gap:3px;font-size:12px;color:#9AA4AE;flex:0 0 auto}
.mcc-app .mcc-live-type{font-size:11px;font-weight:600;padding:3px 8px;border-radius:7px;background:#EEF2F5;color:#5C6770;flex:0 0 auto;margin-left:2px}

/* v4.32.205: Griffbilder-Zeile in der Ansicht-Popover */
.mcc-app .mcc-pop-griff-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 4px 2px;margin-top:8px;border-top:1px solid #F0F2F5}
.mcc-app .mcc-pop-griff-label{font-size:13.5px;font-weight:500;color:#111416;font-family:var(--mcc-font-body)}
.mcc-app .mcc-pop-griff-btn{flex:0 0 auto}

/* ============================================================
   v4.32.207: Stems/Play Along sichtbarer (getönt) + Split-Button-Politur
   ============================================================ */
/* Getönte Sekundär-Chips — klar erkennbar, aber nicht so laut wie Vollfarbe */
.mcc-app .mcc-stems-tab-btn{background:#FFF6EC !important;border-color:#F1D6AE !important}
.mcc-app .mcc-stems-tab-btn:hover{background:#FFEFD9 !important;border-color:#F5A623 !important}
.mcc-app .mcc-play-along-tab-btn{background:#F2F5F6 !important;border-color:#CFDADB !important}
.mcc-app .mcc-play-along-tab-btn:hover{background:#E9EFEF !important;border-color:#3D7C85 !important}

/* ============================================================
   v4.32.208: EIN Wiedergabe-Button öffnet gruppiertes Menü
   (Player · YouTube · Stems · Play Along). Caret + separate
   Stems/PlayAlong-Buttons entfallen.
   ============================================================ */
/* Echte Buttons unsichtbar halten (nur für Proxy-Klick + Erkennung) */
.mcc-app #mcc-tabs-audio-btn,
.mcc-app #mcc-tabs-stems-btn,
.mcc-app #mcc-tabs-play-along-btn{
    position:absolute !important; width:1px !important; height:1px !important;
    padding:0 !important; margin:-1px !important; overflow:hidden !important;
    clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; min-width:0 !important;
}
/* Sichtbarer Trigger = gefüllte Primary (wie früher der Abspielen-Button) */
.mcc-app .mcc-play-menu-trigger{
    display:none; align-items:center; gap:8px; height:42px; padding:0 18px;
    border:none; border-radius:12px; cursor:pointer;
    background:linear-gradient(135deg,#3D7C85,#E8924F); color:#fff;
    font-family:var(--mcc-font-body); font-size:14px; font-weight:600;
    box-shadow:0 2px 8px rgba(61,124,133,.25);
    transition:filter .15s, box-shadow .15s;
}
.mcc-app.mcc-has-video .mcc-play-menu-trigger{display:inline-flex}
.mcc-app .mcc-play-menu-trigger:hover{filter:brightness(1.05); box-shadow:0 3px 12px rgba(61,124,133,.32)}
.mcc-app .mcc-play-menu-trigger svg{flex-shrink:0}
.mcc-app .mcc-play-menu-trigger .mcc-play-caret{display:inline-flex; align-items:center; margin-left:1px; opacity:.9; transition:transform .2s}
.mcc-app .mcc-audio-split.mcc-open .mcc-play-menu-trigger .mcc-play-caret{transform:rotate(180deg)}

/* Gruppen-Header im Menü */
.mcc-app .mcc-audio-grp{
    font-family:var(--mcc-font-body); font-size:10.5px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:#9AA4AE; padding:9px 12px 4px; user-select:none;
}
.mcc-app .mcc-audio-grp.mcc-audio-grp-ueben{margin-top:2px; border-top:1px solid #F0F2F5; padding-top:9px}

/* Üben-Icons farblich kennzeichnen */
.mcc-app .mcc-asrc-stems{background:#FFF6EC}
.mcc-app .mcc-asrc-stems svg, .mcc-app .mcc-asrc-stems svg path{color:#F5A623 !important; fill:#F5A623 !important}
.mcc-app .mcc-asrc-pa{background:#F2F5F6}
.mcc-app .mcc-asrc-pa svg, .mcc-app .mcc-asrc-pa svg path{color:#3D7C85 !important; fill:#3D7C85 !important}

/* "empfohlen"-Badge bei Meldo-Player */
.mcc-app .mcc-audio-src-rec{
    margin-left:auto; flex-shrink:0; font-family:var(--mcc-font-body);
    font-size:10px; font-weight:700; letter-spacing:.03em; color:#B17F37;
    background:#FBF2EB; border:1px solid #F2E1D1; border-radius:999px; padding:2px 8px;
}

/* Kompakter Trigger (icon-only) wenn schmal — Caret bleibt sichtbar */
@container mccapp (max-width: 1000px){
    .mcc-app .mcc-play-menu-trigger{padding:0 12px}
}

/* ============================================================
   v4.32.214: EMBED-MODUS (z.B. im Meldo-Dashboard-Tab)
   Schaltet die "Vollbild-Seite"-Annahmen ab, damit die App
   sauber in einem Panel sitzt. Standalone bleibt unberührt.
   ============================================================ */
.mcc-app.mcc-embedded {
    min-height: 0;
    background: transparent;
}
.mcc-app.mcc-embedded .mcc-header {
    position: static;
    top: auto;
    max-width: none;
    width: 100%;
    margin: 0 0 8px;
}
.mcc-app.mcc-embedded .mcc-search-section {
    display: none !important;   /* enthält nur das (versteckte) Greeting -> kein Leerraum */
}
.mcc-app.mcc-embedded .mcc-main-content {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0 !important;
}
.mcc-app.mcc-embedded .mcc-home-greeting-row {
    display: none;
}

/* ============================================================
   v4.32.384: Titelkopf der eigenstaendigen Seite.
   Form, Symbolplaettchen und Welle kommen aus dem Bedienmuster
   (.meldo-tab-header-card). Hier steht nur die Breite — dieselbe
   wie bei .mcc-header, damit Titel, Suchleiste und Chordsheet auf
   einer Kante stehen.
   ============================================================ */
.mcc-page-head {
    box-sizing: border-box;
    width: calc(100% - 48px);
    max-width: none;
    margin: 0 auto;
}

/* v4.32.386: Der Leerraum ueber dem Titel kommt aus der Seitenvorlage,
   nicht aus dem Plugin. Mobil wird er seit 4.32.187 mit -24px
   weggezogen — auf dem Schreibtisch stand die Entsprechung noch aus.
   Eingebettet nicht: dort setzt das Panel den Abstand. */
@media (min-width: 769px) {
    .mcc-app:not(.mcc-embedded) { margin-top: -24px; }
}
@media (max-width: 768px) {
    .mcc-page-head {
        width: calc(100% - 16px);
        margin: 8px auto 0;
    }
}

/* ============================================================
   v4.32.216: "Play Along" im Abspielen-Menü als Highlight
   (echter Mehrwert -> Blick gezielt dorthin lenken)
   ============================================================ */
.mcc-app .mcc-audio-src.mcc-audio-src-pa {
    position: relative;
    background: linear-gradient(135deg, rgba(232,146,79,0.12), rgba(61,124,133,0.12)) !important;
    border: 1px solid rgba(232,146,79,0.5) !important;
    animation: mccPaGlow 2.6s ease-in-out infinite;
}
.mcc-app .mcc-audio-src.mcc-audio-src-pa:hover {
    background: linear-gradient(135deg, rgba(232,146,79,0.22), rgba(61,124,133,0.20)) !important;
}
/* Icon im Lime->Türkis-Verlauf, weißes Symbol */
.mcc-app .mcc-audio-src-pa .mcc-asrc-pa {
    background: linear-gradient(135deg, #E8924F, #3D7C85) !important;
    box-shadow: 0 3px 10px rgba(61,124,133,0.30);
}
.mcc-app .mcc-audio-src-pa .mcc-asrc-pa svg,
.mcc-app .mcc-audio-src-pa .mcc-asrc-pa svg path {
    color: #fff !important;
    fill: #fff !important;
}
/* Prominenter, gefüllter Badge — abgesetzt vom dezenten "empfohlen" */
.mcc-app .mcc-pa-badge {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mcc-font-title, 'Akko', sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    color:#111416;
    background: linear-gradient(135deg, #E8924F, #3D7C85);
    border-radius: 999px;
    padding: 3px 9px;
    box-shadow: 0 2px 8px rgba(61,124,133,0.28);
    white-space: nowrap;
}
@keyframes mccPaGlow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(232,146,79,0.00), 0 2px 10px rgba(61,124,133,0.08); }
    50%      { box-shadow: 0 0 0 1px rgba(232,146,79,0.28), 0 4px 16px rgba(232,146,79,0.30); }
}

/* ==========================================================================
   v4.32.251 — Gast-Hinweis und Gast-Modal
   Ersetzt das frühere Blur-Overlay: Gäste sehen jetzt alle Akkorde,
   nur der Liedtext wird serverseitig entfernt.
   ========================================================================== */

.mcc-guest-notice {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 20px 0;
    padding: 16px 20px;
    border: 1px solid rgba(61, 124, 133, 0.25);
    border-left: 4px solid #3D7C85;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(61, 124, 133, 0.06) 0%, rgba(232, 146, 79, 0.06) 100%);
}

.mcc-guest-notice-icon {
    font-size: 26px;
    line-height: 1;
    flex: 0 0 auto;
}

.mcc-guest-notice-text {
    flex: 1 1 260px;
    min-width: 0;
}

.mcc-guest-notice-text strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    color: #223032;
}

.mcc-guest-notice-text span {
    display: block;
    font-size: 13.5px;
    line-height: 1.5;
    opacity: 0.8;
}

.mcc-guest-notice-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.mcc-guest-notice-actions .mcc-guest-register-btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    color: #ffffff !important;
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
    white-space: nowrap;
}

.mcc-guest-notice-actions .mcc-guest-login-link {
    font-size: 13.5px;
    color: #3D7C85 !important;
    text-decoration: underline;
    white-space: nowrap;
}

.mcc-dark .mcc-guest-notice {
    background: rgba(61, 124, 133, 0.12);
    border-color: rgba(61, 124, 133, 0.4);
}

.mcc-dark .mcc-guest-notice-text strong {
    color: #F0F3F3;
}

@media (max-width: 600px) {
    .mcc-guest-notice {
        gap: 12px;
        padding: 14px 16px;
    }
    .mcc-guest-notice-actions {
        width: 100%;
        justify-content: space-between;
    }
}

/* Gast-Modal: nennt bewusst beide Stufen (gratis + Abo) */
.mcc-guest-modal .mcc-guest-modal-tiers {
    margin: 12px 0 4px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(61, 124, 133, 0.08);
    font-size: 13.5px;
    line-height: 1.6;
}

.mcc-guest-modal .mcc-guest-modal-login {
    margin-top: 14px;
    font-size: 13px;
    opacity: 0.85;
}

.mcc-guest-modal .mcc-guest-modal-login a {
    color: #3D7C85;
    text-decoration: underline;
}

/* ==========================================================================
   v4.32.254 — Restzeit-Badge (Nutzer ohne Abo)
   Unten links, weil unten rechts bereits Toasts, Playlist-Navigation und
   der Mini-YouTube-Player sitzen. Nur während laufender Wiedergabe sichtbar.
   ========================================================================== */

.mcc-time-badge {
    /* Standard = Rueckfall: frei schwebend unten links.
       In der Play-Along-Kopfzeile wird stattdessen .is-inline gesetzt. */
    position: fixed;
    bottom: 20px;
    left: 20px;

    /* v4.32.258: Muss ÜBER den Vollbild-Ansichten liegen.
       Playlist-Player und Now-Playing-Overlay nutzen 999999,
       das Stems-Panel sogar 9999999 — bei 999998 war der Badge
       während der Wiedergabe schlicht verdeckt.
       Knapp unter Toasts/Kontextmenü (2147483646/47). */
    z-index: 2147483645;

    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 12px;

    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(61, 124, 133, 0.22);
    box-shadow: 0 4px 16px rgba(36, 44, 46, 0.14);
    backdrop-filter: blur(8px);

    font-size: 13px;
    line-height: 1.2;
    color: #223032;

    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    pointer-events: none;
}

.mcc-time-badge.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    /* Der Badge selbst faengt keine Klicks ab, damit er keine
       darunterliegenden Bedienelemente blockiert. Nur der Abo-Link
       ist anklickbar. */
    pointer-events: none;
}

.mcc-time-badge.is-visible .mcc-time-badge-cta {
    pointer-events: auto;
}

.mcc-time-badge-icon {
    font-size: 15px;
    line-height: 1;
    opacity: 0.75;
}

.mcc-time-badge-body {
    display: flex;
    flex-direction: column;
}

.mcc-time-badge-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    letter-spacing: 0.2px;
}

.mcc-time-badge-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.6;
}

.mcc-time-badge-cta {
    margin-left: 4px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: #ffffff !important;
    background: linear-gradient(135deg, #3D7C85 0%, #E8924F 100%);
    white-space: nowrap;
}

/* Letzte Minute: dezent warnen, nicht erschrecken */
.mcc-time-badge.is-low {
    border-color: rgba(224, 138, 30, 0.45);
}

.mcc-time-badge.is-low .mcc-time-badge-value {
    color: #b86a10;
}

.mcc-time-badge.is-empty .mcc-time-badge-value {
    color: #b3261e;
}

.mcc-dark .mcc-time-badge {
    background: rgba(39, 44, 46, 0.96);
    border-color: rgba(61, 124, 133, 0.4);
    color: #F0F3F3;
}

/* Mobile: höher setzen, damit aufklappbare Panels am unteren Rand
   (mcc-pop-panel / mcc-mplay-menu, jeweils bottom: 8px) frei bleiben */
@media (max-width: 768px) {
    .mcc-time-badge {
        bottom: 84px;
        left: 12px;
        padding: 6px 12px 6px 10px;
    }
    .mcc-time-badge-label {
        display: none;
    }
}


/* v4.32.259: In die Play-Along-Kopfzeile eingehaengte Variante.
   Frei schwebend verdeckte der Badge unten links die Instrumentauswahl. */
.mcc-time-badge.is-inline {
    position: static;
    bottom: auto;
    left: auto;
    margin-left: auto;      /* schiebt ihn ans rechte Ende der Kopfzeile */
    transform: none;
    box-shadow: none;
    backdrop-filter: none;
    background: rgba(61, 124, 133, 0.08);
    padding: 5px 10px 5px 8px;
    gap: 7px;
    flex: 0 0 auto;
    align-self: center;
}

.mcc-time-badge.is-inline.is-visible {
    transform: none;
}

.mcc-time-badge.is-inline .mcc-time-badge-label {
    display: none;          /* in der Kopfzeile zaehlt nur die Zahl */
}

.mcc-time-badge.is-inline .mcc-time-badge-value {
    font-size: 13px;
}

.mcc-time-badge.is-inline .mcc-time-badge-icon {
    font-size: 13px;
}

.mcc-time-badge.is-inline .mcc-time-badge-cta {
    padding: 4px 10px;
    font-size: 11.5px;
}

.mcc-dark .mcc-time-badge.is-inline {
    background: rgba(61, 124, 133, 0.2);
}

/* Mobile: Kopfzeile ist eng — nur Uhr und Zahl */
@media (max-width: 600px) {
    .mcc-time-badge.is-inline {
        padding: 4px 8px;
        gap: 5px;
    }
    .mcc-time-badge.is-inline .mcc-time-badge-cta {
        display: none;
    }
    .mcc-time-badge.is-inline .mcc-time-badge-value {
        font-size: 12px;
    }
}


/* v4.32.265: Aufrufzahlen auch in der Listenansicht sichtbar.
   Die Fusszeile ist dort ausgeblendet (display:none !important) — die
   Zahl wird deshalb einzeln wieder eingeblendet und inline gesetzt. */
.mcc-song-grid.mcc-list-view .mcc-card-footer {
    display: flex !important;
    background: none;
    border: none;
    padding: 0;
    margin-left: auto;
    gap: 10px;
    align-items: center;
    flex: 0 0 auto;
}

.mcc-song-grid.mcc-list-view .mcc-card-footer .mcc-card-difficulty,
.mcc-song-grid.mcc-list-view .mcc-card-footer .mcc-card-downloads {
    display: none !important;
}

.mcc-song-grid.mcc-list-view .mcc-card-views {
    display: flex !important;
    white-space: nowrap;
}

/* v4.32.266: Aufrufzahl auf den per JS gebauten Home-Karten
   ("Zuletzt angesehen", Empfehlungen). Nur sichtbar, wenn im Backend
   eingeschaltet — das Element wird sonst gar nicht erst erzeugt. */
.mcc-home-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 0.7rem;
    color: var(--mcc-gray-400);
    white-space: nowrap;
}

.mcc-home-views svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
}

.mcc-home-genre + .mcc-home-views {
    margin-left: 8px;
}

/* v4.32.268: Aufrufzahl auf den Premium-Karten.
   Steht an der Stelle des früheren "Öffnen"-Buttons, der überflüssig war,
   weil der Klick-Handler auf der ganzen Karte liegt. */
.mcc-premium-song-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--mcc-gray-400);
    white-space: nowrap;
}

.mcc-premium-song-views svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
}

/* Ohne Aufrufzahl steht die Zugriffs-Angabe allein — dann linksbündig
   statt gespreizt, sonst wirkt die Zeile unausgewogen. */
.mcc-premium-song-status:not(:has(.mcc-premium-song-views)) {
    justify-content: flex-start;
}

/* ==========================================================================
   v4.32.270 — Gesperrte Funktionen für Gäste
   Grundsatz: zeigen statt ausblenden. Wer nicht sieht, was es gibt,
   hat keinen Grund sich anzumelden.
   ========================================================================== */

.mcc-feature-locked {
    position: relative;
    opacity: 0.55;
    filter: grayscale(0.4);
}

/* Kleines Schloss oben rechts am Bedienelement */
.mcc-feature-locked::after {
    content: "🔒";
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 10px;
    line-height: 1;
    pointer-events: none;
}

.mcc-feature-locked:hover {
    opacity: 0.75;
    cursor: pointer;
}

/* Vergleichsübersicht der drei Stufen */
.mcc-tier-modal-content {
    max-width: 620px;
    text-align: left;
}

.mcc-tier-table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 4px;
    font-size: 13.5px;
}

.mcc-tier-table th,
.mcc-tier-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    text-align: center;
}

.mcc-tier-table thead th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    opacity: 0.7;
    border-bottom: 2px solid rgba(61, 124, 133, 0.3);
}

.mcc-tier-table tbody th {
    text-align: left;
    font-weight: 500;
}

.mcc-tier-yes {
    color: #3D7C85;
    font-weight: 700;
}

.mcc-tier-no {
    color: #b0b0b0;
}

.mcc-tier-limited {
    font-size: 11.5px;
    color: #b86a10;
}

/* Letzte Spalte (Abo) hervorheben */
.mcc-tier-table th:last-child,
.mcc-tier-table td:last-child {
    background: rgba(61, 124, 133, 0.05);
}

.mcc-dark .mcc-tier-table th,
.mcc-dark .mcc-tier-table td {
    border-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 600px) {
    .mcc-tier-table {
        font-size: 12px;
    }
    .mcc-tier-table th,
    .mcc-tier-table td {
        padding: 6px 5px;
    }
    .mcc-tier-limited {
        font-size: 10px;
    }
}

/* ==========================================================================
   v4.32.281 — Vorschau der gesperrten Funktionen im Gast-Modal
   Zeigt, WIE die Funktion aussieht, statt sie nur zu beschreiben.
   ========================================================================== */

.mcc-guest-preview {
    position: relative;
    margin: 14px auto 4px;
    max-width: 340px;
    padding: 10px 12px;
    border: 1px solid rgba(61, 124, 133, 0.18);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(61, 124, 133, 0.04) 0%, rgba(232, 146, 79, 0.04) 100%);
    overflow: hidden;
}

.mcc-guest-preview svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Dezenter Schleier: sichtbar genug zum Erkennen, klar als Vorschau lesbar */
.mcc-guest-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 55%, rgba(255,255,255,0.55) 100%);
    pointer-events: none;
}

.mcc-guest-preview-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(61, 124, 133, 0.9);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.mcc-dark .mcc-guest-preview {
    border-color: rgba(61, 124, 133, 0.35);
    background: rgba(61, 124, 133, 0.10);
}

.mcc-dark .mcc-guest-preview::after {
    background: linear-gradient(to bottom, rgba(30,37,37,0) 55%, rgba(30,37,37,0.55) 100%);
}

@media (max-width: 600px) {
    .mcc-guest-preview {
        margin-top: 10px;
        padding: 8px;
    }
}

/* ==========================================================================
   v4.32.289 — Lesbarkeit und Bedienbarkeit
   
   Anlass: Auf Beamern im Klassenzimmer und auf älteren Bildschirmen waren
   Sekundärtexte kaum lesbar. Gemessen gegen Weiss:
     --mcc-gray-400 (#9AA5B1)  Kontrast 2.50  — WCAG AA verlangt 4.5
     --mcc-gray-500 (#7B8794)  Kontrast 3.66  — ebenfalls zu schwach
   Die neuen Werte liegen bei 5.21 bzw. 6.46 und erfüllen AA.
   
   Die Farbvariablen selbst bleiben unverändert, damit Rahmen, Trennlinien
   und dekorative Flächen ihre Feinheit behalten — angehoben wird nur dort,
   wo TEXT steht.
   ========================================================================== */

:root {
    /* Für Text auf hellem Grund — erfüllen WCAG AA */
    --mcc-text-secondary: #616E7C;   /* 5.21 : 1 */
    --mcc-text-tertiary:  #52606D;   /* 6.46 : 1 */
}

/* --- 1. Sekundärtexte: Interpret, Aufrufe, Zähler --- */

.mcc-card-artist,
.mcc-live-t2,
.mcc-song-count,
.mcc-songs-count,
.mcc-card-views,
.mcc-home-views,
.mcc-premium-song-views,
.mcc-card-downloads {
    color: var(--mcc-text-secondary) !important;
}

/* Zähler oben rechts ("37317 Songs") */
.mcc-song-total,
.mcc-total-count,
.mcc-count-badge {
    color: var(--mcc-text-secondary) !important;
}

/* --- 2. Genre-Pills: sichtbare Tönung statt blasser Kontur --- */

/* Beide Kartentypen: die Startseite baut ihre Karten per JavaScript und
   verwendet dort .mcc-home-genre, die uebrigen Listen .mcc-card-genre. */
.mcc-card-genre,
.mcc-home-genre {
    color: #306168 !important;                      /* Petrol, dunkler */
    background: rgba(61, 124, 133, 0.12) !important; /* leichte Tönung */
    border: 1px solid rgba(61, 124, 133, 0.24) !important;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* --- 3. Filter-Pills: Klickbarkeit zeigen --- */

.mcc-content-tab:not(.active) {
    cursor: pointer;
}

.mcc-content-tab:not(.active):active {
    transform: translateY(1px);
}

/* Tastaturbedienung sichtbar machen — bisher gar nicht erkennbar */
.mcc-content-tab:focus-visible {
    outline: 2px solid #3D7C85;
    outline-offset: 2px;
}

/* --- Dunkler Modus: eigene Werte, sonst kehrt sich der Effekt um --- */

.mcc-dark .mcc-card-artist,
.mcc-dark .mcc-live-t2,
.mcc-dark .mcc-card-views,
.mcc-dark .mcc-home-views,
.mcc-dark .mcc-premium-song-views,
.mcc-dark .mcc-song-total {
    color: #B9C3CC !important;
}

.mcc-dark .mcc-card-genre,
.mcc-dark .mcc-home-genre {
    color: #A8C0C3 !important;
    background: rgba(61, 124, 133, 0.22) !important;
    border-color: rgba(61, 124, 133, 0.40) !important;
}

.mcc-dark .mcc-content-tab:not(.active) {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #C6D0D8;
}

.mcc-dark .mcc-content-tab:not(.active):hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(61, 124, 133, 0.45);
    color: #A8C0C3;
}

/* ==========================================================================
   v4.32.291 — Premium-Badges lesbar machen
   
   Gemessen gegen Weiss:
     "Abo erforderlich"  #ffc107  Kontrast 1.63  — praktisch unlesbar
     "Freigeschaltet"    #28a745  Kontrast 3.13  — unter AA
   Neu: 4.87 bzw. 5.07, dazu eine leichte Tönung, damit sie als Badge
   erkennbar sind statt als lose Textzeile.
   ========================================================================== */

/* v4.32.292: Bei freigeschalteten Songs entfaellt die Beschriftung ganz.
   Gesperrte tragen den goldenen PREMIUM-Badge wie auf der
   Uebersichtsseite. Die frueheren Farbregeln fuer .mcc-premium-song-access
   sind damit hinfaellig. */

.mcc-premium-song-status {
    min-height: 26px;             /* gleiche Kartenhoehe mit und ohne Badge */
    gap: 10px;
}

/* Ist nur die Aufrufzahl da, rueckt sie nach links statt zu schweben */
.mcc-premium-song-status:not(:has(.mcc-badge-premium)) {
    justify-content: flex-start;
}

.mcc-premium-song-status .mcc-badge-premium {
    padding: 3px 11px !important;
    font-size: 10.5px !important;
    flex: 0 0 auto;
}

/* v4.32.294: Premium-Badge auf jeder Karte der Sammlung.
   Er kennzeichnet den Song als Premium-Inhalt — unabhaengig davon, ob
   der Nutzer Zugriff hat. Ersetzt den freistehenden Stern oben rechts
   und sitzt wie auf der Uebersichtsseite oben links auf dem Bild. */
.mcc-premium-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 4px 11px !important;
    font-size: 10.5px !important;
}

@media (max-width: 600px) {
    .mcc-premium-card-badge {
        top: 8px;
        left: 8px;
        padding: 3px 9px !important;
        font-size: 9.5px !important;
    }
}

/* =====================================================================
   v4.32.311 — Rechtskonformer Modus (Auslieferung "embed")
   =====================================================================
   Alles hier haengt an .mcc-pa-embed. Diese Klasse setzt das Frontend
   nur, wenn mcc_delivery_mode auf 'embed' steht. Der bisherige Modus
   bekommt sie nie und bleibt unveraendert.
   ===================================================================== */

/* Der Quellenumschalter bleibt wie im bisherigen Modus: Text, keine
   Symbole. Die Symbolvariante aus 4.32.311 ist zurueckgenommen — sie war
   schlechter lesbar und der Platz wurde nicht gebraucht, weil das
   Videofenster ueber der Bedienleiste sitzt und nicht darin. */

/* Videofenster: knappe Darstellung, Griffleiste bleibt greifbar.
   Die Groesse selbst kommt aus dem JS (PA_YT_SIZE), weil sie an die
   Mindestanforderung von YouTube gebunden ist und nicht per Media Query
   unterlaufen werden darf. */
.mcc-pa-embed .mcc-pa-yt-wrap iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
}
.mcc-pa-embed .mcc-pa-yt-wrap #mcc-pa-yt-handle:active {
    background: rgba(255,255,255,0.14) !important;
}

/* Auf schmalen Geraeten etwas mehr Abstand zum rechten Rand, damit das
   Fenster nicht am Bildschirmrand klebt. Die Kantenlaenge bleibt. */
@media (max-width: 600px) {
    .mcc-pa-embed .mcc-pa-yt-wrap {
        right: 8px !important;
    }
}

/* =====================================================================
   v4.32.320 — Audioplayer: kleines Video bei "Nur YouTube"
   =====================================================================
   Haengt an .mcc-yt-mini. Die Klasse setzt das Frontend nur, wenn
   mcc_audio_mode auf 'youtube_only' steht. In den beiden anderen
   Audio-Modi aendert sich nichts.

   WARUM DAS IN 4.32.319 UNSICHTBAR BLIEB
   ---------------------------------------
   Das Video steckt in #mcc-now-playing-overlay. Solange die
   Now-Playing-Ansicht zu ist, traegt dieses Overlay ein inline gesetztes
   display:none — und ein Kind mit position:fixed wird darin NICHT
   gerendert. Kein z-index der Welt hilft dagegen; das Element existiert
   fuer die Darstellung schlicht nicht.

   Umhaengen im DOM waere der naheliegende Ausweg, laedt aber jeden
   iframe neu und wuerde die Wiedergabe abbrechen. Stattdessen wird das
   Overlay im Mini-Modus dargestellt, aber unsichtbar gehalten — und
   allein das Videofenster darin wieder sichtbar gemacht.

   Dabei ist die Reihenfolge wichtig: visibility laesst sich von einem
   Kind umkehren, opacity NICHT (sie multipliziert sich). Deshalb muss
   das Overlay auf opacity:1 gesetzt und ueber visibility versteckt
   werden, nicht umgekehrt.

   Die Kantenlaenge von 200 px ist dieselbe wie im Play-Along und
   ebenfalls die Untergrenze, die YouTube fuer eingebettete Player
   vorschreibt.
   ===================================================================== */

.mcc-playlist-player.mcc-yt-mini:not(.mcc-now-playing-open) .mcc-now-playing-overlay {
    display: flex !important;
    opacity: 1 !important;          /* Kinder koennen opacity nicht umkehren */
    visibility: hidden !important;  /* ... visibility dagegen schon */
    pointer-events: none !important;
    background: transparent !important;
}

.mcc-playlist-player.mcc-yt-mini:not(.mcc-now-playing-open) .mcc-np-video-wrapper {
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    right: 12px !important;
    bottom: var(--mcc-yt-mini-bottom, 96px) !important;
    top: auto !important;
    left: auto !important;
    width: 200px !important;
    height: 200px !important;
    max-width: 200px !important;
    max-height: 200px !important;
    min-height: 0 !important;
    z-index: 999997 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.3) !important;
    background: #0f1115 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mcc-playlist-player.mcc-yt-mini:not(.mcc-now-playing-open) .mcc-player-video,
.mcc-playlist-player.mcc-yt-mini:not(.mcc-now-playing-open) .mcc-player-video-container {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    width: 200px !important;
    height: 200px !important;
    min-height: 0 !important;
    max-width: 200px !important;
    max-height: 200px !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
}

/* Auf Schmalbild bleibt die Kantenlaenge gleich — 200 px ist die
   Untergrenze von YouTube, nicht eine Frage des verfuegbaren Platzes.
   Angepasst werden nur die Abstaende zum Rand. */
@media (max-width: 767px) {
    .mcc-playlist-player.mcc-yt-mini:not(.mcc-now-playing-open) .mcc-np-video-wrapper {
        right: 8px !important;
    }
}

.mcc-playlist-player.mcc-yt-mini:not(.mcc-now-playing-open) .mcc-player-video iframe,
.mcc-playlist-player.mcc-yt-mini:not(.mcc-now-playing-open) #youtube-player,
.mcc-playlist-player.mcc-yt-mini:not(.mcc-now-playing-open) #youtube-player iframe {
    visibility: visible !important;
    width: 200px !important;
    height: 200px !important;
    border: 0 !important;
    display: block !important;
}

/* Alles andere im Overlay bleibt versteckt — Kopfzeile, Reiter,
   Warteschlange, Songinfo. Sie erben visibility:hidden vom Overlay und
   werden hier nicht wieder eingeschaltet. Die Zusatzelemente IM
   Videofenster wuerden dagegen mitkommen und stoeren dort nur. */
.mcc-playlist-player.mcc-yt-mini:not(.mcc-now-playing-open) .mcc-video-custom-controls,
.mcc-playlist-player.mcc-yt-mini:not(.mcc-now-playing-open) .mcc-video-fullscreen-btn,
.mcc-playlist-player.mcc-yt-mini:not(.mcc-now-playing-open) .mcc-video-click-shield,
.mcc-playlist-player.mcc-yt-mini:not(.mcc-now-playing-open) .mcc-player-loading,
.mcc-playlist-player.mcc-yt-mini:not(.mcc-now-playing-open) .mcc-player-no-videos {
    display: none !important;
}

@media (max-width: 600px) {
    .mcc-playlist-player.mcc-yt-mini:not(.mcc-now-playing-open) .mcc-np-video-wrapper {
        right: 8px !important;
    }
}

/* ============================================================
   v4.32.388: Kopfleiste — eine Zeile statt zwei.

   Das Suchfeld ist die Karte. «Meine Musik», «Audioplayer» und das
   Mehr-Menue sitzen als stille Symbolknoepfe am rechten Rand DARIN,
   so wie das Mikrofon in einer Suchleiste. Damit gibt es nur noch
   eine Knopfform, und die frueheren Umbruchregeln
   («.mcc-header-content > .mcc-search-form-header { flex:1 0 100% }»)
   greifen nicht mehr, weil die Gruppen keine Kinder von
   «.mcc-header-content» mehr sind.

   «Uebersicht» bleibt im Markup: in der Songansicht ist es der
   einzige Weg zurueck. Nur auf der Uebersicht selbst wird es
   ausgeblendet — dort zeigte es auf die Seite, auf der man steht.
   ============================================================ */
.mcc-app .mcc-header-content {
    flex-wrap: nowrap !important;
    gap: 10px !important;
}
.mcc-app .mcc-header-content > .mcc-search-form-header {
    order: 2 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    margin-top: 0 !important;
}
/* v4.32.393: «Uebersicht» steht als Rueckweg ueber dem Titel, nicht
   mehr im Suchfeld. Stille Aktion mit Chevron nach links — das ist die
   uebliche Form fuer «eine Ebene zurueck», und sie konkurriert nicht
   mit den Zielen im Feld. Sichtbar wird sie per JS; auf der Uebersicht
   selbst bleibt sie aus. */
.mcc-app.mcc-on-overview #mcc-header-overview {
    display: none !important;
}
body .mcc-app .mcc-page-head #mcc-header-overview {
    align-items: center;
    gap: 5px;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 36px;
    margin: 0 0 2px -10px;
    padding: 0 10px !important;
    border: none !important;
    border-radius: var(--m-radius, 10px) !important;
    background: none !important;
    color: var(--m-gedaempft, #4a5658) !important;
    font-family: 'Akko', sans-serif !important;
    font-weight: 700 !important;
    font-size: .86rem !important;
    box-shadow: none !important;
    cursor: pointer;
}
body .mcc-app .mcc-page-head #mcc-header-overview:hover {
    background: none !important;
    color: var(--m-teal, #3D7C85) !important;
    transform: none !important;
}
body .mcc-app .mcc-page-head #mcc-header-overview svg {
    width: 16px !important;
    height: 16px !important;
    color: inherit !important;
}

/* Das Feld. «flex-wrap» muss ausdruecklich aus: der Bestand setzt es
   fuer die alte zweizeilige Anordnung auf «wrap», und die Reihenfolge
   muss gesetzt sein, weil die Eingabegruppe «order:1» mitbringt — ohne
   Angabe landen die Knoepfe mit «order:0» davor. */
.mcc-app .mcc-search-form-header .mcc-search-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 5px 4px 0 !important;
    background: var(--m-schiene, #eef2f2) !important;
    border-radius: 999px !important;
}
.mcc-app .mcc-search-form-header .mcc-search-input-group {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    background: transparent !important;
    padding: 0 4px 0 16px !important;
}
.mcc-app .mcc-search-wrapper .mcc-header-special-btns { order: 2 !important; }
.mcc-app .mcc-search-wrapper .mcc-header-nav { order: 3 !important; }

/* Die Ziele im Feld. «display» bleibt unangetastet — das MCC blendet
   die Gruppe per JS ein, und ein erzwungenes «flex» wuerde sie schon
   vor dem Laden zeigen. */
.mcc-app .mcc-search-wrapper .mcc-header-special-btns,
.mcc-app .mcc-search-wrapper .mcc-header-nav {
    align-items: center !important;
    gap: 3px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}
body .mcc-app .mcc-search-wrapper .mcc-header-special-btn,
body .mcc-app .mcc-search-wrapper .mcc-nav-more-toggle {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    transform: none !important;
}

/* v4.32.391: Zwei Ziele, zwei Gewichte. «Meine Musik» ist der ruhige
   weisse Knopf, der Audioplayer traegt den Meldo-Verlauf — er ist das
   auffaelligere Angebot und braucht die Unterscheidung. */
body .mcc-app .mcc-search-wrapper .mcc-library-btn {
    background: var(--m-weiss, #fff) !important;
    color: var(--m-teal, #3D7C85) !important;
}
body .mcc-app .mcc-search-wrapper .mcc-library-btn:hover {
    background: var(--m-teal-l, #EEF3F4) !important;
    color: var(--m-teal, #3D7C85) !important;
    transform: none !important;
}
body .mcc-app .mcc-search-wrapper .mcc-audioplayer-btn {
    background: linear-gradient(135deg, #3D7C85 0%, #448B94 60%, #E8924F 160%) !important;
    color: var(--m-weiss, #fff) !important;
}
body .mcc-app .mcc-search-wrapper .mcc-audioplayer-btn:hover {
    background: linear-gradient(135deg, #1F737A 0%, #3D7C85 60%, #E5791F 160%) !important;
    color: var(--m-weiss, #fff) !important;
    transform: none !important;
}
body .mcc-app .mcc-search-wrapper .mcc-nav-more-toggle {
    background: var(--m-weiss, #fff) !important;
    color: var(--m-gedaempft, #4a5658) !important;
}
body .mcc-app .mcc-search-wrapper .mcc-nav-more-toggle:hover {
    background: var(--m-teal-l, #EEF3F4) !important;
    color: var(--m-teal, #3D7C85) !important;
    transform: none !important;
}

/* Nur «color» setzen, nicht fill oder stroke — die MCC-Zeichnungen
   mischen gefuellte und gestrichene Pfade. Der Schein um das
   Bibliothekszeichen kam aus einem geerbten Schlagschatten. */
body .mcc-app .mcc-search-wrapper .mcc-header-special-btn svg,
body .mcc-app .mcc-search-wrapper .mcc-nav-more-toggle svg {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
    color: inherit !important;
    filter: none !important;
    opacity: 1 !important;
}
.mcc-app .mcc-search-wrapper .mcc-special-btn-label {
    display: none !important;
}

/* Der Kopf traegt jetzt nur noch eine Zeile. */
.mcc-app .mcc-header {
    padding: 10px 12px !important;
}

/* v4.32.392: Mobil sitzen die drei Zeichen enger beieinander — der
   Platz im Feld ist knapp, und die Gruppe liest sich als eine. */
@media (max-width: 768px) {
    body .mcc-app .mcc-search-form-header .mcc-search-wrapper {
        gap: 1px !important;
        padding-right: 3px !important;
    }
    body .mcc-app .mcc-search-wrapper .mcc-header-special-btns {
        gap: 1px !important;
    }
    body .mcc-app .mcc-search-wrapper .mcc-header-special-btn,
    body .mcc-app .mcc-search-wrapper .mcc-nav-more-toggle {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
    }
}

/* ============================================================
   v4.32.394: Reitersymbole der Uebersicht — eine Stelle, die alles
   bestimmt.

   Die Zeichnungen sind zweierlei Art: die einen sind gefuellt
   (SVG mit fill="currentColor", z.B. der Stern), die anderen
   gestrichen. Im Bestand lag darueber ein «fill: none !important»
   fuer alle — beim gefuellten Stern blieb davon nur die duenne
   Aussenkontur uebrig, und die war im aktiven Reiter kaum zu sehen.

   Darum wird hier nach Art unterschieden: gefuellte Zeichnungen
   bekommen ihre Fuellung zurueck, gestrichene ihre Kontur. Die Farbe
   kommt in beiden Faellen aus «color» und ist in jedem Zustand
   dieselbe — der Reiter bleibt am Farbton erkennbar.
   ============================================================ */
body .mcc-app .mcc-tabs-navigation .mcc-tab-icon svg {
    opacity: 1 !important;
    color: #3D7C85 !important;
}
body .mcc-app .mcc-tabs-navigation .mcc-tab-icon--premium svg { color: #D9A441 !important; }
body .mcc-app .mcc-tabs-navigation .mcc-tab-icon--fav svg     { color: #E74C3C !important; }

body .mcc-app .mcc-tabs-navigation .mcc-tab-icon svg[fill="currentColor"] {
    fill: currentColor !important;
    stroke: none !important;
}
body .mcc-app .mcc-tabs-navigation .mcc-tab-icon svg:not([fill="currentColor"]) {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9px !important;
}

/* ============================================================
   v4.32.395/396: «Meine Musik» und «Audioplayer» auf Titelhoehe.

   Der Titelkopf ist bei Meldo der Platz fuer Seitenaktionen (wie
   «Neue Lektion» im Stundenplan). Die Karte des Bedienmusters ist ein
   zweispaltiges Raster (Zeichen | Text); hier kommt eine dritte Spalte
   dazu, damit die Knoepfe rechts auf der Titelzeile sitzen und die
   Welle darunter ueber die volle Breite laeuft.

   Zwei Faelle: eigenstaendig steckt die Gruppe in «.mcc-page-head»,
   eingebettet haengt das Skript sie in den Titelkopf des Panels und
   markiert ihn mit «.mcc-hat-ziele».

   Auf dem Schreibtisch mit Text, darunter nur das Zeichen.
   ============================================================ */
body .mcc-app .mcc-page-head .meldo-tab-header-card,
body .meldo-tab-header-card.mcc-hat-ziele {
    grid-template-columns: auto 1fr auto !important;
}
body .mcc-app .mcc-page-head .mcc-header-special-btns,
body .mcc-hat-ziele .mcc-header-special-btns {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: end !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}
body .mcc-app .mcc-page-head .mcc-header-special-btn,
body .mcc-hat-ziele .mcc-header-special-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 40px !important;
    padding: 0 1rem !important;
    border-radius: var(--m-radius, 10px) !important;
    font-family: 'Akko', sans-serif !important;
    font-weight: 700 !important;
    font-size: .88rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transform: none !important;
}
body .mcc-app .mcc-page-head .mcc-library-btn,
body .mcc-hat-ziele .mcc-library-btn {
    background: var(--m-weiss, #fff) !important;
    border: 1.5px solid var(--m-linie, #e4e6e6) !important;
    color: var(--m-tinte, #111416) !important;
}
body .mcc-app .mcc-page-head .mcc-library-btn:hover,
body .mcc-hat-ziele .mcc-library-btn:hover {
    border-color: var(--m-teal, #3D7C85) !important;
    color: var(--m-teal, #3D7C85) !important;
    background: var(--m-weiss, #fff) !important;
}
body .mcc-app .mcc-page-head .mcc-audioplayer-btn,
body .mcc-hat-ziele .mcc-audioplayer-btn {
    border: 1.5px solid transparent !important;
    background: linear-gradient(135deg, #3D7C85 0%, #448B94 60%, #E8924F 160%) !important;
    color: var(--m-weiss, #fff) !important;
}
body .mcc-app .mcc-page-head .mcc-audioplayer-btn:hover,
body .mcc-hat-ziele .mcc-audioplayer-btn:hover {
    background: linear-gradient(135deg, #1F737A 0%, #3D7C85 60%, #E5791F 160%) !important;
    color: var(--m-weiss, #fff) !important;
}
body .mcc-app .mcc-page-head .mcc-header-special-btn svg,
body .mcc-hat-ziele .mcc-header-special-btn svg {
    width: 18px !important;
    height: 18px !important;
    color: inherit !important;
    filter: none !important;
}
body .mcc-app .mcc-page-head .mcc-special-btn-label,
body .mcc-hat-ziele .mcc-special-btn-label {
    display: inline !important;
    color: inherit !important;
    font-family: 'Akko', sans-serif !important;
    font-weight: 700 !important;
    font-size: .88rem !important;
}

/* Schmal: nur das Zeichen, rund. */
@media (max-width: 768px) {
    body .mcc-app .mcc-page-head .mcc-header-special-btn,
    body .mcc-hat-ziele .mcc-header-special-btn {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }
    body .mcc-app .mcc-page-head .mcc-special-btn-label,
    body .mcc-hat-ziele .mcc-special-btn-label {
        display: none !important;
    }
    body .mcc-app .mcc-page-head .mcc-header-special-btns,
    body .mcc-hat-ziele .mcc-header-special-btns {
        gap: 6px !important;
    }
}

/* ============================================================
   v4.32.397 — «Meine Musik» nach Bedienmuster.

   Drei Teile, drei Entscheidungen:

   · Kopf: heller Traeger statt Farbverlauf, mit der Teal-Lime-Welle
     an der Unterkante — dieselbe Form wie bei Pinnwand und Noten+.
     Der Titel steht in Akko, das Schliessen ist ein
     Symbolknopf (A4) und kein Zeichen mehr.

   · Reiter: einzelne Reiter, ruhend ohne Flaeche, aktiv ein weisses
     Plaettchen — wie in der Leistungsuebersicht. Keine gefuellte
     Segmentschiene.

   · Zeilen: Titel links, Interpret rechts, Trennlinie statt Karte.
     Mindesthoehe 44 px, wie jedes bedienbare Element.
   ============================================================ */

/* --- Kopf --- */
body .mcc-library-sidebar .mcc-library-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 18px 14px !important;
    background: var(--m-weiss, #fff) !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}
body .mcc-library-sidebar .mcc-library-header::after {
    content: '' !important;
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 0 !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: linear-gradient(90deg, #3D7C85 0%, #3D7C85 22%, #E8924F 45%, rgba(232,146,79,.25) 75%, rgba(232,146,79,0) 100%) !important;
}
body .mcc-library-sidebar .mcc-library-header h3 {
    flex: 1 !important;
    margin: 0 !important;
    font-family: 'Akko', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--m-tinte, #111416) !important;
}
body .mcc-library-sidebar .mcc-library-close {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: var(--m-weiss, #fff) !important;
    border: 1.5px solid var(--m-linie, #e4e6e6) !important;
    border-radius: var(--m-radius, 10px) !important;
    color: var(--m-tinte, #111416) !important;
    font-size: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: var(--m-uebergang, .18s cubic-bezier(.4,0,.2,1)) !important;
}
body .mcc-library-sidebar .mcc-library-close:hover {
    border-color: var(--m-teal, #3D7C85) !important;
    color: var(--m-teal, #3D7C85) !important;
    background: var(--m-weiss, #fff) !important;
    transform: none !important;
}

/* --- Reiter --- */
body .mcc-library-sidebar .mcc-library-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 14px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
body .mcc-library-sidebar .mcc-library-tabs .mcc-tab {
    flex: 0 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    background: none !important;
    background-image: none !important;
    border: none !important;
    border-radius: var(--m-radius-reiter, 9px) !important;
    font-family: 'Akko', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--m-gedaempft, #4a5658) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer !important;
    transition: var(--m-uebergang, .18s cubic-bezier(.4,0,.2,1)) !important;
}
body .mcc-library-sidebar .mcc-library-tabs .mcc-tab:hover {
    background: none !important;
    color: var(--m-teal, #3D7C85) !important;
    transform: none !important;
}
body .mcc-library-sidebar .mcc-library-tabs .mcc-tab.active {
    background: var(--m-weiss, #fff) !important;
    color: var(--m-teal, #3D7C85) !important;
    box-shadow: var(--m-karte, 0 1px 4px rgba(0,0,0,.12)) !important;
}
/* Nur «color» setzen — die Zeichnungen sind gefuellt (fill=currentColor). */
body .mcc-library-sidebar .mcc-library-tabs .mcc-tab svg {
    width: 16px !important;
    height: 16px !important;
    color: inherit !important;
    flex: 0 0 auto !important;
}

/* --- Zeilen --- */
body .mcc-library-sidebar .mcc-song-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 6px !important;
}
body .mcc-library-sidebar .mcc-song-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    background: none !important;
    border: none !important;
    border-bottom: 1px solid var(--m-kartenlinie, #EDF2F2) !important;
    border-radius: var(--m-radius, 10px) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer !important;
    transition: background var(--m-uebergang, .18s) !important;
}
body .mcc-library-sidebar .mcc-song-item:last-child {
    border-bottom: none !important;
}
body .mcc-library-sidebar .mcc-song-item:hover {
    background: var(--m-teal-l, #EEF3F4) !important;
    transform: none !important;
}
body .mcc-library-sidebar .mcc-song-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-family: 'Akko', sans-serif !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    color: var(--m-tinte, #111416) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
body .mcc-library-sidebar .mcc-song-artist {
    flex: 0 1 auto !important;
    max-width: 45% !important;
    text-align: right !important;
    font-family: 'Akko', sans-serif !important;
    font-size: .88rem !important;
    color: var(--m-gedaempft, #4a5658) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
body .mcc-library-sidebar .mcc-empty-list {
    padding: 28px 16px !important;
    text-align: center !important;
    font-family: 'Akko', sans-serif !important;
    color: var(--m-gedaempft, #4a5658) !important;
}

/* --- Neue Playlist: Feld und Knopf nach C2 und A4 --- */
body .mcc-library-sidebar .mcc-create-playlist-inline {
    display: flex !important;
    gap: 8px !important;
    padding: 10px 12px 14px !important;
}
body .mcc-library-sidebar .mcc-input-sm {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 .75rem !important;
    background: var(--m-weiss, #fff) !important;
    border: 1.5px solid var(--m-linie, #e4e6e6) !important;
    border-radius: var(--m-radius, 10px) !important;
    font-family: 'Akko', sans-serif !important;
    font-size: .92rem !important;
    color: var(--m-tinte, #111416) !important;
}
body .mcc-library-sidebar .mcc-input-sm:focus {
    outline: none !important;
    border-color: var(--m-teal, #3D7C85) !important;
    box-shadow: 0 0 0 3px rgba(61,124,133,.15) !important;
}
body .mcc-library-sidebar .mcc-btn-sm {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: var(--m-teal, #3D7C85) !important;
    background-image: none !important;
    border: 1.5px solid var(--m-teal, #3D7C85) !important;
    border-radius: var(--m-radius, 10px) !important;
    color: var(--m-weiss, #fff) !important;
    font-family: 'Akko', sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

/* ============================================================
   v4.32.398 — Die drei Reiter passen auf eine Zeile.

   Sie sind vorher umgebrochen, weil jeder seine natuerliche Breite
   behielt und «Vorschlaege» mit Zeichen und Polsterung zu breit
   wurde. Jetzt teilen sich die drei den Platz zu gleichen Teilen
   («flex:1 1 0» plus «min-width:0»), Schrift und Polsterung eine
   Spur knapper. Umgebrochen wird nicht mehr.

   Dazu: Bearbeiten und Loeschen tragen SVG statt Emoji — die
   Knoepfe bekommen hier die Form der Symbolaktion (A4).
   ============================================================ */
body .mcc-library-sidebar .mcc-library-tabs {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 10px 12px !important;
}
body .mcc-library-sidebar .mcc-library-tabs .mcc-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    gap: 6px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}
body .mcc-library-sidebar .mcc-library-tabs .mcc-tab svg {
    width: 15px !important;
    height: 15px !important;
}

/* Bearbeiten und Loeschen als Symbolaktion */
body .mcc-library-sidebar .mcc-btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    background: var(--m-weiss, #fff) !important;
    border: 1.5px solid var(--m-linie, #e4e6e6) !important;
    border-radius: var(--m-radius, 10px) !important;
    color: var(--m-gedaempft, #4a5658) !important;
    font-size: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: var(--m-uebergang, .18s cubic-bezier(.4,0,.2,1)) !important;
}
body .mcc-library-sidebar .mcc-btn-icon svg {
    width: 17px !important;
    height: 17px !important;
    color: inherit !important;
}
body .mcc-library-sidebar .mcc-edit-playlist:hover {
    border-color: var(--m-teal, #3D7C85) !important;
    color: var(--m-teal, #3D7C85) !important;
}
body .mcc-library-sidebar .mcc-delete-playlist:hover {
    border-color: var(--m-gefahr, #C0392B) !important;
    color: var(--m-gefahr, #C0392B) !important;
}

/* ==========================================================
   MELDO 4.32.399 — EMOJI-RESTE RAUS

   Die letzten Stellen, an denen noch ein Emoji statt eines
   Zeichens aus MCC_Icons stand: Statistik-Karten, Favorit,
   die Premium-Schlösser — und diese sechs, die im CSS als
   «content» festgeschrieben waren.

   Ein Emoji im «content» lässt sich nicht einfärben und sieht
   auf jedem Gerät anders aus (Apple, Android und Windows
   liefern eigene Bilder). Darum dasselbe SVG wie im übrigen
   Plugin, hier als Maske: «background-color: currentColor»
   heisst, das Zeichen nimmt die Schriftfarbe seiner Umgebung
   an — genau das, was ein Emoji nie konnte.
   ========================================================== */

.mcc-xml-player-title::before,
.mcc-favorites-grid .mcc-song-card::before,
.mcc-premium-publisher::before,
.mcc-premium-instrumentation::before,
.mcc-feature-locked::after,
.mcc-pa-easy-key-toggle::before {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.mcc-xml-player-title::before {
  content: '' !important;
  width: 20px !important;
  height: 20px !important;
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 135.36 121.99%22 fill=%22black%22><path d=%22M125.23,121.99H10.14C4.55,121.99,0,117.45,0,111.86V10.13C0,4.54,4.55,0,10.14,0h115.1c5.59,0,10.13,4.54,10.13,10.13v101.73c0,5.59-4.55,10.13-10.13,10.13ZM10.14,3.41c-3.7,0-6.72,3.01-6.72,6.72v101.73c0,3.7,3.01,6.72,6.72,6.72h115.1c3.7,0,6.72-3.01,6.72-6.72V10.13c0-3.7-3.01-6.72-6.72-6.72H10.14Z%22/> <path d=%22M133.65,24.27H1.71c-.94,0-1.71-.76-1.71-1.71s.76-1.71,1.71-1.71h131.95c.94,0,1.71.76,1.71,1.71s-.76,1.71-1.71,1.71Z%22/> <path d=%22M20.49,13.84h-3.79c-.94,0-1.71-.76-1.71-1.71s.76-1.71,1.71-1.71h3.79c.94,0,1.71.76,1.71,1.71s-.76,1.71-1.71,1.71Z%22/> <path d=%22M33.3,13.84h-3.78c-.94,0-1.71-.76-1.71-1.71s.76-1.71,1.71-1.71h3.78c.94,0,1.71.76,1.71,1.71s-.76,1.71-1.71,1.71Z%22/> <path d=%22M46.1,13.84h-3.79c-.94,0-1.71-.76-1.71-1.71s.76-1.71,1.71-1.71h3.79c.94,0,1.71.76,1.71,1.71s-.76,1.71-1.71,1.71Z%22/> <g> <path d=%22M96.33,77.2c-.44,0-.87-.17-1.21-.5-.67-.67-.67-1.75,0-2.41,2.99-2.99,2.99-7.86,0-10.85-.67-.67-.67-1.75,0-2.41.67-.67,1.75-.67,2.41,0,2.1,2.09,3.25,4.88,3.25,7.84s-1.15,5.75-3.25,7.84c-.33.33-.77.5-1.21.5Z%22/> <path d=%22M102.93,83.81c-.44,0-.87-.17-1.21-.5-.67-.67-.67-1.75,0-2.41,3.21-3.21,4.98-7.48,4.98-12.03s-1.77-8.82-4.98-12.03c-.67-.67-.67-1.75,0-2.41s1.75-.67,2.41,0c3.86,3.86,5.98,8.99,5.98,14.44s-2.12,10.58-5.98,14.44c-.33.33-.77.5-1.21.5Z%22/> <path d=%22M109.35,90.22c-.44,0-.87-.17-1.21-.5-.67-.67-.67-1.75,0-2.41,4.93-4.93,7.64-11.48,7.64-18.45s-2.71-13.52-7.64-18.45c-.67-.67-.67-1.75,0-2.41s1.75-.67,2.41,0c5.57,5.57,8.64,12.98,8.64,20.86s-3.07,15.29-8.64,20.86c-.33.33-.77.5-1.21.5Z%22/> </g> <g> <path d=%22M39.03,77.2c-.44,0-.87-.17-1.21-.5-2.1-2.09-3.25-4.88-3.25-7.84s1.15-5.75,3.25-7.84c.67-.67,1.75-.67,2.41,0,.67.67.67,1.75,0,2.41-2.99,2.99-2.99,7.86,0,10.85.67.67.67,1.75,0,2.41-.33.33-.77.5-1.21.5Z%22/> <path d=%22M32.43,83.81c-.44,0-.87-.17-1.21-.5-3.86-3.86-5.98-8.99-5.98-14.44s2.12-10.59,5.98-14.44c.67-.67,1.75-.67,2.41,0,.67.67.67,1.75,0,2.41-3.21,3.21-4.98,7.48-4.98,12.03s1.77,8.82,4.98,12.03c.67.67.67,1.75,0,2.41-.33.33-.77.5-1.21.5Z%22/> <path d=%22M26.02,90.22c-.44,0-.87-.17-1.21-.5-5.57-5.57-8.64-12.98-8.64-20.86s3.07-15.29,8.64-20.86c.67-.67,1.75-.67,2.41,0,.67.67.67,1.75,0,2.41-4.93,4.93-7.64,11.48-7.64,18.45s2.71,13.52,7.64,18.45c.67.67.67,1.75,0,2.41-.33.33-.77.5-1.21.5Z%22/> </g> <path d=%22M55.75,84.29c-2.77,0-5.27-1.38-6.31-3.76-1.46-3.38.55-7.52,4.5-9.23,1.85-.8,3.87-.96,5.67-.45,1.93.55,3.4,1.78,4.13,3.48,1.46,3.38-.56,7.52-4.5,9.22-1.16.5-2.35.74-3.5.74ZM57.45,73.96c-.71,0-1.45.16-2.16.46-2.18.94-3.43,3.11-2.72,4.74.7,1.62,3.14,2.2,5.32,1.25,2.18-.94,3.42-3.11,2.72-4.74-.32-.74-1.01-1.29-1.93-1.55-.39-.11-.8-.17-1.22-.17Z%22/> <path d=%22M75.18,89.7c-.73,0-1.46-.1-2.15-.29-1.93-.55-3.4-1.78-4.13-3.48-1.46-3.38.55-7.52,4.5-9.22,1.85-.8,3.86-.96,5.67-.45,1.93.55,3.4,1.78,4.13,3.48,1.46,3.38-.56,7.52-4.5,9.22-1.14.49-2.34.75-3.52.75ZM76.9,79.37c-.71,0-1.45.16-2.16.46-2.18.94-3.42,3.11-2.72,4.74.32.74,1.01,1.29,1.93,1.55,1.05.3,2.26.19,3.39-.3,2.18-.94,3.42-3.11,2.72-4.74-.32-.74-1.01-1.29-1.93-1.55-.39-.11-.8-.17-1.22-.17Z%22/> <path d=%22M81.96,83.6c-.94,0-1.71-.76-1.71-1.71v-25.45l-16.04-4.46v24.51c0,.94-.76,1.71-1.71,1.71s-1.71-.76-1.71-1.71v-26.75c0-.53.25-1.04.67-1.36s.98-.43,1.49-.29l19.45,5.41c.74.21,1.25.88,1.25,1.64v26.75c0,.94-.76,1.71-1.71,1.71Z%22/> <path d=%22M81.96,64.3c-.15,0-.3-.02-.46-.06l-19.45-5.41c-.91-.25-1.44-1.19-1.19-2.1.25-.91,1.19-1.44,2.1-1.19l19.45,5.41c.91.25,1.44,1.19,1.19,2.1-.21.75-.9,1.25-1.64,1.25Z%22/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 135.36 121.99%22 fill=%22black%22><path d=%22M125.23,121.99H10.14C4.55,121.99,0,117.45,0,111.86V10.13C0,4.54,4.55,0,10.14,0h115.1c5.59,0,10.13,4.54,10.13,10.13v101.73c0,5.59-4.55,10.13-10.13,10.13ZM10.14,3.41c-3.7,0-6.72,3.01-6.72,6.72v101.73c0,3.7,3.01,6.72,6.72,6.72h115.1c3.7,0,6.72-3.01,6.72-6.72V10.13c0-3.7-3.01-6.72-6.72-6.72H10.14Z%22/> <path d=%22M133.65,24.27H1.71c-.94,0-1.71-.76-1.71-1.71s.76-1.71,1.71-1.71h131.95c.94,0,1.71.76,1.71,1.71s-.76,1.71-1.71,1.71Z%22/> <path d=%22M20.49,13.84h-3.79c-.94,0-1.71-.76-1.71-1.71s.76-1.71,1.71-1.71h3.79c.94,0,1.71.76,1.71,1.71s-.76,1.71-1.71,1.71Z%22/> <path d=%22M33.3,13.84h-3.78c-.94,0-1.71-.76-1.71-1.71s.76-1.71,1.71-1.71h3.78c.94,0,1.71.76,1.71,1.71s-.76,1.71-1.71,1.71Z%22/> <path d=%22M46.1,13.84h-3.79c-.94,0-1.71-.76-1.71-1.71s.76-1.71,1.71-1.71h3.79c.94,0,1.71.76,1.71,1.71s-.76,1.71-1.71,1.71Z%22/> <g> <path d=%22M96.33,77.2c-.44,0-.87-.17-1.21-.5-.67-.67-.67-1.75,0-2.41,2.99-2.99,2.99-7.86,0-10.85-.67-.67-.67-1.75,0-2.41.67-.67,1.75-.67,2.41,0,2.1,2.09,3.25,4.88,3.25,7.84s-1.15,5.75-3.25,7.84c-.33.33-.77.5-1.21.5Z%22/> <path d=%22M102.93,83.81c-.44,0-.87-.17-1.21-.5-.67-.67-.67-1.75,0-2.41,3.21-3.21,4.98-7.48,4.98-12.03s-1.77-8.82-4.98-12.03c-.67-.67-.67-1.75,0-2.41s1.75-.67,2.41,0c3.86,3.86,5.98,8.99,5.98,14.44s-2.12,10.58-5.98,14.44c-.33.33-.77.5-1.21.5Z%22/> <path d=%22M109.35,90.22c-.44,0-.87-.17-1.21-.5-.67-.67-.67-1.75,0-2.41,4.93-4.93,7.64-11.48,7.64-18.45s-2.71-13.52-7.64-18.45c-.67-.67-.67-1.75,0-2.41s1.75-.67,2.41,0c5.57,5.57,8.64,12.98,8.64,20.86s-3.07,15.29-8.64,20.86c-.33.33-.77.5-1.21.5Z%22/> </g> <g> <path d=%22M39.03,77.2c-.44,0-.87-.17-1.21-.5-2.1-2.09-3.25-4.88-3.25-7.84s1.15-5.75,3.25-7.84c.67-.67,1.75-.67,2.41,0,.67.67.67,1.75,0,2.41-2.99,2.99-2.99,7.86,0,10.85.67.67.67,1.75,0,2.41-.33.33-.77.5-1.21.5Z%22/> <path d=%22M32.43,83.81c-.44,0-.87-.17-1.21-.5-3.86-3.86-5.98-8.99-5.98-14.44s2.12-10.59,5.98-14.44c.67-.67,1.75-.67,2.41,0,.67.67.67,1.75,0,2.41-3.21,3.21-4.98,7.48-4.98,12.03s1.77,8.82,4.98,12.03c.67.67.67,1.75,0,2.41-.33.33-.77.5-1.21.5Z%22/> <path d=%22M26.02,90.22c-.44,0-.87-.17-1.21-.5-5.57-5.57-8.64-12.98-8.64-20.86s3.07-15.29,8.64-20.86c.67-.67,1.75-.67,2.41,0,.67.67.67,1.75,0,2.41-4.93,4.93-7.64,11.48-7.64,18.45s2.71,13.52,7.64,18.45c.67.67.67,1.75,0,2.41-.33.33-.77.5-1.21.5Z%22/> </g> <path d=%22M55.75,84.29c-2.77,0-5.27-1.38-6.31-3.76-1.46-3.38.55-7.52,4.5-9.23,1.85-.8,3.87-.96,5.67-.45,1.93.55,3.4,1.78,4.13,3.48,1.46,3.38-.56,7.52-4.5,9.22-1.16.5-2.35.74-3.5.74ZM57.45,73.96c-.71,0-1.45.16-2.16.46-2.18.94-3.43,3.11-2.72,4.74.7,1.62,3.14,2.2,5.32,1.25,2.18-.94,3.42-3.11,2.72-4.74-.32-.74-1.01-1.29-1.93-1.55-.39-.11-.8-.17-1.22-.17Z%22/> <path d=%22M75.18,89.7c-.73,0-1.46-.1-2.15-.29-1.93-.55-3.4-1.78-4.13-3.48-1.46-3.38.55-7.52,4.5-9.22,1.85-.8,3.86-.96,5.67-.45,1.93.55,3.4,1.78,4.13,3.48,1.46,3.38-.56,7.52-4.5,9.22-1.14.49-2.34.75-3.52.75ZM76.9,79.37c-.71,0-1.45.16-2.16.46-2.18.94-3.42,3.11-2.72,4.74.32.74,1.01,1.29,1.93,1.55,1.05.3,2.26.19,3.39-.3,2.18-.94,3.42-3.11,2.72-4.74-.32-.74-1.01-1.29-1.93-1.55-.39-.11-.8-.17-1.22-.17Z%22/> <path d=%22M81.96,83.6c-.94,0-1.71-.76-1.71-1.71v-25.45l-16.04-4.46v24.51c0,.94-.76,1.71-1.71,1.71s-1.71-.76-1.71-1.71v-26.75c0-.53.25-1.04.67-1.36s.98-.43,1.49-.29l19.45,5.41c.74.21,1.25.88,1.25,1.64v26.75c0,.94-.76,1.71-1.71,1.71Z%22/> <path d=%22M81.96,64.3c-.15,0-.3-.02-.46-.06l-19.45-5.41c-.91-.25-1.44-1.19-1.19-2.1.25-.91,1.19-1.44,2.1-1.19l19.45,5.41c.91.25,1.44,1.19,1.19,2.1-.21.75-.9,1.25-1.64,1.25Z%22/></svg>");
  vertical-align: -3px;
}

.mcc-favorites-grid .mcc-song-card::before {
  content: '' !important;
  width: 20px !important;
  height: 20px !important;
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5%22/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5%22/></svg>");
  color: #E8924F;
}

.mcc-premium-publisher::before {
  content: '' !important;
  width: 14px !important;
  height: 14px !important;
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20%22/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20%22/></svg>");
  vertical-align: -2px;
  margin-right: 6px;
}

.mcc-premium-instrumentation::before {
  content: '' !important;
  width: 14px !important;
  height: 14px !important;
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 469.932 469.932%22 fill=%22black%22><path d=%22M109.936,294.787c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606l65.21,65.21 c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606L109.936,294.787z%22/><path d=%22M467.735,39.277l-37.08-37.08c-2.929-2.929-7.677-2.929-10.604-0.002l-8.104,8.104l-5.792-5.792 c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606l5.792,5.792l-5.629,5.628l-5.797-5.797 c-2.928-2.929-7.677-2.929-10.606,0c-2.929,2.929-2.929,7.677,0,10.606l5.797,5.797l-5.624,5.624l-5.797-5.797 c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.677,0,10.606l5.797,5.797L256.624,165.622 c-38.947-18.828-86.417-11.053-117.28,19.82c-4.67,4.662-8.899,9.791-12.606,15.286c-32.989,1.932-63.872,15.772-87.339,39.229 c-52.531,52.542-52.531,138.034,0.001,190.577c26.271,26.266,60.778,39.398,95.287,39.398c34.509,0,69.019-13.134,95.29-39.4 c23.456-23.466,37.295-54.348,39.228-87.337c5.496-3.708,10.624-7.936,15.28-12.601c30.879-30.869,38.654-78.339,19.826-117.286 l104.145-104.145l8.107-8.106l5.797,5.796c1.464,1.465,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197 c2.929-2.929,2.929-7.678,0-10.606l-5.797-5.796l5.624-5.624l5.797,5.796c1.464,1.465,3.384,2.197,5.303,2.197 s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-5.797-5.796l5.629-5.628l5.792,5.792 c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-5.792-5.792l8.104-8.104 C470.665,46.952,470.664,42.205,467.735,39.277z M427.489,68.917l-24.336,24.336L376.679,66.78l8.097-8.097 c0.019-0.02,16.218-16.219,16.218-16.219c0.042-0.042,24.357-24.359,24.357-24.359l26.478,26.478L427.489,68.917z M254.386,338.779 c-0.901,30.64-13.337,59.459-35.016,81.147c-46.695,46.684-122.671,46.684-169.364,0.001 C3.322,373.234,3.322,297.257,50.004,250.564c21.689-21.68,50.509-34.116,81.148-35.018c2.517-0.074,4.829-1.406,6.155-3.547 c3.589-5.793,7.84-11.157,12.639-15.947c25.1-25.108,63.052-32.331,95.332-19.086l-47.613,47.604 c-1.865-0.195-3.74-0.305-5.611-0.305c-14.309,0-27.767,5.572-37.897,15.693c-20.89,20.902-20.89,54.912,0.003,75.817 c10.127,10.121,23.589,15.695,37.907,15.695c14.318,0,27.78-5.574,37.911-15.699c11.468-11.479,17.054-27.493,15.379-43.5 l47.609-47.617c13.245,32.28,6.02,70.233-19.092,95.338c-4.785,4.793-10.148,9.043-15.941,12.633 C255.792,333.951,254.46,336.263,254.386,338.779z M199,239.891c7.741,1.397,14.785,5.088,20.369,10.672 c5.585,5.585,9.275,12.629,10.674,20.376c2.264,12.476-1.727,25.272-10.672,34.226c-7.294,7.29-16.991,11.305-27.304,11.305 c-10.313,0-20.009-4.015-27.3-11.302c-15.046-15.055-15.046-39.552-0.004-54.603c7.294-7.287,16.986-11.3,27.292-11.3 C194.376,239.265,196.711,239.475,199,239.891z M289.838,206.568l-0.12,0.12c-0.002,0.002-48.887,48.896-48.887,48.896 c-2.632-5.77-6.282-11.054-10.855-15.627c-4.574-4.573-9.858-8.224-15.627-10.855l48.894-48.885 c0.002-0.002,0.123-0.123,0.123-0.123L366.072,77.386l26.474,26.474L289.838,206.568z%22/><path d=%22M154.164,404.094c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S158.575,404.094,154.164,404.094z%22/><path d=%22M124.164,414.094c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S128.575,414.094,124.164,414.094z%22/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 469.932 469.932%22 fill=%22black%22><path d=%22M109.936,294.787c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606l65.21,65.21 c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606L109.936,294.787z%22/><path d=%22M467.735,39.277l-37.08-37.08c-2.929-2.929-7.677-2.929-10.604-0.002l-8.104,8.104l-5.792-5.792 c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606l5.792,5.792l-5.629,5.628l-5.797-5.797 c-2.928-2.929-7.677-2.929-10.606,0c-2.929,2.929-2.929,7.677,0,10.606l5.797,5.797l-5.624,5.624l-5.797-5.797 c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.677,0,10.606l5.797,5.797L256.624,165.622 c-38.947-18.828-86.417-11.053-117.28,19.82c-4.67,4.662-8.899,9.791-12.606,15.286c-32.989,1.932-63.872,15.772-87.339,39.229 c-52.531,52.542-52.531,138.034,0.001,190.577c26.271,26.266,60.778,39.398,95.287,39.398c34.509,0,69.019-13.134,95.29-39.4 c23.456-23.466,37.295-54.348,39.228-87.337c5.496-3.708,10.624-7.936,15.28-12.601c30.879-30.869,38.654-78.339,19.826-117.286 l104.145-104.145l8.107-8.106l5.797,5.796c1.464,1.465,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197 c2.929-2.929,2.929-7.678,0-10.606l-5.797-5.796l5.624-5.624l5.797,5.796c1.464,1.465,3.384,2.197,5.303,2.197 s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-5.797-5.796l5.629-5.628l5.792,5.792 c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-5.792-5.792l8.104-8.104 C470.665,46.952,470.664,42.205,467.735,39.277z M427.489,68.917l-24.336,24.336L376.679,66.78l8.097-8.097 c0.019-0.02,16.218-16.219,16.218-16.219c0.042-0.042,24.357-24.359,24.357-24.359l26.478,26.478L427.489,68.917z M254.386,338.779 c-0.901,30.64-13.337,59.459-35.016,81.147c-46.695,46.684-122.671,46.684-169.364,0.001 C3.322,373.234,3.322,297.257,50.004,250.564c21.689-21.68,50.509-34.116,81.148-35.018c2.517-0.074,4.829-1.406,6.155-3.547 c3.589-5.793,7.84-11.157,12.639-15.947c25.1-25.108,63.052-32.331,95.332-19.086l-47.613,47.604 c-1.865-0.195-3.74-0.305-5.611-0.305c-14.309,0-27.767,5.572-37.897,15.693c-20.89,20.902-20.89,54.912,0.003,75.817 c10.127,10.121,23.589,15.695,37.907,15.695c14.318,0,27.78-5.574,37.911-15.699c11.468-11.479,17.054-27.493,15.379-43.5 l47.609-47.617c13.245,32.28,6.02,70.233-19.092,95.338c-4.785,4.793-10.148,9.043-15.941,12.633 C255.792,333.951,254.46,336.263,254.386,338.779z M199,239.891c7.741,1.397,14.785,5.088,20.369,10.672 c5.585,5.585,9.275,12.629,10.674,20.376c2.264,12.476-1.727,25.272-10.672,34.226c-7.294,7.29-16.991,11.305-27.304,11.305 c-10.313,0-20.009-4.015-27.3-11.302c-15.046-15.055-15.046-39.552-0.004-54.603c7.294-7.287,16.986-11.3,27.292-11.3 C194.376,239.265,196.711,239.475,199,239.891z M289.838,206.568l-0.12,0.12c-0.002,0.002-48.887,48.896-48.887,48.896 c-2.632-5.77-6.282-11.054-10.855-15.627c-4.574-4.573-9.858-8.224-15.627-10.855l48.894-48.885 c0.002-0.002,0.123-0.123,0.123-0.123L366.072,77.386l26.474,26.474L289.838,206.568z%22/><path d=%22M154.164,404.094c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S158.575,404.094,154.164,404.094z%22/><path d=%22M124.164,414.094c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S128.575,414.094,124.164,414.094z%22/></svg>");
  vertical-align: -2px;
  margin-right: 6px;
}

.mcc-feature-locked::after {
  content: '' !important;
  width: 10px !important;
  height: 10px !important;
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><rect width=%2218%22 height=%2211%22 x=%223%22 y=%2211%22 rx=%222%22 ry=%222%22/><path d=%22M7 11V7a5 5 0 0 1 10 0v4%22/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><rect width=%2218%22 height=%2211%22 x=%223%22 y=%2211%22 rx=%222%22 ry=%222%22/><path d=%22M7 11V7a5 5 0 0 1 10 0v4%22/></svg>");
}

.mcc-pa-easy-key-toggle::before {
  content: '' !important;
  width: 12px !important;
  height: 12px !important;
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M13 2 3 14h9l-1 8 10-12h-9l1-8z%22/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M13 2 3 14h9l-1 8 10-12h-9l1-8z%22/></svg>");
  vertical-align: -1px;
}

/* Das Wort stand bisher im selben «content» wie der Blitz —
   jetzt trägt es das ::after, damit die Maske oben allein das
   Zeichen ist. */
.mcc-pa-easy-key-toggle::after { content: "Auto" !important; }

/* Die Zeichen, die jetzt im Markup stehen (Statistik, Premium,
   Schlösser), brauchen eine Grösse — ein <svg> ohne Regel wird
   sonst 300×150. Breite und Höhe stehen am Element selbst, hier
   steht nur, wie es im Textfluss sitzt. */
.mcc-stems-locked-icon svg,
.mcc-pdf-lock-icon svg,
.mcc-premium-lock-overlay svg,
.mcc-np-adj-lock svg,
.mcc-pa-ts-lock svg,
.mcc-bundle-access-badge svg,
.mcc-premium-song-tag svg,
.mcc-thumbnail-overlay svg,
.mcc-btn-preview-abo svg,
.mcc-stems-membership-link svg,
.mcc-inline-icon {
  display: inline-block;
  vertical-align: -2px;
  flex-shrink: 0;
}

/* Favorit: leer und voll ist dasselbe Zeichen, der Unterschied
   ist die Farbe. Vorher waren es zwei verschiedene Emoji. */
.mcc-favorite-icon .mcc-favorite-svg { color: #b9bfc4; transition: color .18s ease; }
.mcc-favorite-btn.is-favorite .mcc-favorite-icon .mcc-favorite-svg { color: #E74C3C; }

/* Die Behälter, in denen vorher ein Emoji stand, waren über
   «font-size» bemessen — ein SVG hört darauf nicht. Hier steht,
   wie es sitzt; die Grösse gibt der Aufruf im Code mit. */
.mcc-thumbnail-icon svg,
.mcc-preview-icon svg,
.mcc-audio-icon svg,
.mcc-audio-visual svg,
.mcc-xml-icon svg,
.mcc-xml-fallback-icon svg,
.mcc-download-icon svg,
.mcc-cta-icon svg,
.mcc-cta-btn-icon svg,
.mcc-end-icon svg,
.mcc-unavailable-icon svg,
.mcc-preview-badge svg,
.mcc-empty-icon svg,
.mcc-player-no-videos-icon svg,
.mcc-material-section-title svg,
.mcc-section-title svg,
.mcc-widget-title svg,
.mcc-uploader-avatar svg,
.mcc-bundle-cover-placeholder svg,
.mcc-top-contributor-badge svg,
.mcc-top-badge svg,
.mcc-uploader-badge svg,
.mcc-uploader svg,
.mcc-btn-newtab svg,
.mcc-document-hint svg,
.mcc-np-lyrics-placeholder svg,
.mcc-player-karaoke-placeholder svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  color: inherit;
}

/* Die leeren Zustände hatten ein grosses Emoji als Blickfang.
   Damit die Fläche gleich bleibt, bekommt das Zeichen dieselbe
   Zurückhaltung: gedämpfte Farbe statt bunter Grafik. */
.mcc-empty-icon svg,
.mcc-player-no-videos-icon svg,
.mcc-bundle-cover-placeholder svg {
  color: var(--m-teal, #3D7C85);
  opacity: .45;
}

/* MELDO 4.32.400 — Zeichen in Spieler, Karaoke, Play-Along und
   Song-Info. Auch hier galt die Grösse vorher über «font-size»;
   ein SVG hört darauf nicht. Die Masse gibt der Aufruf mit, hier
   steht nur, wie das Zeichen im Textfluss sitzt. */
.mcc-btn-icon svg,
.mcc-activity-icon svg,
.mcc-guest-notice-icon svg,
.mcc-print-multipage-icon svg,
.mcc-membership-modal-icon svg,
.mcc-btn-membership svg,
.mcc-player-stems-btn svg,
.mcc-pk-create-btn svg,
.mcc-stem-generate-btn svg,
.mcc-stem-mini-generate svg,
.mcc-player-karaoke-placeholder svg,
.mcc-np-lyrics-placeholder svg,
.mcc-thumbnail-placeholder svg,
.mcc-thumbnail-visual svg,
.mcc-karaoke-extra-note svg,
.mcc-si-tech-icon svg,
.mcc-si-var-label svg,
.mcc-si-scenario svg,
.mcc-si-quiz-result-icon svg,
.mcc-si-quiz-feedback-icon svg,
.mcc-pa-first-icon svg,
.mcc-play-along-error-icon svg,
.mcc-song-wf-switch-text svg,
.mcc-split-opt-btn svg,
.mcc-perc-body-btn svg,
.mcc-perc-mute-btn svg,
.mcc-builder-insert-choice svg,
.mcc-bundle-song-thumb-placeholder svg,
.mcc-promo-card-placeholder svg {
  display: inline-block;
  vertical-align: -2px;
  flex-shrink: 0;
  color: inherit;
}

/* Grosse Blickfänge bleiben zurückhaltend — vorher war dort ein
   buntes Emoji, jetzt ein einfarbiges Zeichen. */
.mcc-membership-modal-icon svg,
.mcc-guest-notice-icon svg,
.mcc-thumbnail-placeholder svg,
.mcc-bundle-song-thumb-placeholder svg,
.mcc-promo-card-placeholder svg {
  color: var(--m-teal, #3D7C85);
  opacity: .5;
}
.mcc-si-quiz-result-icon svg { color: var(--m-lime, #E8924F); opacity: 1; }

/* ============================================================
   v4.32.403: Vollbild nutzt die ganze Fensterbreite.

   Auf der Seite haelt «width: calc(100% - 48px)» (v4.32.185 /
   v4.32.382) Kopf, Suche und Inhalt von den Raendern weg — neben
   der BuddyPanel-Spalte ist das richtig. Im Vollbild ist derselbe
   Rand nur verschenkter Platz: die Leiste stand mit 24 px Luft
   links und rechts im sonst leeren Fenster.

   Steht bewusst am Dateiende und traegt «body» im Selektor: die
   Seitenregel ist gleich spezifisch (0,3,0) und steht weiter oben;
   ohne das zusaetzliche Element gaebe es ein Patt, das die
   Seitenregel gewinnt.
   ============================================================ */
body .mcc-app.mcc-fullscreen .mcc-main-content,
body .mcc-app.mcc-fullscreen .mcc-song-display,
body .mcc-app.mcc-fullscreen .mcc-song-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Die Ebene selbst: kein Rand aus der Seitenvorlage, kein
   Full-Bleed-Trick aus der Mobilregel (margin: 50% - 50vw). */
body .mcc-app.mcc-fullscreen {
    margin: 0 !important;
    padding: 0 !important;
}