Command Palette Overlay

---
---
<div class="cmd-overlay">
  <div class="cmd-box">
    <div class="cmd-input"><input type="text" placeholder="Search commands..." /></div>
    <div class="cmd-results">
        <div class="res"><span>Recent: Dashboard</span><kbd>↵</kbd></div>
        <div class="res"><span>Docs: Navigation</span><kbd>↵</kbd></div>
    </div>
  </div>
</div>
<style>
  .cmd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); display: flex; justify-content: center; padding-top: 15vh; z-index: 3000; }
  .cmd-box { width: 100%; max-width: 600px; background: #080b14; border: 1px solid #334155; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 100px rgba(0,0,0,0.8); }
  .cmd-input input { width: 100%; padding: 1.25rem; background: transparent; border: none; border-bottom: 1px solid #1e293b; color: #fff; outline: none; font-size: 1.1rem; }
  .res { display: flex; justify-content: space-between; padding: 0.75rem 1.25rem; color: #94a3b8; font-size: 0.9rem; cursor: pointer; }
  .res:hover { background: #1e293b; color: #fff; }
  kbd { background: #111; padding: 2px 4px; border-radius: 4px; font-size: 0.7rem; }
</style>