<div class="search-wrap">
  <div class="search-bar">
    <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
      <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
    </svg>
    <input class="search-input" type="search" placeholder="Search..." />
    <kbd class="search-kbd">⌘K</kbd>
  </div>
</div>

<style>
.search-bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 1rem; border: 1px solid var(--border);
  border-radius: 0.625rem; background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.search-icon { width: 1rem; height: 1rem; color: var(--muted); flex-shrink: 0; }
.search-input { flex: 1; border: none; background: none; outline: none; font-size: 0.9375rem; }
.search-kbd {
  font-family: monospace; font-size: 0.6875rem;
  padding: 0.2rem 0.4rem; border: 1px solid var(--border);
  border-radius: 0.25rem; color: var(--muted);
}
</style>