.search-bar{position:relative;width:100%;max-width:560px}.search-bar-input{width:100%;padding:var(--space-3) var(--space-4) var(--space-3) var(--space-10);background:var(--color-bg-secondary);border:1.5px solid transparent;border-radius:var(--radius-full);font-size:var(--font-size-base);color:var(--color-text-primary);transition:all var(--transition-fast)}.search-bar-input:hover{background:var(--color-bg-tertiary)}.search-bar-input:focus{background:var(--color-surface);border-color:var(--color-accent)}.search-bar-input::placeholder{color:var(--color-text-tertiary)}.search-bar-icon{left:var(--space-4);color:var(--color-text-tertiary);pointer-events:none}.search-bar-clear,.search-bar-icon{position:absolute;top:50%;transform:translateY(-50%)}.search-bar-clear{right:var(--space-3);width:24px;height:24px;border-radius:var(--radius-full);background:var(--color-bg-tertiary);display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;color:var(--color-text-secondary);transition:all var(--transition-fast)}.search-bar-clear:hover{background:var(--color-text-tertiary);color:var(--color-text-inverse)}