<!-- Sektion: Musik -->
    <section>
      <h2>Musik</h2>
      <p style="font-size:.85rem;color:#555;margin-bottom:.75rem">Spelar musik i bakgrunden oberoende av schemat. Fungerar med lokala MP3-filer (mapp) eller en YouTube-spellista. En "Spelar nu"-overlay kan visas på displayen.</p>

      <div class="prop-grid">
        <label>Källa</label>
        <select id="music-source-type" onchange="musicSourceTypeChanged()">
          <option value="local">Lokal mapp med MP3-filer</option>
          <option value="youtube">YouTube-spellista (ljud)</option>
        </select>

        <label id="music-local-label">Mapp</label>
        <div id="music-local-wrap" class="row">
          <input id="music-source-local" type="text" placeholder="/home/mrfox/musik" style="flex:1">
          <button type="button" class="secondary" onclick="openMusicFolderBrowser()">Bläddra</button>
        </div>

        <label id="music-yt-label" style="display:none">YouTube-URL</label>
        <div id="music-yt-wrap" style="display:none">
          <div style="display:flex;gap:.5rem;align-items:center">
            <input id="music-source-youtube" type="url" placeholder="https://www.youtube.com/playlist?list=..." style="flex:1">
            <button type="button" class="secondary" onclick="extractMusicPlaylist()" id="music-extract-btn">Extrahera</button>
          </div>
          <div id="music-extract-status" style="font-size:.75rem;color:#444;margin-top:.3rem">Ange en publik YouTube-spellista och klicka Extrahera för att hämta låtarna.</div>
        </div>

        <label>Volym</label>
        <div class="row">
          <input type="range" id="music-volume" min="0" max="100" step="5" value="50"
                 oninput="document.getElementById('music-volume-val').textContent=this.value+'%'">
          <span id="music-volume-val" style="color:#aaa;min-width:3rem">50%</span>
        </div>

        <label>Blanda</label>
        <label style="display:flex;align-items:center;gap:.5rem;font-size:.9rem">
          <input type="checkbox" id="music-shuffle">
          Spela i slumpmässig ordning
        </label>

        <label>Overlay</label>
        <label style="display:flex;align-items:center;gap:.5rem;font-size:.9rem">
          <input type="checkbox" id="music-show-overlay" checked>
          Visa "Spelar nu"-overlay på displayen
        </label>

        <label>Overlay-position</label>
        <select id="music-overlay-position">
          <option value="bottom-left">Nedre vänster</option>
          <option value="bottom-right">Nedre höger</option>
          <option value="top-left">Övre vänster</option>
          <option value="top-right">Övre höger</option>
        </select>
      </div>

      <!-- Spårlista (lokal) -->
      <div id="music-track-list-wrap" style="display:none; margin:.75rem 0;">
        <h3 style="margin-bottom:.4rem">Hittade spår</h3>
        <div id="music-track-list" style="font-size:.8rem;color:#888;max-height:160px;overflow-y:auto;background:#111;border-radius:6px;padding:.5rem .75rem;line-height:1.7;"></div>
      </div>

      <div class="row" style="margin-top:.75rem">
        <button onclick="setMusik(true)">Aktivera</button>
        <button class="secondary" onclick="setMusik(false)">Stäng av</button>
        <span id="music-status" style="color:#aaa;font-size:.85rem;align-self:center"></span>
      </div>
    </section>