.search-bar{--search-bar-bg:var(--surface-card);--search-bar-border:var(--border-primary);--search-bar-focus-border:var(--border-active);--search-bar-radius:var(--radius-button);--search-bar-height:40px;--search-bar-padding-x:var(--space-4);--search-bar-gap:var(--space-3);--search-bar-icon-size:var(--text-md);--search-bar-font-size:var(--text-base);--search-bar-color:var(--text-primary);--search-bar-placeholder-color:var(--text-tertiary);align-items:center;gap:var(--search-bar-gap);background:var(--search-bar-bg);border:1px solid var(--search-bar-border);border-radius:var(--search-bar-radius);padding:0 var(--search-bar-padding-x);height:var(--search-bar-height);cursor:text;transition:border-color var(--duration-normal) var(--ease);display:flex}.search-bar:focus-within{border-color:var(--search-bar-focus-border)}.search-bar-icon{font-size:var(--search-bar-icon-size);flex-shrink:0}.search-bar-input{font-size:var(--search-bar-font-size);color:var(--search-bar-color);flex:1;min-width:0}.search-bar-input::placeholder{color:var(--search-bar-placeholder-color)}