/* ════════════════════════════════════════════════════════════════════
   Melodia – Apple-Stil für die Windows-App
   ════════════════════════════════════════════════════════════════════
   Gleicher Look wie die Mac-/iPhone-App (und Android): Systemschrift,
   große fette Überschriften, ruhige Flächen ohne Rastermuster,
   Seitenleiste wie in Apple Music, "LCD"-Anzeige oben in der Mitte,
   Titel als Zeilen statt als Karten. Farben kommen aus den Theme-
   Variablen (--bg, --panel, --cyan …) – also auch aus Community-Designs.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --app-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, sans-serif;
  --art-radius: 20px;
  --fs-blur: 45px;
  --lyrics-scale: 1;
  --accent-soft: color-mix(in srgb, var(--cyan) 16%, transparent);
  --on-accent: #000;
  --sidebar-bg: color-mix(in srgb, var(--panel) 78%, transparent);
  --row-hover: rgba(255,255,255,0.05);
  --row-stripe: rgba(255,255,255,0.022);
}
html[data-theme="light"], html[data-theme="custom-light"]{
  --row-hover: rgba(0,0,0,0.05);
  --row-stripe: rgba(0,0,0,0.025);
}

/* ── Schrift & Grundfläche ─────────────────────────────────────────── */
html, body, button, input, select, textarea{ font-family: var(--app-font) !important; }
body{
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  background-image: none !important;           /* kein Rastermuster – ruhige Apple-Fläche */
}
body::before{ display:none !important; }

/* Große Überschriften wie in iOS/macOS ("Bibliothek", "Startseite" …) */
.view-large-title{
  font-size: 30px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.1;
  margin: 26px 0 18px; color: var(--text);
}
.home-section-title{ font-size: 21px !important; font-weight: 700 !important; letter-spacing: -0.35px !important; }

/* ── Desktop-Layout ────────────────────────────────────────────────── */
@media (min-width: 900px){

  /* Die mobile Kopfzeile liegt auf dem PC unsichtbar hinter Seiten- und
     Topbar und schob nur den Inhalt nach unten. */
  body > header{ display: none !important; }

  /* Seitenleiste wie Apple Music: durchscheinend, kompakt, Akzent-Symbole */
  nav{
    background: var(--sidebar-bg) !important;
    backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8);
    border-right: 1px solid color-mix(in srgb, var(--line) 70%, transparent) !important;
    padding: 14px 10px 14px !important;
  }
  .sidebar-header{ padding: 4px 8px 14px !important; }
  .sidebar-appname{ font-size: 16px !important; font-weight: 800 !important; letter-spacing: -0.3px !important; }
  .sidebar-search{
    border-radius: 8px !important; padding: 6px 9px !important;
    background: color-mix(in srgb, var(--text) 7%, transparent) !important;
    border: 1px solid transparent !important;
  }
  .sidebar-search input{ padding: 3px 0 !important; height: auto !important; border: none !important; background: transparent !important; box-shadow: none !important; font-size: 12.5px !important; }
  .sidebar-search:focus-within{ border-color: color-mix(in srgb, var(--cyan) 60%, transparent) !important; box-shadow: 0 0 0 3px var(--accent-soft); }
  nav .tab-btn{
    border-left: none !important; border-radius: 7px !important;
    padding: 6px 10px !important; margin-bottom: 2px !important;
    color: var(--text) !important; font-weight: 500 !important; font-size: 13px !important;
  }
  nav .tab-btn .tab-btn-icon{ color: var(--cyan); opacity: 1 !important; }
  nav .tab-btn:hover{ background: var(--row-hover) !important; }
  nav .tab-btn.active{
    background: color-mix(in srgb, var(--text) 11%, transparent) !important;
    font-weight: 600 !important;
  }
  .sidebar-playlist-item{ border-radius: 7px; }
  .sidebar-footer-row{ border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent) !important; }

  /* Obere Leiste: Transport links, "LCD" in der Mitte, Lautstärke rechts */
  #desktopTopbar{
    background: color-mix(in srgb, var(--bg) 82%, transparent) !important;
    backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent) !important;
  }
  .dtb-transport .np-btn{
    background: transparent !important; border: none !important; box-shadow: none !important;
    color: var(--text) !important; backdrop-filter: none !important;
  }
  .dtb-transport .np-btn:hover{ background: var(--row-hover) !important; }
  .dtb-transport .np-btn.play{
    background: transparent !important; color: var(--text) !important; width: 40px !important; height: 40px !important;
  }
  .dtb-transport .np-btn.play svg{ width: 20px; height: 20px; }
  .dtb-transport .np-btn.icon-btn{ color: var(--muted) !important; }
  .dtb-transport .np-btn.icon-btn.active{ color: var(--cyan) !important; }

  .dtb-nowplaying{
    background: color-mix(in srgb, var(--panel-2) 85%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent) !important;
    border-radius: 8px !important; padding: 0 12px 0 0 !important; overflow: hidden;
    min-height: 50px; position: relative;
  }
  .dtb-art{ width: 50px !important; height: 50px !important; border-radius: 0 !important; flex: none; }
  .dtb-info{ text-align: center; }
  .dtb-title{ font-size: 13px !important; font-weight: 600 !important; }
  .dtb-time{ font-size: 10.5px !important; font-variant-numeric: tabular-nums; }
  .dtb-seek{ height: 3px !important; border-radius: 2px !important; }
  .dtb-seek-fill{ background: var(--text) !important; opacity: .75; }
  body:not(.mt-no-progress-accent) .dtb-seek-fill{ background: var(--cyan) !important; opacity: 1; }
  .dtb-actions .icon-chip{
    background: transparent !important; border: none !important; backdrop-filter: none !important; color: var(--muted) !important;
  }
  .dtb-actions .icon-chip:hover{ background: var(--row-hover) !important; color: var(--text) !important; }

  /* Rechte Spalte "Warteschlange" wie "Als Nächstes" */
  #queuePanel{ background: color-mix(in srgb, var(--panel) 70%, transparent) !important; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
}

/* ── Bibliothek: Titelliste wie Apple Music (Zeilen statt Karten) ──── */
#libraryList{ border-radius: 12px; overflow: hidden; }
#libraryList .track{
  background: transparent !important; border: none !important; box-shadow: none !important;
  border-radius: 8px !important; margin: 0 !important; padding: 6px 10px !important;
  min-height: 0 !important;
}
#libraryList .track:nth-child(even){ background: var(--row-stripe) !important; }
#libraryList .track:hover{ background: var(--row-hover) !important; }
#libraryList .track.playing{ background: var(--accent-soft) !important; }
#libraryList .track.playing .track-name{ color: var(--cyan) !important; }
#libraryList .track-cover{ width: 40px !important; height: 40px !important; border-radius: 6px !important; }
#libraryList .track-name{ font-size: 13.5px !important; font-weight: 600 !important; }
#libraryList .track-size{ font-size: 12px !important; color: var(--muted) !important; }
#libraryList .track-add, #libraryList .track-del{ opacity: 0; transition: opacity .12s; background: transparent !important; border: none !important; }
#libraryList .track:hover .track-add, #libraryList .track:hover .track-del,
#libraryList .track .favorite-btn.active{ opacity: 1; }
#libraryList .favorite-btn.active{ color: var(--cyan) !important; }

/* Such-/Sortier-Kopf der Bibliothek ruhiger */
#view-library .card{ background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 0 8px !important; }
#librarySearch{ border-radius: 9px !important; background: color-mix(in srgb, var(--text) 7%, transparent) !important; border: 1px solid transparent !important; }
#librarySearch:focus{ border-color: color-mix(in srgb, var(--cyan) 60%, transparent) !important; box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }

/* ── Karten, Kacheln, Chips, Knöpfe ────────────────────────────────── */
.card{ border-radius: 12px !important; }
.home-card-art, .playlist-cover{ border-radius: 8px !important; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.home-card-title{ font-size: 13px !important; font-weight: 600 !important; }
.home-card-sub{ font-size: 12px !important; }
.chip{ border-radius: 999px !important; }
.chip.on{ background: var(--cyan) !important; border-color: var(--cyan) !important; color: var(--on-accent) !important; }
.btn{ border-radius: 10px !important; font-weight: 600 !important; }
.btn:not(.secondary):not(.danger){ background: var(--cyan) !important; color: var(--on-accent) !important; }
.page-modal{ border-radius: 14px !important; }
.page-modal-title{ font-weight: 800 !important; letter-spacing: -0.3px; }

/* Schalter im iOS-Stil */
.eq-on-toggle input:checked + .eq-on-toggle-track,
.switch input:checked + .switch-slider{ background: var(--cyan) !important; }

/* ── Vollbild-Player: Design-Optionen aus dem Design-Studio ────────── */
.fs-art{ border-radius: var(--art-radius) !important; }
body.mt-cover-glow .fs-art{ box-shadow: 0 0 80px 10px color-mix(in srgb, var(--cyan) 45%, transparent), 0 30px 60px rgba(0,0,0,.5) !important; }
body.mt-no-ambient .fs-ambient{ display: none !important; }
.fs-ambient{ filter: blur(var(--fs-blur)) saturate(1.6) brightness(0.6) !important; }
body.mt-accent-play .fs-controls .np-btn.play,
body.mt-accent-play .dtb-transport .np-btn.play{ background: var(--cyan) !important; color: var(--on-accent) !important; border-radius: 50% !important; }
#fsLyricsInner .lyrics-line{ font-size: calc(30px * var(--lyrics-scale)) !important; }
body.mt-lyrics-centered .lyrics-line{ text-align: center !important; }
body.mt-lyrics-accent .lyrics-line.active{ color: var(--cyan) !important; }
body:not(.mt-no-progress-accent) .fs-seek-fill{ background: var(--cyan) !important; }

/* Scrollbalken wie macOS (schmal, nur beim Drüberfahren deutlicher) */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--text) 18%, transparent); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover{ background-color: color-mix(in srgb, var(--text) 32%, transparent); }
::-webkit-scrollbar-track{ background: transparent; }

/* ════════════════ Obere Leiste: "Jetzt läuft" hat Vorrang ════════════════ */
@media (min-width: 900px){
  #desktopTopbar{ container-type: inline-size; container-name: topbar; gap: 12px !important; padding: 0 12px 0 16px !important; }
  .dtb-transport{ gap: 2px !important; }
  .dtb-nowplaying{ flex: 1 1 auto !important; min-width: 260px !important; max-width: 820px !important; }
  .dtb-actions{ gap: 2px !important; margin-left: 0 !important; }
  .dtb-actions .icon-chip{ width: 34px; height: 34px; padding: 0 !important; justify-content: center; }
  #dtbMoreBtn{ display: none; }
}
@container topbar (max-width: 1080px){
  .dtb-ov-dtbShuffleBtn, .dtb-ov-dtbRepeatBtn{ display: none !important; }
  #dtbMoreBtn{ display: flex !important; }
}
@container topbar (max-width: 880px){
  .dtb-ov-dtbMiniBtn, .dtb-ov-eq, .dtb-ov-dtbQueueBtn, .dtb-listeners-badge{ display: none !important; }
}
@container topbar (max-width: 700px){
  .dtb-time{ display: none !important; }
  .dtb-nowplaying{ min-width: 200px !important; }
}

/* Lautstärke-Popover */
#dtbVolPop, #dtbMoreMenu{
  position: fixed; z-index: 300; display: none;
  background: color-mix(in srgb, var(--panel-2) 92%, transparent);
  backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
#dtbVolPop{ width: 230px; padding: 14px 14px 10px; }
#dtbVolPop.show, #dtbMoreMenu.show{ display: block; animation: popIn .12s ease-out; }
@keyframes popIn{ from{ opacity: 0; transform: translateY(-4px) scale(.98); } to{ opacity: 1; transform: none; } }
#dtbVolPop .dtb-volume-row{ display: flex !important; width: 100%; }
#dtbVolPop .dtb-volume{ flex: 1; width: auto !important; height: 5px !important; }
#dtbVolPop .dtb-volume-fill{ background: var(--cyan) !important; }
#dtbVolPop .dtb-volume-fill::after{ opacity: 1 !important; }
#dtbVolPop .vol-pct{ text-align: center; font-size: 11px; color: var(--muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
#dtbMoreMenu{ width: 220px; padding: 6px; }
#dtbMoreMenu button{
  display: flex; width: 100%; align-items: center; justify-content: space-between; border: none; background: transparent;
  color: var(--text); font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 7px; cursor: pointer; text-align: left;
}
#dtbMoreMenu button:hover{ background: var(--accent-soft); }
#dtbMoreMenu .on{ color: var(--cyan); font-weight: 700; }
#dtbMoreMenu .empty-more{ padding: 8px 10px; font-size: 12px; color: var(--muted); }

/* ════════════════ Einstellungen wie in der iPhone-/Android-App ════════════════ */
#settingsPanel.st-xl{
  left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important;
  transform: translate(-50%, -50%);
  width: min(960px, calc(100vw - 48px)) !important; max-width: none !important;
  height: min(680px, calc(100vh - 48px)) !important; max-height: none !important;
  padding: 0 !important; border-radius: 16px !important; overflow: hidden;
  background: var(--bg) !important;
  z-index: 60;
}
#settingsPanel.st-xl .page-modal-header{
  padding: 14px 16px 12px 22px; border-bottom: 1px solid var(--line); margin: 0;
}
#settingsPanel.st-xl .page-modal-title{ font-size: 15px; }
#settingsPanel.st-xl .page-modal-body{ display: flex; flex: 1; min-height: 0; padding: 0 !important; overflow: hidden !important; }
.st-nav{
  width: 260px; flex: none; overflow-y: auto; padding: 12px 10px;
  background: color-mix(in srgb, var(--panel) 80%, transparent); border-right: 1px solid var(--line);
}
.st-item{
  display: flex; align-items: center; gap: 11px; width: 100%; border: none; background: transparent; color: var(--text);
  padding: 8px 10px; border-radius: 9px; cursor: pointer; text-align: left; font: inherit; margin-bottom: 2px;
}
.st-item:hover{ background: var(--row-hover); }
.st-item.on{ background: var(--accent-soft); }
.st-ic{ width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex: none; }
.st-tx{ display: flex; flex-direction: column; min-width: 0; }
.st-tx b{ font-size: 13.5px; font-weight: 600; }
.st-tx small{ font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-content{ flex: 1; min-width: 0; overflow-y: auto; padding: 8px 28px 28px; }
.st-page{ display: none; max-width: 620px; }
.st-page.on{ display: block; animation: fade .18s ease; }
.st-h{ font-size: 28px; font-weight: 800; letter-spacing: -0.5px; margin: 18px 0 16px; }
.st-page .card{
  background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: 12px !important;
  padding: 16px 18px !important; margin-bottom: 14px !important;
}
.st-page .card .label{ font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.st-about{ display: flex; align-items: center; gap: 16px; }
.st-about img{ width: 64px; height: 64px; border-radius: 14px; }
.st-about-name{ font-size: 20px; font-weight: 800; }
.st-about-ver{ font-size: 13px; color: var(--muted); margin-top: 2px; }
.st-about-by{ font-size: 11.5px; color: var(--muted); margin-top: 2px; opacity: .8; }
.st-page #themeList{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.st-page #themeList .modal-choice{ margin: 0 !important; padding: 10px 12px !important; font-size: 13px; }
#settingsPanel.st-xl .page-modal-close{ width: 28px; height: 28px; }

/* ════════════════ Suchvorschläge (Apple-Music-Popover) ════════════════ */
#discoverDropdown.dd-xl{
  position: fixed !important; z-index: 400 !important; overflow-y: auto; padding: 8px 0 0 !important;
  background: color-mix(in srgb, var(--panel-2) 94%, transparent) !important;
  backdrop-filter: blur(34px) saturate(1.7); -webkit-backdrop-filter: blur(34px) saturate(1.7);
  border: 1px solid var(--line) !important; border-radius: 14px !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.5) !important; max-width: none !important;
}
.dd-sec{ font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 16px 6px; }
.dd-albums{ display: flex; gap: 12px; overflow-x: auto; padding: 2px 16px 12px; scroll-snap-type: x mandatory; }
.dd-album{ flex: none; width: 104px; cursor: pointer; scroll-snap-align: start; }
.dd-album-art{ width: 104px; height: 104px; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); box-shadow: 0 6px 16px rgba(0,0,0,.3); transition: transform .12s; }
.dd-album:hover .dd-album-art{ transform: scale(1.03); }
.dd-album-art img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.dd-album-t{ font-size: 12px; font-weight: 600; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.dd-album-a{ font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-track{ display: flex; align-items: center; gap: 11px; padding: 6px 12px; margin: 0 6px; border-radius: 9px; cursor: pointer; }
.dd-track:hover{ background: var(--accent-soft); }
.dd-track-art{ width: 40px; height: 40px; border-radius: 6px; overflow: hidden; flex: none; background: color-mix(in srgb, var(--text) 8%, transparent); }
.dd-track-art img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.dd-track-tx{ flex: 1; min-width: 0; }
.dd-track-t{ font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-track-a{ font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-track-dl{ color: var(--cyan); opacity: 0; transition: opacity .12s; display: flex; }
.dd-track:hover .dd-track-dl{ opacity: 1; }
.dd-empty{ padding: 16px; font-size: 12.5px; color: var(--muted); text-align: center; }
.dd-foot{
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 9px; margin-top: 8px; padding: 11px 16px;
  border-top: 1px solid var(--line); cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--cyan);
  background: color-mix(in srgb, var(--panel-2) 96%, transparent);
}
.dd-foot span{ flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-foot kbd{ font: 600 10.5px var(--app-font); color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; }
.dd-foot:hover{ background: var(--accent-soft); }

/* ════════════════ Download-Einstellungen ════════════════ */
#downloadSettingsPanel.dl-xl{
  left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 48px)) !important; max-width: none !important;
  max-height: calc(100vh - 48px) !important;
  padding: 0 !important; border-radius: 16px !important; overflow: hidden;
  background: var(--bg) !important; z-index: 60;
}
#downloadSettingsPanel.dl-xl .page-modal-header{ padding: 14px 16px 12px 22px; border-bottom: 1px solid var(--line); margin: 0; }
#downloadSettingsPanel.dl-xl .page-modal-title{ font-size: 15px; font-weight: 800 !important; }
#downloadSettingsPanel.dl-xl .page-modal-close{ width: 28px; height: 28px; }
#downloadSettingsPanel.dl-xl .page-modal-body{ padding: 18px 22px 22px !important; overflow-y: auto; }
.dl-what{
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 16px;
  border-radius: 12px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent);
}
.dl-what.empty{ background: var(--panel); border-color: var(--line); }
.dl-what-ic{ width: 34px; height: 34px; border-radius: 9px; background: var(--cyan); color: var(--on-accent); display: flex; align-items: center; justify-content: center; flex: none; }
.dl-what.empty .dl-what-ic{ background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--muted); }
.dl-what small{ display: block; font-size: 11px; color: var(--muted); }
.dl-what b{ display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 430px; }
.dl-what.empty b{ font-weight: 500; font-size: 12.5px; color: var(--muted); }
.dl-group{ margin-bottom: 14px; }
.dl-group > .label{ font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) !important; margin: 0 2px 7px !important; }
.dl-seg{
  display: flex !important; flex-wrap: wrap; gap: 3px !important; padding: 3px; margin: 0 !important;
  border-radius: 10px; background: color-mix(in srgb, var(--text) 8%, transparent);
}
.dl-seg .chip{
  flex: 1 1 0; min-width: 84px; text-align: center; justify-content: center; margin: 0 !important;
  background: transparent !important; border: none !important; color: var(--text) !important; opacity: .75;
  border-radius: 8px !important; padding: 8px 6px !important; font-size: 12.5px !important; font-weight: 600 !important;
  box-shadow: none !important;
}
.dl-seg .chip:hover{ opacity: 1; }
.dl-seg .chip.on{
  background: var(--panel-2) !important; color: var(--cyan) !important; opacity: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.3), inset 0 0 0 1px color-mix(in srgb, var(--cyan) 35%, transparent) !important;
}
.dl-switch-row{ margin: 4px 0 0 !important; display: block !important; }
#playlistChip.dl-switch{
  display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: 12px !important;
  padding: 12px 14px !important; color: var(--text) !important; text-align: left; cursor: pointer;
}
#playlistChip.dl-switch[style*="display: none"]{ display: none !important; }
#playlistChip.dl-switch span b{ display: block; font-size: 13px; font-weight: 600; }
#playlistChip.dl-switch span small{ display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 1px; }
#playlistChip.dl-switch i{ position: relative; width: 40px; height: 24px; border-radius: 12px; background: rgba(127,127,127,.35); flex: none; transition: background .2s; }
#playlistChip.dl-switch i::after{ content: ''; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
#playlistChip.dl-switch.on i{ background: var(--cyan); }
#playlistChip.dl-switch.on i::after{ transform: translateX(16px); }
.dl-go{
  display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 18px !important; padding: 13px !important; border-radius: 12px !important;
  background: var(--cyan) !important; color: var(--on-accent) !important; font-size: 14px !important; font-weight: 700 !important; border: none !important;
}
.dl-go:disabled{ opacity: .45; cursor: default; }
.dd-albums{ scroll-padding-left: 16px; }
/* Abdunkeln hinter den großen Fenstern (Einstellungen, Download) */
body:has(#settingsPanel.st-xl.show) .page-modal-backdrop.show,
body:has(#downloadSettingsPanel.dl-xl.show) .page-modal-backdrop.show{
  background: rgba(0,0,0,.45) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}

/* ════════════════ Logo in Akzentfarbe (eigene Designs) ════════════════ */
html[data-custom-theme] .sidebar-logo{ filter: var(--logo-filter, none) !important; }

/* ════════════════ Abgerundet: schwebende Seitenleiste + Warteschlange ════════════════ */
@media (min-width: 900px){
  nav{
    top: 8px !important; left: 8px !important; bottom: 8px !important; width: 216px !important;
    border-radius: 16px !important; border: 1px solid color-mix(in srgb, var(--line) 75%, transparent) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
  }
  #desktopTopbar{ border-bottom: none !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .dtb-nowplaying{ border-radius: 12px !important; }
  .dtb-art{ border-radius: 11px 0 0 11px !important; }

  #queuePanel{
    top: 68px !important; right: 8px !important; bottom: 8px !important; width: 304px !important; max-width: 304px !important;
    border-radius: 16px !important; border: 1px solid color-mix(in srgb, var(--line) 75%, transparent) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.25) !important; padding: 0 !important; overflow: hidden;
  }
  body[data-miniplayer-pos="bottom"] #queuePanel{ top: 8px !important; bottom: 68px !important; }
  #queuePanel .page-modal-header{ padding: 16px 16px 6px !important; margin: 0 !important; }
  #queuePanel .page-modal-title{ font-size: 18px !important; font-weight: 800 !important; letter-spacing: -0.3px; }
  #queuePanel .page-modal-body{ padding: 0 8px 12px !important; }

  /* ── Kompakte Seitenleiste (nur Symbole) ── */
  body[data-sidebar="compact"] nav{ width: 60px !important; padding: 12px 6px !important; }
  body[data-sidebar="compact"] .sidebar-header{ padding: 4px 0 12px !important; justify-content: center !important; }
  body[data-sidebar="compact"] nav .tab-btn{ justify-content: center !important; padding: 9px 0 !important; gap: 0 !important; }
  body[data-sidebar="compact"] .sidebar-caret,
  body[data-sidebar="compact"] .sidebar-sublist{ display: none !important; }
  body[data-sidebar="compact"] .sidebar-navgroup-header{ justify-content: center !important; }
  body[data-sidebar="compact"] .tab-btn-icon{ width: 18px !important; height: 18px !important; margin: 0 !important; }
  body[data-sidebar="compact"]:not(.compact-search-open) .sidebar-search{
    width: 40px !important; height: 40px !important; padding: 0 !important; margin: 0 auto 10px !important;
    border-radius: 12px !important; justify-content: center !important; overflow: hidden;
  }
  body[data-sidebar="compact"]:not(.compact-search-open) .sidebar-search input,
  body[data-sidebar="compact"]:not(.compact-search-open) .sidebar-search .sidebar-search-settings{ display: none !important; }
  body[data-sidebar="compact"].compact-search-open .sidebar-search{
    border-radius: 12px !important; box-shadow: 0 12px 30px rgba(0,0,0,.4);
    background: var(--panel-2) !important; border: 1px solid var(--line) !important;
  }
  body[data-sidebar="compact"] .sidebar-footer-row{ justify-content: center !important; flex-wrap: wrap; }
}

/* ════════════════ Warteschlange "Als Nächstes" ════════════════ */
.q-sec{ font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 12px 8px 6px; }
#queueList .qrow{
  background: transparent !important; border: none !important; margin: 0 0 2px !important; padding: 6px 8px !important;
  border-radius: 10px !important; gap: 10px !important; backdrop-filter: none !important;
}
#queueList .qrow:hover{ background: var(--row-hover) !important; }
#queueList .qrow.current{ background: var(--accent-soft) !important; }
#queueList .qrow.current .qrow-art{ width: 48px; height: 48px; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
#queueList .qrow.played{ opacity: .45; }
#queueList .qrow-art{ border-radius: 7px !important; }
#queueList .qrow-idx{ display: none; }
#queueList .qrow-name{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
#queueList .qrow-name b{ font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#queueList .qrow.current .qrow-name b{ color: var(--cyan); }
#queueList .qrow-name small{ font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#queueList .qrow-btn, #queueList .qrow-handle{ opacity: 0; transition: opacity .12s; color: var(--muted); }
#queueList .qrow:hover .qrow-btn, #queueList .qrow:hover .qrow-handle{ opacity: 1; }
#queueList .empty{ padding: 30px 10px; text-align: center; color: var(--muted); font-size: 13px; }

/* ════════════════ Bibliothek: nur noch das Herz, Rest per Rechtsklick ════════════════ */
#libraryList .track-add:not(.favorite-btn),
#libraryList .track-del{ display: none !important; }
#libraryList .favorite-btn{ opacity: 0; }
#libraryList .track:hover .favorite-btn, #libraryList .favorite-btn.active{ opacity: 1; }

/* Rechtsklick-Menü im Apple-Stil */
.track-context-menu{
  background: color-mix(in srgb, var(--panel-2) 92%, transparent) !important;
  backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
  border-radius: 12px !important; border: 1px solid var(--line) !important; padding: 5px !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.5) !important;
}
.track-context-item{ border-radius: 7px !important; font-size: 13px !important; padding: 8px 10px !important; }
.track-context-item:hover{ background: var(--cyan) !important; color: var(--on-accent) !important; }
.track-context-item:hover svg{ color: var(--on-accent) !important; }
.ctx-sep{ height: 1px; background: var(--line); margin: 5px 6px; }
.ctx-danger{ color: #ff5f6d !important; }
.ctx-danger svg{ color: #ff5f6d !important; }
.ctx-danger:hover{ background: #ff5f6d !important; color: #fff !important; }
.ctx-danger:hover svg{ color: #fff !important; }

/* ════════════════ Eigene Hover-Texte ════════════════ */
#melTip{
  position: fixed; z-index: 9999; pointer-events: none; max-width: 280px;
  padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 1.35;
  color: var(--text); background: color-mix(in srgb, var(--panel-2) 95%, transparent);
  border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.4);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  opacity: 0; transform: translateY(-3px); transition: opacity .12s ease, transform .12s ease;
}
#melTip.above{ transform: translateY(3px); }
#melTip.show{ opacity: 1; transform: none; }

/* ════════════════════════════════════════════════════════════════════
   Vollbild-Player 2.0 (fsplayer.js)
   ════════════════════════════════════════════════════════════════════ */
#fsPlayer{ --fs-q: 0px; container-type: size; }
body:not(.queue-collapsed) #fsPlayer{ --fs-q: 316px; }
body:has(#queuePanel.queue-empty) #fsPlayer, body:has(#queuePanel.desktop-hidden) #fsPlayer{ --fs-q: 0px; }

/* Hintergrund-Visualizer über den ganzen Bildschirm */
#fsBgViz{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
#fsPlayer .fs-content{ z-index: 2; }

/* Das Cover ist IMMER sichtbar – der alte Kreis-Visualizer ist weg */
#fsRingCanvas{ display: none !important; }
body[data-fs-theme] .fs-art{ display: block !important; }

/* ── Obere Leiste ── */
.fs-topbar{
  position: absolute; z-index: 40; top: 16px; left: 18px; right: calc(18px + var(--fs-q));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none;
}
.fs-tb-left, .fs-tb-right{ display: flex; align-items: center; gap: 8px; pointer-events: auto; min-width: 0; }
.fs-tb-right{
  padding: 4px; border-radius: 999px;
  background: rgba(20,22,30,.38); border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
#fsPlayer .fs-topbar .fs-close,
#fsPlayer .fs-topbar .fs-tb-btn,
#fsPlayer .fs-topbar .fs-listeners-badge{ position: static !important; inset: auto !important; margin: 0 !important; }
#fsPlayer .fs-topbar .fs-close{
  width: 40px; height: 40px; border-radius: 50%; color: #fff;
  background: rgba(20,22,30,.38); border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: background .15s, transform .15s;
}
#fsPlayer .fs-topbar .fs-close:hover{ background: rgba(255,255,255,.16); transform: translateY(1px); }
#fsPlayer .fs-topbar .fs-tb-btn{
  width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent;
  color: rgba(255,255,255,.72); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s, color .15s;
}
#fsPlayer .fs-topbar .fs-tb-btn:hover{ background: rgba(255,255,255,.14); color: #fff; }
#fsPlayer .fs-topbar .fs-tb-btn.on{ color: var(--cyan); }
#fsPlayer .fs-topbar .fs-listeners-badge{
  height: 32px; border-radius: 999px; background: rgba(20,22,30,.38); border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}

/* ── Skalierung: alles hängt an der Fenstergröße ── */
#fsPlayer .fs-content{
  padding: 72px calc(32px + var(--fs-q)) 28px 32px !important;
  justify-content: center;
}
#fsPlayer .fs-left-col{ width: min(92cqw, 620px); }
#fsPlayer .fs-art{
  width: clamp(180px, min(48cqh, 40cqw), 520px) !important;
  height: clamp(180px, min(48cqh, 40cqw), 520px) !important;
  margin-bottom: clamp(16px, 3.4cqh, 34px) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  transition: width .25s ease, height .25s ease;
}
#fsPlayer #fsTitle{ display: none !important; }
.fs-meta{ width: min(100%, 560px); text-align: center; margin-bottom: clamp(12px, 2.4cqh, 22px); min-width: 0; }
.fs-song{
  font-size: clamp(19px, 3.4cqh, 30px); font-weight: 800; letter-spacing: -0.4px; line-height: 1.2; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fs-artist{
  font-size: clamp(13px, 2cqh, 17px); font-weight: 600; color: rgba(255,255,255,.62); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#fsPlayer .fs-seek, #fsPlayer .fs-times, #fsPlayer .fs-volume{ max-width: min(560px, 100%) !important; }
#fsPlayer .fs-seek{ height: 5px; border-radius: 99px; background: rgba(255,255,255,.16); }
#fsPlayer .fs-seek-fill{ border-radius: 99px; }
#fsPlayer .fs-times{ margin-bottom: clamp(10px, 2.6cqh, 28px) !important; font-variant-numeric: tabular-nums; }
#fsPlayer .fs-controls{ gap: clamp(8px, 1.6cqw, 20px); margin-bottom: clamp(10px, 2.4cqh, 24px) !important; }
#fsPlayer .fs-controls .np-btn{ width: clamp(38px, 5.4cqh, 50px); height: clamp(38px, 5.4cqh, 50px); background: transparent; border: none; color: rgba(255,255,255,.85); }
#fsPlayer .fs-controls .np-btn:hover{ background: rgba(255,255,255,.10); color: #fff; }
#fsPlayer .fs-controls .np-btn.play{ width: clamp(54px, 8cqh, 72px); height: clamp(54px, 8cqh, 72px); background: #fff; color: #0a0b10; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
body.mt-accent-play #fsPlayer .fs-controls .np-btn.play{ background: var(--cyan) !important; color: var(--on-accent) !important; }
#fsPlayer .fs-volume{ height: 5px; border-radius: 99px; background: rgba(255,255,255,.16); width: min(260px, 60%) !important; }
#fsPlayer .fs-volume-fill{ border-radius: 99px; background: var(--cyan); }


/* Songtext-Ansicht behält ihr zweispaltiges Layout */
#fsPlayer.show-lyrics .fs-content{ max-width: none !important; padding-left: 60px !important; gap: clamp(28px, 4cqw, 64px); }
#fsPlayer.show-lyrics .fs-left-col{ width: clamp(260px, 32cqw, 420px); }
#fsPlayer.show-lyrics .fs-art{ width: clamp(160px, min(34cqh, 24cqw), 340px) !important; height: clamp(160px, min(34cqh, 24cqw), 340px) !important; }
/* Design-Studio offen: Player rückt nach links, damit die Vorschau frei bleibt */
body:has(#designStudio.open) #fsPlayer{ --fs-q: 440px; }

/* ════════════════════════════════════════════════════════════════════
   Hörprobe (preview.js)
   ════════════════════════════════════════════════════════════════════ */
.dd-track-art{ position: relative; }
.pv-btn{
  --p: 0deg;
  border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; transition: opacity .15s, transform .12s, background .15s;
}
.dd-track-art .pv-btn{
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit;
  background: rgba(0,0,0,.45); opacity: 0;
}
.dd-track:hover .pv-btn, .pv-btn.on, .pv-btn.loading{ opacity: 1; }
.pv-btn.on, .pv-btn.loading{ background: rgba(0,0,0,.55); }
.dd-track-art .pv-btn.on::before{
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: conic-gradient(var(--cyan) var(--p), rgba(255,255,255,.18) 0);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%); mask: radial-gradient(circle, transparent 58%, #000 60%);
}
.pv-btn svg{ position: relative; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.pv-btn:active{ transform: scale(.92); }
.pv-inline{
  margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); opacity: .0; position: relative;
}
.discover-track-row:hover .pv-inline, .pv-inline.on, .pv-inline.loading{ opacity: 1; }
.pv-inline:hover{ background: var(--cyan); color: var(--on-accent, #000); }
.pv-inline.on{ background: conic-gradient(var(--cyan) var(--p), color-mix(in srgb, var(--text) 14%, transparent) 0); color: #fff; }
.pv-spin{ width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; animation: pvSpin .7s linear infinite; display: block; }
@keyframes pvSpin{ to{ transform: rotate(360deg); } }
.dd-track.pv-playing .dd-track-t, .discover-track-row.pv-playing .discover-track-title{ color: var(--cyan); }

/* ════════════════════════════════════════════════════════════════════
   Mini-Player 2.0 (nur im Mini-Fenster aktiv)
   Ansichten: Songtext · Cover (Songtext aus / keiner gefunden) · Warteschlange
   Fenster frei ziehbar – klein gezogen wird es eine kompakte Leiste.
   ════════════════════════════════════════════════════════════════════ */
html.mini-mode-early #miniPlayerBar{ background: #07080c; overflow: hidden; }
html.mini-mode-early .mp-ambient{ filter: blur(60px) saturate(1.8) brightness(.62) !important; transform: scale(1.4); }
html.mini-mode-early .mp-ambient::after{ background: linear-gradient(180deg, rgba(8,9,13,.15), rgba(8,9,13,.55) 45%, rgba(8,9,13,.9)) !important; }
html.mini-mode-early #miniPlayerBar.mp-playing .mp-ambient{ animation: mpAmbientPulse2 7s ease-in-out infinite; }
@keyframes mpAmbientPulse2{ 0%,100%{ transform: scale(1.4) rotate(0deg); } 50%{ transform: scale(1.55) rotate(4deg); } }

/* Titelleiste: immer leicht sichtbar, Knöpfe als runde Glas-Punkte */
html.mini-mode-early .mp-titlebar{ opacity: .55; height: 38px; padding: 0 10px; justify-content: space-between; }
html.mini-mode-early #miniPlayerBar:hover .mp-titlebar{ opacity: 1; }
html.mini-mode-early .mp-titlebar::before{
  content: 'MELODIA'; font-size: 10px; font-weight: 800; letter-spacing: .22em; color: rgba(255,255,255,.55); margin-right: auto; padding-left: 4px;
}
html.mini-mode-early .mp-titlebar-btn{ width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); margin-left: 6px; }
html.mini-mode-early .mp-titlebar-btn:hover{ background: rgba(255,255,255,.2); color: #fff; }
html.mini-mode-early .mp-titlebar-btn.mp-close:hover{ background: #ff453a; }

/* Kopf: Cover + Titel */
html.mini-mode-early .mp-header{ padding: 4px 18px 12px; gap: 14px; }
html.mini-mode-early #miniPlayerBar .mp-art{ width: 60px; height: 60px; border-radius: 12px; box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); }
html.mini-mode-early #miniPlayerBar .mp-title{ font-size: 15px; font-weight: 800; letter-spacing: -.2px; color: #fff; }
html.mini-mode-early #miniPlayerBar .mp-artist{ font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--cyan); }

/* Songtext: linksbündig, groß, aktive Zeile hell */
html.mini-mode-early .mp-lyrics-area{
  display: block; padding: 6px 22px; text-align: left; scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 50px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 50px), transparent);
}
html.mini-mode-early .mp-lyrics-area::-webkit-scrollbar{ width: 0; }
html.mini-mode-early #mpLyricsInner{ padding: 38% 0; }
html.mini-mode-early .mp-lyrics-area .lyrics-line{
  font-size: 19px !important; font-weight: 800; line-height: 1.3; padding: 6px 0; text-align: left !important;
  color: rgba(255,255,255,.28); transition: color .3s, transform .3s, filter .3s; transform-origin: left center; filter: blur(.4px);
}
html.mini-mode-early .mp-lyrics-area .lyrics-line.active{ color: #fff; transform: scale(1.03); filter: none; }
html.mini-mode-early body.mt-lyrics-accent .mp-lyrics-area .lyrics-line.active{ color: var(--cyan); }
html.mini-mode-early .mp-lyrics-area .lyrics-empty{ text-align: center; margin-top: 40%; }

/* Großes Cover, wenn der Songtext aus ist oder keiner gefunden wurde */
.mp-bigart{ display: none; }
html.mini-mode-early #miniPlayerBar.mp-hide-lyrics:not(.mp-show-queue) .mp-lyrics-area,
html.mini-mode-early #miniPlayerBar:not(.mp-show-queue):has(#mpLyricsInner .lyrics-empty) .mp-lyrics-area,
html.mini-mode-early #miniPlayerBar:not(.mp-show-queue):has(#mpLyricsInner:empty) .mp-lyrics-area{
  display: flex; align-items: center; justify-content: center; -webkit-mask-image: none; mask-image: none; overflow: hidden; padding: 4px 22px 10px;
}
html.mini-mode-early #miniPlayerBar.mp-hide-lyrics:not(.mp-show-queue) .mp-bigart,
html.mini-mode-early #miniPlayerBar:not(.mp-show-queue):has(#mpLyricsInner .lyrics-empty) .mp-bigart,
html.mini-mode-early #miniPlayerBar:not(.mp-show-queue):has(#mpLyricsInner:empty) .mp-bigart{ display: block; }
html.mini-mode-early #miniPlayerBar:not(.mp-show-queue):has(#mpLyricsInner .lyrics-empty) #mpLyricsInner,
html.mini-mode-early #miniPlayerBar:not(.mp-show-queue):has(#mpLyricsInner:empty) #mpLyricsInner{ display: none; }
.mp-bigart{
  width: min(100%, calc(100vh - 250px)); aspect-ratio: 1; border-radius: 18px;
  background-size: cover; background-position: center; background-color: rgba(255,255,255,.06);
  background-image: linear-gradient(135deg, var(--violet), var(--cyan));
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
#miniPlayerBar:not(.mp-playing) .mp-bigart{ transform: scale(.9); }
/* In der Cover-Ansicht: kleines Cover im Kopf weg, Titel mittig unter das große Cover */
html.mini-mode-early #miniPlayerBar.mp-cover-view .mp-header{ order: 3; padding: 0 22px 12px; }
html.mini-mode-early #miniPlayerBar.mp-cover-view .mp-header .mp-art{ display: none; }
html.mini-mode-early #miniPlayerBar.mp-cover-view .mp-info{ align-items: stretch; text-align: center; }
html.mini-mode-early #miniPlayerBar.mp-cover-view .mp-title{ font-size: 17px; }
html.mini-mode-early #miniPlayerBar.mp-cover-view .mp-lyrics-area{ order: 2; }
html.mini-mode-early #miniPlayerBar.mp-cover-view .mp-titlebar{ order: 1; }
html.mini-mode-early #miniPlayerBar.mp-cover-view .mp-seek-row{ order: 4; }
html.mini-mode-early #miniPlayerBar.mp-cover-view .mp-controls-row{ order: 5; }

/* Warteschlange */
html.mini-mode-early #mpQueueInner{ padding: 4px 0 20px; }
html.mini-mode-early .mp-queue-tabs{ padding: 3px; border-radius: 10px; background: rgba(255,255,255,.08); gap: 2px; position: sticky; top: 0; z-index: 2; backdrop-filter: blur(16px); }
html.mini-mode-early .mp-queue-tab{ background: transparent; color: rgba(255,255,255,.65); border-radius: 8px; padding: 7px 0; }
html.mini-mode-early .mp-queue-tab.active{ background: rgba(255,255,255,.16); color: #fff; }
html.mini-mode-early .mp-qrow{ border: none; border-radius: 10px; padding: 8px 10px; margin: 2px 0; color: rgba(255,255,255,.85); }
html.mini-mode-early .mp-qrow:hover{ background: rgba(255,255,255,.08); }
html.mini-mode-early .mp-qrow-menu{ border-radius: 12px; background: rgba(28,30,40,.92); backdrop-filter: blur(20px); }

/* Unterer Bereich: Sucher + Steuerung als Glas-Karte */
html.mini-mode-early .mp-seek-row{
  margin: 0 12px; padding: 14px 16px 0; border-radius: 20px 20px 0 0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-bottom: none;
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
}
html.mini-mode-early .mp-controls-row{
  margin: 0 12px 12px; padding: 8px 12px 14px; border-radius: 0 0 20px 20px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-top: none;
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
}
html.mini-mode-early #miniPlayerBar .mp-seek{ height: 5px; border-radius: 99px; background: rgba(255,255,255,.16); transition: height .15s; }
html.mini-mode-early #miniPlayerBar .mp-seek:hover{ height: 7px; }
html.mini-mode-early #miniPlayerBar .mp-seek-fill{ border-radius: 99px; background: var(--cyan) !important; }
html.mini-mode-early #miniPlayerBar .mp-times{ color: rgba(255,255,255,.55); font-size: 10.5px; font-weight: 600; }
html.mini-mode-early .mp-controls-center{ gap: 10px; }
html.mini-mode-early #miniPlayerBar .np-btn{ width: 38px; height: 38px; border: none; background: transparent; color: rgba(255,255,255,.9); border-radius: 50%; }
html.mini-mode-early #miniPlayerBar .np-btn:hover{ background: rgba(255,255,255,.1); }
html.mini-mode-early #miniPlayerBar .np-btn.play{ width: 50px; height: 50px; background: #fff; color: #0a0b10; box-shadow: 0 8px 22px rgba(0,0,0,.4); }
html.mini-mode-early body.mt-accent-play #miniPlayerBar .np-btn.play{ background: var(--cyan); color: var(--on-accent, #000); }
html.mini-mode-early #miniPlayerBar .np-btn.play:hover{ transform: scale(1.05); }
html.mini-mode-early #miniPlayerBar .np-btn.icon-btn{ width: 32px; height: 32px; color: rgba(255,255,255,.55); }
html.mini-mode-early #miniPlayerBar .np-btn.icon-btn.active{ color: var(--cyan); background: color-mix(in srgb, var(--cyan) 16%, transparent); }
html.mini-mode-early .mp-volume-popover{ border-radius: 99px; background: rgba(28,30,40,.92); backdrop-filter: blur(20px); }
html.mini-mode-early .mp-volume-slider-fill{ background: var(--cyan) !important; }
html.mini-mode-early .mp-tb-right{ display: flex; align-items: center; gap: 2px; }

/* Klein gezogen (niedriges Fenster): kompakte Leiste ohne Songtext */
@media (max-height: 330px){
  html.mini-mode-early .mp-lyrics-area{ display: none !important; }
  html.mini-mode-early #miniPlayerBar .mp-header{ order: 2 !important; padding: 0 16px 8px !important; }
  html.mini-mode-early #miniPlayerBar .mp-header .mp-art{ display: block !important; width: 48px; height: 48px; }
  html.mini-mode-early #miniPlayerBar .mp-info{ align-items: stretch !important; text-align: left !important; }
  html.mini-mode-early .mp-titlebar{ height: 30px; }
  html.mini-mode-early .mp-seek-row{ padding-top: 10px; }
  html.mini-mode-early .mp-controls-row{ padding-bottom: 8px; }
  html.mini-mode-early #mpLyricsToggleBtn, html.mini-mode-early #mpQueueToggleBtn{ display: none; }
}
@media (max-height: 210px){
  html.mini-mode-early .mp-seek-row .mp-times{ display: none; }
  html.mini-mode-early .mp-titlebar{ position: absolute; top: 0; right: 0; left: 0; z-index: 5 !important; }
  html.mini-mode-early #miniPlayerBar .mp-header{ padding-top: 10px !important; }
}
html.mini-mode-early #miniPlayerBar.mp-cover-view .mp-bigart{ display: block; }
html.mini-mode-early #miniPlayerBar.mp-cover-view .mp-lyrics-area{ display: flex; align-items: center; justify-content: center; -webkit-mask-image: none; mask-image: none; overflow: hidden; padding: 4px 22px 14px; }
html.mini-mode-early #miniPlayerBar.mp-cover-view #mpLyricsInner{ display: none; }

/* ════════════════════════════════════════════════════════════════════
   Equalizer 2.0 (eq.js) – Design wie in der Android-App
   ════════════════════════════════════════════════════════════════════ */
#eqPanel.eqx{ flex-direction: column; padding: 0 !important; overflow-y: auto; overflow-x: hidden; width: min(760px, 96vw); max-height: 90vh; }
html.eq-window-early #eqPanel.eqx{ width: 100% !important; max-height: none; background: var(--bg) !important; border-radius: 0 !important; }
html.eq-window-early #eqPanel.eqx::before{
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 70%);
}
#eqPanel.eqx > *{ position: relative; z-index: 1; }
.eqx-head{ display: flex; align-items: center; gap: 14px; padding: 18px 22px 6px; -webkit-app-region: drag; }
.eqx-title{ flex: 1; min-width: 0; }
.eqx-title h2{ margin: 0; font-size: 28px; font-weight: 900; letter-spacing: -.6px; color: var(--text); line-height: 1.1; }
.eqx-sub{ font-size: 13px; color: var(--muted); margin-top: 2px; }
.eqx-switch, .eqx-done, .eqx-chips, .eqx-mixer, .eqx-save{ -webkit-app-region: no-drag; }
.eqx-switch{ position: relative; width: 50px; height: 30px; flex: none; cursor: pointer; }
.eqx-switch input{ opacity: 0; width: 0; height: 0; position: absolute; }
.eqx-switch span{ position: absolute; inset: 0; border-radius: 99px; background: color-mix(in srgb, var(--text) 18%, transparent); transition: background .2s; }
.eqx-switch span::after{ content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.eqx-switch input:checked + span{ background: var(--cyan); }
.eqx-switch input:checked + span::after{ transform: translateX(20px); }
.eqx-done{ border: none; background: transparent; color: var(--cyan); font: inherit; font-size: 15px; font-weight: 800; padding: 8px 10px; border-radius: 99px; cursor: pointer; }
.eqx-done:hover{ background: color-mix(in srgb, var(--cyan) 14%, transparent); }
.eqx-hint{ padding: 0 22px; font-size: 12px; color: var(--muted); }
.eqx-curve{ display: block; width: calc(100% - 44px); height: 96px; margin: 12px 22px 10px; }

.eqx-mixer{
  display: flex; align-items: flex-end; margin: 0 14px; padding: 16px 8px 14px; border-radius: 18px;
  background: var(--panel); border: 1px solid var(--line);
}
.eqx-band{ flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.eqx-band.pre{ flex: 1.15 1 0; }
.eqx-sep{ width: 1px; align-self: stretch; margin: 0 4px; background: var(--line); }
.eqx-val{ font-size: 11px; font-weight: 700; color: var(--muted); height: 14px; margin-bottom: 8px; font-variant-numeric: tabular-nums; transition: color .15s; }
.eqx-val.nz{ color: var(--cyan); }
.eqx-track{ position: relative; width: 34px; height: clamp(150px, calc(100vh - 470px), 300px); cursor: ns-resize; touch-action: none; outline: none; }
.eqx-track i{ position: absolute; left: 50%; display: block; pointer-events: none; }
.eqx-track .rail{ top: 0; bottom: 0; width: 4px; margin-left: -2px; border-radius: 4px; background: rgba(255,255,255,.10); }
.eqx-track .zero{ top: 50%; width: 16px; height: 1px; margin-left: -8px; background: rgba(255,255,255,.25); }
.eqx-track .fill{ width: 4px; margin-left: -2px; border-radius: 4px; background: var(--cyan); transition: top .06s, height .06s; }
.eqx-track .knob{
  width: 24px; height: 13px; margin: -6.5px 0 0 -12px; border-radius: 99px; background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.45); transition: transform .12s, top .06s;
}
.eqx-track .knob::after{ content: ''; position: absolute; left: 6px; right: 6px; top: 5.5px; height: 2px; border-radius: 2px; background: var(--cyan); }
.eqx-track:hover .knob, .eqx-band.active .knob, .eqx-track:focus-visible .knob{ transform: scale(1.15); }
.eqx-band.active .eqx-val{ color: var(--text); }
.eqx-lab{ font-size: 10.5px; color: var(--muted); margin-top: 10px; white-space: nowrap; font-weight: 600; }
.eqx-band.pre .eqx-lab{ color: var(--text); }
#eqPanel.eqx-off .eqx-mixer{ opacity: .4; }
#eqPanel.eqx-off .eqx-track{ cursor: not-allowed; }
#eqPanel.eqx-off .fill, #eqPanel.eqx-off .knob::after{ background: var(--muted); }

.eqx-sec{ font-size: 12px; font-weight: 700; letter-spacing: .9px; color: var(--muted); padding: 20px 22px 8px; }
.eqx-chips{ display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 8px; }
.eqx-chip{
  border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 99px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .15s, border-color .15s;
}
.eqx-chip:hover{ border-color: color-mix(in srgb, var(--cyan) 60%, var(--line)); }
.eqx-chip.on{ background: var(--cyan); border-color: var(--cyan); color: var(--on-accent, #000); }
.eqx-chip.add{ border-style: dashed; color: var(--cyan); background: transparent; }
.eqx-chip .x{ font-size: 10px; opacity: .55; margin-right: -4px; padding: 2px 4px; border-radius: 99px; }
.eqx-chip .x:hover{ opacity: 1; background: rgba(255,59,48,.85); color: #fff; }
.eqx-save{ display: flex; gap: 8px; padding: 6px 18px 18px; }
.eqx-save[hidden]{ display: none; }
.eqx-save input{ flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; outline: none; }
.eqx-save input:focus{ border-color: var(--cyan); }
.eqx-btn{ border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700; padding: 0 14px; border-radius: 10px; cursor: pointer; }
.eqx-btn.primary{ background: var(--cyan); border-color: var(--cyan); color: var(--on-accent, #000); }
#eqPanel.eqx::after{ content: ''; display: block; height: 14px; flex: none; }

/* ════════════════════════════════════════════════════════════════════
   Große Suche (search.js)
   ════════════════════════════════════════════════════════════════════ */
#melSearch{ position: fixed; inset: 0; z-index: 150; display: none; }
#melSearch.open{ display: block; }
.ms-backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: msFade .18s ease; }
.ms-panel{
  position: absolute; left: 50%; top: 7vh; transform: translateX(-50%);
  width: min(820px, calc(100vw - 32px)); max-height: 82vh; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.55); overflow: hidden;
  backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
  animation: msPop .2s cubic-bezier(.2,.8,.2,1);
}
@keyframes msFade{ from{ opacity: 0; } }
@keyframes msPop{ from{ opacity: 0; transform: translate(-50%, -10px) scale(.98); } }
.ms-bar{ display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.ms-ico{ color: var(--cyan); display: flex; }
#msInput{ flex: 1; min-width: 0; border: none !important; background: transparent !important; outline: none; color: var(--text); font: inherit; font-size: 20px; font-weight: 600; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
#msInput::placeholder{ color: var(--muted); font-weight: 500; }
.ms-icbtn{ width: 34px; height: 34px; border-radius: 10px; border: none; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ms-icbtn:hover{ background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
#melSearch kbd{ font: 600 10.5px var(--app-font, inherit); color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.ms-tabs{ display: flex; gap: 6px; padding: 10px 16px 4px; }
.ms-tabs button{ border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 99px; cursor: pointer; }
.ms-tabs button:hover{ border-color: color-mix(in srgb, var(--cyan) 60%, var(--line)); }
.ms-tabs button.on{ background: var(--cyan); border-color: var(--cyan); color: var(--on-accent, #000); }
.ms-body{ flex: 1; min-height: 120px; overflow-y: auto; padding: 4px 10px 12px; }
.ms-sec{ display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 6px; }
.ms-sec span{ font-size: 15px; font-weight: 800; letter-spacing: -.2px; color: var(--text); }
.ms-more{ border: none; background: none; color: var(--cyan); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.ms-row{ display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 10px; cursor: pointer; }
.ms-row:hover, .ms-row.sel{ background: color-mix(in srgb, var(--text) 8%, transparent); }
.ms-row.sel{ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 50%, transparent); }
.ms-art{ position: relative; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex: none; background: color-mix(in srgb, var(--text) 8%, transparent); }
.ms-art img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-art.ic{ display: flex; align-items: center; justify-content: center; color: var(--cyan); }
.ms-art .pv-btn{ position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(0,0,0,.45); opacity: 0; border-radius: inherit; }
.ms-row:hover .ms-art .pv-btn, .ms-row.sel .ms-art .pv-btn, .ms-art .pv-btn.on, .ms-art .pv-btn.loading{ opacity: 1; }
.ms-art .pv-btn.on::before{ content: ''; position: absolute; inset: 4px; border-radius: 50%; background: conic-gradient(var(--cyan) var(--p), rgba(255,255,255,.18) 0); -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%); mask: radial-gradient(circle, transparent 58%, #000 60%); }
.ms-playov{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .15s; }
.ms-row:hover .ms-playov, .ms-row.sel .ms-playov{ opacity: 1; }
.ms-tx{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ms-tx b{ font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-tx small{ font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-row.pv-playing .ms-tx b, .ms-top.pv-playing b{ color: var(--cyan); }
.ms-dur{ font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ms-dl{ width: 34px; height: 34px; border-radius: 50%; border: none; flex: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--cyan) 14%, transparent); color: var(--cyan); opacity: .0; transition: opacity .15s, background .15s, transform .12s; }
.ms-row:hover .ms-dl, .ms-row.sel .ms-dl{ opacity: 1; }
.ms-dl:hover{ background: var(--cyan); color: var(--on-accent, #000); }
.ms-dl:active{ transform: scale(.92); }
.ms-badge{ display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--cyan); padding: 4px 9px; border-radius: 99px; background: color-mix(in srgb, var(--cyan) 12%, transparent); flex: none; }
.ms-topgrid{ display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 14px; }
@media (max-width: 760px){ .ms-topgrid{ grid-template-columns: 1fr; } }
.ms-top{ position: relative; padding: 18px; border-radius: 14px; cursor: pointer; background: color-mix(in srgb, var(--text) 6%, transparent); display: flex; flex-direction: column; gap: 4px; transition: background .15s; }
.ms-top:hover, .ms-top.sel{ background: color-mix(in srgb, var(--text) 10%, transparent); }
.ms-top-art{ width: 96px; height: 96px; border-radius: 10px; overflow: hidden; margin-bottom: 12px; box-shadow: 0 10px 26px rgba(0,0,0,.4); background: color-mix(in srgb, var(--text) 8%, transparent); }
.ms-top-art img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-top b{ font-size: 22px; font-weight: 900; letter-spacing: -.4px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-top small{ font-size: 12.5px; color: var(--muted); }
.ms-top-act{ display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.pv-btn.ms-pv-big{ width: 44px; height: 44px; border-radius: 50%; background: var(--cyan); color: var(--on-accent, #000); position: relative; }
.pv-btn.ms-pv-big svg{ filter: none; }
.pv-btn.ms-pv-big.on{ background: conic-gradient(color-mix(in srgb, var(--cyan) 60%, #fff) var(--p), var(--cyan) 0); }
.ms-btn{ display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 700; padding: 0 16px; height: 40px; border-radius: 99px; cursor: pointer; white-space: nowrap; }
.ms-btn.primary{ background: color-mix(in srgb, var(--text) 10%, transparent); border-color: transparent; }
.ms-btn.primary:hover{ background: var(--cyan); color: var(--on-accent, #000); }
.ms-albums{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 0 6px; }
.ms-albums.grid{ grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); padding-top: 10px; }
@media (max-width: 760px){ .ms-albums:not(.grid){ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ms-album{ cursor: pointer; padding: 6px; border-radius: 12px; min-width: 0; }
.ms-album:hover, .ms-album.sel{ background: color-mix(in srgb, var(--text) 8%, transparent); }
.ms-album-art{ aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); margin-bottom: 7px; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.ms-album-art img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-album b{ display: block; font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-album small{ display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-dlq{ margin-top: 10px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; padding-top: 12px; }
.ms-dlq b{ color: var(--cyan); }
.ms-link{ display: flex; align-items: center; gap: 14px; margin: 16px 8px 8px; padding: 18px; border-radius: 14px; background: color-mix(in srgb, var(--cyan) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); }
.ms-link-ico{ width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--cyan); color: var(--on-accent, #000); flex: none; }
.ms-hint{ font-size: 12px; color: var(--muted); padding: 4px 10px; }
.ms-none{ padding: 30px 10px 6px; text-align: center; color: var(--muted); font-size: 13.5px; }
.ms-empty-hero{ display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 44px 20px; color: var(--muted); font-size: 13.5px; text-align: center; }
.ms-empty-hero svg{ width: 40px; height: 40px; color: color-mix(in srgb, var(--cyan) 70%, transparent); }
.ms-recent{ display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 8px 10px; }
.ms-recent button{ border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 12.5px; padding: 7px 13px; border-radius: 99px; cursor: pointer; }
.ms-recent button:hover{ border-color: var(--cyan); }
.ms-recent button.clear{ border-style: dashed; color: var(--muted); }
.ms-skel{ display: flex; align-items: center; gap: 12px; padding: 7px 8px; }
.ms-skel i{ width: 44px; height: 44px; border-radius: 8px; }
.ms-skel span{ flex: 1; display: flex; flex-direction: column; gap: 7px; }
.ms-skel em{ display: block; height: 10px; border-radius: 6px; width: 46%; }
.ms-skel em + em{ width: 28%; }
.ms-skel i, .ms-skel em{ background: linear-gradient(90deg, color-mix(in srgb, var(--text) 7%, transparent) 25%, color-mix(in srgb, var(--text) 14%, transparent) 50%, color-mix(in srgb, var(--text) 7%, transparent) 75%); background-size: 200% 100%; animation: msShimmer 1.1s linear infinite; }
@keyframes msShimmer{ to{ background-position: -200% 0; } }
.ms-foot{ border-top: 1px solid var(--line); padding: 9px 18px; min-height: 40px; display: flex; align-items: center; }
.ms-keys{ display: flex; gap: 18px; font-size: 11.5px; color: var(--muted); }
.ms-keys[hidden]{ display: none; }
.ms-keys kbd{ margin-right: 3px; }
.ms-prog{ flex: 1; display: flex; align-items: center; gap: 12px; }
.ms-prog[hidden]{ display: none; }
.ms-prog-t{ font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.ms-prog-bar{ flex: 1; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; }
.ms-prog-bar i{ display: block; height: 100%; width: 0; border-radius: 99px; background: var(--cyan); transition: width .4s; }

/* Schmale Seitenleiste: Download-Fortschritt als schlanker Balken statt abgeschnittenem Text */
body[data-sidebar="compact"] #sidebarProgress{ width: 40px !important; margin: 0 auto 10px !important; padding: 6px 0 !important; border-radius: 10px !important; }
body[data-sidebar="compact"] #sidebarProgress .sidebar-progress-meta{ display: none !important; }
body[data-sidebar="compact"] #sidebarProgress .progress-track{ margin: 0 6px !important; height: 4px !important; }
.dd-foot.dd-big{ position: static; margin-top: 4px; color: var(--text); border-top: 1px solid var(--line); background: transparent; }

/* ════════════════════════════════════════════════════════════════════
   Startseite: Hörprobe + Download auf den Empfehlungs-Karten (homepreview.js)
   ════════════════════════════════════════════════════════════════════ */
.hp-card .home-card-art{ position: relative; }
.hp-card .home-card-play{ display: none !important; }          /* altes großes Play-Symbol (war nur „ins Suchfeld“) */
.hp-card .home-card-art::after{
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55)); opacity: 0; transition: opacity .18s;
}
.hp-card:hover .home-card-art::after, .hp-card.pv-playing .home-card-art::after{ opacity: 1; }
.pv-btn.hp-pv, .hp-dl{
  position: absolute; bottom: 10px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(6px);
  transition: opacity .18s, transform .18s, background .15s; box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.pv-btn.hp-pv{ left: 10px; background: var(--cyan); color: var(--on-accent, #000); }
.pv-btn.hp-pv svg{ filter: none; }
.hp-dl{ right: 10px; width: 36px; height: 36px; bottom: 13px; background: rgba(20,22,30,.7); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hp-dl:hover{ background: var(--cyan); color: var(--on-accent, #000); }
.hp-dl.busy{ background: var(--cyan); color: var(--on-accent, #000); opacity: 1; transform: none; }
.hp-card:hover .hp-pv, .hp-card:hover .hp-dl, .pv-btn.hp-pv.on, .pv-btn.hp-pv.loading{ opacity: 1; transform: none; }
.pv-btn.hp-pv:hover{ transform: scale(1.06) !important; }
.pv-btn.hp-pv.on{ background: conic-gradient(color-mix(in srgb, var(--cyan) 55%, #fff) var(--p), var(--cyan) 0); }
.hp-card.pv-playing .home-card-art{ box-shadow: 0 0 0 2px var(--cyan), 0 12px 30px rgba(0,0,0,.4); }
.hp-card.pv-playing .home-card-title{ color: var(--cyan); }
.hp-card .home-card-sub{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Übergänge / Überblenden (crossfade.js) ── */
#xfCard .xf-row{ display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
#xfCard .xf-row:first-of-type{ border-top: none; }
#xfCard .xf-t{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#xfCard .xf-t b{ font-size: 13.5px; font-weight: 700; color: var(--text); }
#xfCard .xf-t small{ font-size: 12px; color: var(--muted); }
#xfCard .xf-slider.off{ opacity: .4; pointer-events: none; }
#xfCard input[type=range]{ -webkit-appearance: none; appearance: none; flex: 1.4; height: 5px; border-radius: 99px; outline: none; margin: 0;
  background: linear-gradient(90deg, var(--cyan) var(--x, 50%), color-mix(in srgb, var(--text) 14%, transparent) var(--x, 50%)); }
#xfCard input[type=range]{ border: none; height: 6px; backdrop-filter: none; }
#xfCard input[type=range]::-webkit-slider-runnable-track{ height: 6px; }
#xfCard input[type=range]::-webkit-slider-thumb{ -webkit-appearance: none; opacity: 1; margin-top: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.4); cursor: pointer; }
#xfCard .xf-val{ width: 36px; text-align: right; font-size: 13px; font-weight: 700; color: var(--cyan); font-variant-numeric: tabular-nums; }
#xfCard .xf-switch{ position: relative; width: 46px; height: 28px; flex: none; cursor: pointer; }
#xfCard .xf-switch input{ position: absolute; opacity: 0; width: 0; height: 0; }
#xfCard .xf-switch span{ position: absolute; inset: 0; border-radius: 99px; background: color-mix(in srgb, var(--text) 18%, transparent); transition: background .2s; }
#xfCard .xf-switch span::after{ content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .2s; }
#xfCard .xf-switch input:checked + span{ background: var(--cyan); }
#xfCard .xf-switch input:checked + span::after{ transform: translateX(18px); }
#xfCard .xf-note{ font-size: 11.5px; color: var(--muted); padding-top: 8px; }
#xfCard .xf-seg{ display: flex; padding: 3px; border-radius: 11px; background: color-mix(in srgb, var(--text) 9%, transparent); margin: 2px 0 8px; }
#xfCard .xf-seg button{ flex: 1; border: none; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 6px; border-radius: 9px; cursor: pointer; opacity: .7; transition: background .15s, opacity .15s; }
#xfCard .xf-seg button:hover{ opacity: 1; }
#xfCard .xf-seg button.on{ background: var(--cyan); color: var(--on-accent, #000); opacity: 1; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
#xfCard .xf-desc{ font-size: 12px; color: var(--muted); line-height: 1.45; padding: 2px 2px 6px; }
/* Smart-Mix läuft gerade: kleines Leuchten am Cover in der oberen Leiste */
body.mel-mixing #dtbArt{ box-shadow: 0 0 0 2px var(--cyan), 0 0 18px color-mix(in srgb, var(--cyan) 60%, transparent) !important; transition: box-shadow .4s; }

/* Vollbild: Hintergrund pulsiert bei Bass-Kicks (fsplayer.js setzt --beat) */
#fsPlayer .fs-ambient{ scale: calc(1 + var(--beat, 0)); }   /* addiert sich zum bisherigen Puls */
#fsPlayer .fs-art{ will-change: transform; }

/* ════════════════════════════════════════════════════════════════════
   Klick-Fix: Die obere Leiste ist eine Fenster-Ziehfläche (rahmenloses
   Fenster). Electron wertet diese Fläche auch UNTER Overlays aus – Knöpfe,
   die darüber liegen (Vollbild-Player, Suche, Design-Studio, Dialoge),
   ließen sich dadurch nur an manchen Stellen klicken. Solange so ein
   Overlay offen ist, ist die Ziehfläche darunter abgeschaltet und das
   Overlay selbst ausdrücklich klickbar.
   ════════════════════════════════════════════════════════════════════ */
body:has(#fsPlayer.show) #desktopTopbar, body:has(#fsPlayer.show) .sidebar-header,
body:has(#melSearch.open) #desktopTopbar, body:has(#melSearch.open) .sidebar-header,
body:has(#designStudio.open) #desktopTopbar, body:has(#designStudio.open) .sidebar-header,
body:has(.page-modal.show) #desktopTopbar, body:has(.page-modal.show) .sidebar-header,
body:has(#melStudio.open) #desktopTopbar, body:has(#melStudio.open) .sidebar-header,
body:has(#modalOverlay.show) #desktopTopbar, body:has(#modalOverlay.show) .sidebar-header{
  -webkit-app-region: no-drag !important;
}
#fsPlayer, #melSearch, #melStudio, #designStudio, .page-modal, #modalOverlay, #eqNameDialogOverlay, #discoverDropdown, #trackContextMenu, #melTip{
  -webkit-app-region: no-drag;
}
/* Im Vollbild-Player: freie Fläche der oberen Leiste zieht das Fenster, Knöpfe bleiben klickbar */
#fsPlayer .fs-topbar{ -webkit-app-region: drag; height: 44px; }
#fsPlayer .fs-topbar .fs-tb-left, #fsPlayer .fs-topbar .fs-tb-right,
#fsPlayer .fs-topbar button, #fsPlayer .fs-topbar .fs-listeners-badge{ -webkit-app-region: no-drag; }

/* ════════════════════════════════════════════════════════════════════
   Mix-Anzeige im Player oben (mixbadge.js)
   ════════════════════════════════════════════════════════════════════ */
.dtb-nowplaying{ position: relative; }
.dtb-nowplaying.mx-on{ overflow: hidden; }
.mx-layer{ position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; overflow: hidden; }
.mx-bg{ position: absolute; inset: 0; background: linear-gradient(90deg, var(--panel) 0%, color-mix(in srgb, var(--cyan) 12%, var(--panel)) 50%, var(--panel) 100%); }
.mx-layer.beat .mx-bg{ animation: mxBgBeat var(--beat, .5s) ease-out infinite; }
@keyframes mxBgBeat{ 0%{ filter: brightness(1.3); } 60%,100%{ filter: brightness(1); } }
.mx-cover{ position: absolute; left: 8px; top: 50%; margin-top: -17px; width: 34px; height: 34px; perspective: 300px; }
.mx-art{ position: absolute; inset: 0; border-radius: 9px; background-size: cover; background-position: center; backface-visibility: hidden;
  background-color: color-mix(in srgb, var(--text) 10%, transparent); box-shadow: 0 6px 16px rgba(0,0,0,.45), 0 0 0 1.5px color-mix(in srgb, var(--cyan) 70%, transparent); }
.mx-layer.beat .mx-art{ animation: mxArtBeat var(--beat, .5s) ease-out infinite; }
@keyframes mxArtBeat{ 0%{ box-shadow: 0 6px 16px rgba(0,0,0,.45), 0 0 0 2px var(--cyan), 0 0 16px var(--cyan); } 70%,100%{ box-shadow: 0 6px 16px rgba(0,0,0,.45), 0 0 0 1.5px color-mix(in srgb, var(--cyan) 50%, transparent); } }
.mx-mid{ position: absolute; left: 54px; right: 12px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.mx-pill{ align-self: center; font-size: 10px; font-weight: 800; letter-spacing: .4px; color: var(--on-accent, #000); background: var(--cyan); padding: 2px 9px; border-radius: 99px; white-space: nowrap;
  box-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 55%, transparent); }
.mx-lane{ position: relative; height: 17px; }
.mx-t{ position: absolute; left: 0; top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; font-weight: 700; line-height: 17px; transform-origin: center; }
.mx-told{ color: var(--text); }
.mx-tnew{ color: var(--cyan); text-shadow: 0 0 10px color-mix(in srgb, var(--cyan) 45%, transparent); }
.mx-burst{ position: absolute; top: 50%; width: 30px; height: 30px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0%, var(--cyan) 35%, transparent 70%); mix-blend-mode: screen; }
.mx-prog{ position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: color-mix(in srgb, var(--text) 10%, transparent); }
.mx-prog i{ display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 40%, #fff), var(--cyan)); }
/* der Cover-Rahmen leuchtet nicht mehr extra, die Anzeige übernimmt */
body.mel-mixing #dtbArt{ box-shadow: none !important; }
/* nach dem Mix: Übergang bewerten (Smart-DJ lernt) */
.mx-rate{ position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 7; display: flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--panel-2, var(--panel)) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 45%, var(--line)); box-shadow: 0 6px 18px rgba(0,0,0,.35); backdrop-filter: blur(8px); }
.mx-rate span{ font-size: 11.5px; font-weight: 700; color: var(--text); white-space: nowrap; padding-right: 2px; }
.mx-rate button{ width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer;
  transition: background .15s, color .15s, transform .1s; }
.mx-rate button:hover{ background: color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--cyan); }
.mx-rate button:active{ transform: scale(.9); }
.xf-rate{ white-space: nowrap; }
.xf-rate button{ border: 1px solid var(--line); background: transparent; border-radius: 99px; padding: 0 7px; margin-left: 4px; cursor: pointer; font-size: 12px; line-height: 20px; }
.xf-rate button:hover{ border-color: var(--cyan); }

/* ════════════════════════════════════════════════════════════════════
   Suche nur noch als Knopf + Download-Einstellungen in der Suche (1.6.4)
   ════════════════════════════════════════════════════════════════════ */
#sidebarSearchBox.as-button{ cursor: pointer; padding: 7px 10px; gap: 8px; transition: background .15s, border-color .15s; }
#sidebarSearchBox.as-button:hover{ background: rgba(255,255,255,0.08); border-color: color-mix(in srgb, var(--cyan) 40%, transparent); color: var(--text); }
#sidebarSearchBox.as-button > input,
#sidebarSearchBox.as-button > .sidebar-search-settings,
#sidebarSearchBox.as-button > .discover-dropdown{ display: none !important; }
.sb-search-label{ flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.sb-search-label kbd{ font: 600 9.5px var(--app-font, inherit); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; color: var(--muted); background: rgba(255,255,255,0.04); }
#sidebarSearchBox.as-button:hover .sb-search-label{ color: var(--text); }
body[data-sidebar="compact"] .sb-search-label{ display: none; }
body[data-sidebar="compact"] #sidebarSearchBox.as-button{ position: static !important; width: 44px !important; height: 44px !important; padding: 0 !important; justify-content: center; box-shadow: none !important; background: transparent !important; border: none !important; }
body[data-sidebar="compact"] #sidebarSearchBox.as-button:hover{ background: var(--panel-2) !important; }
#downloadSettingsPanel{ display: none !important; }

.ms-optbtn{ display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 10px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.ms-optbtn:hover{ color: var(--text); border-color: color-mix(in srgb, var(--cyan) 50%, var(--line)); }
.ms-optbtn.on{ color: var(--cyan); border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.ms-opts{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; border-bottom: 1px solid transparent; }
.ms-opts.open{ grid-template-rows: 1fr; border-bottom-color: var(--line); }
.ms-opts-in{ overflow: hidden; padding: 0 18px; }
.ms-opts.open .ms-opts-in{ padding: 12px 18px 14px; }
.ms-og{ display: flex; align-items: center; gap: 14px; padding: 5px 0; }
.ms-og > span{ width: 74px; flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.ms-ochips{ display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.ms-ochips button{ border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 99px; cursor: pointer; }
.ms-ochips button:hover{ border-color: color-mix(in srgb, var(--cyan) 60%, var(--line)); }
.ms-ochips button.on{ background: var(--cyan); border-color: var(--cyan); color: var(--on-accent, #000); }
.ms-onote{ font-size: 12px; color: var(--muted); font-style: normal; padding: 5px 0; }
.ms-switch{ display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ms-switch.dis{ cursor: default; opacity: .6; }
.ms-switch input{ display: none; }
.ms-switch i{ position: relative; width: 36px; height: 20px; flex: none; border-radius: 99px; background: color-mix(in srgb, var(--text) 18%, transparent); transition: background .15s; }
.ms-switch i::after{ content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s; }
.ms-switch input:checked + i{ background: var(--cyan); }
.ms-switch input:checked + i::after{ transform: translateX(16px); }
.ms-switch b{ font-size: 12px; font-weight: 500; color: var(--muted); }
.ms-inl{ border: none; background: none; padding: 0; color: var(--cyan); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ms-prog-x{ flex: none; width: 24px; height: 24px; border-radius: 50%; border: none; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--muted); font-size: 11px; cursor: pointer; }
.ms-prog-x:hover{ background: #e81123; color: #fff; }


/* ════════════════════════════════════════════════════════════════════
   Stream-Studio (streamstudio.js) – OBS-Overlay gestalten
   ════════════════════════════════════════════════════════════════════ */
#melStudio{ position: fixed; inset: 0; z-index: 140; display: none; }
#melStudio.open{ display: block; }
body:has(#melStudio.open) #modalOverlay{ z-index: 220; }
.ss-backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: msFade .18s ease; }
.ss-win{ position: absolute; inset: 3.5vh 2.5vw; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: 0 30px 90px rgba(0,0,0,.6); overflow: hidden; animation: ssPop .22s cubic-bezier(.2,.8,.2,1); }
@keyframes ssPop{ from{ opacity: 0; transform: scale(.985) translateY(8px); } }
.ss-head{ display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 18px; border-bottom: 1px solid var(--line); }
.ss-logo{ width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--on-accent, #000);
  background: linear-gradient(135deg, var(--cyan), color-mix(in srgb, var(--cyan) 45%, #ff2bd6)); }
.ss-htx{ display: flex; flex-direction: column; min-width: 0; }
.ss-htx b{ font-size: 16px; font-weight: 800; color: var(--text); }
.ss-htx small{ font-size: 12px; color: var(--muted); }
.ss-status{ margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); white-space: nowrap; }
.ss-status i{ width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 70%, transparent); }
.ss-status.on{ color: #2ed573; border-color: color-mix(in srgb, #2ed573 45%, transparent); }
.ss-status.on i{ background: #2ed573; box-shadow: 0 0 0 0 rgba(46,213,115,.6); animation: ssLive 1.6s infinite; }
@keyframes ssLive{ 70%{ box-shadow: 0 0 0 7px rgba(46,213,115,0); } 100%{ box-shadow: 0 0 0 0 rgba(46,213,115,0); } }
.ss-x{ width: 34px; height: 34px; border-radius: 10px; border: none; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; }
.ss-x:hover{ background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.ss-main{ flex: 1; min-height: 0; display: grid; grid-template-columns: 148px 350px 1fr; }
.ss-nav{ display: flex; flex-direction: column; gap: 3px; padding: 12px 10px; border-right: 1px solid var(--line); overflow-y: auto; }
.ss-nav button{ display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: none; border-radius: 10px; background: transparent; color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.ss-nav button:hover{ background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.ss-nav button.on{ background: color-mix(in srgb, var(--cyan) 15%, transparent); color: var(--cyan); }
.ss-panel{ overflow-y: auto; padding: 4px 18px 24px; border-right: 1px solid var(--line); }
.ss-sec{ padding: 16px 0 8px; display: flex; flex-direction: column; gap: 2px; }
.ss-sec b{ font-size: 13.5px; font-weight: 800; color: var(--text); }
.ss-sec small{ font-size: 11.5px; color: var(--muted); }
.ss-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.ss-chips button{ border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 99px; cursor: pointer; }
.ss-chips button:hover{ border-color: color-mix(in srgb, var(--cyan) 60%, var(--line)); }
.ss-chips button.on{ background: var(--cyan); border-color: var(--cyan); color: var(--on-accent, #000); }
.ss-range{ display: flex; flex-direction: column; gap: 5px; padding: 8px 0; }
.ss-range > span{ display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text); font-weight: 600; }
.ss-range em{ font-style: normal; color: var(--cyan); font-variant-numeric: tabular-nums; }
.ss-range input{ -webkit-appearance: none; appearance: none; width: 100%; margin: 4px 0; height: 6px; border: none; border-radius: 99px; outline: none;
  backdrop-filter: none; background: linear-gradient(90deg, var(--cyan) var(--x, 50%), color-mix(in srgb, var(--text) 14%, transparent) var(--x, 50%)); }
.ss-range input::-webkit-slider-runnable-track{ height: 6px; }
.ss-range input::-webkit-slider-thumb{ -webkit-appearance: none; opacity: 1; margin-top: -5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.45); cursor: pointer; }
.ss-fx{ padding: 2px 0 4px; }
.ss-fx small{ display: block; margin-top: -3px; font-size: 11px; color: var(--muted); }
.ss-tog{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; cursor: pointer; }
.ss-tog > span{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ss-tog b{ font-size: 13px; font-weight: 600; color: var(--text); }
.ss-tog small{ font-size: 11px; color: var(--muted); }
.ss-tog input{ display: none; }
.ss-tog i{ position: relative; width: 36px; height: 20px; flex: none; border-radius: 99px; background: color-mix(in srgb, var(--text) 18%, transparent); transition: background .15s; }
.ss-tog i::after{ content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s; }
.ss-tog input:checked + i{ background: var(--cyan); }
.ss-tog input:checked + i::after{ transform: translateX(16px); }
.ss-colors{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ss-color{ display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.ss-color input{ width: 26px; height: 26px; border: none; padding: 0; background: none; cursor: pointer; flex: none; }
.ss-color input::-webkit-color-swatch-wrapper{ padding: 0; } .ss-color input::-webkit-color-swatch{ border: none; border-radius: 7px; }
.ss-color span{ font-size: 12px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
.ss-color code{ font-size: 10.5px; color: var(--muted); }
.ss-text{ display: flex; flex-direction: column; gap: 5px; padding: 8px 0; }
.ss-text span{ font-size: 12.5px; font-weight: 600; color: var(--text); }
.ss-text input, .ss-row input{ font: inherit; font-size: 13px; color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; outline: none; min-width: 0; }
.ss-text input:focus, .ss-row input:focus{ border-color: var(--cyan); }
.ss-row{ display: flex; gap: 8px; flex-wrap: wrap; }
.ss-row input{ flex: 1; }
.ss-btn{ display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer;
  background: color-mix(in srgb, var(--text) 8%, transparent); border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; white-space: nowrap; }
.ss-btn:hover{ border-color: color-mix(in srgb, var(--cyan) 60%, var(--line)); }
.ss-btn.primary{ background: var(--cyan); border-color: var(--cyan); color: var(--on-accent, #000); }
.ss-btn.ghost{ background: transparent; color: var(--muted); }
.ss-note{ margin-top: 10px; font-size: 11.5px; line-height: 1.45; color: var(--muted); padding: 9px 11px; border-radius: 10px;
  background: color-mix(in srgb, var(--cyan) 7%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 18%, transparent); }
.ss-empty{ font-size: 12px; color: var(--muted); padding: 6px 0; }
.ss-presets{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ss-pre{ display: flex; flex-direction: column; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: transparent;
  cursor: pointer; font: inherit; text-align: left; transition: border-color .15s, transform .15s; }
.ss-pre:hover{ border-color: var(--cyan); transform: translateY(-1px); }
.ss-pre .sw{ height: 42px; border-radius: 8px; display: block; }
.ss-pre b{ font-size: 12.5px; color: var(--text); padding: 0 2px; }
.ss-mine{ display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ss-mi{ display: flex; align-items: center; gap: 6px; }
.ss-mi-l{ flex: 1; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: transparent;
  color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; }
.ss-mi-l:hover{ border-color: var(--cyan); }
.ss-mi-l .sw{ width: 22px; height: 22px; border-radius: 6px; flex: none; }
.ss-mi-x{ width: 30px; height: 30px; border: none; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.ss-mi-x:hover{ background: #e81123; color: #fff; }
.ss-layouts{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ss-lay{ display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; border: 1px solid var(--line); border-radius: 12px;
  background: transparent; cursor: pointer; font: inherit; }
.ss-lay b{ font-size: 11.5px; color: var(--text); }
.ss-lay.on{ border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.ss-lay > span{ position: relative; width: 70px; height: 40px; border-radius: 6px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.ss-lay > span i{ position: absolute; background: color-mix(in srgb, var(--text) 45%, transparent); border-radius: 2px; }
.ss-lay.on > span i{ background: var(--cyan); }
.lay-card i:nth-child(1){ left: 6px; top: 12px; width: 16px; height: 16px; } .lay-card i:nth-child(2){ left: 26px; top: 14px; width: 34px; height: 4px; } .lay-card i:nth-child(3){ left: 26px; top: 22px; width: 22px; height: 3px; }
.lay-bar i:nth-child(1){ left: 3px; bottom: 4px; width: 9px; height: 9px; } .lay-bar i:nth-child(2){ left: 15px; bottom: 9px; width: 30px; height: 3px; } .lay-bar i:nth-child(3){ left: 0; right: 0; bottom: 1px; height: 2px; }
.lay-pill i:nth-child(1){ left: 10px; top: 14px; width: 12px; height: 12px; border-radius: 50% !important; } .lay-pill i:nth-child(2){ left: 26px; top: 18px; width: 34px; height: 4px; } .lay-pill i:nth-child(3){ display: none; }
.lay-big i:nth-child(1){ left: 25px; top: 4px; width: 20px; height: 20px; } .lay-big i:nth-child(2){ left: 20px; top: 28px; width: 30px; height: 3px; } .lay-big i:nth-child(3){ left: 26px; top: 34px; width: 18px; height: 2px; }
.lay-vinyl i:nth-child(1){ left: 6px; top: 8px; width: 24px; height: 24px; border-radius: 50% !important; } .lay-vinyl i:nth-child(2){ left: 34px; top: 15px; width: 28px; height: 4px; } .lay-vinyl i:nth-child(3){ left: 34px; top: 23px; width: 18px; height: 3px; }
.lay-viz i{ bottom: 4px; width: 8px; } .lay-viz i:nth-child(1){ left: 14px; height: 14px; } .lay-viz i:nth-child(2){ left: 31px; height: 26px; } .lay-viz i:nth-child(3){ left: 48px; height: 18px; }
.ss-anchor{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; width: 168px; padding: 6px; border-radius: 12px; aspect-ratio: 16/10;
  background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid var(--line); }
.ss-anchor button{ border: 1px dashed color-mix(in srgb, var(--text) 18%, transparent); border-radius: 6px; background: transparent; cursor: pointer; }
.ss-anchor button:hover{ border-color: var(--cyan); }
.ss-anchor button.on{ background: var(--cyan); border-style: solid; border-color: var(--cyan); }
.ss-url{ display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.ss-url > div{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ss-url b{ font-size: 12.5px; color: var(--text); }
.ss-url small{ font-size: 11px; color: var(--muted); }
.ss-url code{ font-size: 11px; color: var(--cyan); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-view{ display: flex; flex-direction: column; min-width: 0; min-height: 0; background: color-mix(in srgb, #000 25%, var(--panel)); }
.ss-stage-wrap{ flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 18px; }
.ss-stage{ position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5); outline: 1px solid var(--line); }
.ss-stage iframe{ position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0; background: transparent; }
.ss-stage[data-bg="checker"]{ background: repeating-conic-gradient(#2a2d36 0 25%, #1d1f26 0 50%) 0 0 / 24px 24px; }
.ss-stage[data-bg="dark"]{ background: #0b0c10; }
.ss-stage[data-bg="light"]{ background: #e9ecf2; }
.ss-stage[data-bg="game"]{ background:
    radial-gradient(ellipse at 70% 30%, rgba(255,200,120,.55), transparent 45%),
    linear-gradient(180deg, #2b5876 0%, #4e4376 45%, #1a1a2e 46%, #16213e 100%); }
.ss-zoom.on{ border-color: var(--cyan); color: var(--cyan); }
.ss-viewbar{ display: flex; align-items: center; gap: 12px; padding: 10px 18px 14px; }
.ss-bgs{ display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.ss-bgs button{ width: 30px; height: 26px; border: none; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; }
.ss-bgs button.on{ background: var(--panel); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.ss-hint{ font-size: 11.5px; color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px){ .ss-main{ grid-template-columns: 60px 320px 1fr; } .ss-nav span{ display: none; } .ss-nav button{ justify-content: center; } }

/* ════════════════════════════════════════════════════════════════════
   Vollbild-Mix-Animation (fsmix.js)
   ════════════════════════════════════════════════════════════════════ */
.fsmx{ position: absolute; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; opacity: 0; }
.fsmx-scrim{ position: absolute; inset: 0; background: rgba(0,0,0,.78); }
.fsmx-glow{ position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--cyan) 45%, transparent), transparent 60%); }
.fsmx-ring{ position: absolute; left: 50%; top: 46%; width: 0; height: 0; border: 3px solid var(--cyan); border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; }
.fsmx-stage{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.fsmx-covers{ position: relative; width: var(--cs, 300px); height: var(--cs, 300px); }
.fsmx-art{ position: absolute; inset: 0; border-radius: 22px; background-size: cover; background-position: center;
  background-color: color-mix(in srgb, var(--cyan) 30%, #111); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.fsmx-titles{ position: relative; width: 100%; height: 40px; }
.fsmx-t{ position: absolute; left: 50%; top: 0; translate: -50% 0; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 28px; font-weight: 900; color: #fff; text-shadow: 0 4px 16px rgba(0,0,0,.6); }
.fsmx-pill{ display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: .6px;
  color: var(--cyan); background: color-mix(in srgb, var(--cyan) 18%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); opacity: 0; }
.fsmx-pill i{ width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: fsmxPulse .5s ease-in-out infinite alternate; }
@keyframes fsmxPulse{ from{ opacity: .35; } }
.fsmx-flash{ position: absolute; inset: 0; background: #fff; opacity: 0; }
#xfCard .xf-seg-sm{ margin: 0; flex: none; min-width: 170px; }
#xfCard #xfPro{ border-top: 1px solid var(--line); margin-top: 6px; padding-top: 4px; }
#xfCard #xfPro .xf-seg-sm{ min-width: 210px; }