/* ============================================================
   ElternNummerMüde – Musik-Bibliothek Styles
   Aesthetic: Warm editorial · soft pastels · playful but clean
   Fonts: via theme (Nunito / Lato)
   ============================================================ */

:root {
    --em-primary:    #6DB86D;
    --em-primary-h:  #5AA55A;
    --em-accent:     #5BA3C9;
    --em-surface:    #FFFFFF;
    --em-bg:         #F8FAF8;
    --em-border:     #E4EBE4;
    --em-text:       #2D2D2D;
    --em-muted:      #717171;
    --em-radius:     14px;
    --em-radius-lg:  22px;
    --em-shadow:     0 4px 20px rgba(0,0,0,0.07);
    --em-shadow-lg:  0 8px 40px rgba(0,0,0,0.11);
    --em-trans:      0.22s ease;
    --em-wf-color:   #c8e6c8;
    --em-wf-prog:    #6DB86D;
    --phase-color:   #6DB86D;
}

/* ── Utilities ────────────────────────────────────────────── */
.enmt-btn { display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.2rem;border-radius:99px;font-weight:700;font-size:.85rem;cursor:pointer;border:2px solid transparent;text-decoration:none;transition:all var(--em-trans);font-family:inherit; }
.enmt-btn-primary  { background:var(--em-primary);color:white; }
.enmt-btn-primary:hover { background:var(--em-primary-h);transform:translateY(-1px); }
.enmt-btn-ghost    { background:transparent;color:var(--em-muted);border-color:var(--em-border); }
.enmt-btn-ghost:hover { border-color:var(--em-muted);color:var(--em-text); }
.enmt-card         { background:white;border-radius:var(--em-radius);padding:1.25rem;box-shadow:var(--em-shadow);margin-bottom:1rem; }
.enmt-card h3      { font-size:1rem;margin-bottom:.75rem; }
.enmt-tag          { display:inline-block;padding:2px 9px;border-radius:99px;font-size:.75rem;background:#EEF5EE;color:#2D6B2D; }
.enmt-tag--mood    { background:#EEF2FF;color:#3B4FC0; }
.enmt-meta-chip    { display:inline-block;font-size:.78rem;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.65);border:1px solid rgba(0,0,0,.1);color:var(--em-text); }
.enmt-phase-badge  { display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .8rem;border-radius:99px;color:white;font-size:.8rem;font-weight:700; }
.enmt-section-heading { font-size:1.1rem;font-weight:800;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--em-border); }
.enmt-empty-search { text-align:center;padding:3rem 1rem;color:var(--em-muted); }
.enmt-empty-search span { font-size:3rem;display:block;margin-bottom:.75rem; }

/* ── Library Hero ─────────────────────────────────────────── */
.enmt-library-wrap { max-width:1100px;margin:0 auto;padding:0 1rem 4rem; }
.enmt-lib-hero {
    text-align:center;
    padding:3rem 1rem 2rem;
    background:linear-gradient(145deg,#F0F8F0 0%,#E8F4FB 100%);
    border-radius:var(--em-radius-lg);
    margin-bottom:1.5rem;
}
.enmt-lib-hero-title { font-size:2rem;font-weight:900;margin-bottom:.4rem; }
.enmt-lib-hero-sub   { color:var(--em-muted);margin-bottom:1.5rem; }

.enmt-lib-search-wrap {
    position:relative;
    max-width:500px;
    margin:0 auto;
}
.enmt-lib-search-icon {
    position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
    font-size:1rem;pointer-events:none;
}
.enmt-lib-search {
    width:100%;padding:.7rem .85rem .7rem 2.75rem;
    border:2px solid var(--em-border);border-radius:99px;
    font-size:.95rem;font-family:inherit;background:white;
    transition:border-color var(--em-trans),box-shadow var(--em-trans);
}
.enmt-lib-search:focus { outline:none;border-color:var(--em-primary);box-shadow:0 0 0 4px rgba(109,184,109,.15); }
.enmt-search-loading { position:absolute;right:1rem;top:50%;transform:translateY(-50%);animation:enmt-spin .8s linear infinite; }
@keyframes enmt-spin { to { transform:translateY(-50%) rotate(360deg); } }

/* ── Phase filter pills ───────────────────────────────────── */
.enmt-phase-filter-row {
    display:flex;flex-wrap:wrap;gap:.5rem;
    margin-bottom:1rem;padding:.5rem 0;
    border-bottom:1px solid var(--em-border);
}
.enmt-phase-pill {
    display:inline-flex;align-items:center;gap:.3rem;
    padding:.35rem 1rem;border-radius:99px;font-size:.82rem;font-weight:600;
    text-decoration:none;color:var(--em-muted);
    border:1.5px solid var(--em-border);background:white;
    transition:all var(--em-trans);
}
.enmt-phase-pill:hover,
.enmt-phase-pill.active {
    background:var(--phase-c,var(--em-primary));
    border-color:var(--phase-c,var(--em-primary));
    color:white;
}

/* ── Filter bar ───────────────────────────────────────────── */
.enmt-filter-bar {
    display:flex;align-items:flex-end;flex-wrap:wrap;gap:.75rem;
    padding:.75rem 1rem;background:white;border-radius:var(--em-radius);
    border:1px solid var(--em-border);margin-bottom:1.5rem;
}
.enmt-filter-group { display:flex;flex-direction:column;gap:.25rem; }
.enmt-filter-label { font-size:.72rem;font-weight:700;color:var(--em-muted);text-transform:uppercase;letter-spacing:.04em; }
.enmt-filter-select {
    padding:.4rem .65rem;border:1.5px solid var(--em-border);border-radius:8px;
    font-size:.85rem;font-family:inherit;background:white;cursor:pointer;
}
.enmt-filter-select:focus { outline:none;border-color:var(--em-primary); }
.enmt-view-toggle { display:flex;gap:.25rem;margin-top:auto; }
.enmt-view-btn {
    width:34px;height:34px;display:flex;align-items:center;justify-content:center;
    border-radius:8px;font-size:1.1rem;text-decoration:none;color:var(--em-muted);
    border:1.5px solid var(--em-border);background:white;transition:all var(--em-trans);
}
.enmt-view-btn.active { background:var(--em-primary);border-color:var(--em-primary);color:white; }
.enmt-result-count { margin-left:auto;font-size:.8rem;color:var(--em-muted);align-self:center; }

/* ── Track Grid ───────────────────────────────────────────── */
.enmt-track-grid,
.enmt-latest-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:1.25rem;
}

.enmt-track-card {
    background:white;border-radius:var(--em-radius);
    box-shadow:var(--em-shadow);overflow:hidden;
    transition:transform var(--em-trans),box-shadow var(--em-trans);
}
.enmt-track-card:hover { transform:translateY(-4px);box-shadow:var(--em-shadow-lg); }

.enmt-card-cover-wrap {
    position:relative;overflow:hidden;
    aspect-ratio:1;background:#F0F0F0;
    border-bottom:3px solid var(--phase-color);
}
.enmt-card-cover { width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s; }
.enmt-track-card:hover .enmt-card-cover { transform:scale(1.05); }

.enmt-card-play {
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,.35);color:white;font-size:2rem;
    opacity:0;transition:opacity var(--em-trans);
    border:none;cursor:pointer;
}
.enmt-track-card:hover .enmt-card-play { opacity:1; }
.enmt-card-play:hover { background:rgba(0,0,0,.5); }

.enmt-card-phase {
    position:absolute;top:.5rem;right:.5rem;
    width:28px;height:28px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:.9rem;
}

.enmt-card-body { padding:.85rem; }
.enmt-card-title { font-size:.9rem;font-weight:700;margin-bottom:.2rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.enmt-card-artist { font-size:.78rem;color:var(--em-muted);margin-bottom:.5rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.enmt-card-footer { display:flex;align-items:center;justify-content:space-between; }
.enmt-card-dur { font-size:.72rem;color:var(--em-muted);font-family:monospace; }
.enmt-card-actions { display:flex;gap:.25rem; }
.enmt-card-dl,
.enmt-like-btn {
    width:28px;height:28px;border-radius:50%;border:1px solid var(--em-border);
    background:white;cursor:pointer;font-size:.85rem;
    display:flex;align-items:center;justify-content:center;
    transition:all var(--em-trans);
}
.enmt-like-btn:hover { border-color:#E05252;color:#E05252; }
.enmt-like-btn.liked,.enmt-like-btn.active { background:#FEE8E8;border-color:#E05252;color:#E05252; }
.enmt-card-dl:hover { border-color:var(--em-primary);color:var(--em-primary); }

/* ── Track List ───────────────────────────────────────────── */
.enmt-track-list-wrap { border:1px solid var(--em-border);border-radius:var(--em-radius);overflow:hidden;background:white; }
.enmt-track-row {
    display:grid;
    grid-template-columns:36px 48px 1fr 1fr 60px auto;
    align-items:center;gap:.75rem;
    padding:.6rem .85rem;
    border-bottom:1px solid var(--em-border);
    transition:background var(--em-trans);
    cursor:pointer;
}
.enmt-track-row:last-child { border-bottom:none; }
.enmt-track-row:hover { background:#F8FFF8; }
.enmt-track-row--header { background:#F5F5F5;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:default; }
.enmt-track-row--header:hover { background:#F5F5F5; }
.enmt-track-row.playing { background:rgba(109,184,109,.08);border-left:3px solid var(--phase-color,var(--em-primary)); }

.enmt-row-num  { font-size:.8rem;color:var(--em-muted);text-align:center; }
.enmt-row-cover{ width:42px;height:42px;border-radius:6px;object-fit:cover; }
.enmt-row-info { min-width:0; }
.enmt-row-title { display:block;font-weight:700;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.enmt-row-artist{ display:block;font-size:.75rem;color:var(--em-muted); }
.enmt-row-album { font-size:.78rem;color:var(--em-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.enmt-row-tags  { display:flex;flex-wrap:wrap;gap:.25rem; }
.enmt-row-duration { font-family:monospace;font-size:.8rem;color:var(--em-muted);text-align:right; }
.enmt-row-actions { display:flex;gap:.35rem;justify-content:flex-end; }
.enmt-play-btn,.enmt-row-detail-link {
    width:30px;height:30px;border-radius:50%;border:1px solid var(--em-border);
    background:white;cursor:pointer;font-size:.85rem;
    display:flex;align-items:center;justify-content:center;
    transition:all var(--em-trans);text-decoration:none;color:inherit;
}
.enmt-play-btn:hover { background:var(--em-primary);border-color:var(--em-primary);color:white; }

/* ── Full Player ──────────────────────────────────────────── */
.enmt-player--full {
    display:grid;
    grid-template-columns:220px 1fr;
    gap:2rem;
    background:white;
    border-radius:var(--em-radius-lg);
    padding:1.75rem;
    box-shadow:var(--em-shadow-lg);
    border-top:4px solid var(--phase-color);
    margin-bottom:2rem;
}

.enmt-player-cover-wrap {
    position:relative;border-radius:var(--em-radius);overflow:hidden;
    aspect-ratio:1;
}
.enmt-player-cover { width:100%;height:100%;object-fit:cover;display:block; }
.enmt-play-overlay-btn {
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,.3);color:white;font-size:3rem;
    border:none;cursor:pointer;opacity:0;transition:opacity var(--em-trans);
}
.enmt-player-cover-wrap:hover .enmt-play-overlay-btn { opacity:1; }

.enmt-player-mini-stats {
    display:flex;justify-content:center;gap:.75rem;margin-top:.6rem;
}
.enmt-stat-chip { font-size:.72rem;color:var(--em-muted); }

.enmt-player-header { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem; }
.enmt-player-title  { font-size:1.35rem;font-weight:800;margin-bottom:.25rem; }
.enmt-player-artist { font-size:.9rem;color:var(--em-muted); }
.enmt-player-artist a { color:inherit;text-decoration:none;font-weight:600; }
.enmt-player-artist a:hover { color:var(--em-primary); }
.enmt-player-badges { display:flex;flex-wrap:wrap;gap:.35rem; }

/* Waveform */
.enmt-waveform-wrap { margin:1rem 0;position:relative; }
.enmt-waveform { height:70px;border-radius:8px;overflow:hidden;cursor:pointer;background:#F8FAF8; }
.enmt-waveform-times {
    display:flex;justify-content:space-between;
    font-family:monospace;font-size:.75rem;color:var(--em-muted);margin-top:.25rem;
}

/* Controls */
.enmt-controls {
    display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
}
.enmt-ctrl-btn {
    width:38px;height:38px;border-radius:50%;border:1.5px solid var(--em-border);
    background:white;cursor:pointer;font-size:1rem;
    display:flex;align-items:center;justify-content:center;
    transition:all var(--em-trans);color:var(--em-text);
}
.enmt-ctrl-btn:hover { border-color:var(--em-primary);color:var(--em-primary); }
.enmt-ctrl-play {
    width:46px;height:46px;background:var(--em-primary);border-color:var(--em-primary);color:white;font-size:1.25rem;
}
.enmt-ctrl-play:hover { background:var(--em-primary-h);border-color:var(--em-primary-h); }
.enmt-ctrl-play.paused { background:var(--em-muted);border-color:var(--em-muted); }

.enmt-ctrl-btn.active { color:var(--em-primary);border-color:var(--em-primary);background:rgba(109,184,109,.08); }

.enmt-volume-wrap { display:flex;align-items:center;gap:.4rem;margin-left:.5rem; }
.enmt-volume-slider {
    width:70px;accent-color:var(--em-primary);cursor:pointer;
}

.enmt-player-actions { display:flex;align-items:center;gap:.4rem;margin-left:auto; }
.enmt-action-btn {
    padding:.3rem .7rem;border-radius:99px;border:1.5px solid var(--em-border);
    background:white;cursor:pointer;font-size:.82rem;font-family:inherit;
    transition:all var(--em-trans);color:var(--em-text);
    display:flex;align-items:center;gap:.3rem;
}
.enmt-action-btn.active { border-color:#E05252;background:#FEE8E8;color:#E05252; }
.enmt-action-btn:hover { border-color:var(--em-primary); }
.enmt-info-chip { font-size:.72rem;color:var(--em-muted);padding:3px 8px;background:#F0F0F0;border-radius:99px; }
.enmt-dl-btn { font-size:1rem;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--em-border);background:white;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;color:var(--em-text);transition:all var(--em-trans); }
.enmt-dl-btn:hover { border-color:var(--em-primary);color:var(--em-primary); }

.enmt-player-tags { display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.75rem; }

/* ── Lyrics ───────────────────────────────────────────────── */
.enmt-lyrics-section { margin-top:2rem; }
.enmt-lyrics-body {
    background:#F8FAF8;border-radius:var(--em-radius);padding:1.25rem;
    font-size:.9rem;line-height:1.9;white-space:pre-line;
    max-height:400px;overflow-y:auto;
    border-left:4px solid var(--em-primary);
}

/* ── Global Player Bar ────────────────────────────────────── */
.enmt-global-player {
    position:fixed;bottom:0;left:0;right:0;z-index:9999;
    background:white;border-top:3px solid var(--em-primary);
    padding:.6rem 1.25rem;
    display:flex;align-items:center;gap:1rem;
    box-shadow:0 -4px 20px rgba(0,0,0,.1);
}
.enmt-gb-cover { width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0; }
.enmt-gb-info  { display:flex;flex-direction:column;min-width:0;flex:0 0 180px; }
.enmt-gb-title { font-size:.85rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.enmt-gb-artist{ font-size:.72rem;color:var(--em-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.enmt-gb-controls { display:flex;gap:.35rem;flex-shrink:0; }
.enmt-gb-btn {
    width:34px;height:34px;border-radius:50%;border:1.5px solid var(--em-border);
    background:white;cursor:pointer;font-size:.9rem;
    display:flex;align-items:center;justify-content:center;
    transition:all var(--em-trans);
}
.enmt-gb-play { background:var(--em-primary);border-color:var(--em-primary);color:white;font-size:1rem; }
.enmt-gb-close { opacity:.5; }
.enmt-gb-close:hover { opacity:1; }

.enmt-gb-progress-wrap {
    flex:1;display:flex;align-items:center;gap:.5rem;min-width:0;
}
.enmt-gb-progress-bar {
    flex:1;height:4px;background:#E8E8E8;border-radius:2px;
    position:relative;cursor:pointer;
}
.enmt-gb-progress-fill {
    position:absolute;left:0;top:0;height:100%;background:var(--em-primary);
    border-radius:2px;pointer-events:none;
}
.enmt-gb-seek {
    position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;margin:0;
}
.enmt-gb-vol { display:flex;align-items:center;gap:.35rem;flex-shrink:0; }
.enmt-gb-vol input { width:70px;accent-color:var(--em-primary); }

/* ── Album page ───────────────────────────────────────────── */
.enmt-album-wrap { max-width:900px;margin:0 auto;padding:0 1rem 3rem; }
.enmt-album-header {
    display:grid;grid-template-columns:220px 1fr;gap:2rem;
    padding:2rem;border-radius:var(--em-radius-lg);
    background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(240,248,240,.9));
    border-top:5px solid var(--phase-color);
    margin-bottom:2rem;box-shadow:var(--em-shadow);
}
.enmt-album-cover-frame { border-radius:var(--em-radius);overflow:hidden;box-shadow:var(--em-shadow-lg); }
.enmt-album-cover { width:100%;display:block; }
.enmt-album-eyebrow { font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--em-muted);display:block;margin-bottom:.35rem; }
.enmt-album-title { font-size:1.6rem;font-weight:900;margin-bottom:.3rem; }
.enmt-album-artist { font-size:1rem;color:var(--em-muted);margin-bottom:.75rem; }
.enmt-album-artist a { color:inherit;text-decoration:none;font-weight:700; }
.enmt-album-artist a:hover { color:var(--em-primary); }
.enmt-album-meta-row { display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem; }
.enmt-album-phases { display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem; }
.enmt-album-desc { font-size:.88rem;color:var(--em-muted);line-height:1.6; }
.enmt-album-actions { margin-top:.75rem; }
.enmt-album-tracklist { margin-top:1.5rem; }
.enmt-album-notes { margin-top:1.5rem; }

/* ── Artist page ──────────────────────────────────────────── */
.enmt-artist-wrap { max-width:900px;margin:0 auto;padding:0 1rem 3rem; }
.enmt-artist-header {
    display:grid;grid-template-columns:180px 1fr;gap:2rem;
    padding:2rem;border-radius:var(--em-radius-lg);
    background:linear-gradient(135deg,#F0F8F0,#EAF4FB);
    margin-bottom:2rem;box-shadow:var(--em-shadow);
}
.enmt-artist-avatar { width:160px;height:160px;border-radius:50%;object-fit:cover;box-shadow:var(--em-shadow-lg); }
.enmt-artist-name { font-size:1.7rem;font-weight:900;margin-bottom:.5rem; }
.enmt-artist-bio { margin-bottom:1.5rem; }

.enmt-albums-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem; }
.enmt-album-card {
    text-decoration:none;color:var(--em-text);
    border-radius:var(--em-radius);overflow:hidden;
    background:white;box-shadow:var(--em-shadow);
    transition:transform var(--em-trans),box-shadow var(--em-trans);
    border-top:3px solid var(--phase-color);
}
.enmt-album-card:hover { transform:translateY(-3px);box-shadow:var(--em-shadow-lg); }
.enmt-album-card-cover { position:relative;aspect-ratio:1;overflow:hidden; }
.enmt-album-card-cover img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s; }
.enmt-album-card:hover .enmt-album-card-cover img { transform:scale(1.06); }
.enmt-album-card-overlay {
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,.3);color:white;font-size:1.75rem;opacity:0;
    transition:opacity var(--em-trans);
}
.enmt-album-card:hover .enmt-album-card-overlay { opacity:1; }
.enmt-album-card-body { padding:.6rem .75rem; }
.enmt-album-card-body strong { display:block;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.enmt-album-card-body span { font-size:.72rem;color:var(--em-muted); }

/* ── Pagination ───────────────────────────────────────────── */
.enmt-lib-pagination { display:flex;justify-content:center;margin-top:2rem; }
.enmt-lib-pagination .page-numbers {
    display:inline-flex;align-items:center;gap:.35rem;flex-wrap:wrap;
}
.enmt-lib-pagination a.page-numbers,
.enmt-lib-pagination span.page-numbers {
    padding:.4rem .8rem;border-radius:8px;font-size:.85rem;
    border:1.5px solid var(--em-border);text-decoration:none;color:var(--em-text);
    transition:all var(--em-trans);
}
.enmt-lib-pagination a.page-numbers:hover { border-color:var(--em-primary);color:var(--em-primary); }
.enmt-lib-pagination span.current { background:var(--em-primary);border-color:var(--em-primary);color:white; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:700px) {
    .enmt-player--full { grid-template-columns:1fr; }
    .enmt-album-header { grid-template-columns:1fr;text-align:center; }
    .enmt-artist-header { grid-template-columns:1fr;text-align:center; }
    .enmt-artist-avatar { margin:0 auto; }
    .enmt-track-grid,.enmt-latest-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
    .enmt-track-row { grid-template-columns:32px 40px 1fr auto; }
    .enmt-row-album,.enmt-row-tags { display:none; }
    .enmt-global-player { flex-wrap:wrap;gap:.5rem; }
    .enmt-gb-info { flex:0 0 140px; }
    .enmt-gb-progress-wrap { order:10;flex:0 0 100%; }
}

@media (max-width:480px) {
    .enmt-lib-hero { padding:1.5rem 1rem; }
    .enmt-lib-hero-title { font-size:1.4rem; }
    .enmt-filter-bar { gap:.5rem; }
}