<!-- Sektion: Inställningar -->
    <section>
      <h2>Inställningar</h2>

      <h3>Ljud</h3>
      <div class="prop-grid">
        <label>Volym</label>
        <div class="row">
          <input id="setting-volume" type="range" min="0" max="100" step="1" style="flex:1"
                 oninput="document.getElementById('volume-val').textContent=this.value+'%'">
          <span id="volume-val" style="color:#aaa;min-width:3rem;text-align:right">—</span>
          <button onclick="setVolym()">Sätt</button>
        </div>

        <label>Ljudprofil</label>
        <select id="setting-audio"></select>
      </div>

      <h3>Display</h3>
      <div class="prop-grid">
        <label>Intern display</label>
        <label style="display:flex;align-items:center;gap:.5rem;font-size:.9rem">
          <input type="checkbox" id="setting-internal-display" checked onchange="setInternDisplay(this.checked)">
          Aktivera eDP-1 med admin-gränssnitt
        </label>

        <label>HDMI-utgång</label>
        <select id="setting-display">
          <option value="last">Sista anslutna (standard)</option>
          <option value="first">Första anslutna</option>
        </select>

        <label>Upplösning</label>
        <div style="display:flex;gap:.5rem;align-items:center">
          <select id="setting-display-mode" style="flex:1">
            <option value="">(Ingen / lämna tomt)</option>
          </select>
          <input id="setting-display-mode-custom" type="text" placeholder="Ex: 1920x1080" style="display:none;min-width:10rem">
        </div>
      </div>
      <div id="displays-info" style="font-size:.82rem;color:#555;margin:.2rem 0 .75rem"></div>

      <div class="row">
        <button onclick="sparaInstallningar()">Spara inställningar</button>
        <button class="secondary" onclick="applyDisplayNow()">Tillämpa upplösning nu</button>
        <span id="settings-status" style="color:#aaa;font-size:.85rem;align-self:center"></span>
      </div>

      <h3>Admin-konto</h3>
      <div class="prop-grid">
        <label>Nuvarande lösenord</label>
        <input type="password" id="cred-current" placeholder="Nuvarande lösenord" autocomplete="current-password">

        <label>Nytt användarnamn</label>
        <input type="text" id="cred-user" placeholder="Användarnamn" autocomplete="username">

        <label>Nytt lösenord</label>
        <input type="password" id="cred-pass" placeholder="Minst 4 tecken" autocomplete="new-password">
      </div>
      <div class="row" style="margin-top:.5rem">
        <button onclick="bytaLösenord()">Byt inloggning</button>
        <span id="cred-status" style="color:#aaa;font-size:.85rem;align-self:center"></span>
      </div>
    </section>