:root{
      --sp-bg: #000000;
      --sp-surface: #000000;
      --sp-surface-2: #000000;
      --sp-text: #ffffff;
      --sp-muted: #b3b3b3;
      --sp-accent: #1db954;
      --sp-focus: 0 0 0 3px rgba(204,204,204,.55);
      --sp-gap: 0px;
      --sp-pad: 0px;
      --sp-shadow: 0 12px 30px rgba(0,0,0,.35);
      --sp-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    /* Base widget (NO rounded corners, NO borders) */
    .sp-widget{
      width: 100%;
      font-family: var(--sp-font);
      color: var(--sp-text);
      background: linear-gradient(180deg, var(--sp-surface), var(--sp-bg));
      border: none;
      border-radius: 0;
      box-shadow: var(--sp-shadow);
      padding: var(--sp-pad);
      box-sizing: border-box;
    }

    .sp-row{ display:flex; align-items:center; gap: 12px; min-width:0; }
    .sp-col{ display:flex; flex-direction:column; gap: 10px; min-width:0; }

    .sp-h2{ font-size: 1.25rem; margin:0; line-height:1.2; letter-spacing:.2px; }
    .sp-h3{ font-size: 1rem; margin:0; line-height:1.2; letter-spacing:.2px; }
    .sp-p{ margin:0; color: var(--sp-muted); line-height:1.3; }
    .sp-small{ font-size: .875rem; }

    /* Buttons (NO borders, NO rounded corners) */
    .sp-btn{
      appearance:none;
      border: none;
      border-radius: 0;
      background: var(--sp-surface-2);
      color: var(--sp-text);
      width: 44px;
      height: 44px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      flex: 0 0 auto;
      transition: transform .08s ease, background .12s ease;
    }
    .sp-btn:hover{ background: rgba(255,255,255,.08); }
    .sp-btn:active{ transform: scale(.98); }
    .sp-btn:focus-visible{ outline:none; box-shadow: var(--sp-focus); }

    .sp-btn--primary{ background: rgba(153,153,153,.15); }
    .sp-btn--primary:hover{ background: rgba(204,204,204,.22); }

    .sp-icon{ width: 22px; height: 22px; fill: currentColor; }

    .sp-sr-only{
      position:absolute!important;
      width:1px;height:1px;
      padding:0;margin:-1px;overflow:hidden;
      clip:rect(0,0,0,0);white-space:nowrap;border:0;
    }

    /* Range (progress) – accessible */
    .sp-range{
      width: 100%;
      background: transparent;
      margin:0;
      height: 28px;
      border: none;
      border-radius: 0;
    }
    .sp-range:focus-visible{ outline:none; box-shadow: var(--sp-focus); }
    .sp-range::-webkit-slider-runnable-track{
      height: 8px;
      background: rgba(255,255,255,.16);
      border-radius: 0;
    }
    .sp-range::-webkit-slider-thumb{
      -webkit-appearance: none;
      width: 16px; height: 16px;
      margin-top: -4px;
      border-radius: 0;
      background: var(--sp-accent);
      box-shadow: 0 6px 16px rgba(0,0,0,.35);
    }
    .sp-range::-moz-range-track{
      height: 8px;
      background: rgba(255,255,255,.16);
      border-radius: 0;
    }
    .sp-range::-moz-range-thumb{
      width: 16px; height: 16px;
      border-radius: 0;
      background: var(--sp-accent);
      border: none;
      box-shadow: 0 6px 16px rgba(0,0,0,.35);
    }

    .sp-time{
      font-variant-numeric: tabular-nums;
      color: var(--sp-muted);
      font-size: .9rem;
      white-space: nowrap;
    }

    /* Links */
    .sp-link{
      color: var(--sp-text);
      text-decoration: underline;
      text-decoration-color: rgba(255,255,255,.25);
      text-underline-offset: 3px;
    }
    .sp-link:hover{ text-decoration-color: rgba(255,255,255,.65); }
    .sp-link:focus-visible{ outline:none; box-shadow: var(--sp-focus); }

    /* Marquee */
    .sp-marquee{
      position: relative;
      overflow: hidden;
      min-width: 0;
      flex: 1 1 auto;
    }
    .sp-marquee__inner{
      display: inline-flex;
      gap: 10px;
      white-space: nowrap;
      will-change: transform;
      /* default OFF - wird per active/video eingeschaltet */
      animation: none;
      transform: none;
    }
    .sp-marquee:hover .sp-marquee__inner,
    .sp-marquee:focus-within .sp-marquee__inner{
      animation-play-state: paused;
    }
    @keyframes sp-marquee{
      0%{ transform: translateX(100%); }
      100%{ transform: translateX(-100%); }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      .sp-marquee__inner{ animation: none !important; transform:none !important; }
    }

    /* ====== (a) Simple audio player layout ====== */
    .sp-simple{
      display:flex;
      align-items:center;
      gap: 12px;
      min-width:0;
    }
    .sp-simple__progress{ flex: 1 1 auto; min-width:0; }

    /* ====== (b) Album/Playlist layout ====== */
    .sp-album{
      display:flex;
      gap: var(--sp-gap);
      min-width:0;
    }
    .sp-cover{
      width: 48%;
      aspect-ratio: 1 / 1;
      border-radius: 0;
      overflow:hidden;
      background: #0e0e0e;
    }
    .sp-cover img{
      width:100%; height:100%;
      object-fit: cover;
      display:block;
    }
    .sp-album__meta{
      width: 48%;
      display:flex;
      flex-direction:column;
      gap: 10px;
      min-width:0;
      padding-left: 4%;
      justify-content: center;
    }
    .sp-album__meta-top{ display:flex; align-items:center; justify-content:space-between; gap: 12px; }
    .sp-album__meta-controls{ display:flex; gap: 10px; }

    .sp-tracklist{
      margin-top: 14px;
      display:flex;
      flex-direction:column;
      gap: 10px;
    }
    .sp-track{
      background: rgba(255,255,255,.03);
      border: none;
      border-radius: 0;
      padding: 10px 12px;
      display:flex;
      flex-direction:column;
      gap: 8px;
    }

    .sp-track__top{
      display:flex;
      align-items:center;
      gap: 12px;
      min-width:0;
      width: 100%;
    }
    .sp-track__titleblock{ min-width:0; width:100%; }

    /* Static title (nicht aktiv): bleibt am Anfang, lesbar */
    .sp-static{
      min-width:0;
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sp-track__bottom{
      display:flex;
      align-items:center;
      gap: 12px;
      min-width:0;
      width: 100%;
    }
    .sp-track__progress{ min-width:0; width:100%; }

    /* Highlight active */
    .sp-track[data-active="true"]{
      background: rgba(204,204,204,.10);
    }

    /* ====== (c) Video player layout ====== */
    .sp-video{
      display:flex;
      flex-direction:column;
      gap: 12px;
      min-width:0;
    }
    .sp-video__frame{
      width:100%;
      aspect-ratio: 16 / 9;
      border-radius: 0;
      overflow:hidden;
      background: #000;
    }
    .sp-video__frame video{
      width:100%; height:100%;
      object-fit: cover;
      display:block;
    }
    .sp-video__controls{
      background: rgba(255,255,255,.03);
      border-radius: 0;
      padding: 10px 12px;
      border:none;
      display:flex;
      flex-direction:column;
      gap: 10px;
      min-width:0;
    }
    .sp-video__controls-top{
      display:flex; align-items:center; gap: 12px; min-width:0; width:100%;
    }
    .sp-video__controls-bottom{
      display:flex; align-items:center; gap: 12px; min-width:0; width:100%;
    }

    /* ===== Responsive rules ===== */
    @media (max-width: 767px){
      .sp-album{ flex-direction: column; }
      .sp-cover{ width: 100%; }
      .sp-album__meta{ width: 100%; padding-left: 0%; padding: 20px 0 20px 0;}
      /* Track: bleibt untereinander */
    }

    /* MD+ : Track Row in einer Zeile mit 50/50 Titleblock vs Progress */
    @media (min-width: 768px){
      .sp-track{
        flex-direction: row;
        align-items:center;
        gap: 12px;
      }
      .sp-track__top{
        flex: 1 1 0;
        min-width:0;
      }
      .sp-track__bottom{
        flex: 1 1 0;
        min-width:0;
        justify-content: flex-end;
      }
      .sp-track__titleblock{
        flex: 1 1 0;
        min-width:0;
      }
      .sp-track__progress{
        flex: 1 1 0;
        min-width:0;
      }
    }

    /* ===== Marquee-Regeln nach Wunsch =====
       - Playlist: nur aktiver Track
       - Video: immer (solange kein reduced-motion)
       - Nicht-aktive Tracks: KEIN Marquee, Text bleibt am Anfang (sp-static sichtbar)
    */
    .sp-track[data-active="true"] .sp-marquee__inner{
      animation: sp-marquee 12s linear infinite;
    }
    .sp-video .sp-marquee__inner{
      animation: sp-marquee 12s linear infinite;
    }