/* Cool Music Downloads – Frontend */
/* Desktop: 2-spaltig (Auto-fit, damit es auch in schmalen Containern sauber auf 1 Spalte fällt) */
.cm-tracks-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(520px,1fr));gap:16px}
.cm-tracks-wrap>.cm-empty{grid-column:1/-1}

@media (max-width:1120px){
    .cm-tracks-wrap{grid-template-columns:1fr}
}
.cm-track-filter{display:flex;align-items:flex-end;gap:12px 14px;margin:0 0 10px;flex-wrap:wrap}
.cm-track-filter label{display:flex;flex-direction:column;gap:6px}
.cm-track-filter span{color:var(--cm-border,#e2d2ad);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:13px;opacity:.95}
.cm-track-filter select,.cm-track-filter input[type="search"]{
    background:#0f1518;border:1px solid rgba(226,210,173,.65);color:#e2d2ad;border-radius:10px;padding:8px 10px;min-width:220px
}
.cm-filter-btn{
    background:var(--cm-dl,#6d1ea7);color:#fff;border:0;padding:10px 14px;border-radius:10px;cursor:pointer;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
.cm-filter-btn:hover{filter:brightness(1.05)}
@media (max-width:640px){
    .cm-track-filter select,.cm-track-filter input[type="search"]{min-width:0;width:100%}
    .cm-filter-btn{width:100%}
}

.cm-context-card{
    --cm-accent:#6dd3ff;--cm-dl:#6d1ea7;--cm-border:#e2d2ad;
    background:#0f1518;border:2px solid var(--cm-border);border-radius:14px;padding:14px;display:grid;grid-template-columns:140px 1fr;gap:16px;margin-bottom:10px
}
.cm-context-left{display:flex;gap:10px;align-items:flex-start}
.cm-context-cover{width:120px;height:120px;border-radius:12px;object-fit:cover}
.cm-context-cover.back{opacity:.92}
.cm-context-title{color:var(--cm-border);font-size:24px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.cm-context-desc{color:var(--cm-border);opacity:.9}
.cm-context-actions{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}

/* === Artist Profile ================================================= */
.cm-artist-profile{
    --cm-border:#e2d2ad;
    background:
        radial-gradient(1100px 260px at 20% 0%, rgba(109,30,167,.18), rgba(0,0,0,0) 62%),
        radial-gradient(1100px 260px at 80% 0%, rgba(109,211,255,.10), rgba(0,0,0,0) 62%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
    border: 1px solid rgba(226,210,173,.55);
    border-radius: 18px;
    padding: 18px;
    margin: 0 0 12px;
    box-shadow:
        0 18px 44px rgba(0,0,0,.50),
        0 0 0 1px rgba(255,255,255,.04) inset;
    position: relative;
    overflow: hidden;
}

.cm-artist-head{display:flex;gap:18px;align-items:flex-start}
.cm-artist-avatar{flex:0 0 auto}
.cm-artist-avatar img,.cm-artist-avatar-placeholder{
    width: 112px;
    height: 112px;
    border-radius: 16px;
    object-fit: cover;
    display:block;
    border: 1px solid rgba(226,210,173,.22);
    box-shadow: 0 12px 26px rgba(0,0,0,.42);
}
.cm-artist-avatar-placeholder{
    background: linear-gradient(135deg, rgba(226,210,173,.18), rgba(226,210,173,.06));
}

.cm-artist-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:10px}
.cm-artist-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cm-artist-name{
    color:var(--cm-border);
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size: clamp(22px, 2.3vw, 34px);
    line-height: 1.12;
    letter-spacing: .6px;
}
.cm-artist-stats{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cm-artist-stat{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(226,210,173,.35);
    background: rgba(226,210,173,.08);
    color:var(--cm-border);
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size:13px;
    white-space:nowrap;
}
.cm-artist-stat strong{font-weight:700}

.cm-artist-bio{color:var(--cm-border);opacity:.9;line-height:1.55}
.cm-artist-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

.cm-artist-imprint{
    background: rgba(0,0,0,.14);
    border: 1px solid rgba(226,210,173,.35);
    border-radius: 16px;
    padding: 12px 14px;
    margin: 0 0 12px;
    color: var(--cm-border);
}
.cm-artist-imprint summary{
    cursor:pointer;
    user-select:none;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    list-style:none;
}
.cm-artist-imprint summary::-webkit-details-marker{display:none}
.cm-artist-imprint summary::after{
    content:'+';
    width:28px;
    height:28px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(226,210,173,.35);
    background: rgba(226,210,173,.08);
    flex:0 0 auto;
}
.cm-artist-imprint[open] summary::after{content:'–'}
.cm-imprint-body{padding-top:10px;line-height:1.55;opacity:.95}
.cm-imprint-body a{color:var(--cm-accent,#6dd3ff)}
.cm-imprint-body a:hover{text-decoration:underline}

/* Buttons im Context einheitlich "buttony" */
.cm-download-album,.cm-artist-link{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--cm-dl);color:#fff;text-decoration:none;padding:10px 14px;border-radius:12px;
    box-shadow:0 10px 22px rgba(0,0,0,.22);
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    transition:filter .12s ease,transform .12s ease,box-shadow .12s ease;
}
.cm-download-album:hover,.cm-artist-link:hover{filter:brightness(1.05)}
.cm-download-album:active,.cm-artist-link:active{transform:scale(.985);box-shadow:0 6px 14px rgba(0,0,0,.18)}

.cm-track-card{
    --cm-accent:#6dd3ff; --cm-dl:#6d1ea7; --cm-border:#e2d2ad;
    background:#0f1518;border:2px solid var(--cm-border);border-radius:14px;padding:16px;
    display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:stretch;
    box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;
}
.cm-track-cover img,.cm-cover-placeholder{width:120px;height:120px;border-radius:12px;object-fit:cover;display:block}
.cm-cover-placeholder{background:linear-gradient(135deg, rgba(226,210,173,.18), rgba(226,210,173,.06))}

.cm-track-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.cm-track-title{
    color:var(--cm-border);font-size:32px;line-height:1.1;letter-spacing:1px;text-align:center;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;margin-bottom:2px;
}
.cm-track-link{color:inherit;text-decoration:none}
.cm-track-link:hover{text-decoration:underline}

.cm-track-style{color:var(--cm-border);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:18px;opacity:.95}

.cm-player{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center}
.cm-play{background:transparent;border:0;padding:0;cursor:pointer;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.cm-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.cm-icon svg{width:28px;height:28px;fill:var(--cm-accent);filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}
.cm-icon-pause{display:none}
.cm-player.is-playing .cm-icon-play{display:none}
.cm-player.is-playing .cm-icon-pause{display:flex}

.cm-progress-wrap{display:flex;flex-direction:column;gap:6px;min-width:0}
.cm-progress{
    -webkit-appearance:none;appearance:none;width:100%;height:12px;background:rgba(255,255,255,.14);
    border:2px solid rgba(255,255,255,.82);border-radius:999px;outline:none;
}
.cm-progress::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
    background:var(--cm-accent);border:2px solid rgba(0,0,0,.35);
}
.cm-progress::-moz-range-thumb{
    width:16px;height:16px;border-radius:50%;
    background:var(--cm-accent);border:2px solid rgba(0,0,0,.35);
}

.cm-time{color:var(--cm-border);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:14px;opacity:.95;display:flex;gap:8px}

.cm-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:0}
.cm-volume{display:flex;align-items:center;gap:8px;min-width:0}
.cm-vol-icon svg{width:18px;height:18px;fill:var(--cm-accent)}
.cm-volume-range{
    -webkit-appearance:none;appearance:none;width:120px;height:10px;border-radius:999px;background:rgba(255,255,255,.14);
    border:2px solid rgba(255,255,255,.82);outline:none;
}
.cm-volume-range::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
    background:var(--cm-accent);border:2px solid rgba(0,0,0,.35);
}
.cm-volume-range::-moz-range-thumb{
    width:14px;height:14px;border-radius:50%;
    background:var(--cm-accent);border:2px solid rgba(0,0,0,.35);
}

.cm-download-btn{
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--cm-dl);color:#fff;text-decoration:none;padding:10px 16px;border-radius:10px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size:16px;line-height:1;white-space:nowrap;
}
.cm-download-btn:hover{filter:brightness(1.05)}

.cm-track-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:2px}
.cm-meta{color:var(--cm-border);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:18px;display:flex;flex-direction:column;gap:2px}
.cm-meta a{color:var(--cm-accent);text-decoration:none}
.cm-meta a:hover{text-decoration:underline}
.cm-empty{color:#e2d2ad;opacity:.9}

/* Pagination */
.cm-pagination{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;justify-content:center}
.cm-page{display:inline-flex;align-items:center;justify-content:center;min-width:36px;padding:9px 12px;border-radius:999px;border:1px solid rgba(226,210,173,.55);color:#e2d2ad;text-decoration:none;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;transition:filter .12s ease,transform .12s ease,border-color .12s ease}
.cm-page:hover{filter:brightness(1.06)}
.cm-page:active{transform:scale(.985)}
.cm-page.current{background:rgba(226,210,173,.12);border-color:rgba(226,210,173,.85)}

/* Terms modal */
.cm-terms-overlay{position:fixed;inset:0;background:rgba(0,0,0,.68);display:flex;align-items:center;justify-content:center;padding:18px;z-index:99999}
.cm-terms-modal{width:min(640px,100%);background:#0f1518;border:2px solid #e2d2ad;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.45);color:#e2d2ad;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.cm-terms-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(226,210,173,.35)}
.cm-terms-title{font-size:18px}
.cm-terms-close{background:transparent;border:0;color:#e2d2ad;font-size:24px;line-height:1;cursor:pointer}
.cm-terms-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.cm-terms-checkrow{display:flex;gap:10px;align-items:flex-start}
.cm-terms-actions{display:flex;justify-content:flex-end;gap:10px;padding:14px 16px;border-top:1px solid rgba(226,210,173,.35)}
.cm-terms-cancel{background:transparent;border:2px solid rgba(226,210,173,.65);color:#e2d2ad;padding:10px 14px;border-radius:10px;cursor:pointer}
.cm-terms-confirm{background:var(--cm-dl,#6d1ea7);border:0;color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer}
.cm-terms-confirm:disabled{opacity:.5;cursor:not-allowed}

/* Responsive */
@media (max-width:640px){
    .cm-track-card{grid-template-columns:92px 1fr;padding:12px}
    .cm-track-cover img,.cm-cover-placeholder{width:92px;height:92px}
    .cm-track-title{font-size:24px}
    .cm-track-style{font-size:16px}
    .cm-player{grid-template-columns:38px 1fr}
    .cm-right{align-items:stretch}
    .cm-volume-range{width:100%}
    .cm-meta{font-size:16px}
    .cm-context-card{grid-template-columns:92px 1fr}
    .cm-context-cover{width:92px;height:92px}
    .cm-artist-head{gap:12px}
    .cm-artist-avatar img,.cm-artist-avatar-placeholder{width:92px;height:92px;border-radius:14px}
}

/* === CM Elegant UI (override) ===================================== */

.cm-track-card{
    /* ruhiger, edler */
    background:
            radial-gradient(900px 220px at 25% 0%, rgba(109,30,167,.16), rgba(0,0,0,0) 60%),
            radial-gradient(900px 220px at 75% 0%, rgba(109,211,255,.10), rgba(0,0,0,0) 60%),
            linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.10));
    border: 1px solid rgba(226,210,173,.45);
    border-radius: 16px;
    padding: 16px;
    box-shadow:
            0 14px 34px rgba(0,0,0,.40),
            0 0 0 1px rgba(255,255,255,.04) inset;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.cm-track-card:hover{
    transform: translateY(-1px);
    border-color: rgba(226,210,173,.65);
    box-shadow:
            0 18px 42px rgba(0,0,0,.50),
            0 0 0 1px rgba(255,255,255,.06) inset;
}

.cm-track-cover img,
.cm-cover-placeholder{
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(0,0,0,.35);
    border: 1px solid rgba(226,210,173,.20);
}

.cm-track-main{ gap: 12px; }

.cm-track-title{
    text-align: left;
    letter-spacing: .5px;
    font-size: clamp(20px, 2.0vw, 30px);
    line-height: 1.12;
    margin: 0;
}

/* Titel + Badge sauber nebeneinander */
.cm-track-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 10px;
    min-width:0;
}

.cm-track-style{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 14px;
    opacity: 1;
    border: 1px solid rgba(226,210,173,.35);
    background: rgba(226,210,173,.08);
    white-space: nowrap;
    min-width: 0;
    max-width: 52%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Player: weniger „weißes Rohr“, mehr modern */
.cm-player{
    grid-template-columns: 42px 1fr auto;
    gap: 12px;
}

.cm-play{
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.cm-play:hover{ filter: brightness(1.07); }
.cm-play:active{ transform: scale(.98); }

.cm-progress{
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.25);
    accent-color: var(--cm-accent);
}
.cm-progress::-webkit-slider-thumb{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cm-accent);
    border: 2px solid rgba(0,0,0,.35);
}
.cm-progress::-moz-range-thumb{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cm-accent);
    border: 2px solid rgba(0,0,0,.35);
}

.cm-time{
    font-size: 13px;
    opacity: .9;
}

.cm-right{
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.cm-volume{
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    padding: 8px 10px;
    border-radius: 12px;
}

.cm-volume-range{
    width: 110px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.25);
    accent-color: var(--cm-accent);
}

.cm-download-btn{
    border-radius: 12px;
    padding: 10px 16px;
    box-shadow: 0 10px 22px rgba(0,0,0,.25);
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.cm-download-btn:hover{ filter: brightness(1.05); }
.cm-download-btn:active{ transform: scale(.985); box-shadow: 0 6px 14px rgba(0,0,0,.22); }

.cm-track-bottom{
    margin-top: 4px;
}

.cm-meta{
    font-size: 16px;
    opacity: .95;
}

/* Fokus */
.cm-track-card a:focus-visible,
.cm-track-card button:focus-visible,
.cm-track-card input:focus-visible{
    outline: 2px solid var(--cm-accent);
    outline-offset: 2px;
    border-radius: 10px;
}

/* Mobile: Volume aus Platzgründen optional kleiner */
@media (max-width: 640px){
    .cm-track-card{ padding: 12px; }
    .cm-player{ grid-template-columns: 42px 1fr; }
    .cm-right{ grid-column: 1 / -1; justify-content: space-between; }
    .cm-volume-range{ width: 140px; }
    .cm-track-style{ font-size: 13px; max-width: 100%; }
}

.cm-artist-socials{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.cm-artist-social{
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(226,210,173,.35);
    color:#fff;
    text-decoration:none;
    padding: 8px 12px;
    border-radius: 999px;
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size: 14px;
}
.cm-artist-social:hover{ filter: brightness(1.06); }

/* === CM Mobile Layout Fix (append last) =========================== */
@media (max-width: 640px){

    /* Card soll nix nach rechts raus schieben */
    .cm-track-card{
        overflow: hidden;
    }

    /* Titel + Style untereinander (und Style nicht riesig) */
    .cm-track-top{
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Style: Ellipsis statt Umbruch (sieht sauberer aus) */
    .cm-track-style{
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Player: nur 2 Spalten (Play + Progress) */
    .cm-track-card .cm-player{
        grid-template-columns: 42px 1fr !important;
        grid-auto-rows: auto;
        gap: 10px;
    }

    /* Rechte Leiste unter Player – und "appig": Volume + Download full width */
    .cm-track-card .cm-right{
        grid-column: 1 / -1 !important;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: center;
        justify-content: stretch;
        min-width: 0;
    }

    .cm-track-card .cm-volume{
        width: 100%;
    }
    .cm-track-card .cm-volume-range{
        width: 100%;
        min-width: 0;
    }

    /* Download full-width */
    .cm-track-card .cm-download-btn{
        width: 100%;
        justify-self: stretch;
        justify-content: center;
        white-space: nowrap;
    }

    /* Bottom-Meta untereinander */
    .cm-track-bottom{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Meta etwas kompakter */
    .cm-meta{
        font-size: 15px;
    }
}

/* Style-Badge: immer komplett anzeigen (Umbruch statt Ellipsis) */
.cm-track-top{
    flex-wrap: wrap;              /* wenn's lang wird, darf es in die nächste Zeile */
}

.cm-track-style{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;

    max-width: 100% !important;   /* nicht mehr künstlich begrenzen */
    overflow-wrap: anywhere;      /* lange Worte/Listen umbrechen */
    word-break: break-word;
    line-height: 1.25;
}
/* === Ads between tracks ========================================== */
.cm-ad{ position: relative; }

.cm-ad-card{
    --cm-accent:#6dd3ff; --cm-dl:#6d1ea7; --cm-border:#e2d2ad;
    position: relative;
    background:
            radial-gradient(900px 220px at 20% 0%, rgba(109,30,167,.18), rgba(0,0,0,0) 60%),
            radial-gradient(900px 220px at 80% 0%, rgba(109,211,255,.12), rgba(0,0,0,0) 60%),
            linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.10));
    border: 1px solid rgba(226,210,173,.45);
    border-radius: 16px;
    padding: 16px;
    box-shadow:
            0 14px 34px rgba(0,0,0,.40),
            0 0 0 1px rgba(255,255,255,.04) inset;
    overflow: hidden;
}

.cm-ad .cm-ad-badge{
    position: absolute;
    top: 12px;
    right: 12px;   /* neu */
    left: auto;    /* neu */
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(226,210,173,.10);
    border: 1px solid rgba(226,210,173,.30);
    color: var(--cm-border,#e2d2ad);
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

.cm-ad-grid{
    display:grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    align-items: center;
}

.cm-ad-media img,
.cm-ad-media-ph{
    width:120px;
    height:120px;
    border-radius: 14px;
    display:block;
    object-fit: cover;
    box-shadow: 0 10px 22px rgba(0,0,0,.35);
    border: 1px solid rgba(226,210,173,.20);
}

.cm-ad-media-ph{
    background: linear-gradient(135deg, rgba(226,210,173,.16), rgba(226,210,173,.05));
}

.cm-ad-title{
    color: var(--cm-border);
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 6px;
}

.cm-ad-desc{
    color: rgba(226,210,173,.92);
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size: 14px;
    line-height: 1.35;
    opacity: .95;
}

.cm-ad-foot{
    margin-top: 12px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cm-ad-price{
    color: var(--cm-border);
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size: 14px;
    opacity: .95;
}

.cm-ad-cta{
    background: var(--cm-dl);
    color:#fff;
    text-decoration:none;
    padding: 10px 14px;
    border-radius: 12px;
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(0,0,0,.25);
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.cm-ad-cta:hover{ filter: brightness(1.05); }
.cm-ad-cta:active{ transform: scale(.985); box-shadow: 0 6px 14px rgba(0,0,0,.22); }

@media (max-width: 640px){
    .cm-ad-grid{ grid-template-columns: 92px 1fr; }
    .cm-ad-media img,.cm-ad-media-ph{ width:92px; height:92px; }
    .cm-ad-title{ font-size: 18px; }
}

/* Full-width Banner */
.cm-ad-banner{
    --cm-accent:#6dd3ff; --cm-dl:#6d1ea7; --cm-border:#e2d2ad;
    grid-column: 1 / -1;
    position: relative;
    background:
            radial-gradient(900px 220px at 20% 0%, rgba(109,30,167,.18), rgba(0,0,0,0) 60%),
            radial-gradient(900px 220px at 80% 0%, rgba(109,211,255,.12), rgba(0,0,0,0) 60%),
            linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.10));
    border: 1px solid rgba(226,210,173,.45);
    border-radius: 16px;
    padding: 18px;
    min-height: 168px;
    box-shadow:
            0 14px 34px rgba(0,0,0,.40),
            0 0 0 1px rgba(255,255,255,.04) inset;
    overflow: hidden;
}

.cm-ad-banner-inner{
    display:grid;
    grid-template-columns: 156px 1fr auto;
    gap: 16px;
    align-items: center;
}

.cm-ad-banner-media img,
.cm-ad-banner-media .cm-ad-media-ph{
    width: 140px;
    height: 140px;
    border-radius: 14px;
    display:block;
    object-fit: cover;
    box-shadow: 0 10px 22px rgba(0,0,0,.35);
    border: 1px solid rgba(226,210,173,.20);
}

/* HTML/Embed Banner */
.cm-ad-banner .cm-ad-embed{
    width: 100%;
    overflow: auto;
    padding: 6px 2px 2px;
}

.cm-ad-banner .cm-ad-embed > *{
    max-width: 100%;
}

.cm-ad-banner .cm-ad-embed iframe,
.cm-ad-banner .cm-ad-embed img{
    max-width: 100%;
    height: auto;
}

.cm-ad-banner-title{
    color: var(--cm-border);
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size: 20px;
    line-height: 1.2;
}

.cm-ad-banner-desc{
    color: rgba(226,210,173,.92);
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size: 14px;
    line-height: 1.35;
    margin-top: 6px;
}

.cm-ad-banner-price{
    color: var(--cm-border);
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size: 14px;
    opacity: .95;
    margin-top: 8px;
}

.cm-ad-banner-cta-wrap{
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

@media (max-width: 820px){
    .cm-ad-banner{ min-height: 0; }
    .cm-ad-banner-inner{ grid-template-columns: 110px 1fr; }
    .cm-ad-banner-cta-wrap{ grid-column: 1 / -1; justify-content:flex-start; }
    .cm-ad-banner-media img,
    .cm-ad-banner-media .cm-ad-media-ph{ width:110px; height:110px; }
}

/* Track-Style Ad (re-uses .cm-track-card) */
.cm-ad-track{ padding-top: 34px; }

/*
   In Track-Cards sitzt das Genre/Style-Badge rechts oben.
   Bei Ads gibt es zusätzlich das "Anzeige"-Badge (absolute, top-right).
   -> Ergebnis ohne Fix: beide überlappen.
   Lösung: Titel nimmt eine volle Zeile + rechte Luft für das Badge, Style-Pill wandert darunter.
*/
.cm-ad-track .cm-track-top{
    flex-wrap: wrap;
    justify-content: flex-start;
}

.cm-ad-track .cm-track-title{
    flex: 1 1 100%;
    padding-right: 120px; /* Platz für .cm-ad-badge */
}

.cm-ad-track .cm-track-style{
    max-width: 100%;
    margin-top: 8px;
}

@media (max-width: 820px){
    .cm-ad-track{ padding-top: 16px; }
    .cm-ad-track .cm-track-title{ padding-right: 0; }
}
.cm-ad-track .cm-ad-track-desc{
    color: rgba(226,210,173,.92);
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size: 14px;
    line-height: 1.35;
    opacity: .95;
}
.cm-ad-track .cm-ad-track-foot{
    margin-top: 10px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cm-ad-track .cm-track-title{ font-size: clamp(18px, 1.8vw, 26px); }



/* === Artist Social Icons === */
.cm-artist-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}
.cm-artist-socials{display:flex;gap:10px;flex-wrap:wrap}
.cm-social-icon{width:38px;height:38px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);color:rgba(255,255,255,.85);text-decoration:none;transition:transform .12s ease, background .12s ease, border-color .12s ease}
.cm-social-icon:hover{transform:translateY(-1px);border-color:rgba(109,30,167,.65);background:rgba(109,30,167,.15)}
.cm-social-icon svg{width:20px;height:20px;fill:currentColor}
.cm-artist-imprint-btn{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:rgba(255,255,255,.92);text-decoration:none;font-weight:600;margin-left:auto}
.cm-artist-imprint-btn:hover{border-color:rgba(109,30,167,.65);background:rgba(109,30,167,.15)}
@media (max-width:700px){.cm-artist-imprint-btn{margin-left:0}}

/* Impressum button under avatar (artist profile) */
.cm-artist-imprint-under{display:inline-flex;align-items:center;justify-content:center;width:100%;margin-top:10px;margin-left:0;font-size:13px;}

/* Artist impressum sub page */
.cm-artist-imprint-page{margin-top:18px;}
.cm-artist-imprint-head{margin:0 0 10px 0;}
.cm-artist-imprint-back{display:inline-flex;gap:8px;align-items:center;text-decoration:none;color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);padding:8px 12px;border-radius:999px;}
.cm-artist-imprint-back:hover{border-color:rgba(109,30,167,.65);background:rgba(109,30,167,.15)}
.cm-artist-imprint-card{border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px;background:linear-gradient(120deg, rgba(109,30,167,.16), rgba(0,0,0,.55) 55%, rgba(0,0,0,.70));box-shadow:0 10px 24px rgba(0,0,0,.35);}
.cm-artist-imprint-title-row{display:flex;gap:14px;align-items:center;margin-bottom:14px;}
.cm-artist-imprint-avatar img,.cm-artist-imprint-avatar .cm-artist-avatar-placeholder{width:64px;height:64px;border-radius:14px;object-fit:cover;border:1px solid rgba(255,255,255,.14);}
.cm-artist-imprint-name{font-weight:800;font-size:22px;letter-spacing:.3px;}
.cm-artist-imprint-sub{color:rgba(255,255,255,.70);margin-top:2px;}
.cm-artist-imprint-actions{margin:0 0 12px 0;}
.cm-artist-imprint-body{line-height:1.6;color:rgba(255,255,255,.90);}

/* === Artist Portal === */
.cm-portal{max-width:980px;margin:0 auto;padding:18px}
.cm-portal-card{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.cm-portal-header{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}
.cm-portal-title{margin:0;font-size:28px;letter-spacing:.4px}
.cm-portal-sub{display:flex;gap:12px;align-items:center;color:rgba(255,255,255,.72);flex-wrap:wrap}
.cm-portal-link{color:rgba(255,255,255,.9);text-decoration:none;border:1px solid rgba(255,255,255,.14);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.04)}
.cm-portal-link:hover{border-color:rgba(109,30,167,.65);background:rgba(109,30,167,.15)}
.cm-portal-section{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.cm-portal-section h2{margin:0 0 12px 0;font-size:18px}
.cm-portal-section h3{margin:12px 0 8px 0;font-size:15px;color:rgba(255,255,255,.86)}
.cm-portal-form{display:grid;gap:12px}
.cm-portal-form label{display:grid;gap:6px}
.cm-portal-form label>span{color:rgba(255,255,255,.75);font-size:13px}
.cm-portal-form input,.cm-portal-form textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.28);color:rgba(255,255,255,.92)}
.cm-portal-form textarea{min-height:120px;resize:vertical}
.cm-portal-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){.cm-portal-cols{grid-template-columns:1fr}}
.cm-portal-checks{display:grid;gap:8px}
.cm-portal-check{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.78);font-size:14px}
.cm-portal-check input{margin-top:3px}
.cm-portal-check a{color:rgba(109,211,255,.95)}
.cm-portal-social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.cm-portal-notice{margin:10px 0;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.cm-portal-notice ul{margin:0;padding-left:18px}
.cm-portal-success{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10)}
.cm-portal-error{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10)}
.cm-portal-info{padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22)}

/* Portal: tabs */
.cm-portal-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 14px 0}
.cm-portal-tabs .cm-tab{appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:rgba(255,255,255,.88);padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:600;letter-spacing:.2px}
.cm-portal-tabs .cm-tab:hover{border-color:rgba(109,30,167,.65);background:rgba(109,30,167,.15)}
.cm-portal-tabs .cm-tab.is-active{border-color:rgba(109,211,255,.65);background:rgba(109,211,255,.14)}
.cm-portal-tabpanes .cm-pane{display:none}
.cm-portal-tabpanes .cm-pane.is-active{display:block}
.cm-portal-muted{color:rgba(255,255,255,.68);font-size:13px;margin:0 0 10px 0}
.cm-portal-row-links{margin-top:6px;font-size:13px}
.cm-portal-row-links a{color:rgba(109,211,255,.95)}

/* Portal: profile header */
.cm-portal-cover{height:220px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 12px 40px rgba(0,0,0,.45);margin:0 0 14px 0}
@media (max-width:720px){.cm-portal-cover{height:170px}}
.cm-portal-profile-row{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:start}
@media (max-width:720px){.cm-portal-profile-row{grid-template-columns:1fr}}
.cm-portal-avatar{width:110px;height:110px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.cm-portal-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.cm-portal-avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:34px;color:rgba(255,255,255,.75)}
.cm-portal-profile-fields{display:grid;gap:12px}

/* Portal: security */
.cm-portal-security-box{display:grid;gap:6px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
.cm-portal-pill{display:inline-block;margin-left:8px;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.22);color:rgba(255,255,255,.82);font-size:12px}
.cm-portal-2fa{padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22)}
.cm-portal-2fa-status{margin:6px 0 10px 0;color:rgba(255,255,255,.86)}
.cm-portal-2fa-methods{display:flex;gap:12px;flex-wrap:wrap}
.cm-portal-2fa-actions{display:flex;gap:10px;flex-wrap:wrap}
.cm-portal-2fa-setup{margin-top:10px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}



/* Portal: buttons + tables (self-service) */
.cm-portal .cm-btn-primary,
.cm-portal .cm-btn-outline,
.cm-portal .cm-btn-danger{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);
  color:rgba(255,255,255,.92);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  gap:8px;
}
.cm-portal .cm-btn-primary{
  background:rgba(109,30,167,.35);
  border-color:rgba(109,30,167,.6);
}
.cm-portal .cm-btn-primary:hover{background:rgba(109,30,167,.5);border-color:rgba(109,211,255,.45)}
.cm-portal .cm-btn-outline:hover{background:rgba(255,255,255,.06);border-color:rgba(109,211,255,.45)}
.cm-portal .cm-btn-danger{background:rgba(220,38,38,.18);border-color:rgba(220,38,38,.55)}
.cm-portal .cm-btn-danger:hover{background:rgba(220,38,38,.28);border-color:rgba(220,38,38,.8)}
.cm-portal .cm-btn-small{padding:6px 10px;font-size:12px;font-weight:700}

/* Portal modal (QR, etc.) */
.cm-portal-modal{position:fixed;inset:0;z-index:99999}
.cm-portal-modal[hidden]{display:none}
.cm-portal-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(2px)}
.cm-portal-modal__panel{position:relative;max-width:560px;margin:8vh auto 0 auto;background:rgba(15,15,16,.96);border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 20px 80px rgba(0,0,0,.65);overflow:hidden}
@media (max-width:720px){.cm-portal-modal__panel{margin:6vh 12px 0 12px}}
.cm-portal-modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.cm-portal-modal__title{font-size:16px;font-weight:800;letter-spacing:.2px;color:rgba(255,255,255,.92)}
.cm-portal-modal__close{appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:rgba(255,255,255,.88);width:38px;height:38px;border-radius:12px;cursor:pointer;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center}
.cm-portal-modal__close:hover{border-color:rgba(109,211,255,.45);background:rgba(255,255,255,.06)}
.cm-portal-modal__body{padding:16px}
.cm-portal-modal__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

.cm-portal-qr__wrap{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:18px;border:1px solid rgba(255,255,255,.12);padding:14px;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.cm-portal-qr__wrap img{width:100%;max-width:520px;height:auto;display:block}
.cm-portal .cm-portal-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cm-portal .cm-portal-inlineform{margin:0}
.cm-portal .cm-portal-inlineform button[disabled]{opacity:.45;cursor:not-allowed}

.cm-portal-tablewrap{overflow:auto;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(0,0,0,.22)}
.cm-portal-table{width:100%;border-collapse:collapse;min-width:560px}
.cm-portal-table th,.cm-portal-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:top}
.cm-portal-table th{text-align:left;color:rgba(255,255,255,.72);font-size:12px;letter-spacing:.25px;text-transform:uppercase}
.cm-portal-table tr:last-child td{border-bottom:none}
.cm-portal-table td{color:rgba(255,255,255,.92);font-size:14px}