<div class="cmd-palette" id="palette" hidden>
  <div class="cmd-backdrop" onclick="closePalette()"></div>
  <div class="cmd-box">
    <div class="cmd-input-wrap">
      <span>⌘</span>
      <input class="cmd-input" placeholder="Search or type a command..." />
    </div>
    <ul class="cmd-results">
      <li class="cmd-item">Home</li>
      <li class="cmd-item cmd-active">Settings</li>
      <li class="cmd-item">Documents</li>
    </ul>
  </div>
</div>

<style>
.cmd-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); }
.cmd-box {
  position: fixed; top: 20vh; left: 50%; transform: translateX(-50%);
  width: min(580px, 90vw); background: var(--surface);
  border: 1px solid var(--border); border-radius: 1rem;
  box-shadow: 0 16px 64px rgba(0,0,0,0.2); overflow: hidden;
}
.cmd-input-wrap { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-bottom: 1px solid var(--border); }
.cmd-input { flex: 1; border: none; background: none; font-size: 1rem; outline: none; }
.cmd-item { padding: 0.75rem 1rem; cursor: pointer; }
.cmd-item:hover, .cmd-active { background: var(--border); }
</style>