<!-- Sektion: Wi-Fi -->
    <section>
      <h2>Wi-Fi</h2>

      <!-- Status -->
      <div id="wifi-status-box" class="prop-grid" style="margin-bottom:1rem">
        <label>Status</label>
        <div>
          <span id="wifi-status-dot" style="display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:#555;margin-right:.4rem;vertical-align:middle"></span>
          <span id="wifi-status-text" style="font-size:.9rem">Laddar...</span>
        </div>
        <label>IP</label>
        <span id="wifi-ip" style="font-size:.9rem;font-family:monospace">—</span>
        <label>Signal</label>
        <div style="display:flex;align-items:center;gap:.5rem">
          <div id="wifi-signal-bar" style="display:flex;align-items:flex-end;gap:2px;height:14px">
            <span style="width:4px;border-radius:1px;background:#333;height:4px"></span>
            <span style="width:4px;border-radius:1px;background:#333;height:7px"></span>
            <span style="width:4px;border-radius:1px;background:#333;height:11px"></span>
            <span style="width:4px;border-radius:1px;background:#333;height:14px"></span>
          </div>
          <span id="wifi-signal-val" style="color:#aaa;font-size:.8rem">—</span>
        </div>
      </div>

      <div class="row" style="margin-bottom:1rem">
        <button onclick="wifiScan()" id="wifi-scan-btn">Skanna nätverk</button>
        <button class="secondary" onclick="wifiDisconnect()">Koppla från</button>
        <span id="wifi-scan-status" style="color:#aaa;font-size:.85rem;align-self:center"></span>
      </div>

      <!-- Nätverkslista -->
      <div id="wifi-networks" style="display:none;margin-bottom:1.25rem">
        <h3>Tillgängliga nätverk</h3>
        <div id="wifi-network-list" style="margin-top:.5rem;display:flex;flex-direction:column;gap:.3rem"></div>
      </div>

      <!-- Sparade nätverk -->
      <div id="wifi-saved-wrap">
        <h3>Sparade nätverk</h3>
        <div id="wifi-saved-list" style="margin-top:.5rem;display:flex;flex-direction:column;gap:.3rem;font-size:.9rem"></div>
      </div>
    </section>

    <!-- Wi-Fi lösenordsmodal -->
    <div id="wifi-pw-modal" class="modal-overlay" style="display:none" onclick="wifiModalClick(event)">
      <div class="modal">
        <div class="modal-header">
          <strong id="wifi-pw-title">Anslut till nätverk</strong>
          <button class="secondary" onclick="closeWifiModal()">✕</button>
        </div>
        <div style="padding:1rem">
          <div class="prop-grid">
            <label>Lösenord</label>
            <input id="wifi-pw-input" type="password" placeholder="Lämna tomt om öppet nätverk" style="width:100%" onkeydown="if(event.key==='Enter')wifiDoConnect()">
          </div>
          <div class="row" style="margin-top:.75rem">
            <button onclick="wifiDoConnect()" id="wifi-connect-btn">Anslut</button>
            <span id="wifi-connect-status" style="color:#aaa;font-size:.85rem;align-self:center"></span>
          </div>
        </div>
      </div>
    </div>